λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°
javascript/πŸ“– study

[2μ£Όμ°¨ μŠ€ν„°λ””]12μž₯-ν•¨μˆ˜

by HomieKim 2022. 2. 6.

ν•¨μˆ˜

μˆ˜ν•™μ—μ„œμ˜ ν•¨μˆ˜

  • μž…λ ₯(input)을 λ°›μ•„ 좜λ ₯(output)을 λ‚΄λ³΄λ‚΄λŠ” 일련의 과정을 μ •μ˜

    ν”„λ‘œκ·Έλž˜λ° μ–Έμ–΄μ˜ ν•¨μˆ˜

  • 일련의 과정을 λ¬Έ(statement)으둜 κ΅¬ν˜„ν•˜κ³  μ½”λ“œ λΈ”λ‘μœΌλ‘œ κ°μ‹Έμ„œ ν•˜λ‚˜μ˜ μ‹€ν–‰ λ‹¨μœ„λ‘œ μ •μ˜ν•œ 것
  • ν•¨μˆ˜μ˜ μ •μ˜λ₯Ό 톡해 생성 ν•¨μˆ˜ν˜ΈμΆœμ„ 톡해 μ‹€ν–‰

ν•¨μˆ˜ μ‚¬μš© 이유

  1. μ½”λ“œμ˜ μž¬μ‚¬μš©μ„ ν†΅ν•œ 쀑볡 μ΅œμ†Œν™”
  2. μœ μ§€ 보수의 νŽΈμ˜μ„±
  3. μ½”λ“œ μ‹ λ’°μ„±
  4. μ½”λ“œμ˜ 가독성

ν•¨μˆ˜ λ¦¬ν„°λŸ΄

  • μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ ν•¨μˆ˜λŠ” 객체 νƒ€μž…μ˜ κ°’ μž…λ‹ˆλ‹€.
  • ν•¨μˆ˜λ„ ν•¨μˆ˜ λ¦¬ν„°λŸ΄λ‘œ 생성 κ°€λŠ₯ 즉, ν•¨μˆ˜λŠ” 객체
  • ν•¨μˆ˜λ₯Ό 객체둜 μ·¨κΈ‰ν•˜λŠ” 것은 js의 νŠΉμ§•
  • 일반 κ°μ²΄λŠ” ν˜ΈμΆœν•  수 μ—†μ§€λ§Œ ν•¨μˆ˜λŠ” 호좜 κ°€λŠ₯

ν•¨μˆ˜ μ •μ˜

  • λ³€μˆ˜λŠ” μ„ μ–Έ ν•œλ‹€κ³  ν•˜μ§€λ§Œ ν•¨μˆ˜λŠ” μ •μ˜ ν•œλ‹€κ³  ν‘œν˜„ν•¨
  • ν•¨μˆ˜ μ •μ˜λŠ” 4가지 λ°©λ²•μœΌλ‘œ κ°€λŠ₯
    • ν•¨μˆ˜ μ„ μ–Έλ¬Έ
    • ν•¨μˆ˜ ν‘œν˜„μ‹
    • Function μƒμ„±μž ν•¨μˆ˜
    • ν™”μ‚΄ν‘œ ν•¨μˆ˜(es6)

ν•¨μˆ˜ μ„ μ–Έλ¬Έ

  • ν•¨μˆ˜ 선언문은 ν‘œν˜„μ‹μ΄ μ•„λ‹Œ λ¬Έ
  • ν‘œν˜„μ‹μ΄ μ•„λ‹Œ 문은 λ³€μˆ˜μ— ν• λ‹Ήν•  수 μ—†λ‹€, 그런데 ν•¨μˆ˜ 선언문은 λ³€μˆ˜μ— ν• λ‹Ήν•˜λŠ” 게 κ°€λŠ₯
