Getting Started

Table of Content

ES6+ Features

ECMAScript 6 (ES6) and later versions introduced powerful features that improve JavaScript readability, maintainability, and efficiency. This section covers the most important additions.

Let and Const (Block-Scoped Variables)

ES6 introduced let and const to replace var.

let allows reassigning values but is block-scoped.
const prevents reassignment and is also block-scoped.

let name = "Alice";
name = "Bob"; // Allowed
  
const age = 30;
age = 31; // Error: Assignment to constant variable

Block Scope Example

if (true) {
  let x = 10;
  console.log(x); // 10
}
console.log(x); // Error: x is not defined

Template Literals (String Interpolation)

Template literals use backticks (`) and allow embedding expressions using ${}.

let user = "Alice";
console.log(`Hello, ${user}!`); // Outputs: Hello, Alice!

Multiline strings are also possible:

let message = `This is
a multiline
string.`;
console.log(message);

Arrow Functions

Arrow functions provide a concise syntax for defining functions.

const add = (a, b) => a + b;
console.log(add(5, 3)); // Outputs: 8

If there’s only one parameter, parentheses can be omitted:

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

Arrow functions do not have their own this binding, which makes them useful in certain contexts like callbacks.

Destructuring Assignment

Destructuring simplifies extracting values from arrays and objects.

Array Destructuring

let colors = ["red", "green", "blue"];
let [first, second] = colors;
console.log(first, second); // Outputs: red green

Skipping elements:

let [, , third] = colors;
console.log(third); // Outputs: blue

Object Destructuring

let person = { name: "Alice", age: 25 };
let { name, age } = person;
console.log(name, age); // Outputs: Alice 25

Renaming variables:

let { name: fullName } = person;
console.log(fullName); // Outputs: Alice

Rest Operator

Used in function parameters to collect multiple arguments.

function sum(...numbers) {
    return numbers.reduce((acc, num) => acc + num, 0);
  }
console.log(sum(1, 2, 3, 4)); // Outputs: 10

Default Parameters

Functions can have default values for parameters.

function greet(name = "Guest") {
  console.log(`Hello, ${name}`);
}
greet(); // Outputs: Hello, Guest
greet("Alice"); // Outputs: Hello, Alice

Modules (Import/Export)

ES6 introduced modules for better code organization.

Exporting a Module

// math.js
export function add(a, b) {
     return a + b;
}
  
export const PI = 3.14;

Importing a Module

// main.js
import { add, PI } from "./math.js";
console.log(add(2, 3)); // Outputs: 5
console.log(PI); // Outputs: 3.14

For default exports:

// message.js
export default function message() {
  console.log("This is a default export");
}
  
// main.js
import msg from "./message.js";
msg();

Promises (Asynchronous JavaScript)

Promises simplify handling asynchronous operations.

let fetchData = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Data loaded"), 2000);
});
  
fetchData.then(result => console.log(result)); // Outputs after 2 seconds: Data loaded

Handling errors:

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

Async/Await

async functions work with await to simplify promises.

async function fetchData() {
  return "Data received";
}
  
fetchData().then(data => console.log(data));

Using await inside an async function:

async function fetchUser() {
  let response = await fetch("https://jsonplaceholder.typicode.com/users/1");
  let user = await response.json();
  console.log(user);
}
  
fetchUser();

Conclusion

ES6+ features improve JavaScript's efficiency, readability, and maintainability. The next section will explore asynchronous JavaScript, covering callbacks, promises, and async/await in detail.

Objects and Arrays

Asynchronous JavaScript

Join our Community Forum

Any other questions? Get in touch