Introduction

function calculateDiscountedValue(value, percentDiscount) {
  const result = value - (value * percentDiscount / 100);
  return result;
}

let discountedValue;

discountedValue = calculateDiscountedValue(123, 10);
console.log(discountedValue); // 110.7

discountedValue = calculateDiscountedValue(456, 10);
console.log(discountedValue); // 410.4

Hoisting

let discountedValue;

discountedValue = calculateDiscountedValue(123, 10);
console.log(discountedValue); // 110.7

discountedValue = calculateDiscountedValue(456, 10);
console.log(discountedValue); // 410.4

function calculateDiscountedValue(value, percentDiscount) {
  const result = value - (value * percentDiscount / 100);
  return result;
}

Argument Count

Too many arguments

function calculateDiscountedValue(value, percentDiscount) {
  const discountedValue = value - (value * percentDiscount / 100);
  return discountedValue;
}

console.log(calculateDiscountedValue(50, 10, 'extra')); // 45, 'extra' is unused

Missing Arguments

function calculateDiscountedValue(value, percentDiscount) {
  console.log(percentDiscount); // undefined
  const discountedValue = value - (value * percentDiscount / 100);
  return discountedValue;
}

console.log(calculateDiscountedValue(50)); // NaN

Automatic Return

function sayHi(person) {
  const fullName = `${person.firstName} ${person.lastName}`;
  console.log(`Hello, ${fullName}!`);
}

sayHi({ firstName: 'John', lastName: 'Doe' }); // Hello, John Doe!

const result = sayHi({ firstName: 'John', lastName: 'Doe' });
console.log(result); // undefined

function sum(a, b) {
  const result = a + b;
  // Oops forgot 🙈
  // return result;
}

console.log(sum(4, 5)); // undefined

Spread Arguments

Math.max(4, 10, 20); // 20

const numbers = [4, 10, 20];

Math.max(numbers[0], numbers[1], numbers[2]); // 20

Math.max(...numbers); // Same as `Math.max(4, 10, 20)` => 20

function example(a, b) {
  console.log(`a: ${a}, b: ${b}`);
}

const message = ['hello', 'world'];

example(...message); // a: hello, b: world

First Class Functions

Functions as Expressions

let hello = function example() {
  return 'Hello World';
};

// example(); // ReferenceError: example is not defined

hello(); // 'Hello World'

hello = function () {
  return 'Hello World';
};

IIFE

Immediately Invoked Function expression

function example() {
  console.log('hello');
}
example(); // hello

// IIFE (immediately invoked function expression)

(function () {
  console.log('hello');
})(); // hello

Passing Functions

function runTwice(callback) {
  callback();
  callback();
}

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

// Hello World
// Hello World

Example built-in API is setTimeout as shown below

setTimeout(function () {
  console.log('A second has passed');
}, 1000);

setTimeout(function () {
  console.log('Two seconds have passed');
}, 2000);

Arrow functions

let sum;

sum = function (a, b) {
  return a + b;
};

sum = (a, b) => {
  return a + b;
};

sum = (a, b) => a + b;

let add10;

add10 = (x) => x + 10;

add10 = x => x + 10;

const origin = () => ({ x: 0, y: 0 });

Rest Parameters

Without rest parameters:

function log(a, b) {
  console.log(a, b);
}

log(1, 2); // 1 2

log(1); // 1 undefined
log(1, 2, 3); // 1 2

console.log(1); // 1
console.log(1, 2, 3); // 1 2 3

With rest parameters:

function log(...allTheThings) {
  console.log(allTheThings);
}

log(1, 2, 3); // [1, 2, 3]

console.log(1, 2, 3); // 1 2 3

function logBetter(...allTheThings) {
  console.log(...allTheThings);
  // console.log(allTheThings[0], allTheThings[1], ...);
}

logBetter(1, 2, 3); // 1 2 3

Default Parameters

let sum;

sum = (a, b, c) => a + b + c;

sum(1, 2, 3); // 6

sum(1, 2); // NaN

sum = (a = 0, b = 0, c = 0) => a + b + c;

sum(1, 2, 3); // 6

sum(1, 2); // 3

sum(1, undefined, 3); // 4

Pass by Value - vs - Pass by Reference

function tryToReassignPrimitive(input) {
  input = 4;
}

let primitive = 3;
tryToReassignPrimitive(primitive);
console.log(primitive); // 3

function tryToReassignObject(input) {
  input = { name: 'Kim' };
}

let object = { name: 'John' };
tryToReassignObject(object);
console.log(object); // { name: 'John' }

Pure functions

let count;
function incrementImpure() {
  count++;
}

count = 0;
incrementImpure();
console.log(count); // 1

function increment(value) {
  return value + 1;
}

count = increment(count);
console.log(count); // 1

Destructuring Arguments

function ranged({ value, min, max }) {
  if (value < min) {
    return min;
  }
  if (value > max) {
    return max;
  }
  return value;
}

ranged({ value: 100, min: 0, max: 10 }); // 10

Closures

function counter() {
  let count = 0;
  return function () {
    return count++;
  };
}

const inc = counter();
console.log(inc()); // 0
console.log(inc()); // 1
console.log(inc()); // 2

Factory Functions

function createCounter(initial = 0) {
  let count = initial;
  return {
    inc: () => count++,
    dec: () => count--,
    value: () => count,
    reset: (value) => count = value,
  }
}

const counter = createCounter();
console.log(counter.value()); // 0

counter.inc();
console.log(counter.value()); // 1

counter.reset(10);
console.log(counter.value()); // 10

Object Method Definition

let catDog;

catDog = {
  speak: function () {
    console.log('meow 🐱');
    console.log('woof 🐶');
  }
};

catDog = {
  speak() {
    console.log('meow 🐱');
    console.log('woof 🐶');
  }
};

catDog.speak();

Getters and Setters

function createRanged({ value, min, max }) {
  return {
    get value() {
      return value;
    }, 
    set value(newValue) {
      value = Math.max(min, Math.min(max, newValue));
    }
  }
}

const ranged = createRanged({ value: 5, min: 0, max: 10 });

console.log(ranged.value); // 5

ranged.value = 15;
console.log(ranged.value); // 10

Recursive Functions

// fibonacci(0) => 0
// fibonacci(1) => 1
// fibonacci(n) => fibonacci(n-1) + fibonacci(n-2)

function fibonacci(n) {
  if (n === 0) return 0;
  if (n === 1) return 1;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

console.log(fibonacci(11)); // 89

Pro Members Only

This lesson is available if you have an active subscription.

Alternatively, some member might be able to gift it to you.

Professional Modern JavaScript Lessons

Functions in JavaScript

Subscription Required

Introduction

Hoisting

Argument Count

Too many arguments

Missing Arguments

Automatic Return

Spread Arguments

First Class Functions

Functions as Expressions

IIFE

Passing Functions

Arrow functions

Rest Parameters

Default Parameters

Pass by Value - vs - Pass by Reference

Pure functions

Destructuring Arguments

Closures

Factory Functions

Object Method Definition

Getters and Setters

Recursive Functions

Transcript

Professional Modern JavaScript