What is ES6 in JavaScript?
JavaScript is a powerful and versatile language invented by Brendan Eich in 1995. ECMAScript is the standard that defines how JavaScript should work. ECMAScript is maintained by ECMA international standard organization. JavaScript became the ECMA standard in 1997. Since then, JavaScript has had different versions, and ES6 is one of them.
ES6 stands for ECMAScript 6, also known as ECMAScript 2015 or ES6. It is the sixth version of JavaScript and was introduced in 2015. JavaScript ES6 was introduced to tackle issues from ES5 and introduce new features to the language.
Major features of ES6
Some of the major features introduced by JavaScript are listed below:
The
letkeyword: Theletkeyword is used to declare variables; in previous versions,varwas used to declare variables. Variables declared usingletare block-scoped, meaning these variables are only accessible within a particular block.
// declared the age variable using letlet age = 22;{let age = 30;// can be accessed only insideconsole.log(age); // 30}console.log(age); // 22
const: The
constkeyword is used to create constants, once assigned, the value of theconstvariable cannot be reassigned. Variables declared usingconstare block scoped.
// the value of age cannot be reassignedconst age = 12;
Arrow functions: It allows us to create clean and concise functions compared to the traditional regular functions. it can also be used to create function expressions.
// arrow functionsconst calcAge = birthYear =>2023 - birthYear;const age = calcAge(1992)console.log(age); //31
Template literals/template strings: It makes it easy to include variables and expressions within a string, instead of single quote or double quotes, they are enclosed in backticks (` ${expression }`).
//in previous versions we had to doconst lastName = "obi";const firstName = "peter";console.log('Welcome ' + lastName + ' ' + firstName);// but with template literalsconsole.log(`Welcome ${lastName} ${firstName}`)
Classes: The word
classin JavaScript defines the blueprint for creating objects.
class Car {constructor(name) {this.name = name;}}const firstCar = new Car('Toyota');const secondCar = new Car('Mercedes');console.log(firstCar.name); // Toyotaconsole.log(secondCar.name); //Mercedes
Default parameter values: In ES6, we can pass default values as function parameters.
function addNum(a, b = 6){// if the value of b is not passed, b = 6return a + b;}// value of b not passed, use 6(default value)console.log(addNum(3));console.log(addNum(4,8));
Destructuring: In ES6, this feature makes it easier to retrieve elements from an array or objects and assign them to a separate variable.
// in previous versionsconst car = {color : 'blue',seats : 6,tyres : 8}let color = car.color;let seats = car.seats;let tyres = car.tyres;console.log(color);console.log(seats);console.log(tyres);// with ES6 destructuringconst person = {name : 'carly',gender : 'female',age : 8}let {name,age,gender} = person;console.log(name);console.log(age);console.log(gender);
Import and export: With ES6 import and export, we can export code and import code across multiple files.
// importimport address from './index.js';address('rhodes', 'awka');// I live at rhodes street in awka town.
Rest parameter and spread operator: The
rest parameterallows the function to accept an indefinite amount of arguments while the thespread operatoris used to copy items into a single array. Both therest parameterandspread operatormakes use of the same syntax ( ...).
// rest parameterfunction displayAlphabets(a, b, ...alphabets) {console.log(a); // aconsole.log(b); // bconsole.log(alphabets); // ['c', 'd', 'e', 'f', 'g', 'h', 'i']}displayAlphabets('c', 'd', 'e', 'f', 'g', 'h', 'i')// spread operatorlet arr1 = ['one', 'two'];let arr2 = [...arr1, 'three', 'four', 'five'];console.log(arr2); // ["one", "two", "three", "four", "five"]
Free Resources
