JavaScript: Part 3 - Modern JavaScript (ES6+)

Welcome to Part 3!

Up until 2015, JavaScript hadn’t changed much for years. Then came ES6 (ECMAScript 2015), a massive update that made the language cleaner, faster, and smarter.

In this section, we are dumping the “old ways” and learning the syntax used by professional developers at companies like Google, Netflix, and Meta.

---

Module 10: The Syntax Upgrades

Let’s look at how we can write less code to do more work.

10.1 Arrow Functions (=>)

s Arrow functions are a shorter, cleaner way to write functions.

The Old Way:

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

The Modern Way:

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

// If you have one line, you can remove the {} and 'return' keyword!
const addShort = (a, b) => a + b; 

10.2 Template Literals

Say goodbye to the + sign for combining strings. We now use backticks (`) and the ${} placeholder.

const name = "Owais";
const age = 21;

// Old Way
console.log("My name is " + name + " and I am " + age);

// Modern Way
console.log(`My name is ${name} and I am ${age}`);

10.3 Destructuring (Unpacking Data)

Destructuring allows you to pull values out of arrays or objects and assign them to variables in a single line.

Object Destructuring:

const user = { 
  firstName: "Mohd", 
  role: "Developer", 
  city: "Bhopal" 
};

// This creates 3 new variables automatically
const { firstName, role, city } = user;

console.log(firstName); // Prints: Mohd

Array Destructuring:

const colors = ["Red", "Blue", "Green"];

// Unpacks based on position
const [first, second] = colors;

console.log(first); // Prints: Red

10.4 Spread (...) vs. Rest (...)

These look identical (three dots ...), but they do opposite things depending on where you use them.

1. Spread (Expands): Takes an array and “spreads” it out into individual items. Great for copying or merging lists.

const fruits = ["Apple", "Banana"];
const veggies = ["Carrot", "Potato"];

const food = [...fruits, ...veggies]; 
// Result: ["Apple", "Banana", "Carrot", "Potato"]

2. Rest (Gathers): Takes individual items and “bundles” them into an array. Great for functions with unknown numbers of arguments.

// The '...args' collects all arguments into an array called 'args'
function sumAll(...args) {
  let total = 0;
  for (let num of args) total += num;
  return total;
}

console.log(sumAll(1, 2, 3, 4)); // Prints: 10

---

Module 11: Modern Array Methods

Stop using for loops for data manipulation. These methods are the “bread and butter” of modern JS, especially in React.

11.1 .map() (Transform)

Use this when you want to change every item in a list and get a new array back.

const numbers = [2, 4, 6];

// Multiply every number by 10
const bigNumbers = numbers.map(num => num * 10);

console.log(bigNumbers); // [20, 40, 60]

11.2 .filter() (Select)

Use this when you want to filter out items that don’t match a condition.

const ages = [12, 18, 25, 10, 40];

// Keep only adults (>= 18)
const adults = ages.filter(age => age >= 18);

console.log(adults); // [18, 25, 40]

11.3 .reduce() (Accumulate)

This is the trickiest one! It takes a list and “reduces” it down to a single value (like a total sum).

It takes two arguments: an accumulator (the running total) and the current item.

const prices = [10, 20, 30];

const total = prices.reduce((total, currentPrice) => {
  return total + currentPrice;
}, 0); // 0 is the starting value

console.log(total); // Prints: 60

---

Module 12: Modules (Import & Export)

As your project grows, you can’t put 1000 lines of code in one file. Modules let you split your code into separate files.

12.1 The Setup

To use modules in an HTML file, you must add type="module":

<script type="module" src="main.js"></script>

12.2 Named Export

Use this when you want to export multiple things from a file.

math.js

export const add = (a, b) => a + b;
export const pi = 3.14;

main.js

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

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

12.3 Default Export

Use this when a file only has one main thing to export.

user.js

const user = { name: "Owais", age: 21 };
export default user;

main.js (You can name the import whatever you want!)

import myUser from './user.js';

console.log(myUser.name);

---

Part 3 Summary

• Arrow Functions: Shorter syntax for functions.
• Destructuring: Easy extraction of data from arrays/objects.
• Spread/Rest: Expanding arrays or gathering arguments with ....
• .map(): Transform arrays.
• .filter(): Select specific items.
• .reduce(): Calculate a single value from a list.
• Modules: Organize code into multiple files using import and export.

Next Up: In Part 4, we dive into the world of APIs and Asynchronous JavaScript!