JavaScript ES6+ Features You Should Know

JavaScript ES6+ Features

Explore the most important ES6+ features that modern JavaScript developers use daily.

Arrow Functions

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

// Arrow function
const add = (a, b) => a + b;

Template Literals

const name = 'John';
const message = `Hello, ${name}!`;

Destructuring

// Array destructuring
const [first, second] = [1, 2];

// Object destructuring
const { name, age } = { name: 'John', age: 30 };

Spread Operator

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

Promises and Async/Await

// Promise
fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data));

// Async/Await
async function getData() {
  const response = await fetch('/api/data');
  const data = await response.json();
  return data;
}

Modules

// Export
export const myFunction = () => {};

// Import
import { myFunction } from './module.js';