Rest Operator In JavaScript

The rest operator actually uses the same syntax as the spread operator: .... It’s usage determines whether you’re using it as the spread or rest operator.

Refresher on the Spread operator

The spread operator allows you to pull elements out of an array (split the array into a list of its elements) or pull the properties and values out of an object.

Here's the spread operator used on an array:

  const oldArray = [1, 2, 3];
  const newArray = [...oldArray, 4, 5]; // [1, 2, 3, 4, 5]; 

Here's the spread operator used on an object:

  const oldObject = {name: 'Daniel'};
  const newObject = {...oldObject, age: 22}; // {name: 'Daniel', age: 22} 

The spread operator is useful for cloning arrays and objects. Since both are stored by reference (a reference is created to the object/array in memory), copying them safely (i.e. not making another reference) can be tricky. With the spread operator you have an easy way of creating a clone of the object or array.

Using the Rest Operator

The Rest operator allows you to have an almost unlimited amount of arguments as an array.

Here's the rest operator used to turn arguments into an array:

function addAllNumbers(...numbers) {
  return numbers.reduce(function (previousNumber, currentNumber) {
    return previousNumber + currentNumber;

console.log(addAllNumbers(1, 2, 3, 4, 5)); // 15


Some might argure that the rest operator is not as useful as the spread operator, but it provides a nice way to turn arguments of a function into an array.

Media Queries and Responsive Design

Styling your site to look different depending on the size of a screen it is being viewed on is known as responsive web design.

Key Concepts In Positioning Elements with CSS

CSS treats each HTML element as if it is in its own box. This box will either be a block-level box or an inline box. It has the following positioning types that allow you to control the layout of a page normal flow, relative positioning, and absolute positioning.