Loading...
+880 1736 699819 Mon - Sat: 9:00 AM - 8:00 PM
Follow us:
Home Blog Article
Blog

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


Tags: Blog
Share this post

Encoderbase Team

Author

Articles and insights from the Encoderbase editorial team covering web development, software engineering, and digital solutions.

Enjoyed this article?

Get more articles like this delivered to your inbox — no spam, unsubscribe any time.

Link copied to clipboard!