Next Generation JavaScript Features

Photo by Nicolas Picard on Unsplash

let and const

let and const basically replace var . You use let instead of var and const instead of var if you plan on never re-assigning this "variable". The value of const can’t be changed.

ES6 Arrow Functions

Arrow functions are a different way of creating functions in JavaScript. Besides a shorter syntax, they offer advantages when it comes to keeping the scope of the this keyword. Arrow function syntax may look strange but it’s actually simple.

For no arguments, use empty parentheses in the function declaration:

const animalName = () => {
    console.log('Lion');
};

For one argument, omit the parentheses:

const animalName = (animal) => {
    console.log(animal);
};

For only returning a value,use the following shortcut:

const animalName = (animal) => animal;
/*which is equal to*/
const animalName = (animal) => {
    return animal;
};

Exports & Imports

In React projects (and actually in all modern JavaScript projects), you split your code across multiple JavaScript files — so-called modules. You do this, to keep each file/ module focused and manageable.

To still access functionality in another file, you need export (to make it available) and import (to get access) statements. You got two different types of exports: default (unnamed) and named exports:

1. default — export default …;
2. named — export const someData = …;

You can import default exports like this:

import name from './path/to/file.js';

named exports have to be imported by their name:

import { data } from './path/to/file.js';

file can only contain one default and an unlimited amount of named exports. You can also mix the one default with any amount of named exports in one and the same file. When importing named exports, you can also import all
named exports at once with the following syntax:

import * as bundled from './path/to/file.js';

Classes

Classes are a feature which basically replace constructor functions and prototypes. You can define blueprints for JavaScript objects with them.

In the above example, not only the class but also a property of that class (animal ) is defined. They syntax you see there, is the “old” syntax for defining properties. In modern JavaScript , the more convenient way of defining class properties:

class AnimalName {
 animal = 'Lion';
}
const animalName = new AnimalName();
console.log(animalName.animal);

You can also define methods either like this:

class AnimalName(){
    animal='Lion';
    funcAnimal(){
        console.log(this.animal)
    }
}
const animalName = new AnimalName();
console.log(animalName.funcAnimal());

Or like this:

class AnimalName(){
    animal='Lion';
    funcAnimal=()=>{
        console.log(this.animal)
    }
}
const animalName = new AnimalName();
console.log(animalName.funcAnimal());

The second approach has the same advantage as all arrow functions have: The this keyword doesn’t change its reference.

You can also use inheritance when using classes:

Spread & Rest Operator

The spread and rest operators actually use the same syntax: … Yes, that is the operator — just three dots. It’s usage determines whether you’re using it as the spread or rest operator.

Using the Spread Operator:
The spread operator allows you to pull elements out of an array (=> split the array into a list of its elements) or pull the properties out of an object. Here are two examples:

const oldArray = [1, 2, 3];
const newArray = [...oldArray, 4, 5];

Here’s the spread operator used on an object:

const oldObject = {
    name: 'Max'
};
const newObject = {
    ...oldObject,
    age: 28
};

newObject would then be

{
    name: 'Max',
    age: 28
}

Destructuring

Destructuring allows you to easily access the values of arrays or objects and assign them to variables. Here’s an example for an array:

const array = [1, 2, 3];
const [a, b] = array;
console.log(a); // prints 1
console.log(b); // prints 2
console.log(array); // prints [1, 2, 3]

And here for an object:

const myObj = {
    name: 'Max',
    age: 28
}
const {name} = myObj;
console.log(name); // prints 'Max'
console.log(age); // prints undefined
console.log(myObj); // prints {name: 'Max', age: 28}

Thanks for reading

All credit goes to @maximilian_schwarzmüller

Lists of Top 10 JavaScript array methods all should know