JavaScript is a language of Web. This series of articles will talk about my observations learned during my decade of software development experience with JavaScript.
Before moving further let us look at the previous articles of the series:
In the last article we learned about ECMAScript 6 and now we will understand some features which developers can use to write good code.
- Let keyword
We know that var is used to declare variables in JavaScript. JavaScript supports hosting which creates a function level scope than block level scope like in most programming languages. Example- self invoking function print value of “i” outside “for” loop also.
![code]()
Therefore, scope of ‘i’ is not limited to {} within ‘for’ but it is bind to the function.
LET keyword allows developers to declare local variables within the scope of a block. We’ll tweak the above example and notice the difference.
![code]()
- Arrow functions
I think arrow functions are syntactic sugar for developers. These are less verbose, and has a shorter syntax as compared to function expressions. Example
![Example]()
Square is an arrow function, accepts a single argument and return value implicitly. To me it also resembles functional programming aspect where style of programming is imperative than declarative.
If I transform the above code in ES5, it will transform into below code but with same output.
![code]()
- For..of statement
It iterates over arrays or other iterable objects. The code gets executed for each element inside the object. Look at comparison of code below:
| ES5 | ES6 |
let arr = [1, 2, 3, 4, 5];
let sum = 0;
for (var i= 0;i< arr.length; i++) {
sum += arr[i];
}
console.log(sum); //sum will be 15 | let arr = [1, 2, 3, 4, 5];
let sum = 0;
for (let i of arr){
sum += i;
}
console.log(sum); //sum will be 15
|
We could notice difference in ‘for..of’ implementation in constrast with the loop we’re using for past many years. In ES5 we have another loop available which is forEach. The disadvantage of forEach is you cannot use break statement.
![code]()
- Templates
It is an alternative for string concatenation. It creates templates to embed values. In C#, C programming language there is such functionality available:
Example in C#:
Console.WriteLine ("{0}, {1}", "Hello", "World"); //Hello World
Console.WriteLine (string.Format("{0}, {1}", "Hello", "World"));
Similarly, in ES6 we have templates available for substitution of value
let person = { title: 'Ms', fname: 'John', lname: 'Doe'};
let template = `${person.title} ${person.fname} ${person.lname}!`;
console.log(template); // Ms John Doe!
- Const Keyword
We can create immutable variables, by using const keyword. This is common in other programming languages but ES6 adopted now. Variable created by const is readonly so after declaration and assignment it is read-only.
![code]()
Summary
Next article will talk about another set of features in ES6.