Function

Functions

Default Parameters

Why We Need It?

If not

const bookings = [];
const createBooking = function (flightNum, numPassengers, price) {
  const booking = {
    flightNum,
    numPassengers,
    price,
  };
  console.log(booking);
  bookings.push(booking);
};
createBooking('LH123');
//{flightNum: 'LH123', numPassengers: undefined, price: undefined}

If you have

const bookings = [];
const createBooking = function (
  flightNum,
  numPassengers = 1,
  price = 199 * numPassengers
) {
  const booking = {
    flightNum,
    numPassengers,
    price,
  };
  console.log(booking);
  bookings.push(booking);
};
createBooking('LH123');
//{flightNum: 'LH123', numPassengers: 1, price: 199}

If you want to skip some parameters, you can set it as undefined

1 2	createBooking('LH123', undefined, 1000); //{flightNum: 'LH123', numPassengers: 1, price: 1000}

How Passing Arguments Works:Value vs. Reference

Javascript can only pass by value, no passing by reference.

First-Class vs. Higher-ordered Functions

First-Class Functions

JavaScript treats functions as first-class citizens
This means that functions are simply values
Functions are just another “type” of object

So we can:

Store functions in variables or properties
Passing functions as arguments to other functions
Return functions from functions
Call methods on functions

Higher-Ordered Functions

What is it?

A function that receives another function as an argument ,that returns a new function, or both
This is only possible because of first-class functions

Why we need it

a higher level of abstruction

Functions Accepting Callback Functions

// Functions Accepting Callback Functions
const oneWord = function (str) {
  return str.replace(/ /g, '').toLowerCase();
};

const upperFirstWord = function (str) {
  const [first, ...others] = str.split(' ');
  return [first.toUpperCase(), ...others].join(' ');
};

// Higher-order function
const transformer = function (str, fn) {
  console.log(`Original string: ${str}`);
  console.log(`Transformed string: ${fn(str)}`);

  console.log(`Transformed by: ${fn.name}`);
};

transformer('JavaScript is the best!', upperFirstWord);
transformer('JavaScript is the best!', oneWord);

// JS uses callbacks all the time
const high5 = function () {
  console.log('👋');
};
document.body.addEventListener('click', high5);
['Jonas', 'Martha', 'Adam'].forEach(high5);

Functions Ruturning functions

const greet = function (greeting) {
  return function (name) {
    console.log(`${greeting}, ${name}`);
  };
};
const greetHi = greet('Hi');
greetHi('Conan');//Hi, Conan
greet('Hi')('Aniya');//Hi, Aniya

If you use the arrow function

const greet = greeting => name => console.log(`${greeting}, ${name}`);
const greetHi = greet('Hi');
greetHi('Conan'); //Hi, Conan
greet('Hi')('Aniya'); //Hi, Aniya

Call()

const lufthansa = {
  airline: 'Lufthansa',
  iataCode: 'LH',
  bookings: [],
  book(flightNum, name) {
    console.log(
      `${name} booked a seat on ${this.airline} flight ${this.iataCode}${flightNum}`
    );
    this.bookings.push({ flight: `${this.iataCode}${flightNum}`, name });
  },
};
lufthansa.book(239, 'Aniya');

const eurowings = {
  airline: 'eurowings',
  name: 'Eurowings',
  iataCode: 'EW',
  bookings: [],
};
const book = lufthansa.book;
book.call(eurowings, 23, 'hai');

The first argument is the object that you want the this point to.The rest argument is the rest argument that the original the function need.

apply()

1	book.apply(eurowings, [234, 'ajdfhha']);

Difference: The second argument is an array,to accept origin arguments.

Same as

1	book.call(eurowings,...[234, 'ajdfhha']);

bind()

It will return a functions in which the this is the argument you passed in.

1
2
3

book.bind(eurowings)(224, 'asjf');
const bookEu = book.bind(eurowings);
bookEu(2323, 'asjfa');

Also, you can use it just like the call()method, passing in more arguments.

If you don’t want to set this, just use null.

Partial application

we can preset some arguments

Immediately Invoked Function Expressions(IIFE)

1
2
3

(function () {
  console.log('Hello World!');
})();

1
2
3

(() => {
  console.log('Hello World!');
})();

You can not call it tiwice.

Data Encapsulation and Data Privacy

Closuers

A function always has access to the variable enviroment(VE) of the execution context in which it was created,even after that execution context was gone.
Closure has priority over the scope chain.
A closure gives a function access to all the variables of its parent function, even after that parent function has returned.The function keeps a reference to its outer scope, which preserves the scope chain all the time.

Examples:

let f;
const g = function () {
  const a = 1;
  f = function () {
    console.log(a * 3);
  };
};
g();
f();//3

setTimeout()