Object Destructuring in JavaScript

-

     Object destructuring is a way to break a complex structure into simpler parts. Many times we want to assign pieces of a complex data structure to variables. Before it was tedious to do, but with JS Object Destructuring it is much simpler to do.

Consider the example,

const task = {
  procedure: "addition",
  numbers: {
    a: 25,
    b: 13,
    c: 85,
  },
};

Without destructuring, we need to do something like

function calculate() {
  const a = task.numbers.a;
  const b = task.numbers.b;
  const c = task.numbers.c;
  return a + b + c;
}

Or

function calculate() {
  return task.numbers.a + task.numbers.b + task.numbers.c;
}

It repeats the same code to access the required data from the structure.

Destructure

Now let's see how we would do this the modern way, with object destructuring.

const task = {
  procedure: "addition",
  numbers: {
    a: 25,
    b: 13,
    C: 85,
  },
};
function calculate() {
  const { a, b, c } = task.numbers;
  return a + b + c;
}

Default Values

Another great feature is default values. We don't have to check if some properties exist before destructuring. Just do this.

const task = {
  procedure: "addition",
  numbers: {
    a: 25,
    b: 13,
    c: 85,
  },
};
function calculate() {
  const { a, b, c, d = 0 } = task.numbers;
  return a + b + c + d;
}

Here we give the value 0 to the variable "d" while destructuring.

Changing Names

We can change the name of variables while destructuring

const task = {
  procedure: "addition",
  numbers: {
    a: 1,
    b: 2,
    c: 3,
  },
};
function calculate() {
  const { a: one, b: two, c: three, d: four = 4 } = task.numbers;
  return one + two + three + four;
}

Nested Destructuring

We can even destructure inside a destructure. This can be useful to reduce a bunch of code in more complex situations.

const task = {
  procedure: "addition",
  numbers: {
    a: 25,
    b: 13,
    c: 85,
  },
};
function calculate() {
  const {
    procedure,
    numbers: { a, b, c, d = 0 },
  } = task;
  if (procedure === "addition") return a + b + c + d;
  return null;
}



Comments

Post a Comment

Popular posts from this blog

LeetCode 350: Intersection of Two Arrays II

-
Question:-  Given two integer arrays nums1 and nums2, return an array of their intersection. Each element in the result must appear as many times as it shows in both arrays and you may return the result in any order. Example 1: Input: nums1 = [4,9,5], nums2 = [9,4,9,8,4] Output: [4,9] Explanation: [9,4] is also accepted. Example 2: Input: nums1 = [1,2,2,1], nums2 = [2,2] Output: [2,2] Solution:- class Solution {     public int [] intersect ( int [] nums1 , int [] nums2 ) {         int length1 = nums1 . length ;           int length2 = nums2 . length ;         int [] ans = new int [ length1 * length2 ];         int i = 0 , j = 0 , k = 0 ;         Arrays . sort ( nums1 );         Arrays . sort ( nums2 );         while ( i < length1 && j < length2 ){             if ( nums1 [ i ...
Read more

LeetCode 35: Search Insert Position

-
 Question Given a sorted array of distinct integers and a target value, return the index if the target is found. If not, return the index where it would be if it were inserted in order. You must write an algorithm with  O(log n)  runtime complexity.   Example 1: Input: nums = [1,3,5,6], target = 5 Output: 2 Example 2: Input: nums = [1,3,5,6], target = 2 Output: 1 Example 3: Input: nums = [1,3,5,6], target = 7 Output: 4   Solution 1- Javascript /** * @param {number[]} nums * @param {number} target * @return {number} */ var searchInsert = function ( nums , target ) { let left = 0 ; let right = nums . length ; while ( left < right ) { const middle = Math . floor (( left + right ) / 2 ); if ( nums [ middle ] < target ) { left = middle + 1 ; } else { right = middle ; } } return left ; };
Read more

LeetCode 217: Contains Duplicate

-
  Question Given an integer array nums, return true if any value appears at least twice in the array, and return false if every element is distinct. Example 1: Input: nums = [1,2,3,1] Output: true Example 2: Input: nums = [1,2,3,4] Output: false Example 3: Input: nums = [1,1,1,3,3,4,3,2,4,2] Output: true Solutions 1) Go func containsDuplicate ( nums [] int ) bool {     dict := make ( map [ int ] int )     for _ , num := range nums {         dict [ num ]= dict [ num ]+ 1         if ( dict [ num ]> 1 ){             return true ;         }             }     return false } 2) Javascript function containsDuplicate ( nums ) {   const temp = new Set ( nums );   return !( nums . length === temp . size ); }
Read more