JAVASCRIPT

array destructuring

//Without destructuring

const myArray = ["a", "b", "c"];

const x = myArray[0];
const y = myArray[1];

console.log(x, y); // "a" "b"

//With destructuring

const myArray = ["a", "b", "c"];

const [x, y] = myArray; // That's it !

console.log(x, y); // "a" "b"

How to Destructuring Array in Javascript?

//destructuring array 
const alphabet = ['a', 'b', 'c', 'b', 'e'];
const [a, b] = alphabet;
console.log(a, b);
//Expected output: a b

Array destructuring JS

// In an array destructuring from an array of length N specified on the right-hand side of the assignment, if the number of variables specified on the left-hand side of the assignment is greater than N, only the first N variables are assigned values. The values of the remaining variables will be undefined.

const foo = ['one', 'two'];

const [red, yellow, green, blue] = foo;
console.log(red); // "one"
console.log(yellow); // "two"
console.log(green); // undefined
console.log(blue);  //undefined

Destructuring in ES6

var a = obj.a
var b = obj.b
var c = obj.c

Destructuring of object in ES6

function printBasicInfo({firstName, secondName, profession}) {
	console.log(firstName + ' ' + secondName + ' - ' + profession)
}

var person = {
  firstName: 'John',
  secondName: 'Smith',
  age: 33,
  children: 3,
  profession: 'teacher'
}

printBasicInfo(person)

object destructuring ES6

const person = {
    name: 'John',
    age: 34,
    hobbies: {
        read: true,
        playGames: true
    }
}
 
let {name, hobbies: {read, playGames}} = person;

console.log(person);
console.log(name);
console.log(read,playGames);

Array Destructuring

const foo = ['one', 'two', 'three'];

const [red, yellow, green] = foo;
console.log(red); // "one"
console.log(yellow); // "two"
console.log(green); // "three"

How to destructure arrays and objects in javascript?

// Array to destructure
const arr = ["Wissam", "Fawzi", "Darwich", "Fawaz"];
// First element, second element, and then remaining ones
const [firstName, middleName, ...restOfName] = arr;
console.log(firstName); // Wissam
console.log(middleName); // Fawzi
console.log(restOfName.join(" ")); // Darwich Fawaz

// Object to destructure
const socialMedia = {
  twitter: "@wissam_f",
  facebook: "https://www.facebook.com/wissam.fawaz",
  linkedin: "https://www.linkedin.com/in/wissam-fawaz-6b440839/",
};
// To extract values, property keys should be used
const {twitter, linkedin} = socialMedia;
// Twitter: @wissam_f
console.log("Twitter:", twitter);
// LinkedIn: https://www.linkedin.com/in/wissam-fawaz-6b440839/
console.log("LinkedIn:", linkedin);

Javascript array destructuring

let [a, b] = [9, 5]
[b, a] = [a, b]
console.log(a, b);
//Expected output: 5,9

javascript Array Destructuring

const arrValue = ['one', 'two', 'three'];

// destructuring assignment in arrays
const [x, y, z] = arrValue;

console.log(x); // one
console.log(y); // two
console.log(z); // three

JavaScript Destructuring - From ES6

// assigning object attributes to variables
const person = {
    name: 'Sara',
    age: 25,
    gender: 'female'    
}

// destructuring assignment
let { name, age, gender } = person;

console.log(name); // Sara
console.log(age); // 25
console.log(gender); // female

object destructuring ES6

let person = {
    name: 'John',
    age: 21,
    gender: 'male'
}

let { name, age, gender } = person;

console.log(name, age, gender);

js Destructuring arrays and objects

// 1) Destructure array items
const [first, second,, fourth] = [10, 20, 30, 40];

// 2) Destructure object properties
const { PI, E, SQRT2 } = Math;

Destructuring of array in ES6

function printFirstAndSecondElement([first, second]) {
    console.log('First element is ' + first + ', second is ' + second)
}

function printSecondAndFourthElement([, second, , fourth]) {
    console.log('Second element is ' + second + ', fourth is ' + fourth)
}

var array = [1, 2, 3, 4, 5]

printFirstAndSecondElement(array)
printSecondAndFourthElement(array)

destructuring an array

let cars = ['ferrari', 'tesla', 'cadillac'];
let [car1, car2, car3] = cars;
console.log(car1, car2, car3); // Prints: ferrari tesla cadillac

Destructuring in ES6

let {a, b, c} = obj

js destructuring explained

const { identifier } = expression;

array destructuring mdn

eslint use array destructuring

Destructuring assignment JS

const [firstElement, secondElement] = list;
// is equivalent to:
// const firstElement = list[0];
// const secondElement = list[1];

// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

array destructuring in js

const arr = [1, 2, 3, 4];
const [first, second] = arr; // first = 1, second = 2

js Destructuring arguments

const circle = {
  label: 'circleX',
  radius: 2,
};

const circleArea = ({ radius }, [precision = 2]) =>
  (Math.PI * radius * radius).toFixed(precision);

console.log(
  circleArea(circle, [5]) // 12.56637
);

JavaScript Destructuring - Before ES6

// assigning object attributes to variables
const person = {
    name: 'Sara',
    age: 25,
    gender: 'female'    
}

let name = person.name;
let age = person.age;
let gender = person.gender;

console.log(name); // Sara
console.log(age); // 25
console.log(gender); // female

destructuring array ES6

let a = 8, b = 6;
[a, b] = [b, a];

object destructuring ES6

let person = {
    name: 'John',
    age: 21,
    gender: 'male'
}

let { name : name1, age: age1, gender:gender1 } = person;

console.log(name1, age1, gender1);

Array destructuring

let [name, team] = ["Bob", "100Devs"]

console.log(name)//"Bob"
console.log(team)//"100Devs"

destructuring assignment in javascript

// destructuring assignment in javascript
// object destructuring
let person = { 
    name: "Chetan", 
    age: 30, 
    country: "India" 
};
const { name, age } = person;

console.log(name);
//expected output: "Chetan"

console.log(age);
//expected output: 30

console.log(country);
//expected output: Uncaught ReferenceError: country is not defined

// Array destructuring
const num = [1,2,3];
const [one, two, three] = num;
console.log(one); // 1
console.log(two); // 2
console.log(three); // 3