DEV Community

Cover image for Exploring 17 Prominent ES6 Features: Unlocking JavaScript's Power
Ifeoluwa isaiah
Ifeoluwa isaiah

Posted on • Updated on

Exploring 17 Prominent ES6 Features: Unlocking JavaScript's Power

Introduction:

In 2015, ECMAScript 2015 (ES6) brought a significant update to JavaScript, introducing a lot of powerful features that transformed the way we write code. In this blog post, we will delve into 17 prominent ES6 features, accompanied by code examples for each, to demonstrate how they can enhance your JavaScript development experience.

1. let and const: Improved Variable Declarations

ES6 introduced block-scoped variables with let and constants with const. This allows for better variable scoping and the creation of immutable values, respectively.

When you save something in a let variable then it can be changed or overridden to something else for example;

let num = 0;
num = 1;
// num is now equal to 1
Enter fullscreen mode Exit fullscreen mode

But the opposite applies to a constant, as its name suggests, whatever you save in a const can't be changed later on and you won't be given a chance to override it or redefine it as with the let variable.

const count = 10;
count = 20;  // an error would occur here
Enter fullscreen mode Exit fullscreen mode

2. Arrow Functions for Concise Function Expressions

Arrow functions provide a shorter syntax for defining functions and automatically bind the surrounding context for this.

const add = (a, b) => a + b;
add(2, 2);
Enter fullscreen mode Exit fullscreen mode

At first sight this may look weird. You might want to ask if that is a function or variable or both. It is a function saved in a variable and its equivalent to this below;

const add = function(a, b) {return a + b};
add(2, 2)
Enter fullscreen mode Exit fullscreen mode

But we can agree that the arrow function is more concise, in fact if we had only one argument you can remove the brackets;

const greet = name => console.log('Welcome'+ ' ' + name)
greet('Ife');
// check your console
Enter fullscreen mode Exit fullscreen mode

3. Template Literals: Flexible String Formatting

Personally this is one of my favourites. Template literals enable multi-line strings and the interpolation of variables within a string using backticks. Before template literals writing strings had some problems, the one that got to me was this;

let text= 'It\'s alright.';
// I just hated the backslash for no reason
Enter fullscreen mode Exit fullscreen mode

another option was to use double quotes, which wasn't really my thing:

let text = "It's alright."
// this looked better though
Enter fullscreen mode Exit fullscreen mode

The above used to be a better approach to handling the apostrophe in words and whether the word was in "quotes" or not but sometimes there was need to join a string with a variable and the resort was usually this:

let name = 'Ife';
console.log('My name is' + ' ' name)
Enter fullscreen mode Exit fullscreen mode

Of course there always had to be an additional empty string to separate the words from each other, but congratulations to all javascript developers as ES6 brought about glad tiding.

Instead of the 'single' or "double" quotes you can just use template strings

const name = 'Ife';
console.log(`Hello, ${name}!`);
Enter fullscreen mode Exit fullscreen mode

instead of concatenating variables and string together you can simply add them provided you use a template string and wrap your variable in a dollar and curly bracket sign ${}.

In fact not only can you keep a variable inside but also perform some mathematical operations amongst others.

const answer = `The answer is ${50 % 40}`;
console.log(answer)
Enter fullscreen mode Exit fullscreen mode

4. Destructuring Assignment: Extracting Values with Ease

Destructuring allows extracting values from arrays and objects into distinct variables, making code more concise.

Before we used to got through the route of ;

    let user = {
        email: 'ife@gmail.com',
        password: 12345,
        name: 'ifeoluwa',
        username: 'ife_xxo'
    }
    const name = user.name;
    const email = user.email;

    console.log(name, email)
Enter fullscreen mode Exit fullscreen mode

But now destructuring finds where the value is itself and saves it in a variable providing you supplied the right name;

    let user = {
        email: 'ife@gmail.com',
        password: 12345,
        name: 'ifeoluwa',
        username: 'ife_xxo'
    }
    const {name, email} = user; 

    console.log(name, email)
Enter fullscreen mode Exit fullscreen mode

5. Default Parameters: Simplified Function Arguments

ES6 introduced default parameter values, which are used when an argument is not provided or is undefined.

function greet(name = "Guest") {
  console.log(`Hello, ${name}!`);
}
greet('Ife') // then default valid won't apply
greet() // then default value will apply and it will say "Hello Guest!"
Enter fullscreen mode Exit fullscreen mode

6. Rest Parameters: Variable-Length Arguments

Rest parameters enable functions to accept any number of arguments as an array, making it easier to handle variable-length parameter lists.

function examp(a, b, ...therest) {
    console.log('a', a)
    console.log('b', b)
   console.log(therest)
}
examp(1, 2, 3, 4, 5, 6)
Enter fullscreen mode Exit fullscreen mode

The rest of the argument are stored in an array, if you check your console you will find 3, 4, 5, 6.

7. Spread Operator: Unpacking Arrays and Objects