var add = function add(x,y){
    return x + y;
}
// ν•¨μˆ˜ 호좜
console.log(add(2,5)); // 7
  • jsμ—μ„œλŠ” μ€‘μ˜μ μΈ μ½”λ“œκ°€ μ‘΄μž¬ν•˜κΈ° λ•Œλ¬Έ
    • {}은 블둝문 μΌμˆ˜λ„ 있고 κ°μ²΄λ¦¬ν„°λŸ΄ μΌμˆ˜λ„ μžˆλ‹€.

      μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진이 μ½”λ“œ λ¬Έλ§₯에 닀라 해석을 λ‹€λ₯΄κ²Œ 함

    • κΈ°λͺ… ν•¨μˆ˜ λ¦¬ν„°λŸ΄(ν•¨μˆ˜μ΄λ¦„)도 μ€‘μ˜μ μΈ μ½”λ“œ

      ν•¨μˆ˜ λ¦¬ν„°λŸ΄μ„ λ‹¨λ…μœΌλ‘œ μ‚¬μš© μ‹œ ν•¨μˆ˜ μ„ μ–Έλ¬ΈμœΌλ‘œ 해석, λ³€μˆ˜ν• λ‹Ή ν˜Ήμ€ ν”Όμ—°μ‚°μžλ‘œ μ‚¬μš© μ‹œ ν•¨μˆ˜ λ¦¬ν„°λŸ΄ ν‘œν˜„μ‹μœΌλ‘œ 해석

  • ν•¨μˆ˜ μ„ μ–Έ μ‹œ μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 μƒμ„±λœ ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜κΈ° μœ„ν•΄ ν•¨μˆ˜ 이름과 λ™μΌν•œ μ΄λ¦„μ˜ μ‹λ³„μžλ₯Ό μ•”λ¬΅μ μœΌλ‘œ μƒμ„±ν•˜κ³  거기에 ν•¨μˆ˜ 객체λ₯Ό ν• λ‹Ή
  • ν•¨μˆ˜λŠ” ν•¨μˆ˜μ΄λ¦„μœΌλ‘œ ν˜ΈμΆœν•˜λŠ” 것이 μ•„λ‹ˆλΌ ν•¨μˆ˜ 객체λ₯Ό κ°€λ¦¬ν‚€λŠ” μ‹λ³„μžλ‘œ ν˜ΈμΆœν•¨

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

  • μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ ν•¨μˆ˜λŠ” 일급 객체

    일급 κ°μ²΄λž€ κ°’μ˜ μ„±μ§ˆμ„ κ°–λŠ” 객체λ₯Ό λ§ν•œλ‹€.
    μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ ν•¨μˆ˜λŠ” λ³€μˆ˜μ—ν• λ‹Ή, ν”„λ‘œνΌν‹°μ˜ κ°’, λ°°μ—΄μ˜ μš”μ†Œ λ“± 값이 될 수 μžˆμœΌλ―€λ‘œ 일급객체 이닀

  • ν•¨μˆ˜ λ¦¬ν„°λŸ΄λ‘œ μƒμ„±ν•œ 객체λ₯Ό λ³€μˆ˜μ— ν• λ‹Ήν•œ 것을 ν•¨μˆ˜ ν‘œν˜„μ‹ 이라고 함
  • μ΄λ•Œ ν•¨μˆ˜ 이름을 μƒλž΅ν•˜λ©΄ 읡λͺ…ν•¨μˆ˜

ν•¨μˆ˜ 생성 μ‹œμ κ³Ό ν˜Έμ΄μŠ€νŒ…

  • ν•¨μˆ˜ μ„ μ–Έλ¬Έκ³Ό ν•¨μˆ˜ ν‘œν˜„μ‹μœΌλ‘œ μ •μ˜ν•œ ν•¨μˆ˜λŠ” 각각 생성 μ‹œμ μ΄ 닀름
// ν•¨μˆ˜ μ°Έμ‘°
console.dir(add); // Ζ’ add(x, y)
console.dir(sub); // undefined

// ν•¨μˆ˜ 호좜
console.log(add(2, 5)); // 7
console.log(sub(2, 5)); // TypeError: sub is not a function

