Destructuring in JavaScript | Lecture 5

 

Destructuring in JavaScript is a syntax for unpacking values from arrays or properties from objects into distinct variables. This feature simplifies extracting data, making your code cleaner and more readable. Here are examples of destructuring for both arrays and objects:

1. Destructuring Arrays

const fruits = ['apple', 'banana', 'cherry'];

 

// Basic Destructuring

const [first, second] = fruits;

console.log(first); // "apple"

console.log(second); // "banana"

 

// Skipping Elements

const [, , third] = fruits;

console.log(third); // "cherry"

 

// Default Values

const [a, b, c = 'default fruit'] = ['mango', 'pear'];

console.log(c); // "default fruit"

 

// Rest Pattern

const [d, ...rest] = fruits;

console.log(rest); // ["banana", "cherry"]

2. Destructuring Objects

const user = {

  name: 'John',

  age: 30,

  country: 'USA',

};

 

// Basic Destructuring

const { name, age } = user;

console.log(name); // "John"

console.log(age); // 30

 

// Renaming Variables

const { name: userName, country: userCountry } = user;

console.log(userName); // "John"

console.log(userCountry); // "USA"

 

// Default Values

const { city = 'Unknown' } = user;

console.log(city); // "Unknown"

 

// Rest Pattern

const { name: n, ...rest } = user;

console.log(rest); // { age: 30, country: 'USA' }

3. Nested Destructuring

Array Example:

const numbers = [1, [2, 3], 4];

const [one, [two, three]] = numbers;

console.log(two); // 2

console.log(three); // 3

Object Example:

const employee = {

  id: 1,

  details: {

    name: 'Alice',

    department: 'Engineering',

  },

};

 

const {

  details: { name, department },

} = employee;

console.log(name); // "Alice"

console.log(department); // "Engineering"

4. Destructuring in Functions

Parameters:

function greet({ name, age }) {

  console.log(`Hello, ${name}! You are ${age} years old.`);

}

 

const person = { name: 'Sam', age: 25 };

greet(person); // "Hello, Sam! You are 25 years old."

Returning Multiple Values:

function getCoordinates() {

  return { x: 10, y: 20 };

}

 

const { x, y } = getCoordinates();

console.log(x, y); // 10 20

Destructuring is a powerful tool for simplifying code and improving readability, especially when dealing with complex data structures.

 

Comments

Post a Comment

Popular posts from this blog

Classes and Objects in Javascript | Lecture 10

  In JavaScript, classes are templates for creating objects, and objects are instances of classes. Classes encapsulate data and methods to model real-world entities. Declaring a Class A class is defined using the class keyword, and it typically contains: Constructor : A special method for initializing the object. Methods : Functions defined within the class. Example: Creating a Class and an Object class Person {   // Constructor to initialize the object   constructor(name, age) {     this.name = name; // Instance property     this.age = age;   }     // Method   greet() {     return `Hello, my name is ${this.name} and I am ${this.age} years old.`;   } }   // Create an object (instance) of the class const person1 = new Person("John", 30);   // Access properties and methods console.log(person1.name); // Output: John console.log...
Read more

ECMA Script 6 Introduction of topics | Lecture 1

Image
ECMA Script 6 Introduction of topics 1. Let and Const let : Block-scoped variable. const : Block-scoped constant. let x = 10; x = 20; // Allowed   const y = 30; // y = 40; // Error: Assignment to constant variable   2. Arrow Functions Concise syntax for defining functions. // Regular function function add(a, b) {   return a + b; }   // Arrow function const add = (a, b) => a + b;   console.log(add(5, 3)); // Output: 8   3. Template Literals For string interpolation and multiline strings. const name = "John"; const greeting = `Hello, ${name}!`; console.log(greeting); // Output: Hello, John!   const multiline = `This is a multiline string.`; console.log(multiline);   4. Default Parameters Default values for function parameters. function greet(name = "Guest") {   return `Hello, ${name}!`; }   console.log(greet()); // Output: Hello, Guest! console.log(greet(...
Read more