The spread operator allows expanding arrays and objects into individual elements, making it useful for function arguments or array manipulation.

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];

const obj1 = { x: 1, y: 2 };
const obj2 = { ...obj1, z: 3 };
Enter fullscreen mode Exit fullscreen mode

8. Classes: Object-Oriented Programming Made Easier

ES6 introduced a more structured syntax for creating classes, constructors, and inheritance. For example;

    class Animal {
        constructor(name) {
            this.name = name;
        }
        eat() {
            console.log(`${this.name} is eating some food`)
        }
       sleep() {
            console.log(`${this.name} is asleep`)
        }
   }
Enter fullscreen mode Exit fullscreen mode

Inheritance allows classes to inherit properties and methods from other classes, forming a hierarchical relationship. In JavaScript, inheritance is achieved using prototypes.

class Dog extends Animal {
  bark() {
    console.log(`${this.name} is barking.`);
  }
}

const myDog = new Dog('Buddy');
myDog.eat();  // Output: Buddy is eating.
myDog.bark(); // Output: Buddy is barking.
myDog.sleep(); // Output: Buddy is sleeping
Enter fullscreen mode Exit fullscreen mode

In the above snippet, Dog inherits it's method eat() and sleep() from it's parent Animal, because if you think about it all animals eat and sleep but the method bark() is peculiar to dogs only.

9. Modules: Organized Code Sharing

ES6 modules provide a standardized way to organize and share code across multiple files, improving code maintainability.

// math.js
export const PI = 3.14159;
export function double(x) {
  return x * 2;
}

// app.js
import { PI, double } from "./math.js";
console.log(double(PI));
Enter fullscreen mode Exit fullscreen mode

We do this a lot in react when we're importing or exporting one component or another.

10. Promises: Managing Asynchronous Operations

Promises simplify asynchronous programming, allowing more readable and maintainable code for handling asynchronous operations.

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));
Enter fullscreen mode Exit fullscreen mode

11. Enhanced Object Literals: More Expressive Objects

ES6 enhanced object literals allow concise syntax for defining methods, dynamic property names, and object shorthand.

const name = 'Ife';
const person = {
  name,
  sayHello() {
    console.log(`Hello, ${this.name}!`);
  }
};
Enter fullscreen mode Exit fullscreen mode

12. Iterators and Generators: Custom Iteration Control

Iterators and generators provide ways to define custom iteration behavior, enabling advanced control over looping in JavaScript.

const iterable = {
  *[Symbol.iterator]() {
    yield 1;
    yield 2;
    yield 3;
  }
};

for (const item of iterable) {
  console.log(item);
}
Enter fullscreen mode Exit fullscreen mode

13. Map and Set: Advanced Data Structures

ES6 introduced built-in data structures such as Map for key-value pairs and Set for unique values, offering powerful alternatives to arrays and objects.

const map = new Map();
map.set("name", "John");
map.set("age", 30);
console.log(map.get("name"));

const set = new Set([1, 2, 3, 3, 4, 5]);
console.log(set.size);
Enter fullscreen mode Exit fullscreen mode

15. Symbol: Unique Identifier Creation

Symbols are unique and immutable values that can be used as object property keys, preventing unintentional property name collisions.

const firstName = Symbol('firstName');
const lastName = Symbol('lastName');

const person = {
  [firstName]: 'John',
  [lastName]: 'Doe',
  age: 30,
  city: 'New York'
};

console.log(person[firstName]); // Output: John
console.log(person[lastName]); // Output: Doe
Enter fullscreen mode Exit fullscreen mode

16. String Methods: Enhancing String Manipulation

ES6 introduced new string methods, including startsWith(), endsWith(), and includes(), facilitating common string operations.

const str = "Hello, World!";
console.log(str.startsWith("Hello")); // true
console.log(str.endsWith("!")); // true
console.log(str.includes("World")); // true
Enter fullscreen mode Exit fullscreen mode

17. Async/Await: Simplifying Asynchronous Code

Async/await is a powerful syntactic feature that makes asynchronous code look more synchronous and easier to understand.

async function fetchData() {
  try {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}
Enter fullscreen mode Exit fullscreen mode

Using the Async/Await, the above is a simple way of fetching data from an api, off course in the course of this other functions can be called to carry out other actions.

Conclusion:

These 17 prominent ES6 features have revolutionized JavaScript development, enhancing its readability, maintainability, and overall capabilities.

By leveraging these features in your projects, you can unlock the full potential of JavaScript and write more efficient and elegant code. Explore and experiment with these features further to elevate your JavaScript skills to the next level. Happy coding! And thanks for reading.

Top comments (2)

Collapse
 
onlinemsr profile image
Raja MSR

Excellent compilation!

One should understand these javascript basics before jumping into Angular, React, Next.js etc.

Collapse
 
ifeolwaisaiah profile image
Ifeoluwa isaiah

Thanks for reading.