JavaScript ES6 Features

# JavaScript ES6 Features

If you look at JavaScript code written in 2010 and code written today, they almost look like two different languages. This is because of a massive update released in 2015 called ES6 (ECMAScript 2015).

In this chapter, we will consolidate and formally introduce the modern features that transformed JavaScript into the powerful, professional language it is today.

1. Introduction #

JavaScript is standardized by an organization called ECMA International. The official name of the language is ECMAScript. In 2015, they released the 6th edition (ES6), which introduced new syntax, block-scoping, and cleaner ways to write complex logic.

Almost all modern libraries and frameworks (React, Vue, Node.js) rely heavily on ES6 syntax. If you want to get hired, you must write ES6 code.

2. Learning Objectives #

By the end of this chapter, you will be able to:

• Explain why let and const replaced var.

• Confidently use Template Literals for string formatting.

• Implement Default Parameters in functions.

• Understand the basics of Arrow Functions, Destructuring, and Spread (which we will cover deeper in subsequent chapters).

• Build a Modern Profile App using only ES6 syntax.

3. let and const (Block Scoping) #

We covered this in Chapter 9, but it is the most fundamental ES6 feature. Before ES6, var was the only way to declare variables, and it lacked block scope. This caused variables to "leak" out of if statements and for loops, creating massive bugs.

• const: Used for values that should never be reassigned. (Use this 90% of the time).

• let: Used for values that will change (like a counter in a loop).

4. Template Literals (Backticks) #

Before ES6, combining strings and variables required messy concatenation using the + operator. ES6 introduced Backticks (` `), allowing for string interpolation using ${}.

Before ES6, if a user didn't pass an argument to a function, you had to write extra if statements to handle the undefined value. ES6 allows you to set default values directly in the function definition.

Example 1: The var bug vs let` fix #

// Example JavaScript
// OLD WAY (var)
for (var i = 0; i < 3; i++) {
    // looping
}
console.log(i); // Output: 3 (The variable leaked out of the loop!)

// NEW WAY (let)
for (let j = 0; j < 3; j++) {
    // looping
}
// console.log(j); // ERROR: j is not defined (Safely trapped inside the loop)

Example 2: String Concatenation vs Template Literals #

// Example JavaScript
const user = "Alex";
const item = "Coffee";
const price = 4.50;

// Old ES5 Way
console.log(user + " bought " + item + " for $" + price + ".");

// Modern ES6 Way
console.log(`${user} bought ${item} for $${price}.`);

*Note: It is much easier to read, and you don't have to worry about missing spaces!*

Example 3: Multi-line Strings #

Before ES6, creating a multi-line string required the \n character. With Template Literals, you just press Enter.

// Example JavaScript
// Old ES5 Way
const poemOld = "Roses are red\n" + 
                "Violets are blue";

// Modern ES6 Way
const poemNew = `Roses are red
Violets are blue
ES6 is awesome
And so are you`;

Example 4: Default Parameters #

// Example JavaScript
// Old ES5 Way
function greetES5(name) {
    if (name === undefined) {
        name = "Guest";
    }
    console.log("Hello " + name);
}

// Modern ES6 Way
function greetES6(name = "Guest") {
    console.log(`Hello ${name}`);
}

greetES6("Sarah"); // Output: Hello Sarah
greetES6();        // Output: Hello Guest

Example 5: Arrow Functions (Preview) #

ES6 introduced a shorter syntax for writing functions using the "fat arrow" =>. We will cover this deeply in the next chapter.

// Example JavaScript
// Old ES5 Way
const addOld = function(x, y) {
    return x + y;
};

// Modern ES6 Way
const addNew = (x, y) => x + y;

Example 6: Destructuring (Preview) #

Extracting values from objects and arrays into separate variables was tedious. ES6 made it a one-liner.

// Example JavaScript
const car = { brand: "Ford", model: "Mustang" };

// Old ES5 Way
const oldBrand = car.brand;
const oldModel = car.model;

// Modern ES6 Way
const { brand, model } = car;

Example 7: The Spread Operator (Preview) #

ES6 introduced ... which allows you to "spread" out the contents of an array or object.

// Example JavaScript
const arr1 = [1, 2];
const arr2 = [3, 4];

// Old ES5 Way
const combinedOld = arr1.concat(arr2);

// Modern ES6 Way
const combinedNew = [...arr1, ...arr2]; // Output: [1, 2, 3, 4]

Example 8: Object Property Shorthand #

If the variable name matches the object key name, you don't have to write it twice.

// Example JavaScript
const title = "Developer";
const salary = 90000;

// Old ES5 Way
const jobOld = { title: title, salary: salary };

// Modern ES6 Way
const jobNew = { title, salary }; 

Example 9: For...of Loop #

ES6 introduced the for...of loop specifically for easily looping through Arrays without needing the i++ syntax.

// Example JavaScript
const colors = ["Red", "Blue", "Green"];

// Modern ES6 Way
for (const color of colors) {
    console.log(color);
}

Example 10: Array .includes() #

Technically introduced in ES7 (ES2016), it is considered part of the modern JS ecosystem. It replaces the old, confusing indexOf() !== -1 syntax.

// Example JavaScript
const fruits = ["apple", "banana", "kiwi"];

// Old Way
if (fruits.indexOf("banana") !== -1) { console.log("Found it!"); }

// Modern Way
if (fruits.includes("banana")) { console.log("Found it!"); }

---

7. Common Mistakes for Beginners #

1. 1. Trying to reassign a const Object: You cannot reassign the variable to a entirely new object, but you CAN change the properties *inside* the object.

   const user = { name: "John" };
   user.name = "Doe"; // This is allowed!
   user = { name: "Doe" }; // ERROR! Reassignment of const!
   ```
