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}

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

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

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

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

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

destructuring

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

// without destructuring
var one   = foo[0];
var two   = foo[1];
var three = foo[2];

// with destructuring
var [one, two, three] = foo;

js destructuring

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

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

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

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!

destructuring js

console.log('Hello World') // Hello World

const {log} = console;
log('Hello World') // Hello World

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

js-destructuring

const getTemperature = ({ celsius = 15 } = {}) => celsius;

Destructuring in ES6

let {a, b, c} = obj

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

object destructuring ES6

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

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

console.log(name1, age1, gender1);

destructuring

const doggie = {
  name: 'Buzz',
  breed: 'Great Pyrenees',
  furColor: 'black and white',
  activityLevel: 'sloth-like',
  favoriteFoods: {
    meats:{
      ham: 'smoked',
      hotDog: 'Oscar Meyer',
    },
    cheeses:{
      american: 'kraft'
    }
  }
};

const { ham, hotDog } = doggie.favoriteFoods.meats;
ham; // => "smoked"
hotDog; // => "Oscar Meyer"

destructuring an object in JS

let person = {
    firstName: 'John',
    lastName: 'Doe'
};
Code language: JavaScript (javascript)

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"

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

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.

object destructuring in javascript

const hero = {
  name: 'Batman'
};
// Object destructuring:
const { name: heroName } = hero;
heroName; // => 'Batman'

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

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

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