Function

splice

changes content of an array. Let's first create an array of integers

let myFavoriteNumbers = [5, 14, 16, 18, 23, 25, 27, 50, 70]

If we want to remove one element from an array, we need to pass

1

as the second argument and the index of the item as the first argument. In this example

14

(second item) will be removed by passing

1 and 1

as arguments

myFavoriteNumbers.splice(1, 1);  // [5, 16,18, 23, 25, 27, 50, 70]

To remove two adjacent items, we need to pass first item's index

2

and quantity of items

2

that we want to remove. In this example we want to remove

18

and

23

from the array at the same time

myFavoriteNumbers.splice(2, 2);  // [5, 16, 25, 27, 50, 70]

Replaces 3 items starting from index 2 with

27

,

29

and

31

myFavoriteNumbers.splice(2, 2, 27, 29, 31);  // [5, 16, 27, 29, 31, 50, 70]

Removes all the items of the array except the first and the last items

myFavoriteNumbers.splice(1, 5);  // [5,70]

Adds the two new items

100

and

200

to the array after the first item

myFavoriteNumbers.splice(1, 0, 100, 200);  // [5, 100, 200, 70]

Built-in built-in higher order functions that expect to receive a function as an argument

document.addEventListener('click', func);
function func() {
    alert('You clicked me!');
}

Using anonymous function:

document.addEventListener('click', function() {
    alert('You clicked me!');
});

Another built-in function

foreach

that receives a function as an argument

let greatColors = ['green', 'orange', 'yellow'];

greatColors.forEach(listColors);

function listColors(color) {
    document.write('The color ' + color + ' is a great color<br>');
}

Creates several multiplier functions without using

Higher order function

function doubleMe(number) {
    return 2*number;
}
function tripleMe(number) {
    return 3*number;
}
function quadrupleMe(number) {
    return 4*number;
}
document.write(doubleMe(10));
document.write(tripleMe(10));
document.write(quadrupleMe(10));

Creates the same multiplier functions using

Higher order function

In this case we only need to create one function instead of 3 multiplier functions

function multiplier(multiply) {
    return function(number){
        return number*multiply;
    };
}

let double = multiplier(2);
let triple = multiplier(3);
let quadruple = multiplier(4);

document.write(double(10));
document.write(triple(10));
document.write(quadruple(10));

First we add

click

event listener for two functions:

func1

,

func2

to document object. After clicking three times we remove the event listener for

func1

function

let counter = 0;
document.addEventListener('click', func1);
document.addEventListener('click', func2);

function func1(){
    console.log('You clicked me!');
  
    if (counter>2) {
        console.log('Max limit is 3');
        document.removeEventListener('click', func1);
    }
}
function func2(){
    counter ++;
    console.log('counter: '+counter);
}

The function

filter

filters the array members based on the

getNames

function condition

let myFavoritePlanets = [
    {name: 'Earth', radius: 6371}, 
    {name: 'Jupiter', radius: 69911}, 
    {name: 'Neptune', radius: 24622, moons: ['Triton', 'Thalassa', 'Nereid', 'Proteus', 'Hippocamp', 'Naiad']}
]
let biggerPlanetsNames = myFavoritePlanets.filter(getNames);

function getNames(planet) {
  return planet.radius > 20000
}
console.log(biggerPlanetsNames );

Variable described using keyword

let

uses block scope

let myNumber = 1

function callMePlease() {
  let myNumber = 2
  
  if (1 == 1) {
    let myNumber = 3    
    document.write('My number is: ' + myNumber + '</br>')
  }  
  document.write('My number is: ' + myNumber + '</br>')
}

document.write('My number is: ' + myNumber + '</br>')

callMePlease()

this

inside

fn()

function refers to the global

window

object. That is why

firstName

and

lastName

attributes are not accessible using

this

keyword

let john = {
  firstName: 'John',
  lastName: 'Doe',
  driveCar() {
    function fn () {
      console.log(this.firstName + ' ' + this.lastName + ' is driving a car');  // "undefined undefined is driving a car"
      console.log(this);
    }
    fn(); // fn.call(this);
    console.log(this.firstName + ' ' + this.lastName + ' is driving a car'); 
    console.log(this)
  }
}

john.driveCar(); 

In order to fix the issue, one of the ways is to use

call

function and pass the object that we want

this

to refer to inside the

fn()

function

fn.call(this);

Inside

driveCar()

function

this

refers to the

john

object because it is called through

john

object

john.driveCar();

this

inside

driveCar()

function refers to the global window object. Global variables

firstName

and

lastName

are added to the

window

object. That is why they are visible using the keyword

firstName = "Jack"
lastName = "Ma"

function driveCar() {
  document.write(this.firstName + ' ' + this.lastName + ' is driving a car<br/>')
}

driveCar()

If we call the same function using

call

function,

this

will refer to the object that will be passed. In this case:

john

object

let john = {
  firstName: 'John',
  lastName: 'Doe'
}

function driveCar() {
  document.write(this.firstName + ' ' + this.lastName + ' is driving a car<br/>')
}

driveCar.call(john)

If we call

driveCar()

function using

call()

function,

this

will refer to the object that will be passed. In this case:

john

object

let john = {
  firstName: 'John',
  lastName: 'Doe'
}

function driveCar() {
  document.write(this.firstName + ' ' + this.lastName + ' is driving a car<br/>')
}

driveCar.call(john)

Regular anonymous function:

// Anonymous function
document.addEventListener('click', function(){
  console.log('You clicked me!');
})

The same function with arrow function syntax

// Arrow function
document.addEventListener('click', () => {
  console.log('You clicked me!');
})

Even more minimalistic arrow function

// More minimalistic arrow function 
document.addEventListener('click', () => console.log('You clicked me!'))