[TIL] 20201207 Newer JavaScript Features

Default Parameters

The Old Way

• To set a default parameter, the developer had to check if the parameter is set by the user, and then set a parameter when it isn't
• Example

function rollDie(numSides) {
    if(numSides === NaN){
    	numSides = 6;
    }
    return Math.floor(Math.random * numSides) +1;
}

The New Way

• Set the default parameter in the parentheses
• Example

function rollDie(numSides=6){
    return Math.floor(Math.random*numSides) +1;
}

• Default parameters should come after non-default parameters. If not, JavaScript can't tell when first parameter is 'default' and instead it will consider the next param as the first one.

 

 

Spread

• 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.

Spread in Function calls

• Expands an iterable into a list of arguments.
• Syntax : func(...iterable)
• Example

const nums = [1, 2, 3, 4];

//no spread
Math.max(nums); //NaN

//spread
Math.max(...nums); //4

//Math.max() is a function that takes numbers as the arguments.
//Math.max(...nums) equals to Math.max(1, 2, 3, 4)

Spread with Array Literals

• Copies elements from one array into another array.
• Example : Copying array to array

const dogs = ['A', 'B', 'C'];
const cats = ['X', 'Y', 'Z'];

const allPets = [...dogs, ...cats];
//allPets = ['A', 'B', 'C', 'X', 'Y', 'Z']

• Example : Copying string to array

let pet = 'cats';
const pets = [...pet];
//pets = ['c', 'a', 't', 's']

Spread with Objects

• Copies properties from one object into another object literal.
• If an array is spread inside of an object, the indices of the elements become keys and elements becoms values. (Same for string)
• Example

const feline = {
    leg: 4,
    family: 'Felidae'
};

const canine = {
    isFurry: true,
    family: 'Caninae'
};

const catdog = {...canine, ...feline};
//catdog = {isFurry: true, family:'Felidae', leg:4}
//The reason why family is 'Felidae': Order matters. The last object with the property wins.

 

 

 

Argument Object

• Available inside every function
• It's an array-like object (but not array)
  • Has a length property (arguments.length)
  • Has indices (arguments[n])
  • Does not have array methods like push/pop
• Contains all the arguments passed to the function
• Not available inside of arrow functions

 

 

Rest Params

• Collects all remaining arguments into an actual array
• Looks like spread
• Syntax

function func(...params){
	//code
}

//'params' is an array of parameters

 

 

Destructing 

A short, clean syntax to 'unpack' values from arrays or properties from object into distinct variables

 

Destructing Arrays

• Single out each element from the start and copy into a variable
• Order matters

Syntax

const [element0, element1, elementN] = arr;

//This code is equal to : 
//element0 = arr[0]
//element1 = arr[1]
//elementN = arr[N]

 

Syntax : Using rest param

const [element0, element1, ...restElement] = arr;
//element0 = arr[0];
//element1 = arr[1];
//restElement : rest of the arr after element1

 

Destructing Objects

Syntax

const{key1, keyN} = obj;
//key1 = value1
//keyN = valueN

 

Syntax : Changing the variable name

const {key1:var1, keyN:varN} = obj;

//var1 = value1
//var2 = value2

 

Syntax : Setting a default value

const {key1, keyN=null} = obj;

//If keyN is undefined in obj, the value is null.

 

 

Destructuring Parmas

• Used often for objects

Syntax

function func({property1, propertyN}) {
    //code
}

//Extracts only the properties that are in the curly brackets from the object.
//Doesn't bring other properties.
//Can set default value with =

 

 

 

 

 

* This post is a summary of Udemy Course "The Web Developer Bootcamp" by Colt Steele.