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)

mdn destructuring

const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log(y); // 1
console.log(z); // 2

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);

js destructuring

let [person, age] = ['John', 26]
let msg = `${person} is ${age} years old`
console.log(msg)

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

mdn destructuring

let a, b;

[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

js destructuring explained

const { identifier } = expression;

array destructuring mdn

eslint use array destructuring

array destructuring in js

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

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"

js destructuring

/*simple example*/
const [name, age] = ["malek","25"];

js destructuring

function calculatefood (food, tip) {
    tip_percent = tip / 100;
    tip_amount = food * tip_percent;
    total = food + tip_amount;
    return [tip_amount, total];
}
const [tip, sum] = calculatefood(100, 20);
console.log(tip);
console.log(sum);