[TIL] 20201205 Callbacks & Array Methods

Callback

• A callback is a function that is passed as an argument to another function

 

 

forEach Method

• An array method
• Accepts a callback function
• Calls the function once per element in the array. (Very similar to for...of)
• Syntax

arr.forEach(func)

 

 

 

map Method

• An array method
• Creates a new array with the results of calling a callback on every element in the array.
• Syntax

arr.map(function (el) {
	//code
    return newEl; 
    //creates a new array with returned elements, according to the code inside.
})

 

 

 

Arrow Functions

• Syntactically compact alternative to a regular function expression
• Syntax

//Traditional Function
function (x) {
	//code
    return y
}


//Arrow Function 
(x) => {
	//code
    return y
}


//Arrow Function : Basic
param => expression

//Arrow Function : Multiple parameters 
//parentheses required
(param1, paramN) => expression

//Arrow Function : Multiline statements
//body brackets and return required
param => {
	//code
    return x;
}

• Arrow functions with forEach and map

arr.map((x) => {
	//code
    return newX;
})

 

 

 

setTimeout 

• Waits before the function runs.
• Syntax

setTimeout(function, time(ms))

 

 

 

setInterval

• Repeats the function every x ms.
• Syntax

setInterval(function, time(ms))

• How to stop

clearInterval(id)

 

 

 

filter Method

• An array method
• Creates a new array with all elements that pass the test implemented by the provided funciton.
• Syntax

arr.filter(el => {
	return {filtercode};
})

//{filtercode} returns true or false.
//If it returns true, el is added to the filtered array.

 

 

 

some & every Method

some	every
boolean method
Returns true if any of the array elements pass the test function	Returns true if all elements in the array pass the test function
Syntax : arr.some(function)	Syntax: arr.every(function)

 

 

 

reduce Method

• Executes a reducer function on each element of the array, resulting in a single value
• Syntax

arr.reduce((accumulator, currentValue) => {
	return x;
})

• Example

const prices = [23.3, 14.2, 67.5, 34.0];

const totalPrice = prices.reduce((total, price) => {
	return total+price;
})

    //totalPrice is sum of all the elements of the array 'prices'
    //reduce method calculates an element at once
    //attempt / total / price
    //1st / 0 / 23.3
    //2nd / 23.3 / 37.5
    //3rd / 37.5 / 105.0
    //4th / 105.0 / 34.0
    //5th / 139.0 / -

const minPrice = prices.reduce((min, price)=>{
	if(price<min) {return price}
    return min;
})

//find the smallest number in the array 'prices'

 

 

 

Arrow Functions & 'this'

• 'this' inside of an arrow function refers to the scope that the function was created in. (default: window) Thus, if a nested function gets an arrow function as an argument, 'this' inside of the arrow function refers to the parent function of the nested function.
• If an object has a method that is an arrow function, 'this' keyword can't be used to refer anything inside of the object.

 

 

 

 

 

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