This lesson explains ES6+ Features List with clear examples, use cases, and best practices so you can use modern JavaScript confidently in real projects.
ES6, also called ECMAScript 2015, introduced many important JavaScript features that changed how modern applications are written. These features improve readability, modularity, asynchronous programming, object-oriented programming, data handling, and developer productivity.
This list view covers the most important ES6 features with short explanations and practical examples for frontend, backend, React, Node.js, and full-stack development.
let creates block-scoped variables that can be reassigned.
It is safer than var for changing values.
let count =
1;
count =
2;
console.log(count);const creates block-scoped variables that cannot be
reassigned. Use it by default for values that should not change.
const appName =
"Dashboard";
console.log(appName);let and const are
available only inside the nearest block.
if (true) {
const message =
"Inside block";
console.log(message);
}this from the surrounding scope.
const add =
(a, b) => a + b;
console.log(
add(10, 20)
);const name =
"Alice";
const message =
`Welcome ${name}`;
console.log(message);const text =
`Line one
Line two
Line three`;
console.log(text);undefined.
function greet(
name = "Guest"
) {
return "Hello " + name;
}
console.log(
greet()
);function sum(
...numbers
) {
return numbers.reduce(
(total, number) => total + number,
0
);
}
console.log(
sum(1, 2, 3)
);const frontend =
["HTML", "CSS"];
const skills =
[
...frontend,
"JavaScript"
];
console.log(skills);const user =
{
name: "John",
active: true
};
const updatedUser =
{
...user,
active: false
};
console.log(updatedUser);const colors =
["Red", "Green", "Blue"];
const
[
first,
second
]
=
colors;
console.log(first);
console.log(second);const user =
{
name: "Alice",
city: "Dallas"
};
const
{
name,
city
}
=
user;
console.log(name);
console.log(city);const settings =
{
theme: "dark"
};
const
{
theme,
language = "en"
}
=
settings;
console.log(language);function displayUser(
{
name,
role
}
) {
console.log(name);
console.log(role);
}
displayUser(
{
name: "Sarah",
role: "Admin"
}
);const name =
"David";
const role =
"Editor";
const user =
{
name,
role
};
console.log(user);function keyword.
const calculator =
{
add(a, b) {
return a + b;
}
};
console.log(
calculator.add(2, 3)
);const field =
"email";
const user =
{
[field]:
"user@example.com"
};
console.log(user.email);class User {
constructor(name) {
this.name =
name;
}
greet() {
return "Hello " + this.name;
}
}
const user =
new User("Alice");
console.log(
user.greet()
);extends keyword creates child classes.
class User {
login() {
return "Logged in";
}
}
class Admin extends User {
deleteUser() {
return "Deleted user";
}
}
const admin =
new Admin();
console.log(
admin.login()
);super keyword calls the parent class constructor or
parent methods.
class User {
constructor(name) {
this.name =
name;
}
}
class Admin extends User {
constructor(name, role) {
super(name);
this.role =
role;
}
}// math.js
export function add(a, b) {
return a + b;
}
// app.js
import
{
add
}
from "./math.js";// User.js
export default class User {}
// app.js
import User
from "./User.js";export const API_URL =
"/api";
export function formatDate() {
return "Today";
}const promise =
Promise.resolve("Success");
promise.then((value) => {
console.log(value);
});fetch("/api/users")
.then((response) => response.json())
.then((users) => {
console.log(users);
})
.catch((error) => {
console.error(error);
});Map stores key-value pairs and supports any value as a key.
const userMap =
new Map();
userMap.set(
"name",
"Alice"
);
console.log(
userMap.get("name")
);Set stores unique values.
const uniqueTags =
new Set(
["js", "css", "js"]
);
console.log(
uniqueTags
);WeakMap stores object keys weakly and is useful for private
object metadata.
const privateData =
new WeakMap();
const user =
{
name: "Alice"
};
privateData.set(
user,
{
token: "abc"
}
);WeakSet stores weak references to objects only.
const visited =
new WeakSet();
const node =
{
id: 1
};
visited.add(node);
console.log(
visited.has(node)
);Symbol creates unique identifiers.
const id =
Symbol("id");
const user =
{
[id]: 101,
name: "John"
};for...of loop iterates over iterable values.
const skills =
["HTML", "CSS", "JS"];
for (const skill of skills) {
console.log(skill);
}const values =
["A", "B"];
const iterator =
values[Symbol.iterator]();
console.log(
iterator.next()
);yield.
function* numbers() {
yield 1;
yield 2;
yield 3;
}
const generator =
numbers();
console.log(
generator.next()
);const buttons =
document.querySelectorAll("button");
const buttonArray =
Array.from(buttons);
console.log(buttonArray);const values =
Array.of(
1,
2,
3
);
console.log(values);const users =
[
{
id: 1,
name: "Alice"
},
{
id: 2,
name: "Bob"
}
];
const user =
users.find(
(item) => item.id === 2
);
console.log(user);const index =
users.findIndex(
(item) => item.id === 2
);
console.log(index);const message =
"Learn JavaScript";
console.log(
message.includes("Script")
);const file =
"index.html";
console.log(
file.startsWith("index")
);const file =
"style.css";
console.log(
file.endsWith(".css")
);const line =
"-".repeat(10);
console.log(line);const target =
{
active: true
};
const source =
{
role: "Admin"
};
const result =
Object.assign(
target,
source
);
console.log(result);console.log(
Object.is(
NaN,
NaN
)
);NaN.
console.log(
Number.isNaN(NaN)
);
console.log(
Number.isNaN("Hello")
);console.log(
Number.isInteger(10)
);
console.log(
Number.isInteger(10.5)
);console.log(
Number.isFinite(100)
);
console.log(
Number.isFinite(Infinity)
);const value =
Number.parseInt(
"100px",
10
);
console.log(value);const value =
Number.parseFloat(
"10.75"
);
console.log(value);const results =
await Promise.all(
[
fetch("/api/users"),
fetch("/api/products")
]
);
console.log(results);type="module".
<script
type="module"
src="/src/app.js">
</script>let, const, and
block scope make variable handling safer.
Array.from(),
Array.of(), find(), and
findIndex() improve array workflows.
Promise.all() improve
asynchronous JavaScript.
export and import
make JavaScript applications modular and scalable.
const by default.let only when reassignment is needed.var in modern JavaScript.this is required.let, const, and var?Pro Tip
For interviews, group ES6 features by purpose: variables
(let, const), functions (arrow, default, rest),
objects (destructuring, spread, classes), modules
(import, export), collections
(Map, Set), and async work
(Promise, Promise.all()).