ES6 JavaScript Tutorial for Beginners

ES6 JavaScript Tutorial for Beginners

let and const

Before ES6, we used var. Now we use:

let

  • Can be changed (reassigned)
  • Block scoped
let age = 25;
age = 30; 

const

  • Cannot be reassigned
  • Block scoped
const name = "Milon";
name = "Hasan";

 Note: Objects declared with const can still be modified.

const user = { name: "Milon" };
user.name = "Hasan";

Arrow Functions (=>)

Shorter way to write functions.

Normal Function

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

Arrow Function

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

Short Version

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

Single Parameter

const square = x => x * x;

Template Literals ( )

Use backticks instead of quotes.

const name = "Milon";
const message = `Hello, ${name}! Welcome.`;

console.log(message);

Multi-line strings:

const text = `
This is line 1
This is line 2
`;

Destructuring Assignment

Extract values from arrays or objects easily.

Array Destructuring

const numbers = [10, 20, 30];

const [a, b, c] = numbers;

console.log(a); // 10

Object Destructuring

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

const { name, age } = user;

Default Parameters

Set default value if no argument is passed.

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

console.log(greet()); // Hello Guest

Spread Operator (...)

Used to copy or merge arrays/objects.

Copy Array

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

console.log(arr2);

Merge Arrays

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

const result = [...a, ...b];

Copy Object

const user = { name: "Milon" };
const newUser = { ...user, age: 25 };

Rest Operator (...)

Collect multiple values into an array.

const sum = (...numbers) => {
  return numbers.reduce((total, num) => total + num, 0);
};

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

Classes

ES6 introduced classes (OOP style).

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    return `Hi, I am ${this.name}`;
  }
}

const person1 = new Person("Milon", 25);
console.log(person1.greet());

Inheritance

class Student extends Person {
  constructor(name, age, subject) {
    super(name, age);
    this.subject = subject;
  }
}

Promises

Handle asynchronous operations.

const myPromise = new Promise((resolve, reject) => {
  let success = true;

  if (success) {
    resolve("Success!");
  } else {
    reject("Error!");
  }
});

myPromise
  .then(result => console.log(result))
  .catch(error => console.log(error));

Modules (Import / Export)

Split code into multiple files.

Export (file1.js)

export const name = "Milon";

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

Import (file2.js)

import { name, add } from './file1.js';

console.log(name);

New Data Structures

ES6 introduced new built-in structures.

Set (Unique Values)

const numbers = new Set([1, 2, 2, 3]);

console.log(numbers); // 1,2,3

Map (Key-Value Pairs)

const user = new Map();

user.set("name", "Milon");
user.set("age", 25);

console.log(user.get("name