ES6 in NodeJS

ES6, short for ECMAScript 2015, brought a significant upgrade to the JavaScript language, enhancing its capabilities and introducing modern features.

Let and Const Declarations

ES6 introduced let and const for variable declarations, offering block-level scoping and safer constants.

Before ES6:

var x = 10;

After ES6:

let x = 10;
const pi = 3.14;

Arrow Functions

Arrow functions provide a concise syntax for defining functions.

Before ES6:

function add(a, b) {
  return a + b;
}

After ES6:

const add = (a, b) => a + b;

3. Template Literals

Template literals allow embedding expressions within strings.

Before ES6:

console.log("Hello, " + name + "!");

After ES6:

console.log(`Hello, ${name}!`);

4. Destructuring

Destructuring simplifies extracting values from arrays and objects.

Before ES6:

var firstName = person.firstName;
var lastName = person.lastName;

function printInfo(person) {
  console.log(`Name: ${person.name}, Age: ${person.age}`);
}
printInfo({ name: "Alice", age: 30 });

After ES6:

const person = {
  firstName: "John",
  lastName: " Doe",
  age: 30,
};
const { firstName, lastName } = person;
function printInfo({ name, age }) {
  console.log(`Name: ${name}, Age: ${age}`);
}
printInfo({ name: "Alice", age: 30 });

5. Spread and Rest Operators

Spread and rest operators provide concise ways to work with arrays and function arguments.

Before ES6:

var newArray = oldArray.slice();

function test(a, b, c) {
  console.log(a, b, c);
}

test("first", "second", 2); // first second 2

After ES6:

const newArray = [...oldArray];

function test(...vars) {
  console.log(vars); // Array(3) [ "first", "second", 2 ]
}

test("first", "second", 2);

6. Classes

ES6 introduced class syntax for object-oriented programming.

Before ES6:

function Person(name) {
  this.name = name;
  this.sayHello = function () {
    console.log(`Hello, ${this.name}!`);
  };
}

After ES6:

class Person {
  constructor(name) {
    this.name = name;
  }
  sayHello() {
    console.log(`Hello, ${this.name}!`);
  }
}

7. Maps and Sets

A Map holds key-value pairs where the keys can be any datatype. It remembers the original insertion order of the keys. Learn more (here)[https://www.w3schools.com/js/js_object_maps.asp].

A Set is a collection of unique values. Each value can only occur once in a Set. Learn more (here)[https://www.w3schools.com/js/js_object_sets.asp]

Before ES6:

You would use objects and then a lot of code to extend some functionalities and to make it work as a Map or a Set.

After ES6:

const cart = new Map();
cart.set("apples", 5);
cart.set("toys", 1);

const letters = new Set();
letters.add("a");
letters.add("b");

8. For of loop

A simpler way of looping through iterable data structures(so far you know Arrays, Strings and Maps but there are more)

Before ES6:

var numbers = [1, 2, 45, 2, 3];
for (var i = 0; i < numbers.length; i++) {
  console.log(numbers[i]); // 1, 2, 45, 2 ,3
}

After ES6:

const numbers = [1, 2, 45, 2, 3];
for (const number of numbers) {
  console.log(number); // 1, 2, 45, 2 ,3
}

9. Promises

This is a bit longer topic and will be covered in the future posts. But in a nutshell it is a newer way to handle asynchronous code. Up until that point there were callbacks.

10. Symbol

A data type that we mentioned in previous posts. It represents a unique “hidden” identifier that no other code can accidentally access.

const person = {
  id: 3,
  firstName: "John",
  lastName: "Doe",
};

let id = Symbol("id");
person[id] = 140353;
console.log(person[id]); // 140353
console.log(person.id); // 3

As you can see, person[id] is not the same as person.id because [id] is a Symbol meaning it is a unique value.

11. Default Parameter Values

ES6 allows defining a default parameter value.

Before ES6:

function test(a) {
  if (!a) {
    a = 10;
  }
  console.log(5 + a);
}

test(); // 15
test(1); // 6

After ES6:

function test(a = 10) {
  console.log(5 + a);
}

test(); // 15
test(1); // 6

And a bunch more useful methods and other things. Learn more here.

What now?

Now try out all of the above things and when you’re done, then go to the above link and try all of not mentioned things as well.