JavaScript Three

Arrow Functions, Array Methods, Working with Objects

MORE JAVASCRIPT?!

Arrow Functions

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 Array Methods

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

For Each

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));

Map

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);

Filter

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);

Reduce

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);

Deleting Object Properties

We can delete object properties by using the delete keyword

let myObj = {
    name: 'Matias',
    age: 26
}

delete myObj.age;

Looping Through Objects

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

Copying an Object

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.

Object.assign

There are two ways to make a true copy of an object:

  1. with the Object.assign( ) method and
  2. the spread operator 
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

Spread Operator

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

Destructuring

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'

Working with nested data

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.

JavaScript 3

By Devmountain

Source: Matthew Bodily

JavaScript 3

Arrow Functions, Higher Order Array Methods, Working with Objects

  • 1,414

More from Devmountain