ES6 new features
posted by Akash Sarki on 17 June 2025
ES6 also known as ECMAScript introduced a wide range of powerful features to JavaScript. Here's a comprehensive list with explainations and examples:
1. let and const :
- let - Block scoped variables
- const - Block scoped constant
let x = 10;
x = 20;
const y = 30;
// y = 40; ❌ Error: Assignment to constant variable.
2. Arrow Functions ( => ) :
- Shorter syntax for writing functions.
- Lexical this binding.
const add = (a, b) => a + b;
console.log(add(2, 3)); // 5
3. Template Literals ( Backticks `` )
- Embed variables and expressions using ${}.
- Multiline strings.
const name = 'John'
console.log(`Name is: ${name}`)4. Default parameters :
- Set default values for function parameters.
function greet(name = "Akash") {
console.log("Hello " + name)
}
greet()
// Output : 'Hello Akash'5. Destructuring Assignments :
- Extract values from Arrays / Objects.
const person = { name: "Akash", age: 25 }
const { name, age } = person
const arr = [1, 2]
const [a, b] = arr6. Rest and Spread Operators :
- ... gathers or spread elements.
// Example 1
function sum(...numbers) {
return numbers.reduce((a, b) => a + b)
}
// Example 2
const nums = [1, 2, 3]
const moreNums = [...nums, 4, 5, 6]7. Enhanced Object literals :
- Shorthand for Object properties and methods.
const age = 25;
const person = {
name: "Akash",
age, // instead of age: age
greet() {
console.log("Hello")
}
}8. Promises :
- Handles async operations more clearly.
const fetchData = () => {
return new Promise((resolve, reject) => {
setTimeout(() => resolve("Data loaded"), 1000);
})
}
fetchData().then(console.log)9. Modules (import / export) :
- Split code into files/modules.
//math.js
export const sum = (a, b) => a + b
//main.js
import { sum } from './math.js'
console.log(sum(2, 3)) //510. For...of Loop :
- Iterate over iterable objects.
const arr = [1, 2, 3, 4]
for(const i of arr) {
console.log(i)
}11. Map and Set :
- New data structures.
const map = new Map();
map.set('key', 'value')
const set = new Set([1, 2, 2, 3]); // {1, 2, 3}12. Symbols :
- Unique and immutable data type for object keys.
const sym = Symbol('id')
const obj = { [sym]: 123 }13. Iterators and generators :
An iterator is an object that defines a sequence and potentially a return value upon completion.
const iterable = {
*[Symbol.iterator]() {
yield 1;
yield 2;
}
};
for (const value of iterable) {
console.log(value);
}Generators are a special type of function that makes creating iterators much simpler.
You define a generator using the function* syntax, and you use yield to return values.
function* gen() {
yield 'a';
yield 'b';
}
const g = gen();
console.log(g.next()); // { value: 'a', done: false }
14. Object.assign() :
- Copy properties from source to target object.
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);
console.log(target);
// Expected output: Object { a: 1, b: 4, c: 5 }
console.log(returnedTarget === target);
// Expected output: true
15. Object.is()
- It determines whether two values are the same value — similar to ===, but with a few important differences.
🔗 How is it Different from ===?
1. NaN === NaN, === will result in false but Object.is() will result to true.
2. +0 === -0, === will result in true but the Object.is() will result to false.
3. Other values, works the same.
Object.is(25, 25); // true
Object.is('foo', 'foo'); // true
Object.is([], []); // false (different references)
Object.is(NaN, NaN); // true ✅
Object.is(+0, -0); // false ❌
16. Number.isNaN() , Number.isFinite() :
- Better numeric checks.
Number.isNaN(NaN); // true
Number.isNaN(123); // false
Number.isNaN("NaN"); // false (string)
Number.isNaN(undefined); // false
Number.isNaN(0 / 0); // true (because 0/0 is NaN)
Number.isNaN('abc' / 2); // true ('abc'/2 = NaN)
Number.isFinite(100); // true
Number.isFinite(0); // true
Number.isFinite(-Infinity); // false
Number.isFinite(NaN); // false
Number.isFinite('123'); // false This is false because Number.isFinite does not perform type coercion.
Number.isFinite(Infinity); // false
//Checks if a value is a number and finite (not Infinity, -Infinity, or NaN).
17. Array.find() / Array.findIndex() :
- Array.find() gives first element which is which satisfies the condition.
- Array.findIndex() gives the index of that element.
const arr = [5, 12, 8];
arr.find(x => x > 10); // 12
arr.findIndex(x => x > 10); // 118. String.includes(), startsWith() and endsWith() :
'hello'.includes('ell'); // true
'hello'.startsWith('he'); // true
'hello'.endsWith('lo'); // true19. Classes :
- Syntactic sugar for prototypal inheritance.
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a noise.`);
}
}
20. Inheritance with extends and super :
class Dog extends Animal {
speak() {
super.speak();
console.log(`${this.name} barks.`);
}
}
