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.`);
}
}
Read More Blog posts
Introduction to Motion animations
Overview of Motion Animations
Gesture animations in Motion dev
This article gives basic understanding of motion's gesture animations
What are Scroll animations in Motion?
This article will give you a brief description about scroll animations in Motion dev.