ES6+ Features Every JavaScript Developer Should Know: let/const, Template Literals, Destructuring, and Spread/Rest Operators

With the introduction of ES6 (ECMAScript 2015) and beyond, JavaScript became more modern, concise, and developer-friendly. These features were game changers that made code easier to read, write, and maintain.

In this post, we’ll explore four essential ES6+ features that every developer must master: let/const, template literals, destructuring, and spread/rest operators.

1. let and const: Block-Scoped Variables

Before ES6, variables were declared using var, which has function scope and comes with some quirks (like hoisting and accidental redeclarations).

ES6 introduced let and const:

javascript
let count = 10;    // value can be reassigned
count = 20;        //  allowed

const PI = 3.1416; // constant, cannot be reassigned
// PI = 3.14; Error

Key differences from var:

• Block scope: let and const are only accessible within the block they are declared in.
• No redeclaration: a variable with the same name cannot be declared twice in the same scope.
• const is immutable in binding, but note that objects/arrays declared with const can still be modified:

javascript
const user = { name: "Alice" };
user.name = "Bob"; // allowed
// user = {} not allowed

2. Template Literals: Easier String Interpolation

Before ES6, concatenating strings with variables was clunky:

javascript
let name = "Alice";
let greeting = "Hello, " + name + "!";

With template literals (backticks)`, string interpolation is much cleaner:


javascript
let name = "Alice";
let greeting =Hello, ${name}!;
console.log(greeting); // Hello, Alice!


Other benefits:

Supports multi-line strings without escape characters.

Can embed expressions directly:


javascript
let a = 5, b = 10;
console.log(The sum of ${a} and ${b} is ${a + b}.);
// The sum of 5 and 10 is 15.


3. Destructuring: Extracting Values with Ease

Destructuring lets you unpack values from arrays or objects into individual variables.

Array Destructuring

`
javascript
const numbers = [1, 2, 3];
const [first, second] = numbers;

console.log(first); // 1
console.log(second); // 2
Object Destructuring
javascript
const user = { name: "Alice", age: 25 };
const { name, age } = user;

console.log(name); // Alice
console.log(age); // 25
`

Renaming and defaults:


javascript
const { name: username, age = 30 } = user;
console.log(username); // Alice
console.log(age); // 25 (default used if missing)


4. Spread and Rest Operators (...)

The ... syntax can be used in two different contexts:

Spread Operator – Expanding Values

Spread is used to copy or expand array/object elements.


javascript
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]


For objects:

`
javascript
const user = { name: "Alice", age: 25 };
const updatedUser = { ...user, age: 26, city: "Paris" };

console.log(updatedUser);
// { name: 'Alice', age: 26, city: 'Paris' }
`
Rest Operator – Collecting Values
Rest is used to group multiple arguments into a single variable.

`
javascript
function sum(...nums) {
return nums.reduce((acc, n) => acc + n, 0);
}

console.log(sum(1, 2, 3, 4)); // 10
`

Also works in destructuring:


javascript
const [first, ...rest] = [10, 20, 30, 40];
console.log(first); // 10
console.log(rest); // [20, 30, 40]


Putting It Together

Here’s a quick example combining all these features:

`
javascript
const users = [
{ name: "Alice", age: 25 },
{ name: "Bob", age: 30 }
];

users.forEach(({ name, age }) => {
console.log(User: ${name}, Age: ${age});
});

const newUser = { name: "Charlie", age: 28 };
const allUsers = [...users, newUser];

console.log(allUsers);
`

Output:


text
User: Alice, Age: 25
User: Bob, Age: 30
[
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 28 }
]


Final Thoughts

ES6+ brought simplicity and elegance to JavaScript with features like:

• let and const → Block-scoped, safer variable declarations.
• Template literals → Cleaner string interpolation with expression support.
• Destructuring → Effortless extraction of values.
• Spread/rest operators → Flexible ways to expand or group values.

Mastering these will make your code more modern, concise, and easier to maintain.

Stay tuned for more insights as you continue your journey into the world of web development!

Check out theYouTubePlaylist for great JavaScript content for basic to advanced topics.

Please Do Subscribe Our YouTube Channel for clearing programming concept and much more ...CodenCloud