📘 Blog 5: ES6 Features: let, const, Arrow Functions, and More

ES6, or ECMAScript 2015, marked a major evolution of JavaScript. It introduced a variety of features that enhanced syntax clarity, improved code organization, and empowered developers to write more efficient, readable, and powerful JavaScript.

In this detailed blog, we’ll explore key ES6 features including let and const, arrow functions, template literals, destructuring, default parameters, the spread/rest operators, for...of loops, Map and Set, and more.

1. What is ES6?

ES6 (ECMAScript 2015) is the 6th version of the ECMAScript standard. Before ES6, JavaScript lacked many features commonly found in other programming languages. ES6 brought modern syntax and constructs, making JavaScript a more powerful and maintainable language.

2. `let` and `const` — Modern Variable Declarations

Before ES6: `var`

var name = "Alice";

Function-scoped
Can be re-declared and updated
Hoisted (but initialized as undefined)

ES6: `let`

let age = 25;

age = 26; // Valid

Block-scoped
Cannot be re-declared in the same block
Useful for variables that change value

ES6: `const`

const PI = 3.14;

// PI = 3.15; ❌ Error

Block-scoped
Must be initialized
Cannot be reassigned (but object properties can change)

Example:

const user = { name: "John" };

user.name = "Doe"; // ✅ Allowed

3. Arrow Functions

Arrow functions provide a concise syntax and preserve the this value from the enclosing context.

Traditional Function:

function add(x, y) {

  return x + y;

Arrow Function:

const add = (x, y) => x + y;

Key Features:

Shorter syntax
Implicit return for single expressions
Lexical this binding

When to Use Arrow Functions:

Arrow functions are ideal for:

Callbacks
Functional array operations (map, filter, reduce)
Keeping this context (like inside setTimeout or methods)

Caution: Avoid using arrow functions for object methods if you need this to refer to the object.

4. Template Literals

Before ES6:

var greeting = "Hello, " + name + "!";

With ES6 Template Literals:

let greeting = `Hello, ${name}!`;

Features:

Multiline strings
Interpolation of variables and expressions
Easier readability

let total = 10;

let tax = 2;

let message = `The total is ${total + tax} dollars.`;

5. Default Parameters

ES6 allows default values for function parameters:

function greet(name = "Guest") {

  return `Hello, ${name}`;

greet(); // "Hello, Guest"

6. Destructuring Assignment

Arrays:

const [a, b] = [1, 2];

Objects:

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

const { name, age } = user;

Renaming Variables:

const { name: userName } = user;

Nested Destructuring:

const person = {

  name: "Bob",

  address: {

    city: "New York",

    zip: 10001,

},

};

const {

  address: { city },

} = person; // city = "New York"

7. Spread and Rest Operators

Spread Operator (`...`)

Unpacks elements from arrays/objects.

const arr = [1, 2, 3];

const newArr = [...arr, 4, 5]; // [1,2,3,4,5]

const obj1 = { a: 1 };

const obj2 = { ...obj1, b: 2 }; // {a:1, b:2}

Rest Operator (`...`)

Collects items into an array.

function sum(...nums) {

  return nums.reduce((total, num) => total + num, 0);

sum(1, 2, 3, 4); // 10

8. Enhanced Object Literals

ES6 allows more concise object syntax.

Before:

let name = "Tom";

let user = { name: name };

ES6:

let user = { name };

Method Definition:

const person = {

  greet() {

    console.log("Hi!");

},

};

9. `for...of` Loop

Used for iterating over iterable objects like arrays, strings, Maps, and Sets.

let fruits = ["apple", "banana", "cherry"];

for (let fruit of fruits) {

  console.log(fruit);

vs. for...in:

for...of → values
for...in → keys

10. `Map` and `Set`

Map

A collection of key-value pairs.

let map = new Map();

map.set("a", 1);

map.set("b", 2);

console.log(map.get("a")); // 1

Set

A collection of unique values.

let set = new Set([1, 2, 2, 3]);

console.log(set); // Set(3) {1, 2, 3}

11. Classes

ES6 introduced class syntax (syntactic sugar over prototypes):

class Animal {

  constructor(name) {

    this.name = name;

  speak() {

    console.log(`${this.name} makes a noise.`);

class Dog extends Animal {

  speak() {

    console.log(`${this.name} barks.`);

const dog = new Dog("Rex");

dog.speak(); // Rex barks.

12. Promises (Intro)

Promises simplify asynchronous programming.

const fetchData = new Promise((resolve, reject) => {

  setTimeout(() => resolve("Data loaded"), 1000);

});

fetchData.then(data => console.log(data));

13. Modules (Import/Export)

// file: math.js

export function add(x, y) {

  return x + y;

// file: main.js

import { add } from './math.js';

console.log(add(2, 3)); // 5

Use modules with modern bundlers or <script type="module"> in browsers.

14. Practice Project Snippet

Let’s combine a few ES6 features:

const users = [

  { name: "Alice", age: 21 },

  { name: "Bob", age: 30 },

];

const names = users.map(({ name }) => name.toUpperCase());

console.log(names); // ["ALICE", "BOB"]

15. Summary of Key Differences

Feature	`var`	`let`	`const`
Scope	Function	Block	Block
Re-declarable	Yes	No	No
Re-assignable	Yes	Yes	No
Hoisting	Yes (undefined)	Yes (TDZ)	Yes (TDZ)

Conclusion

ES6 revolutionized how JavaScript is written and organized. By mastering its features—like let, const, arrow functions, template literals, and destructuring—you’re preparing yourself to write cleaner, modern, and more maintainable code.

In the next blog, we’ll explore Asynchronous JavaScript, including callbacks, promises, and async/await, which are essential for working with APIs, timers, and dynamic content loading.