ES6 denotes the version or standard of javascript.
Before ES6, there was versions of javascript from ES1 through ES5.
ES6 is sometimes referred to as ES2015 since ES6 first came out in 2015.
The advantage of using ES6 is for it's simplicity and powerfull new features, which we discuss below.
One drawback is that ES6 is not yet fully supported in all modern web browsers. However,
ES6 javascript can be converted into ES5 code by using a transpiler such as
Babel .
Babel is the most popular transpiler, which converts ES6 into ES5 javascript code, that works in all modern web browsers.
If you don't wish to use a transpiler, or if you would like to see compatibility over time, you can view this site to see which browsers will support the new ES6 features. If you are using the latest versions of google chrome, firefox, safari or edge then almost 100% of the new ES6 features will work and you will not need to use Babel to run the code in your browser. See the latest compatibility.
The new way to declare variables in ES6 is using let and const
Once you assign a value or object to the variable const you can no longer assign it to another value or object. This does NOT make const immutable, rather it makes const have the property that it cannot be reassigned.
When you want to reassign the variable such as a counter in a for loop, then let is the variable of choice. For example:
// Example 1 using let and const
const fruits = ['apples','bananas','oranges'];
let total = 0;
fruits.forEach(function(cur){
console.log(cur);
total++;
})
console.log(total);
// Example 2: Note the differences between x and y.
let x = 1000;
for(let x = 0; x < 3; x++){
console.log(x);
}
console.log(x); // expected output: 1000
var y = 1000;
for(var y = 0; y < 3; y++){
console.log(y);
}
console.log(y); // expected output: 3
// Characteristics:
// Note: let and const are block scoped, while var is function scoped
// we cannot use let and const before it is declared.
// Example 3: Let and const are block scoped.
{
const a = 'apples';
let b = 'bananas';
var c = 'carrots';
}
console.log(a); // expected output: a is not defined
// This is because const and let are block scoped.
concatenating strings with the + sign was always annoying in javascript.
Template strings enables us to avoid using the + sign
to concatenate strings together.
They are extremely handy when trying to string together long html elements with js variables.
Variables must be wrapped inside a dollar sign followed by curly braces.
This is how the javascript engine distinguishes between what is a string and what is a variable
For example:
//ES5 Method
var name1 = 'Jonny';
console.log('hello ' + name1);
//ES6 Method
const name2 = 'Jonny';
console.log(`hello ${name2}`)
It might take a bit a time to get use to, but once you do you will always want to write
arrow functions.
Arrow functions have shorter syntax than functions expressions and are written as
(parameter1, parameter2,..., parameter3)=>{ statements }
The parenthesis is optional when there is only 1 parameter.
Things to be aware of: Arrow functions do not have their own this keyword and the syntax cannot be used to create function constructors.
// Example 1
//ES5
var myFunction1 = function(){
console.log('hello world 1');
}
myFunction1();
//ES6
var myFunction2 = ()=>{
console.log('hello world 2');
}
myFunction2();
// Example 2
var names = ['Sheila','Tanya','Kirby','Taylor','Naomi'];
//ES5
names.forEach(function(cur){
console.log(cur.length);
})
//ES6
names.forEach(cur =>{
console.log(cur.length);
})
// Example 3
// Print the length of the names greater than threshold of 5.
//ES6
names.forEach((cur,i)=>{
if(cur.length > 5){
console.log(`${cur} is in position ${i+1} in the list`);
}
})
Destructuring in JS allows us to break up values from arrays into its components. We can also use it to seperate properities from objects into seperate variables.
// Example 1:
const [name,number] = ['hydrogen',1];
console.log(name);
console.log(number);
// Example 2:
// Destructuring makes it easy to swap two variables
let a = 'apples';
let b = 'bananas';
[a,b] = [b,a];
console.log(b); // expected output: 'apples';
// note: we use let instead of const because of reassignment.
// Example 3
// Is faster and cleaner to access object variables.
const elonMusk = {
name: 'Elon Musk',
born: 'Pretoria, South Africa'
netWorth: 20000000000,
residence: 'Los Angeles'
}
const {name,born} = elonMusk;
let {netWorth,residence} = elonMusk;
Some useful and widely used methods in ES6 that are helpful when looping throug arrays are: from includes findIndex
// Example 1 The from Method
// The Array.from method converts a node list into an array so we can easily loop through.
const boxes = document.querySelectorAll('.box');
console.log(boxes);
const boxesArray = Array.from(boxes);
console.log(boxesArray);
// changing the styles of all classes in the querySelector
boxesArray.forEach(cur=>{
cur.style.backgroundColor = 'red';
cur.style.fontWeight = '900';
})
// Example 2: The includes Method
// Suppose we have three boxes with css classNames "box red", "box blue" and "box green";
// We want to turn the blue box into a black box. Note, this simply changes the styles not the className.
boxesArray.forEach(cur=>{
if(cur.className.includes('blue')){
cur.style.backgroundColor = 'black';
}
})
// Example 3: findIndex
// findIndex is a ES6 function that helps us find the value in array which meets a certain criteria.
// Like the forEach method of an array, findIndex has access to the current element, the index and the array.
// The second and third parameters of findIndex are optional.
const prices = [10,99,50,150,100,1.99];
prices.findIndex((curr,index,array)=>{
if(curr > 100){
console.log(curr); // expected output 150;
console.log(index); // returns the position in the array.
// console.log(array); // returns the whole array.
}
});
Thespread operator takes an array and transform them into components.
// Example 1
function totalPrices (a,b,c,d){
console.log(a+b+c+d);
}
totalPrices(10,20,20,50); // expected output: 100;
// what if the prices we want are in an array?
myPrices = [10,20,20,50];
totalPrices(...myPrices);
// Example 2
// Getting all the prices in an array.
function sumAllPrices(array){
tot = 0;
array.forEach(cur=> {
tot+=cur;
});
console.log(tot);
}
sumAllPrices(myPrices);
Rest parameters let us take any number of arbitrary parameters and convert them into an array.
// Example 1
function myGreeting(...names){
//names is now an array that we can loop through.
names.forEach(cur=>console.log(`Hello ${cur}`));
}
myGreeting('Jon','Danaerys','Tyrion');
// Example 2
// We can pass other arguments into the myGreeting function in addition to the rest parameters. For example
function myGreeting2(language,...names){
//names is now an array that we can loop through.
if(language === 'Spanish'){
names.forEach(cur=>console.log(`Hola ${cur}`));
}
else {
names.forEach(cur=>console.log(`Hello ${cur}`));
}
}
myGreeting2('Spanish','Jon','Danaerys','Tyrion');
// we can pass any number of arguments before the spread operator. It this case the spread operator is ...names.