function

Baseline

20157

function

function

const getRectArea = function (width, height) {
  return width * height;
};

console.log(getRectArea(3, 4));
// : 12

function (param0) {
  statements
}
function (param0, param1) {
  statements
}
function (param0, param1, /* , */ paramN) {
  statements
}

function name(param0) {
  statements
}
function name(param0, param1) {
  statements
}
function name(param0, param1, /* , */ paramN) {
  statements
}

: function function function

name: name
paramN
statements

function function function function function function IIFE

JavaScript

console.log(notHoisted); // undefined
// 
//  undefined 
notHoisted(); // TypeError: notHoisted is not a function

var notHoisted = function () {
  console.log("bar");
};

arguments.callee

const math = {
  factorial: function factorial(n) {
    console.log(n);
    if (n <= 1) {
      return 1;
    }
    return n * factorial(n - 1);
  },
};

math.factorial(3); // 3;2;1;

name ()

"use strict";

function foo() {
  foo = 1;
}
foo();
console.log(foo); // 1
(function foo() {
  foo = 1; // TypeError: Assignment to constant variable.
})();

x 2

const x = function (y) {
  return y * y;
};

button.addEventListener("click", function (event) {
  console.log("button is clicked!");
});

(IIFE)

IIFE IIFE IIFE IIFE

//  IIFE
(function () {
  // 
})();

//  IIFE
(function (a, b) {
  console.log(a + b);
})(1, 2); // 3 

//  IIFE
const value = (() => {
  const randomValue = Math.random();
  if (randomValue > 0.5) {
    return "heads";
  }
  return "tails";
})();

IIFE

// 

var globalVariable = (() => {
  // 
  let firstVariable = something();
  let secondVariable = somethingElse();
  return firstVariable + secondVariable;
})();

// firstVariable  secondVariable

IIFE IIFE Addy Osmani Learning JavaScript Design Patterns

const makeWithdraw = (balance) =>
  ((copyBalance) => {
    let balance = copyBalance; // 
    const doBadThings = () => {
      console.log("");
    };
    doBadThings();
    return {
      withdraw(amount) {
        if (balance >= amount) {
          balance -= amount;
          return balance;
        }
        return "";
      },
    };
  })(balance);

const firstAccount = makeWithdraw(100); // ""
console.log(firstAccount.balance); // undefined
console.log(firstAccount.withdraw(20)); // 80
console.log(firstAccount.withdraw(30)); // 50
console.log(firstAccount.doBadThings); // undefined; this method is private
const secondAccount = makeWithdraw(20); // ""
console.log(secondAccount.withdraw(30)); // ""
console.log(secondAccount.withdraw(20)); // 0

ES6 var for

let const IIFE var Button 0 Button 1 2 0 1

for (var i = 0; i < 2; i++) {
  const button = document.createElement("button");
  button.innerText = `Button ${i}`;
  button.onclick = function () {
    console.log(i);
  };
  document.body.appendChild(button);
}
console.log(i); // 2

Button 0 Button 1 2 i 2 ES6 IIFE

for (var i = 0; i < 2; i++) {
  const button = document.createElement("button");
  button.innerText = `Button ${i}`;
  button.onclick = (function (copyOfI) {
    return function () {
      console.log(copyOfI);
    };
  })(i);
  document.body.appendChild(button);
}
console.log(i); // 2

Button 0 Button 1 0 1 i let

for (let i = 0; i < 2; i++) {
  const button = document.createElement("button");
  button.innerText = `Button ${i}`;
  button.onclick = function () {
    console.log(i);
  };
  document.body.appendChild(button);
}
console.log(i); // Uncaught ReferenceError: i is not defined.

0 1

IIFE switch

someObject.property = (() => {
  switch (someVariable) {
    case 0:
      return "zero";
    case 1:
      return "one";
    default:
      return "unknown";
  }
})();

constletvar

let onlyAssignedOnce;
try {
  onlyAssignedOnce = someFunctionThatMightThrow();
} catch (e) {
  onlyAssignedOnce = null;
}

IIFE const

const onlyAssignedOnce = (() => {
  try {
    return someFunctionThatMightThrow();
  } catch (e) {
    return null;
  }
})();


ECMAScript 2027 LanguageSpecification # sec-function-definitions

MDN

MDN 2025104

GitHub