Default Params
We can add a default value directly in our parameter list
function rollDie(numSides = 6) {
return Math.floor(Math.random() * numSides) + 1;
}
Here, we need to watch out for order. Defaulted parameters should only occur at the end after any parameters that do not have defaults:
function greet(person, msg = 'Hey there', punc = '!') {
return `${msgs}, ${person}${punc}`;
}
Spread
The Spread syntax allows an iterable such as an array to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected. - MDN
We can use the spread operator on arrays:
console.log(Math.max(1, 2, 3, 4, 5, 2)); // 5
const nums = [4, 3, 53, 3, 5, 2, 4, 920, 3, 5, 2];
console.log(Math.max(...nums)); // 920
We can use the spread operator to concat arrays:
const cats = ['Fluffy', 'Zane', 'Jim'];
const dogs = ['Doggo', 'Sir Barks A Lot'];
const allPets = [...cats, ...dogs, 'Goldy'];
console.log(allPets); //['Fluffy', 'Zane', 'Jim', 'Doggo', 'Sir Barks A Lot', 'Goldy']
We can use spread to copy properties from one object to another:
const feline = {
legs: 4,
family: 'Felidae',
};
const canine = {
family: 'Canine',
furry: true,
};
const dog = { ...canine, isPet: true };
console.log(dog); // {family: 'Canine', furry: true, isPet: true}
// Note, order matters - the last property takes precidence:
const catDog = { ...feline, ...canine };
console.log(catDog); // {legs: 4, family: 'Canine', furry: true}
Spread on arrays and strings uses indexes as key values:
let newObj = { ...[2, 4, 6, 8] };
console.log(newObj); // {0: 2, 1: 4, 2: 6, 3: 8}
let anotherObj = { ...'Hello' };
console.log(anotherObj); //{0: 'H', 1: 'e', 2: 'l', 3: 'l', 4: 'o'}
A more real life example of using spread is if we wanted to add data to a form:
const dataFromForm = {
email: 'jim@jimelm.com',
password: '1234',
username: 'jimelm',
};
const person = { ...dataFromForm, id: 2134, isAdmin: false };
console.log(person); // {email: 'jim@jimelm.com', password: '1234', username: 'jimelm', id: 2134, isAdmin: false}
Rest Params
Rest does the opposite of spread. It takes a bunch of parameters passed into a function and combines them into an array. Some examples include:
function sum(...nums) {
return nums.reduce((total, el) => total + el);
}
function raceResults(gold, silver, ...everyoneElse) {
console.log(`Gold metal goes to ${gold}`);
console.log(`Silver metal goes to ${silver}`);
console.log(`And thanks to: ${everyoneElse}`);
}
Destructuring
Destructuring Arrays
Here is an example of destructuring an array:
const scores = [999, 888, 777, 666, 555, 444];
const [gold, silver, bronze, ...otherScores] = scores;
console.log(gold); // 999
console.log(silver); // 888
console.log(bronze); // 777
console.log(otherScores); // [666, 555, 444]
Destructuring Objects
Here we will destructure an object:
const user = {
email: 'marryelm@what.com',
password: '134jsdf',
firstName: 'Marry',
lastName: 'Elm',
born: 1927,
died: 2091,
city: 'Hayward',
state: 'CA',
};
const { email, state, city } = user;
console.log(email); // marryelm@what.com
console.log(state); // CA
console.log(city); // Hayward
const { born: birthYear } = user;
console.log(birthYear); // 1927
We can give our variables default values as follows:
const user2 = {
email: 'stacy@what.com',
firstName: 'stacy',
lastName: 'kent',
born: 1984,
city: 'Boise',
state: 'ID',
};
const { city, state, died } = user2;
console.log(died); // undefined
const { city, state, died = 'N/A' } = user2;
console.log(died); // N/A
Destructuring Parameters
We can also destructure within function parameters:
const user2 = {
email: 'stacy@what.com',
firstName: 'stacy',
lastName: 'kent',
born: 1984,
city: 'Boise',
state: 'ID',
};
function fullName({ firstName, lastName = '???' }) {
return `${firstName} ${lastName}`;
}
We cal also destructure in callback functions:
const movies = [
{
title: 'Indiana Jones',
score: 77,
year: 1994,
},
{
title: 'Star Trek',
score: 94,
year: 1983,
},
{
title: 'Deadpool',
score: 79,
year: 2001,
},
];
let ratings = movies.map(({ title, score }) => {
return `${title} is rated ${score}`;
});
console.log(ratings); // ['Indiana Jones is rated 77', 'Star Trek is rated 94', 'Deadpool is rated 79']
Top comments (0)