// ν•¨μˆ˜ μ„ μ–Έλ¬Έ
function add(x, y) {
  return x + y;
}

// ν•¨μˆ˜ ν‘œν˜„μ‹
var sub = function (x, y) {
  return x - y;
};
  • ν•¨μˆ˜ 선언문은 λ³€μˆ˜ μ„ μ–Έ 처럼 λŸ°ν„°μž„ 이전에 ν˜Έμ΄μŠ€νŒ… λœλ‹€.
  • 단, ν•¨μˆ˜ 선언문은 ν˜Έμ΄μŠ€νŒ…μ‹œ λ³€μˆ˜ 처럼 undefined둜 μ΄ˆκΈ°ν™” λ˜λŠ” 게 μ•„λ‹ˆλΌ μ•”λ¬΅μ μœΌλ‘œ ν•¨μˆ˜ 객체둜 μ΄ˆκΈ°ν™” λœλ‹€.
  • ν•¨μˆ˜ ν‘œν˜„μ‹μ€ λ³€μˆ˜μ— ν•¨μˆ˜ λ¦¬ν„°λŸ΄μ΄ 할당됨 즉 λ³€μˆ˜κ°€ undefined둜 ν˜Έμ΄μŠ€νŒ… 되고 λŸ°νƒ€μž„μ— ν•¨μˆ˜ λ¦¬ν„°λŸ΄μ΄ ν‰κ°€λ˜μ–΄ ν•¨μˆ˜ 객체 κ°€ λœλ‹€.
  • 정리 : ν•¨μˆ˜ ν‘œν˜„μ‹μ€ λ³€μˆ˜ ν˜Έμ΄μŠ€νŒ… λ°œμƒ, ν•¨μˆ˜ ν‘œν˜„μ‹ μ‚¬μš©μ„ ꢌμž₯

ν™”μ‚΄ν‘œ ν•¨μˆ˜

  • κΈ°μ‘΄ ν•¨μˆ˜μ™€ λΉ„κ΅ν•˜μ—¬ ν‘œν˜„κ³Ό λ‚΄λΆ€ λ™μž‘μ΄ κ°„λž΅ν™” 됨
  • μƒμ„±μž ν•¨μˆ˜λ‘œ μ‚¬μš©ν•  수 μ—†λ‹€.
  • this 바인딩 방식이 κΈ°μ‘΄ ν•¨μˆ˜μ™€ 닀름
  • prototype ν”„λ‘œνΌν‹°κ°€ μ—†μŒ
  • arguments 객체λ₯Ό μƒμ„±ν•˜μ§€ μ•ŠλŠ”λ‹€.

ν•¨μˆ˜ 호좜

  • ν•¨μˆ˜ 호좜 μ‹œ μΈμˆ˜μ™€ 맀개 λ³€μˆ˜μ˜ κ°œμˆ˜κ°€ μΌμΉ˜ν•˜λŠ” μ§€λŠ” μ²΄ν¬ν•˜μ§€ μ•ŠλŠ”λ‹€.
  • μΈμˆ˜κ°€ ν• λ‹Ήλ˜μ§€ μ•Šμ€ λ§€κ°œλ³€μˆ˜λŠ” undefined, 초과된 μΈμˆ˜λŠ” λ¬΄μ‹œ
  • ν•¨μˆ˜λŠ” ν•œ 가지 일만 ν•΄μ•Ό ν•˜λ©° 가급적 μž‘κ²Œ λ§Œλ“€μ–΄μ•Ό ν•œλ‹€.
  • return ν‚€μ›Œλ“œ 뒀에 λ°˜ν™˜κ°’μœΌλ‘œ μ‚¬μš© ν•  ν‘œν˜„μ‹μ„ λͺ…μ‹œμ μœΌλ‘œ μ§€μ •ν•˜μ§€ μ•ŠμœΌλ©΄ undefinedκ°€ λ°˜ν™˜λœλ‹€.