2. **Using backticks for standard strings unnecessarily:** If a string has no variables inside it, you can just use normal quotes `" "`. Backticks are slightly slower for the browser to process (though unnoticeable).

## 8. Best Practices

- Always use `const` by default. Only switch to `let` if you explicitly need to reassign the value.
- Completely erase `var` from your vocabulary.
- Use Template Literals whenever combining variables with strings.

## 9. Mini Project: Modern Profile App

Let's build a profile card generator utilizing `const`, Template Literals, and Default Parameters.

**HTML:**

html <!-- Example HTML --> <!DOCTYPE html> <html> <head> <style> /* Example CSS */ body { font-family: Arial; padding: 20px; background: #222; color: #fff;} .container { display: flex; gap: 20px; flex-wrap: wrap; } .profile-card { background: #333; padding: 20px; border-radius: 10px; width: 250px; text-align: center; border-top: 4px solid cyan; box-shadow: 0 4px 10px rgba(0,0,0,0.5);} .profile-card h3 { margin: 0; color: cyan; font-size: 24px;} .profile-card p { color: #ccc; } .tag { display: inline-block; background: #555; padding: 5px 10px; border-radius: 15px; font-size: 12px; margin: 2px;} </style> </head> <body> <h2>Developer Directory</h2> <div class="container" id="directory"></div>

<script src="profiles.js"></script> </body> </html>

**profiles.js:**

javascript // Example JavaScript

// Array of Data (Notice we use 'const') const devs = [ { name: "Alice", role: "Frontend", skills: ["React", "CSS"] }, { name: "Bob", role: "Backend", skills: ["Node", "SQL"] }, { name: "Charlie" } // Missing role and skills! ];

// Modern ES6 Function with Default Parameters function createCardHTML(name, role = "Intern", skills = ["Learning"]) { // 1. Map skills array to HTML tags using modern array methods let skillsHTML = ""; for (const skill of skills) { skillsHTML += <span class="tag">${skill}</span>; }

// 2. Return a Template Literal containing the complete HTML structure return <div class="profile-card"> <h3>${name}</h3> <p>${role}</p> <div class="skills-box"> ${skillsHTML} </div> </div> ; }

// Target DOM const directory = document.querySelector("#directory"); let finalHTML = "";

// Loop using for...of for (const dev of devs) { // We pass data into the function. Charlie will rely on Default Parameters. finalHTML += createCardHTML(dev.name, dev.role, dev.skills); }

// Inject directory.innerHTML = finalHTML; ``

1. 1. Rewrite this ES5 string to an ES6 Template Literal: var msg = "Welcome " + name + " to " + city;

1. 2. Write a function calculateArea(width, height) that provides a default value of 10 for both parameters.

1. 3. Write a for...of loop to iterate through an array ['A', 'B', 'C'] and console.log each letter.

Q2: Which operator is used for String Interpolation inside Template Literals? A) &{} B) ${} C) #{} D) +() *Answer: B*

Q3: What happens if you don't pass an argument to a function parameter that has a default value defined? A) The program crashes. B) The parameter becomes undefined. C) The parameter uses the default value. D) The function skips execution. *Answer: C*

Q: Can you update a property inside a const object? Why or why not? *A: Yes. const prevents reassignment of the variable identifier to a completely new value or memory reference. It does not make the object itself immutable. To make the contents of an object fully unchangeable, you must use Object.freeze().*

• let and const provide safe block-scoping.

• Template Literals ( `) make string formatting clean and support multi-line text.

• Default parameters (function(name="Guest")) prevent undefined bugs.

• for...of loops are cleaner than traditional for loops for arrays.