Flashcards
rest / spread
Cards in this deck (17)
- 1what is rest and spreadspread operator, rest parameters (...)
- 2when to useVariable number of parameters,
- 3Variable number of parametersWhen working with functions there is a fixed number of parameters.If the number of parameters is unknown traditionally option would be arguments object. Inside the body of each function, arguments object is available, it has array-like structure and contains all the arguments passed into the function. You can get arguments with a zero-based index and can check the length like in array.
Limitations: array methods are not available - sort(, map(), filter() and fat-arrow functions don't have arguments object available. If use arguments in arrow function, it would refer to the arguments of the enclosing function.
Also can put ... before the last parameter in the function.
function doSmth(first, second, ...rest) {
console.log(rest[0])} - 4function doSmth(first, second, ...rest) {} if pass less less than 3 parametersrest will be just empty array
- 5pluses of restrest parameters give you a real array so that you can use all the array-specific methods.
Unlike arguments, they do work in arrow functions.
Rest parameters are part of the function signature. That means that just from the function "header" you can immediately recognize that it uses rest parameters and therefore accepts variable number of arguments. - 6multiple rest parameters?not allowed
- 7Usage of spread operatorIts usage is almost the opposite of rest parameters. Instead of collecting multiple values in one array, it lets you expand one existing array (or other iterable) into multiple values. Let's look at various use cases.
- 8Function calls and spreadlet myArray = [1, 2, 3];
function doSomething(first, second, third) {}
doSomething(...myArray);
// Is equivalent to
doSomething(
myArray[0], myArray[1], myArray[2]); - 9Array literals and spreadlet firstArray = ["A", "B", "C"];
let secondArray = ["X", ...firstArray, "Y", "Z"];
// second array is [ "X", "A", "B", "C", "Y", "Z" ]
Merging arrays
let mergedArray = [...firstArray, ...secondArray, ...thirdArray];
Copying arrays
var original = [1, 2, 3];
var copy = [...original]; - 10Object literals and spreadlet firstObject = {a: 1, b: 2};
let secondObject = {...firstObject, c: 3, d: 4}; - 11CLoning objects with spreadShallow copy
let clone = {...original};
This can be a nice alternative to cloning objects using Object.assign().
Note that it is a shallow copy. A new object is created, but the cloned properties are still the original and not clones.
The prototype of the original object is not preserved. It just copies properties of the source object and creates a brand new object using object literal, which has a prototype of Object.prototype. - 12array desctructuring and spreadlet myArray = [1, 2, 3, 4, 5];
let [a, b, c] = myArray;
let [a, b, c, ...d] = myArray; - 13Object destructuring and spreadlet myObject = { a: 1, b: 2, c: 3, d: 4};
let {b, d, ...remaining} = myObject;
console.log(b); // 2
console.log(d); // 4
console.log(remaining); // { a: 1, c: 3 } - 14Adding Properties Clone an object while adding extrs properties to the (shallow) cloned object. const user = { id: 100, name: 'Howard Moon'} clone object with added passwordconst userWithPass = { ...user, password: 'Password!' }
- 15Merge two objects into a new object. const part1 = { id: 100, name: 'Howard Moon' } const part2 = { id: 100, password: 'Password!' }const user1 = { ...part1, ...part2 }
//=> { id: 100, name: 'Howard Moon', password: 'Password!' }
same:
const partial = { id: 100, name: 'Howard Moon' }
const user = { ...partial, id: 100, password: 'Password!' } - 16Exclude Object Properties Properties can be removed using destructuring in combination with the rest operator. const user = { id: 100, name: 'Howard Moon', password: 'Password!'} remove passwordPassword is destructured out (ignored) and the rest of the properties are returned as rest.
const noPassword = ({ password, ...rest }) => rest
const user = {
id: 100, name: 'Howard Moon',
password: 'Password!'}
noPassword(user)
//=> { id: 100, name: 'Howard moon' } - 17https://blog.bitsrc.io/6-tricks-with-resting-and-spreading-javascript-objects-68d585bdc83
Information
- Description
- Rest/Spread Flashcards on rest / spread, created by milly larcen on 18/05/2020.
- Created by
- milly larcen
- Views
- 0
- Rating