learn2kode.in

Menu

JavaScript Tutorial

Menu

ES6 features in JavaScript

ES6, also known as ECMAScript 2015, is a major update to JavaScript that introduced modern syntax and powerful features to make code cleaner, shorter, and more readable. Today, ES6 features are widely used in modern web development, including frameworks like React, Vue, and Node.js.
In this tutorial, you’ll learn the most important ES6 features with simple examples:
  • let and const
  • Arrow functions
  • Spread operator
  • map() and filter()

1. let and const

let

let allows you to declare block-scoped variables, which is safer than var.

Copy Text 
let count = 10;
count = 15; // allowed
const
const is used for values that should not be reassigned.
Copy Text 
const PI = 3.14;
// PI = 3.5 ❌ Error

Use const by default, and let only when reassignment is needed.

2. Arrow Functions (=>)

Arrow functions provide a shorter syntax for writing functions and handle this more predictably.
Traditional Function
Copy Text 
function add(a, b) {
  return a + b;
}
Arrow Function
Copy Text 
const add = (a, b) => a + b;
  • Cleaner
  • Easier to read
  • Widely used in React & modern JavaScript

3. Spread Operator (...)

The spread operator is used to expand arrays or objects.
Copy an Array
Copy Text 
const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5];
Merge Objects
Copy Text 
const user = { name: "John" };
const details = { age: 25 };

const fullUser = { ...user, ...details };
  • Prevents mutation
  • Makes code concise

4. map() Method

The map() method creates a new array by transforming each element.
Copy Text 
const numbers = [1, 2, 3, 4];
const squared = numbers.map(num => num * num);
Output
Copy Text 
[1, 4, 9, 16]
  • Used for rendering lists
  • Does not modify original array

5. filter() Method

The filter() method returns a new array that meets a condition.
Copy Text 
const ages = [12, 18, 25, 14];
const adults = ages.filter(age => age >= 18);
Output
Copy Text 
[18, 25]
  • Perfect for search, filtering data, and validations

map() vs filter() Comparison

Method Purpose Returns
map() Transform data New array (same length)
filter() Filter data New array (filtered)

Why ES6 Is Important

  • Cleaner and more readable code
  • Better performance
  • Industry standard for modern JavaScript
  • Required knowledge for React, Node.js, and frameworks

ES6 vs ES5 comparison table

Feature ES5 ES6 (ES2015)
Variable Declaration var let, const
Function Syntax Traditional functions Arrow functions () => {}
Scope Function scope Block scope
String Handling String concatenation Template literals `Hello ${name}`
Default Parameters Not supported Supported
Array Methods Limited map(), filter(), reduce()
Object Handling Manual assignments Destructuring, spread operator
Modules Not supported import / export
Classes Prototype-based class syntax
Readability More verbose Cleaner and concise
JSON
Callbacks