ES6 Basic Concepts

In this article, we’ll learn about ES6 Basic Concepts

JavaScript has come a long way, and with the introduction of ES6 (ECMAScript 2015), it has undergone a significant transformation. ES6 introduced a plethora of new features and syntax enhancements that make JavaScript development more efficient, readable, and powerful.

We will embark on a journey through the ES6 Basic Concepts, unraveling its core features and shedding light on the advancements that have shaped modern JavaScript. Get ready to elevate your coding skills and embrace the magic of ES6.

JavaScript is one of the most popular scripting languages for the Web. Most of the fortune 50 corporations such as Google, IBM, and Microsoft now support major JS-related open source projects and development. 

ECMAScript (ES) is a scripting language specification standardized by ECMAScript International. ECMAScript 6 is also known as ES6 and ECMAScript 2015. Some people call it JavaScript 6.

Following is a brief JavaScript timeline:

  1. 1995: JavaScript is born as LiveScript
  2. 1997: ECMAScript standard is established
  3. 1999: ES3 comes out and IE5 is all the rage
  4. 2000–2005: XMLHttpRequest, a.k.a. AJAX, gains popularity in apps such as Outlook Web Access (2000) and Oddpost (2002), Gmail (2004), and Google Maps (2005).
  5. 2009: ES5 comes out (this is what most of us use now) with forEach, Object.keys, Object.create (especially for Douglas Crockford), and standard JSON
  6. 2015: ES6/ECMAScript2015 comes out; it has mostly syntactic sugar because people weren’t able to agree on anything more groundbreaking (ES7?)

ES6 Basic Concepts

We’ll learn about the following ES6 Basic Concepts:

  • Understanding the “let” and “const”
  • Arrow functions
  • The spread and Rest operators
  • Classes, Properties, and Methods
  • Destructuring

Let

let is similar to var but let has scope. let is only accessible in the block level where it is defined. see below example

if (true) {
 let a = 40;
 console.log(a); //40
}
console.log(a); // undefined

In the above example variable, ‘a’ is defined inside If statement and so it’s not accessible outside the function.

Let is new feature of ES6 Basic Concepts.

Const

Const is used to assign a constant value to the variable. And the value cannot be changed. Its fixed.

Const is new feature of ES6 Basic Concepts

const a = 50;
a = 60; // shows error. You cannot change the value of const.const b = "Constant variable";
b = "Assigning new value"; // shows error.

Arrow functions

Arrow function is one of the highly accepted and easy syntaxes of ES6. Before arrow functions were introduced, we had normal functions with the syntax.

Function myFunction(params) {  

    return params * 2;  

}  

myFunction(5);  

Which got replaced by arrow  

function like this: const myFunc = (params) => {  

    return params * 2  

}  

myFunc(5);  

Moreover, if you have only one statement in the function body, you can omit return keyword and { } parenthesis. Like this,

  1. const myFunc = (params) => params*2; 

If you have exactly one parameter you can omit round parenthesis as well. Like this:

  1. const myFunc = params => params*2;  

This is the shortest definition of the arrow function.

So, we can sum up, the arrow function has removed the function and return keyword.

The arrow function has also resolved the problem with this keyword. If you have used JavaScript, then you might have seen that this keyword does not always refer to the object you want it to.

Arrow function is new feature of ES6 Basic Concepts.

Spread and Rest operators

Spread and Rest have the same syntax of …(3 dots) and will differ in the context in which they are called.

The spread operator is used to spread array or objects. For example,

old_array=[1,2,3];  

const new_array=[..old_array,4,5];  

We have an old_array which has three elements. And we want our new_array to have all those elements which old_array had as well as new elements such as 4 and 5.

Also, it can be used with objects as well.

old_object : {name:’john’,age:15 };  

new_object : {…old_object,weight:30}  

Now, the new_object will contain 3 properties – name, age, and weight.

Now, Rest operator is used to merge the function arguments into an array.

function sortArgs(…args){  

   args.sort();  

}  

Here, our function sortArgs receives an unlimited amount of arguments. But, with the help of rest operator, we can write it as one argument and all the arguments will be gathered in an array. So, we can apply any array operation in our arguments.

Both are new feature of ES6 Basic Concepts.

Class, Properties, and Method

Now, JavaScript offers new ways of initializing properties and methods, which is a very modern syntax.

Properties are like “variables attached to classes/objects”.

So far, we have been using syntax like this.

constructor(){  

   this.myProperty=value;  

}  

But, the modern way allows us to use the below syntax which gets rid of the constructor part.

myProperty=value;  

Behind the scene, this syntax will transform to the same syntax as with constructor.

Methods are like “function attached to classes/objects”.

So far, we have been using the syntax like the below one.

myMethod(){  

…..  

}  

But, the newer syntax allows us to use a property that will store function as a value.

myProperty = () => { …. }  

Yes, it’s an arrow function that we learned previously. So, the advantage of using this syntax for your method is to get rid of issues with this keyword.

Destructuring

Destructuring allows us to easily extract array elements and object properties and store them in variables. Now it might sound exactly like spread operator but actually, it’s not. The spread operator pulls out all the properties and variables from the old array/objects and stores them in new array/objects. But, Destructuring allows us to pull out the single property from the array/object.

Array Destructuring

[a, b]=[‘John’,’Jerry’];  

console.log(a); // John  

console.log(b); // Jerry  

Yes, we can pull out individual elements from an array based on the order.

Object Destructuring

{name}={name:’John’, age:15}  

console.log(name);  

console.log(age);  

{name} targets the name property of the name on the right side and polls out the value.

Above are ES6 Basic Concepts.

ES6 has revolutionized JavaScript development, bringing a host of new features and syntax enhancements that empower developers to write cleaner, more efficient, and maintainable code. By understanding and embracing the ES6 Basic Concepts, you can take your JavaScript skills to the next level and leverage the full potential of modern JavaScript. So dive in, explore the wonders of ES6, and unlock a world of possibilities for your coding journey.

I hope this helps you with ES6 Basic Concepts

Last updated on May 21st, 2023.