ES6, also known as ECMAScript 6 (which is officially called ECMAScript 2015 or ES2015), is an implementation of JavaScript that offers new features intended to make large-scale software development easier and make our code more readable.
Major web browsers support most features of ES6 like Chrome, Firefox, and Edge but not all support it yet. However, it is possible to use software known as a transpiler to convert ES6 code into ES5, which is better supported on most browsers.
Getting Started
We could either use Babel or a Webpack, but I would recommend starting with Babel. You can install Babel by:
npm install --save-dev babel-cli
var, let, and const
So here we have a new way of declaring variables by using let and const. A while ago, we only have var and we use var everywhere in our code. Var is function scoped.
function sample() {
var a = 5;
console.log(a); // a = 5
}
console.log(a); // a has no value
When we use var in a function it only resides there but when used in if's and for's there will be a 'leak' in data and can be used outside its supposed scope.
if (True) {
var x = 1;
console.log(x); // x = 1
}
console.log(x); // x = 1 see a leak even though it is outside of if, so use let or const
On the other hand, let and const are block scoped means anything which is a block, or anything enclosed in braces; could be a function, if's, for's, or anything that is a block.
Const is used when the variable declared doesn’t need rebinding, it doesn’t necessarily equate it into being immutable since we can still change a value of a key in an object, const just cannot be assigned again, use let instead.
Arrow Functions
This is also a new addition to JavaScript. A while ago we are used to naming functions:
function sample(params) {
return params + 2;
}
funcName(2); // 4
Now we have a new shorthand way we just have to write () =>. Looks weird, right?
const funcName = (params) => params + 2;
funcName(2); // 4
Just wait 'til it gets more complicated and so much weirder - we can chain arrow functions. But for now I think this is adequate.
It could be a limitation or benefit depending on usage when using arrow functions, like using the keyword this. We expect this to refer to the parent function or class but when using arrow functions it refers to the parent OF the said function, means that this refers to the parent this. It may also return undefined when the said function has no parent because arrow functions are anonymous functions.
So even though having arrow functions are awesome, we still have to decide when to use it.
Default value in function parameter
Back in the old JavaScript we have to initialize the variables inside the function when the passed parameter is null or undefined, now we just have to assign a default value in the parameter itself like this:
function add(a, b=1) {
return a + b;
}
add(1,2); // equals 3
add(2); // equals 2
Much easier, yes?
Template Literals
Ever wondered how we can make mix together a string and a variable?
Usually, we do it this way:
var name = 'Your name is ' + first + ' ' + last + '.';
var roadPoem = 'Then took the other, as just as fair,\n\t'
+ 'And having perhaps the better claim\n\t'
+ 'Because it was grassy and wanted wear,\n\t'
+ 'Though as for that the passing there\n\t'
+ 'Had worn them really about the same,\n\t';
Instead of concatenating strings and variables (which is very ugly, honestly), we can use this template literal, backticks (``).
var name = `Your name is ${first} ${last}.`;
var roadPoem = `Then took the other, as just as fair,
And having perhaps the better claim
Because it was grassy and wanted wear,
Though as for that the passing there
Had worn them really about the same,`;
Backticks (``) supports multi-line strings and instead of concatenating variables to a string, we can do this by placing the variable in ${} ! Handling strings has never been this pretty and easy! There are other uses for it though like how to handle html templates, but for now this is it.
Destructuring objects and arrays
This is sort of a confusing topic to discuss so bear with me. We were used to creating an object and referencing it by calling it, e.g. person.name or person.address but in destructuring we can.
This is an example of how values from arrays are assigned in ES5.
var arr = [ 1, 2, 3, 4 ];
var first = arr[0];
var second = arr[1];
// etc …
And this is when an array has been destructured:
var [ first, second ] = [ 1, 2, 3, 4 ];
// first: 1
// second: 2
var [ first, , third, fourth ] = [ 1, 2, 3, 4 ];
// first: 1
// third: 3
// fourth: 4
Looks confusing? But that's how it works, we can just call the key and use it in our code without having to repeatedly referencing the object itself. Also, we could destructure arrays but instead of using braces we use brackets.
The for…of loop
The for...of loop is like for in but instead of returning their index, it returns the elements one by one.
let arr = [2, 3, 4, 1];
for ( let value of arr ) {
console.log(value);
}
// Output:
// 2
// 3
// 4
// 1
Spread operator/ rest parameter
They are used differently, but since they use the same operator, I'll discuss them as a whole. Before we create a function that accepts an array like this:
let SumElements = (arr) => {
console.log(arr); // [10, 20, 40, 60, 90]
let sum = 0;
for (let element of arr) {
sum += element;
}
console.log(sum); // 220.
}
SumElements([10, 20, 40, 60, 90]);
The rest operator is denoted by 3 dots (…) before the parameter, or sometimes the array name. What it does is it converts a list of elements to an array, and vice-versa (array to a list of elements).
let SumElements = (...arr) => {
console.log(arr); // [10, 20, 40, 60, 90]
let sum = 0;
for (let element of arr) {
sum += element;
}
console.log(sum); // 220.
}
SumElements(10, 20, 40, 60, 90); // Note we are not passing array here. Instead we are passing the elements as arguments.
When put in a function parameter it enables the function take an infinite number of arguments, much like *args does in Python. This is an example which a list of elements are converted into an array, in vice versa, for example:
Math.max(10, 20, 60, 100, 50, 200); // returns 200.
let arr = [10, 20, 60];
Math.max(arr); // Shows error. Doesn't accept an array.
But when we use the rest operator,
let arr = [10, 20, 60];
Math.max(...arr); // 60
Basically, spread/rest parameter means that it represents the rest of the list of elements.
Check out the second part of this tutorial here.
Primary photo from CodeBurst
