JavaScript Intermediate Day 5: ES6+ Features

Goal of this Day

Today you will learn:

• How to write modern JavaScript using ES6+ features
• Arrow functions
• Template literals
• Spread operator (...)

By the end, you will write cleaner and more efficient code.

Step 1: Arrow Functions

Arrow functions are a shorter syntax for functions:

const greet = (name) => `Hello ${name}`;

console.log(greet("John")); // Hello John

Step 2: Template Literals

Template literals allow embedding variables into strings:

const name = "Alice";
console.log(`Hi, my name is ${name}`);

Step 3: Spread Operator

The spread operator can expand arrays or objects:

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

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

Practice

const greet = (name) => `Hello ${name}`;
console.log(greet("John"));

Task

Complete the following:

• Merge two arrays using the spread operator
• Write a function that uses template literals to return a greeting

Example:

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

// Template literal function
const welcome = (name, age) => `Hello ${name}, you are ${age} years old`;
console.log(welcome("Alex", 18));