 How many of you guys have learned of Scala? Yay! You know what Scala is, it's not a car. You just discover it's a car, it's also known as a Scala. So Scala's program is called Scala Scala. And this one comes with the question of saying that someone who's not one of those kind of people who love speaking with Scala Scala because of the radio program, how do you actually use the language in a way that works? Because for someone who is really good at JavaScript, you tend to know your way around. You know what to do, what not to do. And you tend to treat it a second later. What is Scala Scala? How do you do this as someone who's not actually been JavaScript full-time but who's new to the language and has little learning? Learning to figure out where the pitfalls are. Exactly, what works for this world. So he's going to talk about how to write good JavaScript. So I'm going to ask a question that... Is it too loud? So I'm going to go ahead and ask a question that... Can you just tell me how many of you guys have used JavaScript to pop? A little more overspoken, it's kind of hard to see. Can you guys just out yes? I guess you guys can use JavaScript to pop? Yes. A little louder, I can't hear you guys. Yes! So what... I just have a quick check now. Technology. I have no idea how easy it works. The other thing is I tend to speak fast at times. When I speak at times, it's fast. If you don't understand anything I'm saying, just let me know. Because that happens when I'm going to. So if you don't understand, it's my fault. So I'm just going to change from what JS said. So even if you know how to program JavaScript and you're good at it, you should be doing these things, you should be using these tools. I'm just going to introduce you to two tools which I think are in my opinion critical while developing JavaScript. One is any sort of unit testing tool. I'm going to talk about Jasmine a bit. And the other is something that... Suril Bhai had sort of pointed to us. There's this guy called Douglas Crawford who used to work in Yahoo who sort of took JavaScript and it's Watson said, okay let's just simplify this thing a bit. Simplify this a bit and make it easier to use and make it more reliable. And he wrote this book called JavaScript, The Good Parts. But he also built a tool that you can use so you don't have to read that book. It's called JSLint and I'm actually going to also talk about that a bit. So I'll just go ahead and start off by using Jasmine here. So Jasmine is basically a unit testing tool. How many of you guys have actually done unit tests? Not many. You can consider doing a writing test for your code because it tends to provide a couple of very important antigens. While it lets you make sure that you end up writing tests anyway when you're writing a code, you make sure you put it into some kind of place when it stays for a long time. So it acts as documentation to a certain extent and also when you go tomorrow and decide to modify your code, it makes it a lot easier. There's also this third slightly more insidious advantage of tests in that it forces you to think about your code in advance rather than wait till the last moment. Normally you just keep typing and then hope like hell it works. But because you write tests, it sort of provides a good safety system for making you think about what you're going to do. Jasmine is going to give you an example of a very simple test here. So I want to write a function multiply and all it does is basically multiplies the numbers. And I hope so for a second. Minimize this a bit. Let's see if this covers it more clearly. Is it the green full screen one? No, it's not. No, it's not. Sorry, this is better. So this is a number of data. Obviously the test has failed and it's kind of obvious why it's failed. But the nice thing is now that I've recorded this here, normally what I'd end up doing is write the function, test it, then realize it, broke it and then test it again. And now I can write the test once and all I have to do is basically go ahead and modify this function here. I'll let you through the, obviously not minus but, multiply. And it can test this for me. So it's possible that there's some bug in my code which I thought I'd fix and make it happen to it. But it's not that. So basically the other part of the desktop we noted is it actually has a very readable test message. So I can say a multiply function should return 10 when given 5 and 2. And that makes it a lot easier. Okay, this case is a bit silly, but let's see if I write a really complex class or something like that. It makes it a lot easier to actually read what your code is doing. And like I told you about the whole documentation aspect, it also lets you know in your documentation exactly what your function is supposed to do, because you can actually write this down here. I mean, your test generated, not your program documentation which should be separate and you should be doing that too. So I'll just go for a slightly more complex test here. So this is something, I'm actually regretting because it's something that is in some code that I wrote. And I realized it's a bit silly because of what it does because it's kind of bit messed up. But I won't get into that. The point is that if you want to do a maximum of an RA in JavaScript, you have to have, you can't have an empty RA. But there's a lot of time that you want to test, let's say an empty RA. You want to test against an empty RA. So you want to give it some sort of optional value that it falls back to. So I wrote a functional RA, again this code basically with zero then it should fail. It should actually reduce the minimum value otherwise try and calculate the max using the rest of the values. Okay? So I don't know, quickly go through how you write test case easier. Basically I just first decided to describe what my test is about and it's about this method called array max. And then again I decided what it does. The good thing again, like I mentioned earlier, is this whole auto-documentation is from me in the form of the test. So I can go back and see how the function is going to behave. In the form that now I know that it should return the last number when given an array. It should return a default value. Let's say for some reason I messed this up. This line I'm not going to comment too much, but I will return zero here for fun. Now it's basically got two failures. It's saying that yeah, two failures have happened. And let me know that basically it should return a value, a default value if the length is zero. In this case which I said to actually, suppose we minus infinity. So this test is basically failing. Sorry, it was a default value. I provided a default value. I provided 10 and it turns zero instead. And it returned minus infinity when I provided zero. But now the issue is obviously the problem with test case and I won't mention this. In the test case you don't catch all your issues. There are only catch things that have been defined in your test. And this is particularly true when you talk about let's say even simple algorithms like this one here. But in most places it actually still makes sense in writing tests because what you can do is when you see a new bug in your system you can actually go and add it as another test into your test case. The second thing I wanted to sort of just glance on is the whole notion that this, the test also acts as kind of a specification for your class. So if you are sort of slightly more TTT driven then you can also think you are okay, what is my class? I can write that down and then sort of decide my test based on that and then go ahead and implement my tests. It's not a very bad model for certain types of tasks. I don't recommend it for everything but it still helps. So I'm just going to move on to a third aspect of tests. So one other thing that you end up doing a lot in JavaScript is using callbacks quite heavily. And this is sort of a place where you really need to send an object into another object. And then what happens, you don't want to send let's say a real object which is a business object into that system because it's going to be very hard to set up things and all that. So what you can do is you can paint function calls by using mocks and what this like I use is called spies and you can just go ahead and implement these things. So what this basically does is I have a function that they say command object. So what a command object is basically I want to have a particular piece of behavior and then be able to pass it to somebody else. Another object in the system and I want a general interface for this. So no matter where it was passed it just caused that method and the behavior is pretty much consistent. This standard it seems a little overkill for this because it actually removed a lot of other methods from this but you can just pass a function only but I'm just going to use that in this case. So now what I'm doing is basically I can go ahead and define a new command object. It has a name which I'm not using and I'm passing a callback. The callback is basically this operation called a spike and I can just go ahead and execute this command. The callback is executed here and the libraries are using actually records of this information and I can actually go ahead and check what's this thing called and it then goes ahead and passes the test for me and this is kind of using these kind of work because they are very hard to track the behavior but a lot of time you have to do it and it makes things a lot easier. Okay so this is basically literature testing. I'm going to ask if anybody has any questions here or have made any sense at all Essentially creating spies on the way to mocking testing. Not really. I mean it's JavaScript so I mean it's not going to be asynchronous at least for testing because it's going to be inconvenient. It's the only way of let's say the use case is that I have an object and I have another object that I'm passing to it or a function. Now I'm calling this function inside my code but this function is actually something that is coming from outside from another environment so I have no control over the behavior of this so how do I test this? I need to pass something in to test it. So what I do is I pass a fake semi-fake object which when called basically records that it was called it also records if any parameters are passed to it so I can then go and check whether it was called what parameters are passed to it and then I can know that the behavior was what I expected. So any other questions before I move on? This is a very very quiet audience We have some debugger kind of thing for this so that we can put the breakpoints or something So debugger works anyway I mean JavaScript supports debugger anyway so you can So by the way this is a fake environment This is an ideal environment together so you can use this without using whatever I run here So normally what you end up doing is I know if you are working in Azure Mansion Lawyer, thanks If you are using this in production you are either running using your build tools so you can have once you type your code you can have a script that runs this thing for you if you are putting it directly on the online or you can have it generated on your page of your tests or you want to display these things I will just plug this in here so it is easy for me to sort of show you more things at all Normally I would not work like this I would use an IDE or an editor to do this stuff and then run it Can you please elaborate on that IDE so that actually whatever thing is going on you can know by putting the breakpoint some sort of breakpoint procedure Okay so there are two locations You ask about breakpoints, there are two ways The easiest way is basically just like visual institute provides breaks So I am just going to show you Is a debugger breakpoint So actually JavaScript provides something, a command called debugger and you should consider using that if you want to instead of breakpoint without actually going to the other editor I will have to start up the developer tool which was shown to you earlier So this is the debugger tool that I thought about So what I can do is I can insert a command called debugger in the browser Something JavaScript provides I hope it is called debugger Breakpoint Okay, so what's happening So this is a good thing, you can actually just go ahead and jump into the code directly by just putting the command The other option is I just want to show you this because I use this more often than actually doing the other way So now I can basically see what are variables are there in this function for example I can hover over and it shows me exactly what it does So what is the other option The other option which starts around you is let's go to a debugger There is a bug in my code So I can remove this guy and instead of doing that I will go to the source I can go to So I can I have this open now and I can actually I won't look at this one because that's kind of pushing it So I can go ahead and maybe put a breakpoint into my code directly for example I can put one but then my app stops around here Let's put it here Okay that's interesting because that's where the first declaration happens So what I can do is I can actually go back to the page do a refresh and I can do that So the nice thing about developer tools for the web right now is they are pretty incredible So you can do pretty much everything that you want to do with your IDs in the browser Though actually if you pick up a decent java ID you can get the debugger support inside the ID itself so if you are more comfortable then you can edit your code and debug in the same space but if you want to just debug in the browser you can do that too both options are available So I will get back to any other questions if I move on So I know this might sound silly and very trivial but I would seriously take up an investing time and exploring unit tests and using them while developing I am not kidding about this it really includes your code quality considerably So I can move on to the next one which is So one of the big issues if you have worked in javascript in any sort of easily resized project or even if you have just done a bit of dabbling in the javascript tends to have a lot of these gotchas in the sense that you can do certain things you expect to behave in a certain way it doesn't and like I mentioned earlier this guy got a lot of stuff but I actually went down and said let me simplify what bits of javascript or at least help people realize what bits of javascript are safe to use and what bits of javascript are not So he built this tool called JSA and while he built this tool he also added some other aspects that I have kind of found out which is he sort of added information like for example add your coding standards so it also checks your coding standards the whole bunch of stuff to make sure that your code is both reliable and clean and easy to read for the people so it's worth investing in and you don't really understand why a lot of these things work it's enough to actually use the tool and it solves a lot of problems it adds incredible amount of reliability to your code just by using this tool so if you look here I have written a small function a small bit of code which basically has a global variable with this bit of code here when I'm not using the VAR statement do you guys like code like this or do you always make sure you use VAR or do you understand this what do you understand? more importantly this maybe leaks out of the tool so I don't understand because I need to understand where I'm going with this do you understand what the issue with this piece of code is I have this one bit here I haven't declared it now I have a problem after this okay so I'm doing this so what would this what would this function do this piece of code here what would the result be 1,4 okay I'm going to change this so in principle now I'm going to make this change here alright what would this print now so you guys come over to this it's important to put this in so the reason is if you put a VAR in front of your variable declaration a variable call it says that this variable is only visible within this function scope and it's not visible outside it's not only visible in this function scope it's actually visible throughout the entire JavaScript application it's not a very good thing to do but actually I bind this to the document window but that's the better part it's not a very clean way of doing things so you generally want to make sure that your functions are restricted and not spread out because what happens is let's say somebody writes a function which has this global variable in there called A now tomorrow somebody else writes another function which is also the variable call A and they both have the same name one side it's got a security message suppose you print it the other side A prints this message saying hello how are you doing it's going to create a lot of confusion so because that tends to make sense not to use global variables and the nice thing about JS line I'll just show you this document it actually passes about a lot of this stuff so JS did actually insist that I put this use strict on top use strict is another thing that actually makes sense because including reading, I mean global variables without actually declaring it first it definitely makes a lot of sense so I'm just going to go ahead and start demonstrating so now it's a little bit of formatting issues it's not expected to put a space somewhere not sure where oh here and okay so here is something I've done because it expects you can control the thing but I have different spaces instead of tabs and here it's sort of passing that this A was used before to define so it sort of tells you you can't do this and if you're in strict mode the browser will also complain about it so I'm just going to put bar A here and the pressure so now obviously a couple things are going to happen bar A is only going to be visible in this particular scope this bar more longer conflicts with this one so that's kind of nice again so slightly more an example of variables here so first of all here I've declared a variable called A I've got a variable called A of size of 4 and then I'm just going to basically in the beginning I tried to print the value of A and then I assigned it to 6 I said 4 I assigned it to 6 I assigned it to 7 so this is kind of trivial but here since it starts complaining about a lot of stuff obviously the first thing it says is then it sort of complains about this particular case A was used before to define so I need to basically move this here it also passes about one more thing actually now I need to move this to bar A it also passes about bar A being defined twice so then you can only have one it sort of insists that you only have one bar definition in your function there's good reason for this and I'll actually demonstrate one of them right now you might ask why can't I have declare a bar where I'm going to use the variable that's probably the most sensible thing but it sort of insists that you sort of declare the variable once on top so I'm just going to replace this thing a couple of things what do you think law of that message A will print 10 you guys are better than me I asked it because we noticed there's A is equal to 4 in declared and it says a function without any bar before all the others so what's happening here this is confused with me so if I declare a bar inside the variable anywhere in the scope it sort of decides that any declaration of the value A even if it appears before the bar is going to be treated as a variable in that context so now if I move these lines because I want to know the bar statements okay it's sort of principle because it's now using the A to declare here and not the A here so this is not exactly you can write a specific community piece of code it's obvious which context using the A now and that can really lead to a lot of confusion so it actually makes sense to move a declaration up here when it actually is most visible I'll not have them all over the place like I was doing earlier okay now we know that this bar was basically declared here let's go one more example okay so this is something that's a few times but it happens often enough and I think it's a good example so now this guy is kind of fast it's called push okay so again it's kind of fast okay so now why can't I put functions at a loop I want to do it why is it stopping from doing this so now the question is what does this mean I'm from 1 to 10 I'm creating a bunch of functions which are basically bound to I and I'm adding it to the list so watch this and then I'm calling the function one after the other so watch this it's printing it's calling this function okay it's interesting let's check okay so this is why you want to do this and this is why jswin said please do not put functions inside so what's happening here this is a variable that's always going to be bound here it'll be declared here now what's going to happen is this guy will be bound to this variable I every function that's going to be bound to the variable I okay but I have been incremented over that time so by the end of this thing all these functions are still pointing to the same variable I but they're not being incremented they're pointing to the I so when you actually create it it becomes 10 so the sensible thing to do would be to take this function I'm going to create what they call a generator I guess I know all the technical numbers function okay idgen id it will return the original function because we renamed it to id and it says and it will call it here and it will do idgen so I don't know what I'm doing I don't know what I'm doing so okay missing a fraction okay so what's going to happen here I'm going to explain to you this idgen is basically going to create a return a new function but how I will be aware of closures which were mentioned earlier this function is going to get returned we'll always remember what our variable was set here so now when we call this thing idgen of the IE it will basically start generating each function has its own copy of the IE because this variable not IE which was no problem so now only when we call this thing it will work fine okay so this is again now this guy is asking about other problems which are brackets and stuff here there's one more space okay so there actually can actually get some serious issues in the code and what I showed you right now is not something that is put out from the backside this is something that I have faced in the past and after using jsnit according to mine actually and he said I'm going to ignore jsnit and after now later it's just that this code is not working and I say why don't you just listen to jsnit it will save you a lot of time so it is actually quite productive and makes a lot of sense okay so I'm just going to talk about one more thing this is my favorite part so this is the part I mentioned function programming earlier why you should do it and why it's beneficial why it makes your code a lot easier to read and a lot easier to code there's this it can be quite likely available online on discord.js and I recommend having a look at that I'm going to be using that in my next example getting functional so here's a simple problem okay ignore this one I'm just going to give you the talk okay so I've just basically pushed it I can show you some short story account and I've decided what to count the words in there and I want to basically sum up so what I did was I've written a small function this is not important if you know what I did this just takes all letter characters extracts them out and then create an array of these things so this is kind of not important but this is the slightly more interesting thing I will actually shift off the model so what's interesting is it basically takes a array of a list of words and takes a string and then extracts all the words from it and creates a list of them so this is kind of trivial, it's not too hard so the problem is how do I now go ahead and count these words and then go ahead and hash them one by one what underscore provides this really cool function called groupby so what groupby does is it takes a list and then it takes a function as a parameter what it does is each element of the list it will pass this function and then this function will return a particular value which will act as a key in an object, hash map which and then every element in this original list will be added in the same key may be added as a list element into this particular list for example, let's do a simple case I'm just going to quickly show you what called so above all of this I'm just going to quote I have a list I'm going to create a list of the even numbers and the odd numbers so how do I do that is I'm just going to say underscore dot groupby l and a function is basically going to be n mod okay let's see what's going to happen let's get a bit of this because an object I'm going to add this object I'm going to make this a little more interesting it's going to be a list here okay so let's see basically this function basically returns n mod 2 so all it did was n mod 2 so it created one key to the value 0 another key to the value 1 and basically it took all the numbers that n mod 2 was 2, 0 and put them here and all the values of n mod 2 or 1 put them here kind of trivial here but what I've done is I take the words for each of these elements if the word is the same then just add it to the list it's a bit inefficient but it's easier to write but all the passwords are not very important okay so that's what the group I know so now I have a list a list of words and then a list of the same words after that okay so now how to count it all I need to do is now find the list of each of the lists and then we will overcome so for that I need to first of all get the keys of the array so underscore provide my function that given an object will give me the keys of that object and then I use this operator called map which I will talk about and what map does is basically takes a list of any elements so basically I have a bunch of keys now so then W is each of those keys and then I just basically return the count which since this object had a list of that word in there the count of that is the length the length of that list is going to be the number of words of that type and then the name of the word so I can know what word it was now obviously I need to sort it so again I use underscore provide me a method that I can sort by a particular particular particular field so in my case I want to sort by a count another problem is a sort where I am going to sort in ascending order and I want to get the largest number so I want to sort in descending order so I just multiply by minus one and that becomes me the sorted count in reverse order obviously slice I guess you all have used slice getting the top 10 elements and then this absolute filter using another method called forEach which lets me say I create forEach and map I want to talk about so what map does it actually returns a new list with the values forEach does not return anything it's like a following which is an easier way of writing a following and if you are in if your program javascript do not use the for forEach because it messes up things so you should be using one of these things or any API that provides this because the other stuff looks into places in which it does not need to look into and costs a lot of money ok so now what happens is we have the any uninteresting list of results ok it's unfortunately gets bring twice I'm not sure what I think I have so yeah this is how this works and unfortunately the most problem was that the least interesting as always unfortunately so I just want to go one more example and then we can end up here so this is in my opinion the utility of interesting functions start off with the program functions so map which you saw earlier what it does it takes a list and a function and then runs that function to each element of the list now this might seem trivial and my example here is also kind of trivial but the use cases can become a lot if you have a list of addresses and you want these you want for example you want to get the list of street now street names for whatever reason you can then go ahead and filter you can basically go and tell map give me address dot street name as a list I'm not interested in other details so it's easier anyways in terms of thinking because you don't have to think in terms of flow how many of you guys have come to the shell here so if you program shell it's a lot of pipings you take the data it's also a particular command you pass it another command and this is kind of similar to that the command which is in this case a function telling the process each element of that thing and then return the value of it it's a lot easier to think about than actually worrying about variables and stuff like that so it tends to make a code a lot more reliable I mean it's surprising but it does filter as the is another function which is kind of similar to map but filter basically takes a function that returns to a cause and it only if you get a list of this function it will only return the value that the function returns to and what are the value thing now so in this simple case what I'm doing is I'm just getting out the even number by saying return only value where x mod 2 is equal to 0 so only the even value is gone and reduce is a bit more tricky so what reduce does and this one takes a function which takes two parameters and basically applies plus this on everything here so what it will do is say 1 plus 2 return value which will be 3 it will then take the next parameter and apply it to that so that will become 1 plus 2 plus 3 4 so it keeps combining these values up till you get a final result and which is obviously some of the values now again here this is kind of in this case you basically have a list and you want you want to basically do an operation across the value is a list and you want to pass this thing across so it turns out to be quite useful for that sort of stuff ok so that's about it any questions any questions at all does it make sense because you guys are incredibly quiet does this make sense as we know and I can try and explain what do you recommend people go and read and look up to find out more about functional programming in JavaScript so unfortunately there isn't much like now I suggest you do is actually pick up underscore.js and just start playing with it there is really not much need to spend too much time the one that is still functional programming you have this huge group of people who are functional programming experts who tend to conflate functional programming with mathematics and that gets very boring so I suggest not spending too much time trying to explore functional programming as a topic because then you get sidetracked with these guys but just pick up underscore.js and have a look at what various people are doing with JavaScript libraries which are used quite heavily nowadays and see what's happening that's probably the better way to go why do you think MAP is there like compromise with the performance because for each element it is solving that function so there is already a compromise but you are only JavaScript so there are far bigger compromises in making so MAP is not going to be a constant one so I suggest this is a rule app all over and if you are if you are programming you have to realize that the performance costs are not very big there so things like MAP are not going to cost you I mean it's more important rather than just to come with a sensible algorithm than to actually worry about the implementation of your differences, constructs and so on also this is now part of JavaScript so it's going to get faster that's definitely what's going to happen so hey, I would say this is not worrying any other questions? make up complete okay that's it thank you thank you thank you