JavaScript, Google Chrome
This is my code example. Why I get the undefined values?
let foo = {name: 'Bob', age: 24};
let {name, age} = foo;
console.log(name); // 'Bob'
console.log(age); // 24
foo = {color: 'red', result: true};
({name, age} = foo);
console.log(name); // "undefined" instead of 'red'
console.log(age); // undefined instead of trueAccording to the MDN docs, destructuring assignment for structures is based on property names. For your second assignment, since your object doesn't have properties name and age, those variables become undefined.
If you want to rename properties when assigning to variables, you can use the following syntax:
foo = {color: 'red', result: true};
({color: name, result: age} = foo);
That will assign the color property of foo to the variable name and the result property to age.
Take a look at how the code is transpiled using babel and it becomes really clear what is happening. Using the babel console
'use strict';
var foo = { name: 'Bob', age: 24 };
var _foo = foo,
name = _foo.name,
age = _foo.age;
console.log(name); // 'Bob'
console.log(age); // 24
foo = { color: 'red', result: true };
var _foo2 = foo;
name = _foo2.name;
age = _foo2.age;
console.log(name); // "undefined" instead of 'red'
console.log(age); // undefined instead of true
