Function Declarations vs. Function Expressions1 - Lee-hyuna/33-js-concepts-kr GitHub Wiki

JavaScript μ—μ„œ Function ν‘œν˜„μ‹κ³Ό μ„ μ–Έμ΄λž€ ?

function ꡬ문은 ν•¨μˆ˜λ₯Ό μ„ μ–Έν•©λ‹ˆλ‹€.

μ„ μ–Έ 된 ν•¨μˆ˜λŠ” "λ‚˜μ€‘μ— μ‚¬μš©ν•˜κΈ° μœ„ν•΄ μ €μž₯" 되고 호좜 될 λ•Œ μ‹€ν–‰λ©λ‹ˆλ‹€.

λ³€μˆ˜ 선언은 "var"둜 μ‹œμž‘ν•΄μ•Όν•˜λŠ” κ²ƒμ²˜λŸΌ ν•¨μˆ˜μ˜ 선언은 "function"으둜 μ‹œμž‘ν•΄μ•Όν•©λ‹ˆλ‹€.

function bar() {
  return 3;
}

ν•¨μˆ˜λ₯Ό μ‚¬μš©ν•˜λ €λ©΄ 이름을 μ‚¬μš©ν•˜μ—¬ ν˜ΈμΆœν•΄μ•Όν•©λ‹ˆλ‹€. 예: bar ();

ν•¨μˆ˜ ν‘œν˜„μ‹μ΄λž€ λ¬΄μ—‡μΈκ°€μš” ?

ν•¨μˆ˜λŠ” ν‘œν˜„μ‹μ„ μ‚¬μš©ν•˜μ—¬ μ •μ˜ ν•  μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€. ν•¨μˆ˜ ν‘œν˜„μ‹μ€ λ³€μˆ˜μ— μ €μž₯ 될 수 μžˆμŠ΅λ‹ˆλ‹€.

var x = function (a, b) {return a * b};

ν•¨μˆ˜λ₯Ό λ³€μˆ˜μ— μ €μž₯ ν•œ 후에 λ³€μˆ˜λ₯Ό ν•¨μˆ˜μ²˜λŸΌ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€. λ³€μˆ˜μ— μ €μž₯된 ν•¨μˆ˜μ—λŠ” ν•¨μˆ˜ 이름이 ν•„μš”μ—†μŠ΅λ‹ˆλ‹€. λ³€μˆ˜ 이름을 μ‚¬μš©ν•˜μ—¬ ν˜ΈμΆœν•©λ‹ˆλ‹€.

ν•¨μˆ˜ ν‘œν˜„μ‹ vs ν•¨μˆ˜ ꡬ문

Example: Function Expression

alert(foo()); // ERROR! foo wasn't loaded yet
var foo = function() { return 5; }

Example: Function Declaration

alert(foo()); // Alerts 5. Declarations are loaded before any code can run.
function foo() { return 5; }
  • ν•¨μˆ˜ 선언은 μ½”λ“œκ°€ μ‹€ν–‰λ˜κΈ° 전에 λ‘œλ“œλ©λ‹ˆλ‹€. ν•¨μˆ˜ ν‘œν˜„μ‹μ€ 인터프리터가 ν•΄λ‹Ή μ½”λ“œ 행에 도달 ν•  λ•Œ λ‘œλ“œλ©λ‹ˆλ‹€.
  • var λ¬Έκ³Ό μœ μ‚¬ν•˜κ²Œ ν•¨μˆ˜ 선언은 λ‹€λ₯Έ μ½”λ“œμ˜ 맨 μœ„λ‘œ μ˜¬λΌκ°‘λ‹ˆλ‹€. ν•¨μˆ˜ ν‘œν˜„μ‹μ€ ν˜Έμ΄μŠ€νŠΈλ˜μ§€ μ•ŠκΈ° λ•Œλ¬Έμ— μ •μ˜ 된 λ²”μœ„μ˜ 둜컬 λ³€μˆ˜ 볡사본을 μœ μ§€ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

ν•¨μˆ˜ ν‘œν˜„μ‹μ˜ 이점

ν•¨μˆ˜ ν‘œν˜„μ‹μ΄ ν•¨μˆ˜ 선언식보닀 더 μœ μš©ν•˜κ²Œ μ‚¬μš©λ˜λŠ” λͺ‡ 가지 λ‹€λ₯Έ 방법이 μžˆμŠ΅λ‹ˆλ‹€.

  • ν΄λ‘œμ €
  • λ‹€λ₯Έ ν•¨μˆ˜μ— μΈμˆ˜λ‘œμ„œ
  • μ¦‰μ‹œ 호좜 된 ν•¨μˆ˜ 식 (IIFE)