[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Functions#function_hoisting [Back]  [Original]

- JavaScript | MDN

MDN Web Docs

View in English Always switch to English

JavaScript JavaScript

JavaScript

( ) function

  • JavaScript { /* */ }

square

js
function square(number) {
  return number * number;
}

square number 1 ( number) 2 1 return number * number

js
function myFunc(theObject) {
  theObject.make = "Toyota";
}

const myCar = {
  make: "Honda",
  model: "Accord",
  year: 1998,
};

console.log(myCar.make); // "Honda"
myFunc(myCar);
console.log(myCar.make); // "Toyota"

js
function myFunc(theArr) {
  theArr[0] = 30;
}

const arr = [45];

console.log(arr[0]); // 45
myFunc(arr);
console.log(arr[0]); // 30

js
function addSquares(a, b) {
  function square(x) {
    return x * x;
  }
  return square(a) + square(b);
}

(anonymous) square

js
const square = function (number) {
  return number * number;
};

console.log(square(4)); // 16

js
const factorial = function fac(n) {
  return n < 2 ? 1 : n * fac(n - 1);
};

console.log(factorial(3)); // 6

2 map

js
function map(f, a) {
  const result = new Array(a.length);
  for (let i = 0; i < a.length; i++) {
    result[i] = f(a[i]);
  }
  return result;
}

const numbers = [0, 1, 2, 5, 10];
const cubedNumbers = map(function (x) {
  return x * x * x;
}, numbers);
console.log(cubedNumbers); // [0, 1, 8, 125, 1000]

JavaScript myFunc num 0

js
let myFunc;
if (num === 0) {
  myFunc = function (theObject) {
    theObject.make = "Toyota";
  };
}

Function eval()

square

js
square(5);

5 25

showProps() ()

js
function factorial(n) {
  if (n === 0 || n === 1) {
    return 1;
  }
  return n * factorial(n - 1);
}

1 5

js
console.log(factorial(1)); // 1
console.log(factorial(2)); // 2
console.log(factorial(3)); // 6
console.log(factorial(4)); // 24
console.log(factorial(5)); // 120

(Function ) call() and apply()

js
console.log(square(5)); // 25

function square(n) {
  return n * n;
}

square() JavaScript

js
// 
function square(n) {
  return n * n;
}

console.log(square(5)); // 25

js
console.log(square(5)); // ReferenceError: Cannot access 'square' before initialization
const square = function (n) {
  return n * n;
};

3

js
const foo = function bar() {
  // 
};

bar foo bar() foo()

js
let x = 0;
// "x < 10" 
while (x < 10) {
  // 
  x++;
}

js
function loop(x) {
  // "x >= 10"  ("!(x < 10)" )
  if (x >= 10) {
    return;
  }
  // 
  loop(x + 1); // 
}
loop(0);

( DOM)

js
function walkTree(node) {
  if (node === null) {
    return;
  }
  // 
  for (const child of node.childNodes) {
    walkTree(child);
  }
}

loop

js
function foo(i) {
  if (i < 0) {
    return;
  }
  console.log(`begin: ${i}`);
  foo(i - 1);
  console.log(`end: ${i}`);
}
foo(3);

// :
// begin: 3
// begin: 2
// begin: 1
// begin: 0
// end: 0
// end: 1
// end: 2
// end: 3

(IIFE)

(IIFE)

js
(function () {
  // 
})();

const value = (function () {
  // 
  return someValue;
})();

IIFE

js
// 
const num1 = 20;
const num2 = 3;
const name = "Chamakh";

// 
function multiply() {
  return num1 * num2;
}

console.log(multiply()); // 60

// 
function getScore() {
  const num1 = 2;
  const num2 = 3;

  function add() {
    return `${name} scored ${num1 + num2}`;
  }

  return add();
}

console.log(getScore()); // "Chamakh scored 5"

JavaScript

js
//  "name" 
const pet = function (name) {
  const getName = function () {
    //  "name" 
    return name;
  };
  return getName; // 
};
const myPet = pet("Vivie");

console.log(myPet()); // "Vivie"

js
const createPet = function (name) {
  let sex;

  const pet = {
    // setName(newName) is equivalent to setName: function (newName)
    // in this context
    setName(newName) {
      name = newName;
    },

    getName() {
      return name;
    },

    getSex() {
      return sex;
    },

    setSex(newSex) {
      if (
        typeof newSex === "string" &&
        (newSex.toLowerCase() === "male" || newSex.toLowerCase() === "female")
      ) {
        sex = newSex;
      }
    },
  };

  return pet;
};

const pet = createPet("Vivie");
console.log(pet.getName()); // Vivie

pet.setName("Oliver");
pet.setSex("male");
console.log(pet.getSex()); // male
console.log(pet.getName()); // Oliver

name

js
const getCode = (function () {
  const apiCode = "0]Eal(eh&2"; // 

  return function () {
    return apiCode;
  };
})();

console.log(getCode()); // "0]Eal(eh&2"

IIFE IIFE 2 apiCode getCode apiCode getCode apiCode

  • (A) (B) (B) (C)
  • B C B A C B
  • C A B C A

js
function A(x) {
  function B(y) {
    function C(z) {
      console.log(x + y + z);
    }
    C(3);
  }
  B(2);
}
A(1); // 6  (1 + 2 + 3)

C B y A x

  1. B A ( B A )
  2. C B
  3. C B B A C A C B A C B A

A C A C B C B

2

js
function outside() {
  const x = 5;
  function inside(x) {
    return x * 2;
  }
  return inside;
}

console.log(outside()(10)); // 10  20 

return x * 2 inside x outside x inside => outside => insidexoutsidex10 (outsidex)20 (insidex)

arguments

(argument)

js
arguments[i];

i 0 1 arguments[0] arguments.length

arguments arguments.length arguments

js
function myConcat(separator) {
  let result = ""; // 
  // 
  for (let i = 1; i < arguments.length; i++) {
    result += arguments[i] + separator;
  }
  return result;
}

js
console.log(myConcat(", ", "red", "orange", "blue"));
// "red, orange, blue, "

console.log(myConcat("; ", "elephant", "giraffe", "lion", "cheetah"));
// "elephant; giraffe; lion; cheetah; "

console.log(myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley"));
// "sage. basil. oregano. pepper. parsley. "

: arguments length

JavaScript Function

2

JavaScript undefined

undefined

b a*b undefined multiply NaN 2

js
function multiply(a, b) {
  b = typeof b !== "undefined" ? b : 1;
  return a * b;
}

console.log(multiply(5)); // 5

b 1

js
function multiply(a, b = 1) {
  return a * b;
}

console.log(multiply(5)); // 5

2

js
function multiply(multiplier, ...theArgs) {
  return theArgs.map((x) => multiplier * x);
}

const arr = multiply(2, 1, 2, 3);
console.log(arr); // [2, 4, 6]

JavaScript -> thisargumentssupernew.target

2 this

js
const a = ["Hydrogen", "Helium", "Lithium", "Beryllium"];

const a2 = a.map(function (s) {
  return s.length;
});

console.log(a2); // [8, 6, 7, 9]

const a3 = a.map((s) => s.length);

console.log(a3); // [8, 6, 7, 9]

this

this ( strict undefined )

js
function Person() {
  //  Person()  `this` 
  this.age = 0;

  setInterval(function growUp() {
    // strict  growUp() 
    // Person() 
    //  `this` 
    this.age++;
  }, 1000);
}

const p = new Person();

ECMAScript 3/5 this

js
function Person() {
  // `self`  `that` 
  // 
  const self = this;
  self.age = 0;

  setInterval(function growUp() {
    // 
    //  `self` 
    self.age++;
  }, 1000);
}

growUp() this

this this setInterval this this

js
function Person() {
  this.age = 0;

  setInterval(() => {
    this.age++; // `this`  person 
  }, 1000);
}

const p = new Person();

Web Proxy Viewer  |  New URL  |  Original Page