참쑰에 μ˜ν•œ 전달과 μ™ΈλΆ€ μƒνƒœμ˜ λ³€κ²½

  • ν•¨μˆ˜ λ‚΄λΆ€μ—μ„œ μ°Έμ‘° 값을 λ³€κ²½ν•˜λ©΄ 원본 객체의 값이 λ°”λ€ŒλŠ” side effectκ°€ λ°œμƒν•  수 있음
  • side effectλŒ€ν•œ 해결법
    • μ˜΅μ €λ²„ νŒ¨ν„΄ μ‚¬μš©
    • 객체λ₯Ό λΆˆλ³€κ°μ²΄(immutable object)둜 λ§Œλ“€μ–΄ μ‚¬μš©

      κΉŠμ€ 볡사λ₯Ό 톡해 μƒˆλ‘œμš΄ 객체λ₯Ό μƒμ„±ν•˜κ³  μž¬ν• λ‹Ήμ„ 톡해 κ΅μ²΄ν•˜λŠ” 방법

  • μ™ΈλΆ€μƒνƒœλ₯Ό λ³€κ²½ν•˜μ§€ μ•Šκ³ , μ˜μ‘΄ν•˜μ§€ μ•ŠλŠ” ν•¨μˆ˜λ₯Ό 순수 ν•¨μˆ˜ 라고 ν•œλ‹€. (ν•¨μˆ˜ν˜• ν”„λ‘œκ·Έλž˜λ°)

λ‹€μ–‘ν•œ ν•¨μˆ˜ ν˜•νƒœ

μ¦‰μ‹œ μ‹€ν–‰ν•¨μˆ˜

  • ν•¨μˆ˜ μ •μ˜μ™€ λ™μ‹œμ— μ¦‰μ‹œ 호좜 λ˜λŠ” ν•¨μˆ˜λ₯Ό μ¦‰μ‹œ μ‹€ν–‰ ν•¨μˆ˜(IIFE : Immediately Invoked Function Expression) 라고 ν•œλ‹€.
  • μ¦‰μ‹œ μ‹€ν–‰ ν•¨μˆ˜λŠ” 단 ν•œλ²ˆλ§Œ 호좜되며 λ‹€μ‹œ ν˜ΈμΆœν•  수 μ—†μŠ΅λ‹ˆλ‹€.
// 읡λͺ… μ¦‰μ‹œ μ‹€ν–‰ ν•¨μˆ˜
(function () {
  var a = 3;
  var b = 5;
  return a * b;
}());

// μ¦‰μ‹œ μ‹€ν–‰ ν•¨μˆ˜λ„ 일반 ν•¨μˆ˜μ²˜λŸΌ 값을 λ°˜ν™˜ν•  수 μžˆλ‹€.
var res = (function () {
  var a = 3;
  var b = 5;
  return a * b;
}());

console.log(res); // 15

// μ¦‰μ‹œ μ‹€ν–‰ ν•¨μˆ˜μ—λ„ 일반 ν•¨μˆ˜μ²˜λŸΌ 인수λ₯Ό 전달할 수 μžˆλ‹€.
res = (function (a, b) {
  return a * b;
}(3, 5));

console.log(res); // 15
  • λ³€μˆ˜λ‚˜ ν•¨μˆ˜ μ΄λ¦„μ˜ μΆ©λŒμ„ λ°©μ§€ν•˜κΈ° μœ„ν•΄ μ‚¬μš©

쀑첩 ν•¨μˆ˜

  • ν•¨μˆ˜ 내뢀에 μ •μ˜λœ ν•¨μˆ˜λ₯Ό 쀑첩 ν•¨μˆ˜ λ˜λŠ” λ‚΄λΆ€ ν•¨μˆ˜λΌκ³  ν•œλ‹€.
  • 쀑첩 ν•¨μˆ˜λŠ” μ™ΈλΆ€ ν•¨μˆ˜ λ‚΄λΆ€μ—μ„œλ§Œ 호좜 κ°€λŠ₯
  • μ™ΈλΆ€ ν•¨μˆ˜λ₯Ό λ•λŠ” ν—¬νΌν•¨μˆ˜μ˜ 역할을함
  • μŠ€μ½”ν”„, ν΄λ‘œμ €μ™€ κ΄€λ ¨

