DEV Community

Cover image for 7 ES6 Features all JavaScript Programmers Should Learn to Use
Kingsley Ubah
Kingsley Ubah

Posted on β€’ Originally published at ubahthebuilder.tech

13 5

7 ES6 Features all JavaScript Programmers Should Learn to Use

The EMCAScript2015 (ES6) came with a whole new set of fetaures and syntax.

In this article, we will take a look at some very useful ones.

1. Destructuring Assignment (Objects and Arrays)

  • Access and store multiple elements from an array or object in just one line of code
let oldArray = [1, 2, 3];
let first = oldArray[0]; // first = 1
let second = oldArray[1]; // second = 2
let third = oldArray[2]; // third = 3


let newArray = [1, 2, 3];
let [first, second, third] = newArray;
// The same operation reduced to just one line
Enter fullscreen mode Exit fullscreen mode
const oldMe = {
    name: "kingsley",
    sex: "male",
    age: 21
};

const oldName = oldMe.name; // "kingsley"
const oldSex = oldMe.sex; // "male"
const oldAge = oldMe.age; // 21


const newMe = {
    name: "kingsley",
    sex: "male",
    age: 21
};

{ name, sex, age } = newMe; 

// Refactored to just one single line
Enter fullscreen mode Exit fullscreen mode

2. Default Parameter

  • Set a default parameter for a function which will be used when one is not defined.
/* BEFORE */

function withoutDefault(param1, param2) {
    if (param2 === undefined) {
        param2 = "second string";
    }

    console.log(param1, param2);
}


withoutDefault("first string", "second string");
// "first string" and "second string"



/* WITH DEFAULT PARAMETER */

function withDefault(param1, param2 = "second string") {
    console.log(param1, param2);
}


withDefault("first string");
// "first string" and "second string"



withDefault("first string", "second string");
// Outputs: "first string" and "second string"
Enter fullscreen mode Exit fullscreen mode

3. MODULES

  • Share code across multiple files
// capitalize.js

function capitalize(word) {
    return word[0].toUpperCase() + word.slice(1);
}

export { capitalize }; // Exports the function


// warn.js

import { capitalize } from './capitalize'; // Imports the function

function warn(name) {
    return `I am warning you, ${capitalize(name)}!`;
}

warn('kingsley');
// I am warning you, Kingsley!
Enter fullscreen mode Exit fullscreen mode

4. ENHANCED OBJECT LITERAL

  • Create an object, supply it properties and methods all in a very short and dynamic way.
var name = "kingsley";
var sex = "male";
var age = 21;

// Using Object Literal Enhancement

var me = {name, sex, age};
console.log(me);


/*
   {
     name: "kingsley",
     sex: "male",
     age: 21
   }
Enter fullscreen mode Exit fullscreen mode
var name = "kingsley";
var sex = "male";
var age = 21;

// Function

let sayName = function (){
  console.log(`I am ${this.name}!`);
}

// With Object Literal Enhancement

var me = {name, sex, age, sayName};


me.sayName();

// "I am kingsley!"
Enter fullscreen mode Exit fullscreen mode

5. PROMISE

  • Nest callbacks in a simple and clean way.
const successPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('successful!');
  }, 300);
});

// CONTINUATION AFTER 3 SECONDS
successPromise
.then(value => { console.log(value) })  // "successful!"
.catch(error => { console.log(error) })


--------------------------------------------------------

const failPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('oops!, something went wrong');
  }, 300);
});

// CONTINUATION AFTER 3 SECONDS
failPromise
.then(value => { console.log(value) }) 
.catch(error => { console.log(error) }) // oops, something went wrong
Enter fullscreen mode Exit fullscreen mode

6. TEMPLATE LITERALS

  • Dynamically construct string from variables
let name = "kingsley"
let age = 21
let blog = "ubahthebuilder.tech"

function showBlog() {
console.log(`My name is ${name}, I am ${age} years old and I blog at ${blog}`);
} 

showBlog();

// "My name is kingsley, I am 21 years old and I blog at ubahthebuilder.tech"
Enter fullscreen mode Exit fullscreen mode

7. ARROW FUNCTIONS

  • Write shorter function syntax

let sayName = () => {
  return "I am Kingsley";
}

let sayName2 = (name) => `I am ${name}`;
let sayName3 = name => `I am ${name}`; // You can remove the brackets

let sayNameAge = (name, age) => `I am ${name}, and I am ${age} years old`
// If argument is more than one, you must wrap in parenthesis
Enter fullscreen mode Exit fullscreen mode

YOU MAY ALSO LIKE:

Neon image

Resources for building AI applications with Neon Postgres πŸ€–

Core concepts, starter applications, framework integrations, and deployment guides. Use these resources to build applications like RAG chatbots, semantic search engines, or custom AI tools.

Explore AI Tools β†’

Top comments (1)

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ β€’

In your section on modules, you have omitted the file extension on the import filename - this code will not work

Neon image

Next.js applications: Set up a Neon project in seconds

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Get started β†’

πŸ‘‹ Kindness is contagious

Explore this insightful post in the vibrant DEV Community. Developers from all walks of life are invited to contribute and elevate our shared know-how.

A simple "thank you" could lift spiritsβ€”leave your kudos in the comments!

On DEV, passing on wisdom paves our way and unites us. Enjoyed this piece? A brief note of thanks to the writer goes a long way.

Okay