7. ES6+ Features

ES6 (ECMAScript 2015) introduced many modern JavaScript features.

These features make code:

• Cleaner
• Shorter
• Easier to maintain
• More readable

Modern React and frontend development heavily use ES6+ concepts.

---

Topics Covered

• let and const
• Arrow Functions
• Template Literals
• Destructuring
• Spread Operator
• Rest Operator
• Default Parameters
• Modules
• Optional Chaining
• Nullish Coalescing
• Enhanced Object Literals

---

1. let and const

Introduced in ES6 as better alternatives to var.

---

let

Used when value may change later.

---

Example

let age = 25;

age = 26;

console.log(age);

---

const

Used when value should not be reassigned.

---

Example

const name = "Dipak";

console.log(name);

---

Important Difference

Feature	let	const
Reassignment	Yes	No
Scope	Block	Block
Redeclare	No	No

---

Block Scope Example

{
  let a = 10;
  const b = 20;
}

console.log(a); // Error
console.log(b); // Error

Variables exist only inside block.

---

2. Arrow Functions (VERY IMPORTANT)

Short syntax for writing functions.

---

Normal Function

function add(a, b) {
  return a + b;
}

---

Arrow Function

const add = (a, b) => {
  return a + b;
};

---

Short Syntax

const add = (a, b) => a + b;

If only one line exists, return is automatic.

---

Example

const square = (num) => num * num;

console.log(square(5));

---

Important Points

• Short syntax
• No own this
• Cannot be constructor
• Common in React

---

3. Template Literals (VERY IMPORTANT)

Used for string interpolation.

Uses backticks ` instead of quotes.

---

Old Way

const name = "Dipak";

console.log("Hello " + name);

---

ES6 Template Literal

const name = "Dipak";

console.log(`Hello ${name}`);

---

Benefits

• Cleaner syntax
• Multi-line strings
• Variable embedding

---

Multi-Line String

const text = `
Hello
World
`;

---

4. Destructuring (VERY IMPORTANT)

Extract values from objects or arrays into variables.

---

Object Destructuring

const user = {
  name: "Dipak",
  age: 25,
};

const { name, age } = user;

console.log(name);

---

Array Destructuring

const colors = ["red", "blue"];

const [first, second] = colors;

console.log(first);

---

Benefits

• Cleaner code
• Shorter syntax
• Used heavily in React props/state

---

5. Spread Operator (...) (VERY IMPORTANT)

Spread operator expands values.

---

Array Example

const arr1 = [1, 2];

const arr2 = [...arr1, 3];

console.log(arr2);

---

Output

[1, 2, 3];

---

Object Example

const user = {
  name: "Dipak",
};

const updatedUser = {
  ...user,
  age: 25,
};

console.log(updatedUser);

---

Common Uses

• Copy arrays
• Copy objects
• Merge arrays
• Merge objects

---

6. Rest Operator (...)

Rest operator collects multiple values into array.

---

Example

function sum(...nums) {
  return nums;
}

console.log(sum(1, 2, 3));

---

Output

[1, 2, 3];

---

Difference Between Spread and Rest

Spread	Rest
Expands values	Collects values
Used while copying	Used in parameters
Array → individual values	Values → array

---

7. Default Parameters

Allows default values in functions.

---

Example

function greet(name = "Guest") {
  console.log(`Hello ${name}`);
}

greet();

---

Output

Hello Guest

---

8. Modules (VERY IMPORTANT)

Modules help split code into separate files.

Makes code organized and reusable.

---

Export

export const name = "Dipak";

---

Import

import { name } from "./file.js";

---

Default Export

Export

export default function greet() {
  console.log("Hello");
}

---

Import

import greet from "./file.js";

---

Why Modules are Important

• Better organization
• Reusable code
• Used heavily in React projects

---

9. Optional Chaining (?.) (VERY IMPORTANT)

Safely accesses nested properties.

Prevents errors if property does not exist.

---

Without Optional Chaining

console.log(user.address.city);

If address is undefined → Error.

---

With Optional Chaining

console.log(user?.address?.city);

---

Example

const user = {
  name: "Dipak",
};

console.log(user?.address?.city);

---

Output

undefined;

---

Benefits

• Prevents application crashes
• Cleaner code
• Common in API responses

---

10. Nullish Coalescing (??) (VERY IMPORTANT)

Provides default value only when value is:

• null
• undefined

---

Example

const name = null;

const result = name ?? "Guest";

console.log(result);

---

Output

Guest;

---

Difference Between || and ??

---

Using ||

const value = 0;

console.log(value || 100);

---

Output

100;

Because 0 is falsy.

---

Using ??

const value = 0;

console.log(value ?? 100);

---

Output

0;

Because ?? checks only:

• null
• undefined

---

11. Enhanced Object Literals

Shorter object syntax in ES6.

---

Old Way

const name = "Dipak";

const user = {
  name: name,
};

---

ES6 Version

const name = "Dipak";

const user = {
  name,
};

---

Method Shorthand

const user = {
  greet() {
    console.log("Hello");
  },
};

---

Important Interview Questions

---

Q1. Difference Between let, const, and var

Feature	var	let	const
Scope	Function	Block	Block
Reassign	Yes	Yes	No
Redeclare	Yes	No	No
Hoisting	Yes	Yes	Yes

---

Q2. What is Optional Chaining?

Optional chaining safely accesses nested properties.

user?.address?.city;

Avoids errors if property is undefined.

---

Q3. What is Nullish Coalescing?

Provides default value only for:

• null
• undefined

const value = data ?? "Default";

---

Q4. Spread vs Rest Operator

Spread

Expands values.

const arr2 = [...arr1];

---

Rest

Collects values.

function test(...nums) {}

---

Q5. Why are Arrow Functions Important?

• Short syntax
• Cleaner code
• Used heavily in React

---

Most Asked ES6 Topics

Focus heavily on:

• Arrow functions
• Destructuring
• Spread operator
• Optional chaining
• Template literals
• Modules
• let and const

---

Best Practices

• Prefer const by default
• Use let only when value changes
• Use template literals for dynamic strings
• Use optional chaining for nested API data
• Use modules for better code organization
• Prefer spread operator over mutation