콜백 ν•¨μˆ˜

  • ν•¨μˆ˜μ˜ λ§€κ°œλ³€μˆ˜λ₯Ό 톡해 λ‹€λ₯Έ ν•¨μˆ˜μ˜ λ‚΄λΆ€λ‘œ μ „λ‹¬λ˜λŠ” ν•¨μˆ˜λ₯Ό 콜백 ν•¨μˆ˜λΌκ³  ν•©λ‹ˆλ‹€.
  • λ§€κ°œλ³€μˆ˜λ₯Ό 톡해 ν•¨μˆ˜μ˜ μ™ΈλΆ€μ—μ„œ 콜백 ν•¨μˆ˜λ₯Ό μ „λ‹¬λ°›μŒ ν•¨μˆ˜λ₯Ό κ³ μ°¨ ν•¨μˆ˜(HOF : Higher-Order Function)이라고 ν•œλ‹€.
  • κ³ μ°¨ ν•¨μˆ˜λŠ” 콜백 ν•¨μˆ˜λ₯Ό μžμ‹ μ˜ μΌλΆ€λΆ„μœΌλ‘œ ν•©μ„±
  • κ³ μ°¨ ν•¨μˆ˜λŠ” 전달 받을 콜백 ν•¨μˆ˜μ˜ 호좜 μ‹œμ μ„ κ²°μ •
  • 콜백 ν•¨μˆ˜λŠ” κ³ μ°¨ ν•¨μˆ˜μ— μ˜ν•΄ 호좜 되며, κ³ μ°¨ ν•¨μˆ˜λŠ” ν•„μš”μ— 따둝 콜백 ν•¨μˆ˜μ— 인수λ₯Ό 전달할 수 μžˆλ‹€.

순수 ν•¨μˆ˜

  • ν•¨μˆ˜ν˜• ν”„λ‘œκ·Έλž˜λ°μ—μ„œ μ–΄λ–€ μ™ΈλΆ€ μƒνƒœμ— μ˜μ‘΄ν•˜μ§€ μ•Šκ³ , 변경도 ν•˜μ§€ μ•ŠλŠ” 즉, λΆ€μˆ˜νš¨κ³Ό(side effect)κ°€ μ—†λŠ” ν•¨μˆ˜λ₯Ό 순수 ν•¨μˆ˜ 라고 ν•œλ‹€.
  • ν•˜λ‚˜ μ΄μƒμ˜ 인자λ₯Ό μ „λ‹¬λ°›μœΌλ©°, μ–Έμ œλ‚˜ λ™μΌν•œ 값을 λ°˜ν™˜ν•œλ‹€.
  • 인수λ₯Ό λ³€κ²½ν•˜μ§€ μ•ŠλŠ” 것이 κΈ°λ³Έ
var count = 0; // ν˜„μž¬ 카운트λ₯Ό λ‚˜νƒ€λ‚΄λŠ” μƒνƒœ

// 순수 ν•¨μˆ˜ increaseλŠ” λ™μΌν•œ μΈμˆ˜κ°€ μ „λ‹¬λ˜λ©΄ μ–Έμ œλ‚˜ λ™μΌν•œ 값을 λ°˜ν™˜ν•œλ‹€.
function increase(n) {
  return ++n;
}

// 순수 ν•¨μˆ˜κ°€ λ°˜ν™˜ν•œ 결과값을 λ³€μˆ˜μ— μž¬ν• λ‹Ήν•΄μ„œ μƒνƒœλ₯Ό λ³€κ²½
count = increase(count);
console.log(count); // 1

count = increase(count);
console.log(count); // 2

λŒ“κΈ€