Getting Started

Table of Content

Table of Content

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
let name = "Alice";
name = "Bob"; // Allowed
  
const age = 30;
age = 31; // Error: Assignment to constant variable
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
if (true) {
  let x = 10;
  console.log(x); // 10
}
console.log(x); // Error: x is not defined
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!
let user = "Alice";
console.log(`Hello, ${user}!`); // Outputs: Hello, Alice!
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);
let message = `This is
a multiline
string.`;
console.log(message);
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
const add = (a, b) => a + b;
console.log(add(5, 3)); // Outputs: 8
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"));
const greet = name => `Hello, ${name}`;
console.log(greet("Alice"));
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
let colors = ["red", "green", "blue"];
let [first, second] = colors;
console.log(first, second); // Outputs: red green
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
let [, , third] = colors;
console.log(third); // Outputs: blue
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
let person = { name: "Alice", age: 25 };
let { name, age } = person;
console.log(name, age); // Outputs: Alice 25
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
let { name: fullName } = person;
console.log(fullName); // Outputs: Alice
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
function sum(...numbers) {
    return numbers.reduce((acc, num) => acc + num, 0);
  }
console.log(sum(1, 2, 3, 4)); // Outputs: 10
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
function greet(name = "Guest") {
  console.log(`Hello, ${name}`);
}
greet(); // Outputs: Hello, Guest
greet("Alice"); // Outputs: Hello, Alice
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;
// math.js
export function add(a, b) {
     return a + b;
}
  
export const PI = 3.14;
// 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
// main.js
import { add, PI } from "./math.js";
console.log(add(2, 3)); // Outputs: 5
console.log(PI); // Outputs: 3.14
// 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();
// message.js
export default function message() {
  console.log("This is a default export");
}
  
// main.js
import msg from "./message.js";
msg();
// 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
let fetchData = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Data loaded"), 2000);
});
  
fetchData.then(result => console.log(result)); // Outputs after 2 seconds: Data loaded
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));
fetchData
  .then(result => console.log(result))
  .catch(error => console.log(error));
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));
async function fetchData() {
  return "Data received";
}
  
fetchData().then(data => console.log(data));
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();
async function fetchUser() {
  let response = await fetch("https://jsonplaceholder.typicode.com/users/1");
  let user = await response.json();
  console.log(user);
}
  
fetchUser();
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.

Still have questions?

Objects and Arrays
Objects and Arrays
Objects and Arrays
Asynchronous JavaScript
Asynchronous JavaScript
Asynchronous JavaScript
On this page

Label