DekGenius.com
JAVASCRIPT
object destructuring javascript
// destructuring object & nested object & combine object into single object
let user = {
name: 'Mike',
friend: ["John", "Paul", "Jimmy"],
location: {
region:"England",
country:"United Kingdom"
},
aboutMe: {
status: "Single",
pet: "Dog",
}
}
const { name, friend, location, aboutMe: {status , pet} } = user;
console.log(name); // output: "Mike"
console.log(friend); // output: [ 'John', 'Paul', 'Jimmy' ]
console.log(location); // output: { region: 'England', country: 'United Kingdom' }
console.log(status); // output: "Single"
console.log(pet); // output: "Dog"
//Combining Obj
const newUser = {
...user,
car: {
make: "Buick",
year: 2012,
}
}
console.log(newUser)
// output user obj + car object into one
// {
// name: 'Mike',
// friend: [ 'John', 'Paul', 'Jimmy' ],
// location: { region: 'England', country: 'United Kingdom' },
// aboutMe: { status: 'Single', pet: 'Dog' },
// car: { make: 'Buick', year: 2012 }
// }
//Bonus destructuring from object of array
const {friend: [a, ...b]} = user
console.log(a) // output: "John"
console.log(b) // output: ["Paul", "Jimmy"]
javascript object destructuring
//simple example with object------------------------------
let obj = {name: 'Max', age: 22, address: 'Delhi'};
const {name, age} = obj;
console.log(name);
//expected output: "Max"
console.log(age);
//expected output: 22
console.log(address);
//expected output: Uncaught ReferenceError: address is not defined
// simple example with array-------------------------------
let a, b, rest;
[a, b] = [10, 20];
console.log(a);
// expected output: 10
console.log(b);
// expected output: 20
[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(rest);
// expected output: Array [30,40,50]
js object destructuring
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
name; // => 'Batman',
realName; // => 'Bruce Wayne'
object destructuring
const book = {
title: 'Ego is the Enemy',
author: 'Ryan Holiday',
publisher: {
name: 'Penguin',
type: 'private'
}
};
const {title: bookName = 'Ego', author, name: {publisher: { name }} = book, type: {publisher: { type }} = book } = book;
javascript object destructing
const employee = {name: ‘ANE01’, email: ‘Anna@example.com’, phone:’0112–345–6789'};
//with destucturing
const {name, email, phone} = employee;
//without destucturing
const name = employee.name;
const email = employee.email;
const phone = employee.phone;
destructuring objects
({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20
// Stage 4(finished) proposal
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}
javascript deconstruct object
const objA = {
prop1: 'foo',
prop2: {
prop2a: 'bar',
prop2b: 'baz',
},
};
// Deconstruct nested props
const { prop1, prop2: { prop2a, prop2b } } = objA;
console.log(prop1); // 'foo'
console.log(prop2a); // 'bar'
console.log(prop2b); // 'baz'
object destructuring into this
const demo = { nextUrl: 'nextUrl', posts: 'posts' };
const target = {}; // replace target with this
({ nextUrl: target.nextUrl, posts: target.communityPosts } = demo);
console.log(target);
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 an object js
const user = { id: 42, isVerified: true }
// grabs the property by name in the object, ignores the order
const { isVerified, id } = user;
console.log(isVerified);
// > true
Object destructuring
Object Destructuring =>
//
The destructuring assignment syntax is a JavaScript expression that makes it
possible to unpack values from arrays,
or properties from objects, into distinct variables.
//
example:
const user = {
id: 42,
is_verified: true
};
const {id, is_verified} = user;
console.log(id); // 42
console.log(is_verified); // true
javascript destructuring
const [a, b] = array;
const [a, , b] = array;
const [a = aDefault, b] = array;
const [a, b, ...rest] = array;
const [a, , b, ...rest] = array;
const [a, b, ...{ pop, push }] = array;
const [a, b, ...[c, d]] = array;
const { a, b } = obj;
const { a: a1, b: b1 } = obj;
const { a: a1 = aDefault, b = bDefault } = obj;
const { a, b, ...rest } = obj;
const { a: a1, b: b1, ...rest } = obj;
let a, b, a1, b1, c, d, rest, pop, push;
[a, b] = array;
[a, , b] = array;
[a = aDefault, b] = array;
[a, b, ...rest] = array;
[a, , b, ...rest] = array;
[a, b, ...{ pop, push }] = array;
[a, b, ...[c, d]] = array;
({ a, b } = obj); // brackets are required
({ a: a1, b: b1 } = obj);
({ a: a1 = aDefault, b = bDefault } = obj);
({ a, b, ...rest } = obj);
({ a: a1, b: b1, ...rest } = obj);
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)
destructured object
let renseignement = ['voleur' , '10' , 'spécialité'] ;
let [classe , force, magie] = renseignement ;
console.log(classe) ;
console.log(force) ;
console.log(magie) ;
mdn destructuring
const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log(y); // 1
console.log(z); // 2
destructuring object
const obj = {
name: "Fred",
age: 42,
id: 1
}
//simple destructuring
const { name } = obj;
console.log("name", name);
//assigning multiple variables at one time
const { age, id } = obj;
console.log("age", age);
console.log("id", id);
//using different names for the properties
const { name: personName } = obj;
console.log("personName", personName);
Run code snippet
javascript function destructuring
// destructuring assignment when passing
// an object of properties to a function
function example({userOptions: {query, all = true, sort} = {}, array}) {
console.log(query, all, sort) // something false ascending
}
// for clarity, the above example is destructured the same as this
function example({userOptions, array}){
const {query, all = true, sort} = userOptions || {}
}
const userOptions = {query: 'something', all: false, sort: 'ascending'}
const array = []
example({userOptions, array})
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);
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
object destructuring
let a, b, rest;
[a, b] = [10, 20];
console.log(a);
// expected output: 10
console.log(b);
// expected output: 20
[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(rest);
// expected output: Array [30,40,50]
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 example
const hero = {
name: 'Batman',
realName: 'Bruce Wayne',
address: {
city: 'Gotham'
}
};
// Object destructuring:
const { realName, address: { city } } = hero;
city; // => 'Gotham'
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 in javascript
/*
Array Destructuring: The following example shows us how to convert all
the elements of an array to a variable.
Object Destructuring: The following example shows us how to convert all
the properties of an object into a variable.
*/
//Array Destructuring
const friends = ['Bill', 'Gates'];
const [firstName, secondName] = friends;
console.log(secondName); //Gates
//Object Destructuring
const person = {name: "Bill Gates", age: 17, phone: "123456789"};
const {name} = person;
console.log(name); //Bill Gates
JavaScript Destructuring
// before you would do something like this
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 js
console.log('Hello World') // Hello World
const {log} = console;
log('Hello World') // Hello World
js object destructuring with defaults
// Taken from top stack overflow answer
const { dogName = 'snickers' } = { dogName: undefined }
console.log(dogName) // what will it be? 'snickers'!
const { dogName = 'snickers' } = { dogName: null }
console.log(dogName) // what will it be? null!
const { dogName = 'snickers' } = { dogName: false }
console.log(dogName) // what will it be? false!
const { dogName = 'snickers' } = { dogName: 0 }
console.log(dogName) // what will it be? 0!
js object destructuring
const { [propName]: identifier } = expression;
how to use object destructuring
// Noob [ not good ]
function getFullName(userObj) {
const firstName = userObj.firstName;
const lastName = userObj.lastName;
return `${firstName} ${lastName}`;
}
// master [ yap little bit ]
function getFullName(userObj) {
const { firstName, lastName } = userObj;
return `${firstName} ${lastName}`;
}
// hacker [ i prefer this way ]
function getFullName({ firstName, lastName }) {
return `${firstName} ${lastName}`;
}
// example func call
getFullName({
firstName: 'John',
lastName: 'Duo'
});
destructuring an array
let cars = ['ferrari', 'tesla', 'cadillac'];
let [car1, car2, car3] = cars;
console.log(car1, car2, car3); // Prints: ferrari tesla cadillac
js-destructuring
const getTemperature = ({ celsius = 15 } = {}) => celsius;
Destructuring in ES6
javascript function destructuring
function f() {
return [1, 2];
}
let a, b;
[a, b] = f();
console.log(a); // 1
console.log(b); // 2
mdn destructuring
let a, b;
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
destructuring javascript
let a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20
[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]
({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20
// Stage 4(finished) proposal
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}
destructure to object
({x: oof.x, y: oof.y} = foo);
destructuring an object in JS
let person = {
firstName: 'John',
lastName: 'Doe'
};
Code language: JavaScript (javascript)
javascript object destructuring
// In this syntax:
let { property1: variable1, property2: variable2 } = object;
// The identifier before the colon (:) is the property of the object and the identifier after the colon is the variable.
js destructuring
/*simple example*/
const [name, age] = ["malek","25"];
Accessing Properties in JavaScript Objects using Destructuring
const myObject = {title: 'My Title', name: 'My Name'};
const {title, name} = myObject;
console.log(name); // "My Name"
console.log(title); // "My Title"
object destructuring ES6
let person = {
name: 'John',
age: 21,
gender: 'male'
}
let { name : name1, age: age1, gender:gender1 } = person;
console.log(name1, age1, gender1);
js-destructuring
const getTemperature = (atticData) => atticData?.celsius ?? 15;
// insted do
const getTemperature = ({ celsius = 15 } = {}) => celsius;
// https://realworldjs.medium.com/never-use-the-dot-operator-in-javascript-ee0339d85fb
object destructuring in javascript
const hero = {
name: 'Batman'
};
// Object destructuring:
const { name: heroName } = hero;
heroName; // => 'Batman'
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
array destructuring in js
const arr = [1, 2, 3, 4];
const [first, second] = arr; // first = 1, second = 2
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
js destructuring explained
const { identifier } = expression;
Destructuring in javascript
const { name, age, job } = { name: 'abrar', age: 24, job: 'web-developer' }
console.log(name, age, job)
object destructuring
const user = {
name: "Jenny",
age: "12",
hobbies: ["Sport", "Programmieren", "essen"],
};
const { age } = user;
console.log(age);
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);
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
© 2022 Copyright:
DekGenius.com