Object Knowledge 2 Flashcards
What is logged to console?
let [apple, orange] = [1, 2];
console.log(apple);
console.log(orange);
1
2
What is alerted?
let [firstName, surname] = “John Smith”.split(‘ ‘);
alert(firstName);
alert(surname);
John
Smith
What is Destructuring assignment?
Does it mutate?
Destructuring assignment is a special syntax that allows us to “unpack” arrays or objects into a bunch of variables, as sometimes that’s more convenient.
No, it does not destruct. Should probably be called “unpacking syntax”.
What is alerted?
let [firstName, , title] = [“Julius”, “Caesar”, “Consul”, “of the Roman Republic”];
alert( title );
// Consul
Unpack this array into separate variables
[1, 2]
let [apple, orange] = [1, 2];
console. log(apple); // 1
console. log(orange); // 2
Unpack only the first and third array items into variables:
[“Julius”, “Caesar”, “Consul”, “of the Roman Republic”]
let [firstName, , title] = [“Julius”, “Caesar”, “Consul”, “of the Roman Republic”];
alert( title );
Destructuring assignment works with any iterable
t or f
let [one, two, three] = new Set([1, 2, 3]);
True
What is alerted?
let user = {};
[user.name, user.surname] = "John Smith".split(' ');
alert(user.name);
alert(user.surname);
// John // Smith
Do a for… of loop over an object (3 ways)
- Operate the for of loop on Object.entries array
- Operator the for of loop on Object.entries array and destruct the entries
- Add an iterator
1.
With Object.entries
let anObject = {
one: 1,
two: 2,
three: 3
}
for (entries of Object.entries(anObject)) {
console.log(entries[0]);
console.log(entries[1]);
}
one
1
two
2
three
3
2.
With Destructuring assignment and Object.entries
let user = {
name: "John",
age: 30
};
// loop over keys-and-values
for (let [key, value] of Object.entries(user)) {
alert(`${key}:${value}`); // name:John, then age:30
}
3.
let anObject = {
'one': 1,
'two': 4,
'three': 6435634,
[Symbol.iterator]() {
return {
counter: 0,
arrayObj: Object.entries(anObject),
next() {
if (this.counter > this.arrayObj.length - 1) {
return {done: true};
}
return {done: false, value: this.arrayObj[this.counter++][1]}
}
}
}
}
for (value of anObject) {
console.log(value);
}
Swap the variable values:
[guest, admin] let guest = "Jane"; let admin = "Pete"; (make guest = "Pete", admin = "Jane"
[guest, admin] = [admin, guest];
Can do more than 2 at a time.
What is alerted?
let [name1, name2] = [“Julius”, “Caesar”, “Consul”, “of the Roman Republic”];
alert(name1);
alert(name2);
vs
let [name1, ,name2] = [“Julius”, “Caesar”, “Consul”, “of the Roman Republic”];
alert(name1);
alert(name2);
// Julius // Caesar
// Julius // Consul
What happens with this destructuring assignment?
let [name1, name2, …rest] = [“Julius”, “Caesar”, “Consul”, “of the Roman Republic”];
Adds the remaining items into an array alled rest
// rest is array of items, starting from the 3rd one
alert(rest[0]); // Consul
alert(rest[1]); // of the Roman Republic
alert(rest.length); // 2
Deconstruct an array.
Assign the first 2 items to variables. Add the remaining items into an array
let [name1, name2, …rest] = [“Julius”, “Caesar”, “Consul”, “of the Roman Republic”];
What is alerted?
let [firstName, surname] = [];
alert(firstName);
alert(surname);
// undefined // undefined
setup default values for a destructuring assignment on an array
Setup a default prompt for restructuring assignment on an array
let [name = “Guest”, surname = “Anonymous”] = [“Julius”];
alert(name); // Julius (from array)
alert(surname); // Anonymous (default used)
Can be more complicated"
// runs only prompt for surname
let [name = prompt('name?'), surname = prompt('surname?')] = ["Julius"];
alert(name); // Julius (from array)
alert(surname); // whatever prompt gets
Destructure an object (make new variables from object properties in one step);
Does the order matter?
let {var1, var2} = {var1:…, var2:…}
The order doesn’t matter
But the variable names have to be the same because objects are not iterable.
Destructure an object and change the variable names
let options = {
title: "Menu",
width: 100,
height: 200
};
// { sourceProperty: targetVariable }
let {width: w, height: h, title} = options;
// width -> w // height -> h // title -> title
alert(title); // Menu
alert(w); // 100
alert(h); // 200
Have default values when destructuring an object
Have default values when destructuring an array
let options = {
title: "Menu"
};
let {width = 100, height = 200, title} = options;
alert(title); // Menu
alert(width); // 100
alert(height); // 200
let anArray = [1, 2];
let [ appl, pea, purp = 3] = anArray;
console.log(purp);
What happens with:
let options = {
title: "Menu"
};
let {width = prompt(“width?”), title = prompt(“title?”)} = options;
alert(title);
alert(width);
Only the prompt for width comes though
// Menu // (whatever the result of prompt is)
Have a default value and change the variable name when destructuring an object
let options = {
title: "Menu"
};
let {width: w = 100, height: h = 200, title} = options;
alert(title); // Menu
alert(w); // 100
alert(h); // 200
Destructure remaining object values into an array
let options = {
title: "Menu",
height: 200,
width: 100
};
// title = property named title
// rest = object with the rest of properties
let {title, ...rest} = options;
// now title=”Menu”, rest={height: 200, width: 100}
alert(rest.height); // 200
alert(rest.width); // 100
Destructure an object or array into existing variables? (no ‘let’ expression)
let title, width, height;
// okay now
({title, width, height} = {title: "Menu", width: 200, height: 100});
alert( title ); // Menu
If you don’t put it in (), it assumes it’s a code block and breaks.
Destructure a nested array or object
let options = {
size: {
width: 100,
height: 200
},
items: ["Cake", "Donut"],
extra: true
};
// destructuring assignment split in multiple lines for clarity
let {
size: { // put size here
width,
height
},
items: [item1, item2], // assign items here
title = “Menu” // not present in the object (default value is used)
} = options;
alert(title); // Menu alert(width); // 100 alert(height); // 200 alert(item1); // Cake alert(item2); // Donut
What is a great benefit of using destructured objects as function parameters? (2 things)
Don’t have to remember the order of inputs into a function
Don’t have to input ‘undefined’ when you want the default value
let options = {
title: “My menu”,
items: [“Item1”, “Item2”]
};
// ...and it immediately expands it to variables
function showMenu({title = "Untitled", width = 200, height = 100, items = []}) {
// title, items – taken from options,
// width, height – defaults used
alert( `${title} ${width} ${height}` ); // My Menu 200 100
alert( items ); // Item1, Item2
}
showMenu(options);
