6.1 Coffeescript

After going through some of the abstraction languages, such as for styling or even HTML. The final video that we will go through is an abstraction language for JavaScript. Now if you already know JavaScript, picking up the syntax for CoffeeScript will be really easy. Also, because it is readable and cleaner, some developers find it enjoyable to code in CoffeeScript. Now, as we go through the features, I hope it will give you some overview about what CoffeeScript has to offer. And of course, I will leave it to your preference and the project as well on whether you should be using CoffeeScript. Now with reference on whether you should be learning CoffeeScript or coding JavaScript in plain vanilla JavaScript, there's this awesome article and I found a panel of developers who gave their opinions on whether they should or should not be picking up CoffeeScript really awesome. It included the Coffeescript creator, some of the creator of JavaScript, and also a lot of frameworks that we used today. So do go ahead and give this article a read, so that you know both sides. And of course, though this video hopefully, you can discover many of the features and decide for yourself. So let's get started with CoffeeScript and we will start by installing it as an npm module. So here I am in my Desktop and as usual I will install it in a global fashion. So, I will do coffee-script. Once you have installed it you can basically go ahead and query the version. And yep, I am using the current version as of today. So let's go to my Desktop, which is completely empty as of now and here I will create a file. Sends it off script.js, which denotes a JavaScript file. I will simply create a script.coffee. Oh, notice that it will immediately create a script.js file and it will say, generated by CoffeeScript. Obviously, I haven't done anything in my command line yet, but let's go ahead and compile CoffeeScript to JavaScript. And let's watch it continuously, so that we don't have to come back and keep pressing compile. And this is probably something very similar that we have done to the other abstraction languages. So, in order to go through briefly, the commands for coffee, I'll just press coffee -h and we'll be using two of the options. One of them is -c or --compile and then the other one is -w or --watch. Why don't we give it a try? So, all we will is do is coffee and then -cw for compile and watch and then I'll just pass in script.coffee. Now once this is happening, it will continuously watch, just like the previous videos and I can just come back to the CoffeeScript and start coding. The very first thing we will do is a comment. So this is very familiar to Ruby developers. Next, let's go through some variables. So in CoffeeScript instead of saying, the var keyword, you can simply say, num equals 2 and then you're going to declare the variable right at the top and then it will initialize it. Similarly, let's go through a string. So, I was simply say, a equals to apple. And similarly to do the declaration and then the initialization. Notice here how very much like Python or Ruby, there are no semicolons and a lot of whitespaces and indentations. Speaking of whitespaces, let's go ahead and explore this in terms of initiating an object. So let's say, I have an object called person. And instead of starting with curly braces, I can just use enter and notice how it's indented by one stop. And here, I can do a fullName. And let's say, I want to expand it even further, I will do firstName. And then maybe I'll say, it's John and then a last name I'll say, it's Doe. And nested within person, there'll be fullName, as well as occupation. And let's just say, he's a web developer. And once you save it, notice here an object is created for us. And because we were going by the spaces, CoffeeScript knows exactly where it is nested. Let's go through arrays. So I have a simple array here, which is one, two, three. All right. That's pretty simple. Now the cool thing about array in CoffeeScript is you can do it in multi-line. So let's say, I have broken up the square brackets and over here, I can do one, two, three, four, five. So, it will be initialized with 1, 2, but notice here in copy screen, I'm actually not putting the comma. So this comes in really handy when I copy and paste the data from my other sources. I don't have to come ahead and add this comma and put it in one line. Great. Another shorthanders that I like also reminds me of the Ruby programming language is the dot syntax. So, if I do 1..12 and let's go ahead and compile it. And there you go, it will neatly add on one to twelve. Similarly, you can also do a countdown. So let's say, I have days and that will do a countdown from say, 30 to 27. And there you go, it will neatly do a countdown. So that was a little bit about variables, let's go on to functions. So let's say, I have a function, which is doublePlusOne. In order to execute function, we will start very much like the variable with an equal sign. But after this, we will put a dash and then a lesser than sign. Now notice what happens when I just compile this. Yep, it will be an empty function. Why don't we go ahead and add some things? So let's say, inside here I have a num, which is times 2 and and then plus 1. And there you go. It will immediately know that hey, it will return num times 2 plus 1. Now obviously, where is this num coming from? It has to be passed on as a parameter of the function. So in order to add on an argument, so we can just add in inside brackets after the equals sign and I'll pass in num. So notice here now num is the function parameter. Now what if you want to call this function? So once again, I will do doublePlusOne. And you can, similar to JavaScript, let's say, you can pass in four. And yep, doublePlusOne will pass in a number four. But once again, this really reminds me of Ruby. I can even put a space and pass in four. Notice here, it will be compiled exactly the same. Now another cool thing about CoffeeScript is that you can interpolate the values. So let's say, I go ahead and return this. By the way, this will look exactly the same. Over here, let me just say, answer equals to num and it will return answer. And let's say, over here, I pass in instead of just the answer, I pass in a string, which says the answer is. And then in this case is num times 2 plus 1. Now obviously as you see, this num plus times 2 plus 1 will be a string. But if you want to interpolate these values, you can do a hash sign and then inside curly braces. Notice what happens? It will be nicely concatenated for us. In this case, of course, we can go ahead and pass in just the answer. And there you go, it will neatly pass in the answer. Let's explore some conditionals. So let's say, I have sunny weather, which is true. And I also have rainy weather, which is false as of now. So let's say, I have a function called showRainbow. As usual, the functions will simply be equal to and then dash less than sign. I need to return look there's a rainbow. So in CoffeeScript, you can pass in words as conditionals. So let's see how to make that happen. So, if you say, sunny and rain. Yes, that and is actually a condition and you can simply say, showRainbow. Awesome. And now when you compile it, you see that [UNKNOWN], which is how we would say and in JavaScript will be evoked. Of course, let me go in say that this is a function. Next, let's extend it to include more operators. So let's just say, we have snowy equals to true and then sunny equals to true. Now let's say, you have sunny is true or snowy is true and then you simply say it's sunny or snowy. Now notice how readable this cord is and once you compile it, yep, it will give us in the JavaScript version complete with curly braces and the triple equal operator. So do go ahead and check out more operators and aliases. And in CoffeeScript, this become definitely much more readable. Next, lets go on to something called classes. So let's say, I have a class called Food and I can initiate this class with a constructor function. Let's just pass in name to it. Let' see how it compiles. You can also have its own function. So let's just say, shoutout and maybe you just say, Lovely food. And once you compile it, notice that how it is added to the prototype. Next, you can even extend a class and you can do so with class. Let say, another class called Vegetables and it will basically extends the class called Food or rather it will inherit from Food. And similarly, you can go ahead and overwrite the parent function. In this case, shoutout and then maybe you can see Lovely vegetables. And yep, CoffeeScript will, once again, compile it in plain JavaScript. [UNKNOWN] let's explore something called destructuring or pattern matching, which makes it very easy with CoffeeScript. So let's say, start is Earth and destination is Moon. Now let's say, the spacecraft is returning from the Moon to the Earth and usually we have to use some sort of temporary variable to do that sort of exchange. But with destructuring or pattern matching, we can simply do start and then a destination equals to a destination, start. And once we go ahead and compile it and there you go. It will internally, basically do temp variable and it will exchange it for us. Why don't we go ahead and see this in the browser. So in order to see this in the browser, we'll create a new file and call it index.html. With a very simple structured HTML, I'll just add in the script file. And the source will be simply scrip.js, which is being compiled right here. Now, once we fire up index.html, why don't we try to console a log to start and the destination values. So, as we notice before, if we do console.log and we can pass in a string. So let's say, start and with interpolation, we can basically pass in the start variable and I'll do exactly the same with destination. All right. So, it looks like we are all ready to file this up in the browser. And once we open our def console and there you go. The start will be Moon and the destination will be Earth, which means that variables have been exchanged. Now finally, I'll just go back to the previous code of doublePlusOne. Let me just correct to my indentation. And this time, let me go back to the command line and quit the watcher for CoffeeScript. Now notice here, when I got back to the sources panel, I can only see the index.html as script.js. Well, you can't see the CoffeeScript file here. Now, using source maps, we can make that happen. Now let's go back to the command line and this time along with -c, which is compile and -w, which was watch. We will pass in a -m, which means to say, it will create a source map. So let's create a source map this time. And when we come back to our text editor, notice that firstly, it will add the source map comments right at the bottom of JavaScript file. And it will also create this script.map, which will basically contain the end coding, which will lead us back to the original script.coffee file. And now I'm going to come back to the browser and I refresh it, the CoffeeScript file will be here. Great. So that was a preview about what it is, all about CoffeeScript. It basically, adds in very readable syntax for us to code plainly, literally in JavaScript. And sometimes, developers have even said that their code compiles to be a lot smaller than if they had coded in plain JavaScript. Once again, do go ahead and check out this article. Read both points of view from many of the talented JavaScript developers themselves.