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']

Blog

JavaScript: Default Parameters, Spread Operator, Rest Parameters, and Destructuring!

Megan Paffrath