Arrow Functions, Array Methods, Working with Objects
MORE JAVASCRIPT?!
Introduced in ES6, arrow functions provide us a new way to create, or define, functions.
function declareFunc(){
return 'I am a function declaration'
};
let expression = function(){
return 'I am a function expression'
};
let arrow = () => {
return 'I am an arrow function'
};
let arrowTwo = () => 'I am an arrow function'
Note: If you don't include curly brackets with an arrow function, the return is implied.
Higher Order Functions are functions that take another function as an argument, AKA a callback.
Today you will learn the following higher order methods:
forEach( )
map( )
filter( )
reduce( )
INCEPTION
The forEach array method loops through an array and "for each" element, executes any specified functionality.
The forEach array method does not necessarily modify the original array, but can if the callback is specified to do so.
let numArray = [0, 1, 2, 3, 4];
//without arrow function
numArray.forEach(function(element, index, array){
console.log(element)
});
//with arrow function
numArray.forEach(element => console.log(element));
The map array method also loops through an array and performs a given functionality on each element.
map does not modify the original array .
Map returns a copy of the original array, with any changes implemented in the callback applied.
let numArray = [0, 1, 2, 3, 4];
//without arrow function
let mapArr = numArray.map(function(element, index, array){
return element += 2;
});
//with arrow function
numArray.map(element => element += 2);
The filter method loops through an array and performs a given evaluation for each element.
Filter returns an array that contains all of the items where the evaluation resolved true. Filter is not destructive.
let numArray = [0, 1, 2, 3, 4];
//without arrow function
let mapArr = numArray.filter(function(element, index, array){
return element % 2 === 0;
});
//with arrow function
numArray.filter(element => element % 2 === 0);
The reduce method executes a "reducing" callback function and returns a single value.
Reduce is often used to create a total sum, but can be used for other purposes.
let numArray = [0, 1, 2, 3, 4];
//without arrow function
let mapArr = numArray.reduce(function(acc, curr){
return acc + curr
});
//with arrow function
numArray.reduce((acc, curr) => acc + curr);
We can delete object properties by using the delete keyword
let myObj = {
name: 'Matias',
age: 26
}
delete myObj.age;
for-in loops can be used to loop through objects
let truckObj = {
make: 'Cybertruck',
model: 'Tesla',
color: 'Polygon Gradient',
year: 2020
}
for(let key in truckObj){
console.log(key)
}
Iterator is based on the object keys
Analyze the code below:
const myCar = {
make: 'tesla',
model: 'model x'
};
const newCar = myCar;
delete newCar.make;
console.log(myCar);
{model: 'model x'}
Copying an object like this is undesirable because changing our 'copy' object also changes the original object.
There are two ways to make a true copy of an object:
const myCar = {
make: 'tesla',
model: 'model x'
};
const newCarObj = Object.assign({}, myCar);
delete newCarObj.make;
console.log(myCar);
{make: 'tesla', model: 'model x'}
Target Object
What's being copied
The spread operator is a newer way to copy objects and arrays
const myCar = {
make: 'tesla',
model: 'model x'
};
const newCar = {...myCar};
delete newCarObj.make;
console.log(myCar);
{make: 'tesla', model: 'model x'}
What's being copied
Object destructuring allows us to remove, or unpack, properties from objects and use them as variables.
Destructuring also works for arrays.
const myCar = {
make: 'tesla',
model: 'model x'
};
const {make} = myCar;
console.log(make);
'tesla'
When working with objects and arrays, you may find that you need to access deeply nested data.
Getting comfortable with accessing nested data is vital.