[TIL] 220110

leesyongยท2022๋…„ 1์›” 10์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
145/204
post-thumbnail

๐Ÿ“ ์˜ค๋Š˜ ํ•œ ๊ฒƒ

  1. ํด๋กœ์ €

๐Ÿ“– ํ•™์Šต ์ž๋ฃŒ

  1. ์ฑ… ใ€Ž์ฝ”์–ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธใ€

๐Ÿ“š ๋ฐฐ์šด ๊ฒƒ

5. ํด๋กœ์ €

[TIL] 210915 ์ฐธ๊ณ 

1) ํด๋กœ์ €์˜ ์˜๋ฏธ ๋ฐ ์›๋ฆฌ ์ดํ•ด

ํด๋กœ์ €๋ž€ ํ•จ์ˆ˜์™€ ๊ทธ ํ•จ์ˆ˜๊ฐ€ ์„ ์–ธ๋  ๋‹น์‹œ์˜ LexicalEnvironment์˜ ์ƒํ˜ธ๊ด€๊ณ„์— ๋”ฐ๋ฅธ ํ˜„์ƒ์„ ๋งํ•œ๋‹ค.
๋‹ค๋ฅธ ๋ง๋กœ๋Š”, ์–ด๋–ค ํ•จ์ˆ˜์—์„œ ์„ ์–ธํ•œ ๋ณ€์ˆ˜๋ฅผ ์ฐธ์กฐํ•˜๋Š” ๋‚ด๋ถ€ ํ•จ์ˆ˜์—์„œ๋งŒ ๋ฐœ์ƒํ•˜๋Š” ํ˜„์ƒ์ด๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ๋‹ค.

์ดํ•ดํ•˜๊ธฐ ์–ด๋ ต๊ธฐ ๋•Œ๋ฌธ์— ์„ค๋ช…์„ ๋ง๋ถ™์ด์ž๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

var outer = function () {
  var a = 1;
  var inner = function () {
    console.log(++a);
  };
  return inner();
};

var outer2 = outer();
consol.elog(outer2);

์œ„ ์˜ˆ์ œ๋Š” ์ผ๋ฐ˜์ ์ธ ํ•จ์ˆ˜ ๋ฐ ๋‚ด๋ถ€ ํ•จ์ˆ˜์—์„œ์˜ ๋™์ž‘์„ ๋ณด์—ฌ์ค€๋‹ค.
์ผ๋ฐ˜์ ์œผ๋กœ outer ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๊ฐ€ ์ข…๋ฃŒ๋˜๋ฉด LexicalEnvironment์— ์ €์žฅ๋œ ์‹๋ณ„์ž๋“ค(a, inner)์— ๋Œ€ํ•œ ์ฐธ์กฐ๋ฅผ ์ง€์šด๋‹ค.
๊ทธ๋Ÿฌ๋ฉด ๊ฐ ์ฃผ์†Œ์— ์ €์žฅ๋˜์–ด ์žˆ๋˜ ๋ฐ์ดํ„ฐ ์˜์—ญ์˜ ๊ฐ’๋“ค์€ ์ž์‹ ์„ ์ฐธ์กฐํ•˜๋Š” ๋ณ€์ˆ˜๊ฐ€ ํ•˜๋‚˜๋„ ์—†๊ฒŒ ๋˜๋ฏ€๋กœ ๊ฐ€๋น„์ง€ ์ปฌ๋ ‰ํ„ฐ์˜ ์ˆ˜์ง‘ ๋Œ€์ƒ์ด ๋œ๋‹ค.
์ด ๊ฒฝ์šฐ outer ํ•จ์ˆ˜์˜ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๊ฐ€ ์ข…๋ฃŒ๋˜๊ธฐ ์ „์— inner ํ•จ์ˆ˜์˜ ์ปจํ…์ŠคํŠธ๊ฐ€ ์ข…๋ฃŒ๋˜๊ณ , ์ดํ›„์— ๋ณ„๋„๋กœ inner ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•  ์ˆ˜๋„ ์—†๋‹ค.

var outer = function () {
  var a = 1;
  var inner = function () {
    return ++a;
  };
  return inner;
};

var outer2 = outer();
console.log(outer2());
console.log(outer2());

๋ฐ˜๋ฉด์—, ์œ„ ์˜ˆ์ œ๋Š” ๋Œ€ํ‘œ์ ์ธ ํด๋กœ์ €์˜ ์˜ˆ์‹œ์ด๋‹ค.
์ด ๊ฒฝ์šฐ outer ํ•จ์ˆ˜๊ฐ€ inner ํ•จ์ˆ˜๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์— outer ํ•จ์ˆ˜์˜ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๊ฐ€ ์ข…๋ฃŒ๋œ ํ›„์—๋„ inner ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ๋‹ค.

outer2()์— ์˜ํ•ด inner ํ•จ์ˆ˜๊ฐ€ ํ˜ธ์ถœ๋˜๋Š”๋ฐ inner ํ•จ์ˆ˜๋Š” ๋ณ€์ˆ˜ a์˜ ๊ฐ’์„ ์ฐธ์กฐํ•˜๊ณ  ์žˆ๋‹ค.
LexicalEnvironment์˜ environmentRecord์™€ outerEnvironmentReference์— ์˜ํ•ด ๋ณ€์ˆ˜์˜ ์œ ํšจ๋ฒ”์œ„์ธ ์Šค์ฝ”ํ”„๊ฐ€ ๊ฒฐ์ •๋˜๊ณ  ์Šค์ฝ”ํ”„ ์ฒด์ธ์ด ๊ฐ€๋Šฅํ•ด์ง„๋‹ค.
๊ทธ๋Ÿฐ๋ฐ inner ํ•จ์ˆ˜์˜ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ์˜ environmentRecord์—์„œ๋Š” ๋ณ€์ˆ˜ a๋ฅผ ์ฐพ์„ ์ˆ˜ ์—†์œผ๋ฏ€๋กœ outerEnvironmentReference์—์„œ ์ฐพ์•„์•ผ ํ•œ๋‹ค.
inner ํ•จ์ˆ˜์˜ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ์˜ outerEnvironmentReference์—๋Š” inner ํ•จ์ˆ˜๊ฐ€ ์„ ์–ธ๋  ๋‹น์‹œ์˜ LexicalEnvironment์ธ outer ํ•จ์ˆ˜์˜ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ์˜ LexicalEnvironment๊ฐ€ ๋‹ด๊ธด๋‹ค.
์Šค์ฝ”ํ”„ ์ฒด์ด๋‹์— ๋”ฐ๋ผ outer ํ•จ์ˆ˜์—์„œ ์„ ์–ธํ•œ ๋ณ€์ˆ˜ a์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์–ด console ์ฐฝ์—๋Š” ๊ฐ๊ฐ 2์™€ 3์ด๋ผ๋Š” ๊ฐ’์ด ์ถœ๋ ฅ๋œ๋‹ค.

๊ทธ๋Ÿฐ๋ฐ inner ํ•จ์ˆ˜์˜ ์‹คํ–‰ ์‹œ์ ์—๋Š” outer ํ•จ์ˆ˜๋Š” ์ด๋ฏธ ์‹คํ–‰์ด ์ข…๋ฃŒ๋œ ์ƒํƒœ์ž„์—๋„ ์–ด๋–ป๊ฒŒ outer ํ•จ์ˆ˜์˜ LexicalEnvironment์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š” ๊ฑธ๊นŒ?
์ด๋Š” ์–ด๋–ค ๊ฐ’์„ ์ฐธ์กฐํ•˜๋Š” ๋ณ€์ˆ˜๊ฐ€ ํ•˜๋‚˜๋ผ๋„ ์žˆ๋‹ค๋ฉด ๊ทธ ๊ฐ’์€ ์ˆ˜์ง‘ ๋Œ€์ƒ์— ํฌํ•จ์‹œํ‚ค์ง€ ์•Š๋Š” ๊ฐ€๋น„์ง€ ์ปฌ๋ ‰ํ„ฐ์˜ ๋™์ž‘ ๋ฐฉ์‹ ๋•Œ๋ฌธ์ด๋‹ค.
์ฆ‰, ์œ„ ์˜ˆ์ œ์˜ ๊ฒฝ์šฐ inner ํ•จ์ˆ˜๊ฐ€ ์™ธ๋ถ€๋กœ ์ „๋‹ฌ๋˜์–ด(outer2 ๋ณ€์ˆ˜๋กœ ์ „๋‹ฌ) ์–ธ์ œ๋“  outer2()์— ์˜ํ•ด inner ํ•จ์ˆ˜๊ฐ€ ํ˜ธ์ถœ๋  ์—ฌ์ง€๊ฐ€ ์žˆ๋Š” ์ƒํ™ฉ์—์„œ inner ํ•จ์ˆ˜๋Š” ๋ณ€์ˆ˜ a๋ฅผ ์ฐธ์กฐํ•˜๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์— inner ํ•จ์ˆ˜๋ฅผ return ํ•˜๋ฉด์„œ outer ํ•จ์ˆ˜์˜ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๊ฐ€ ์ข…๋ฃŒ๋˜์—ˆ์Œ์—๋„ ๋ณ€์ˆ˜ a๊ฐ€ ๊ฐ€๋น„์ง€ ์ปฌ๋ ‰ํŒ…๋˜์ง€ ์•Š๋Š” ๊ฒƒ์ด๋‹ค.

์ด๋ฅผ ๋ฐ”ํƒ•์œผ๋กœ ํด๋กœ์ €์˜ ์ •์˜๋ฅผ ๋‹ค์‹œ ์‰ฝ๊ฒŒ ํ’€์–ด์“ฐ๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.
ํด๋กœ์ €๋ž€ ์™ธ๋ถ€ ํ•จ์ˆ˜์˜ ์ง€์—ญ๋ณ€์ˆ˜๋ฅผ ์ฐธ์กฐํ•˜๋Š” ๋‚ด๋ถ€ ํ•จ์ˆ˜๊ฐ€ ์™ธ๋ถ€๋กœ ์ „๋‹ฌ๋œ ๊ฒฝ์šฐ, ์™ธ๋ถ€ ํ•จ์ˆ˜์˜ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๊ฐ€ ์ข…๋ฃŒ๋œ ์ดํ›„์—๋„ ์™ธ๋ถ€ ํ•จ์ˆ˜์˜ ๋ณ€์ˆ˜ a๊ฐ€ ์‚ฌ๋ผ์ง€์ง€ ์•Š๋Š”(๊ฐ€๋น„์ง€ ์ปฌ๋ ‰ํŒ…๋˜์ง€ ์•Š๋Š”) ํ˜„์ƒ์„ ๋งํ•œ๋‹ค. (์ด๋•Œ, ์™ธ๋ถ€ ํ•จ์ˆ˜ โ‰  ์™ธ๋ถ€)

์œ„ ์˜ˆ์ œ๋ฅผ ๋น—๋Œ€์–ด ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์„ค๋ช…ํ•  ์ˆ˜ ์žˆ๋‹ค.
ํด๋กœ์ €๋ž€ ์™ธ๋ถ€ ํ•จ์ˆ˜(outer)์˜ ์ง€์—ญ๋ณ€์ˆ˜(a)๋ฅผ ์ฐธ์กฐํ•˜๋Š” ๋‚ด๋ถ€ ํ•จ์ˆ˜(inner)๊ฐ€ ์™ธ๋ถ€๋กœ ์ „๋‹ฌ(return inner โ†’ outer2 ๋ณ€์ˆ˜์— ํ• ๋‹น)๋œ ๊ฒฝ์šฐ, ์™ธ๋ถ€ ํ•จ์ˆ˜์˜ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๊ฐ€ ์ข…๋ฃŒ๋œ ์ดํ›„์—๋„(inner ํ•จ์ˆ˜๋ฅผ return ํ•˜๋ฉฐ ์ข…๋ฃŒ) ์™ธ๋ถ€ ํ•จ์ˆ˜์˜ ๋ณ€์ˆ˜ a๊ฐ€ ์‚ฌ๋ผ์ง€์ง€ ์•Š๋Š” ํ˜„์ƒ์„ ๋งํ•œ๋‹ค.

ํ•œํŽธ, ๋‚ด๋ถ€ ํ•จ์ˆ˜๋ฅผ return ํ•˜๋Š” ๊ฒƒ ์™ธ์—๋„ ๋‚ด๋ถ€ ํ•จ์ˆ˜๋ฅผ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋กœ ์‚ฌ์šฉํ•˜์—ฌ ์™ธ๋ถ€์— ์ „๋‹ฌํ•  ์ˆ˜๋„ ์žˆ๋‹ค.
๋‚ด๋ถ€ ํ•จ์ˆ˜๋ฅผ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋กœ ์‚ฌ์šฉํ•˜๋ฉด์„œ ์™ธ๋ถ€๋กœ ์ „๋‹ฌํ•˜๋Š” ๋Œ€ํ‘œ์ ์ธ ์˜ˆ๋กœ๋Š” setInterval/setTimeout๊ณผ addEventListener๋ฅผ ๋“ค ์ˆ˜ ์žˆ๋‹ค.
์ด ๊ฒฝ์šฐ return์ด ์—†์–ด๋„ ํด๋กœ์ €๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค.

// setInterval
(function () {
  var a = 0;
  var intervalId = null;
  var inner = function () {
    if (++a >= 10) {
      clearInterval(intervalId);
    }
    console.log(a);
  };
  intervalId = setInterval(inner, 1000);
})();

setInterval ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋จ์— ๋”ฐ๋ผ (์ฆ‰์‹œ ์‹คํ–‰ ํ•จ์ˆ˜๋กœ ํ‘œํ˜„๋œ) ์ต๋ช… ํ•จ์ˆ˜์˜ ์‹คํ–‰์ด ์™„๋ฃŒ๋˜์–ด ์ต๋ช… ํ•จ์ˆ˜์˜ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๊ฐ€ ์ข…๋ฃŒ๋œ๋‹ค.
๊ทธ๋Ÿฌ๋‚˜, ์ต๋ช… ํ•จ์ˆ˜์—์„œ ์„ ์–ธ๋œ ๋ณ€์ˆ˜ a๋ฅผ ์ฐธ์กฐํ•˜๋Š” inner ํ•จ์ˆ˜๊ฐ€ setInterval ํ•จ์ˆ˜์˜ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋กœ ์ „๋‹ฌ๋˜์–ด 1์ดˆ๋งˆ๋‹ค ํ˜ธ์ถœ๋˜๊ธฐ ๋•Œ๋ฌธ์—
๋น„๋ก (์ฆ‰์‹œ ์‹คํ–‰ ํ•จ์ˆ˜๋กœ ํ‘œํ˜„๋œ) ์ต๋ช… ํ•จ์ˆ˜์˜ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๊ฐ€ ์ข…๋ฃŒ๋˜์—ˆ๋”๋ผ๋„ (๊ณ„์†ํ•ด์„œ ํ˜ธ์ถœ์ด ๋  inner ํ•จ์ˆ˜๋ฅผ ์œ„ํ•ด) ๋ณ€์ˆ˜ a๋Š” ์‚ฌ๋ผ์ง€์ง€ ์•Š๋Š”๋‹ค.

// addEventListener
(function () {
  var count = 0;
  var button = document.createElement("button");
  button.innerText = "click";
  button.addEventListener("click", function () {
    console.log(++count, "times clicked");
  });
  document.body.appendChild(button);
})

button์„ body์˜ ๋งˆ์ง€๋ง‰ ์ž์‹ ์š”์†Œ๋กœ ์ถ”๊ฐ€ํ•˜๋ฉด์„œ (์ฆ‰์‹œ ์‹คํ–‰ ํ•จ์ˆ˜๋กœ ํ‘œํ˜„๋œ) ์ต๋ช… ํ•จ์ˆ˜์˜ ์‹คํ–‰์ด ์™„๋ฃŒ๋˜์–ด ์ต๋ช… ํ•จ์ˆ˜์˜ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๊ฐ€ ์ข…๋ฃŒ๋œ๋‹ค.
๊ทธ๋Ÿฌ๋‚˜, ์ต๋ช… ํ•จ์ˆ˜์—์„œ ์„ ์–ธ๋œ ๋ณ€์ˆ˜ count๋ฅผ ์ฐธ์กฐํ•˜๋Š” (์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ) ์ต๋ช… ํ•จ์ˆ˜๊ฐ€ addEventListener์˜ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋กœ ์ „๋‹ฌ๋˜์–ด ๋ฒ„ํŠผ์ด ํด๋ฆญ๋  ๋•Œ๋งˆ๋‹ค ํ˜ธ์ถœ๋  ๊ฒƒ์ด๊ธฐ ๋•Œ๋ฌธ์—
๋น„๋ก (์ฆ‰์‹œ ์‹คํ–‰ ํ•จ์ˆ˜๋กœ ํ‘œํ˜„๋œ) ์ต๋ช… ํ•จ์ˆ˜์˜ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๊ฐ€ ์ข…๋ฃŒ๋˜์—ˆ๋”๋ผ๋„ (๋ฒ„ํŠผ์ด ํด๋ฆญ๋  ๋•Œ๋งˆ๋‹ค ๊ณ„์†ํ•ด์„œ ํ˜ธ์ถœ์ด ๋  ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ ์ต๋ช… ํ•จ์ˆ˜๋ฅผ ์œ„ํ•ด) ๋ณ€์ˆ˜ count๋Š” ์‚ฌ๋ผ์ง€์ง€ ์•Š๋Š”๋‹ค.

2) ํด๋กœ์ €์™€ ๋ฉ”๋ชจ๋ฆฌ ๊ด€๋ฆฌ ๐Ÿ™‹โ€โ™€๏ธ

ํด๋กœ์ €๋Š” ์˜๋„์ ์œผ๋กœ ํ•จ์ˆ˜์˜ ์ง€์—ญ ๋ณ€์ˆ˜๋ฅผ ๋ฉ”๋ชจ๋ฆฌ๋ฅผ ์†Œ๋ชจํ•˜๋„๋ก ํ•จ์œผ๋กœ์จ ๋ฐœ์ƒํ•œ๋‹ค.
๋”ฐ๋ผ์„œ, ๋ฉ”๋ชจ๋ฆฌ๋ฅผ ํšจ์œจ์ ์œผ๋กœ ๊ด€๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ๊ทธ ํ•„์š”์„ฑ์ด ์‚ฌ๋ผ์ง„ ์‹œ์ ์—๋Š” ๋”๋Š” ๋ฉ”๋ชจ๋ฆฌ๋ฅผ ์†Œ๋ชจํ•˜์ง€ ์•Š๋„๋ก ํ•ด์•ผ ํ•œ๋‹ค.

์ฐธ์กฐ ์นด์šดํŠธ๋ฅผ 0์œผ๋กœ ๋งŒ๋“ค๋ฉด, ๊ฐ€๋น„์ง€ ์ปฌํ…ํ„ฐ(GC)์˜ ์ˆ˜๊ฑฐ ๋Œ€์ƒ์ด ๋˜๊ณ , GC๊ฐ€ ์ˆ˜๊ฑฐํ•ด๊ฐ€๋ฉด ์†Œ๋ชจ๋๋˜ ๋ฉ”๋ชจ๋ฆฌ๊ฐ€ ํšŒ์ˆ˜๋œ๋‹ค.
์ฐธ์กฐ ์นด์šดํŠธ๋ฅผ 0์œผ๋กœ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด์„œ๋Š” ์‹๋ณ„์ž์— ์ฐธ์กฐํ˜•์ด ์•„๋‹Œ ๊ธฐ๋ณธํ˜• ๋ฐ์ดํ„ฐ(null ๋˜๋Š” undefined)๋ฅผ ํ• ๋‹นํ•ด์•ผ ํ•œ๋‹ค.

3) ํด๋กœ์ € ํ™œ์šฉ ์‚ฌ๋ก€

(1) ์ฝœ๋ฐฑ ํ•จ์ˆ˜ ๋‚ด๋ถ€์—์„œ ์™ธ๋ถ€ ๋ฐ์ดํ„ฐ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ ์ž ํ•  ๋•Œ

์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ ํ•จ์ˆ˜๋ฅผ ์˜ˆ๋กœ ๋“ค์—ˆ๋‹ค.

๋ฐฉ๋ฒ• 1: ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ๋‚ด๋ถ€ ํ•จ์ˆ˜๋กœ ์„ ์–ธํ•ด์„œ ์™ธ๋ถ€ ๋ณ€์ˆ˜๋ฅผ ์ง์ ‘ ์ฐธ์กฐํ•˜๊ธฐ

์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ ์•ˆ์—์„œ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ '์„ ์–ธ'ํ•˜๋ฉด์„œ ๊ทธ ์•ˆ์—์„œ ์™ธ๋ถ€ ๋ณ€์ˆ˜๋ฅผ ์ง์ ‘ ์ฐธ์กฐํ•˜๋„๋ก ํ•œ๋‹ค.
ํด๋กœ์ €๋ฅผ ์ด์šฉํ•œ ๋ฐฉ๋ฒ•์ด๋‹ค.

var fruits = ["apple", "banana", "peach"];
var $ul = document.createElement("ul");

fruits.forEach(function (fruit) {
  var $li = document.createElement("li");
  $li.innerText = fruit;
  $li.addEventListener("click", function () { // ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ๋‚ด๋ถ€ ํ•จ์ˆ˜๋กœ ์„ ์–ธ
    alert("your choice is " + fruit); // ์™ธ๋ถ€ ๋ณ€์ˆ˜ fruit ์ง์ ‘ ์ฐธ์กฐ
  });
  $ul.appendChild($li);
});

document.body.appendChild($ul);

๋ฐฉ๋ฒ• 2: bind ๋ฉ”์„œ๋“œ๋กœ ๊ฐ’์„ ์ง์ ‘ ๋„˜๊ฒจ์ฃผ๊ธฐ

์œ„ ์˜ˆ์ œ์—์„œ ๋ฐ˜๋ณต์„ ์ค„์ด๊ธฐ ์œ„ํ•ด ์ฝœ๋ฐฑ ํ•จ์ˆ˜(์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ ํ•จ์ˆ˜)๋ฅผ ์™ธ๋ถ€๋กœ ๋ถ„๋ฆฌํ•œ ํ›„ ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ ํ•จ์ˆ˜๋กœ ๋“ฑ๋กํ•  ๋•Œ bind ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.
(bind ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š์œผ๋ฉด alertFruit ํ•จ์ˆ˜์—์„œ ์ธ์ž๋กœ ๋„˜๊ฒจ์ค€ fruit๋Š” ์ด๋ฒคํŠธ ๊ฐ์ฒด๊ฐ€ ๋œ๋‹ค.)

์ด ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ•˜๋ฉด ๋ฏธ๋ฆฌ bind ๋ฉ”์„œ๋“œ๋กœ ๊ฐ’์„ ์ง์ ‘ ๋„˜๊ฒจ์ฃผ๊ธฐ ๋•Œ๋ฌธ์— ํด๋กœ์ €๋Š” ๋ฐœ์ƒํ•˜์ง€ ์•Š๋Š”๋‹ค.
๊ทธ๋Ÿฌ๋‚˜, bind ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด bind ๋ฉ”์„œ๋“œ์˜ ์ฒซ ๋ฒˆ์งธ ์ธ์ž๋Š” ๋ฌด์กฐ๊ฑด ์ƒˆ๋กœ ๋ฐ”์ธ๋”ฉํ•  this ๊ฐ’์ด๊ณ  ์ด ๊ฐ’์„ ์ƒ๋žตํ•  ์ˆ˜ ์—†๊ธฐ ๋•Œ๋ฌธ์— ์›๋ž˜์˜ this๋ฅผ ์œ ์ง€ํ•  ์ˆ˜ ์—†์„ ๋ฟ ์•„๋‹ˆ๋ผ
์›๋ž˜๋Š” ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ ํ•จ์ˆ˜์—์„œ ์ฒซ ๋ฒˆ์งธ ์ธ์ž๋กœ ์˜ค๋Š” ์ด๋ฒคํŠธ ๊ฐ์ฒด๊ฐ€ bind ๋ฉ”์„œ๋“œ์— ์˜ํ•ด ๋‘ ๋ฒˆ์งธ ์ธ์ž๊ฐ€ ๋˜๋Š” ์ ์„ ๊ฐ์•ˆํ•ด์•ผ ํ•œ๋‹ค.

...
var alertFruit = function (fruit) {
  alert("your choice is " + fruit);
};

fruits.forEach(function (fruit) {
  var $li = document.createElement("li");
  $li.innerText = fruit; // ์—ฌ๊ธฐ fruit๋ฅผ
  $li.addEventListener("click", alertFruit.bind(null, fruit)); // alertFruit์˜ ์ฒซ ๋ฒˆ์งธ ์ธ์ž๋กœ ๋„˜๊ฒจ์คŒ
  $ul.appendChild($li);
});
...

๋ฐฉ๋ฒ• 3: ๊ณ ์ฐจ ํ•จ์ˆ˜ ํ™œ์šฉํ•˜๊ธฐ

๊ณ ์ฐจ ํ•จ์ˆ˜๋ž€ ํ•จ์ˆ˜๋ฅผ ์ธ์ž๋กœ ๋ฐ›๊ฑฐ๋‚˜ 'ํ•จ์ˆ˜๋ฅผ return' ํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ๋งํ•œ๋‹ค.
์ด ๋˜ํ•œ $li๊ฐ€ ํด๋ฆญ๋์„ ๋•Œ fruit ๋ณ€์ˆ˜์˜ ๊ฐ’์„ ์ด๋ฏธ ์ข…๋ฃŒ๋œ forEach ์‹คํ–‰ ์ปจํ…์ŠคํŠธ์—์„œ ์ฐพ์•„์•ผ ํ•˜๋ฏ€๋กœ ํด๋กœ์ €๋ฅผ ์ ๊ทน์ ์œผ๋กœ ํ™œ์šฉํ•œ ๋ฐฉ๋ฒ•์ด๋‹ค.
bind ๋ฉ”์„œ๋“œ๋ฅผ ์ด์šฉํ•œ ๋ฐฉ๋ฒ•๊ณผ๋Š” ๋‹ฌ๋ฆฌ, ์ฝœ๋ฐฑ ํ•จ์ˆ˜(์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ ํ•จ์ˆ˜) ๋‚ด๋ถ€์˜ this์™€ ๊ทธ ์ฒซ ๋ฒˆ์งธ ์ธ์ž(์ด๋ฒคํŠธ ๊ฐ์ฒด)๋„ ๋ณ€๊ฒฝํ•˜๋Š” ์ผ ์—†์ด ์™ธ๋ถ€ ๋ณ€์ˆ˜๋ฅผ ์ฐธ์กฐํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•œ๋‹ค.

var alertFruitBuilder = function (fruit) {
  return function () { // ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ ํ•จ์ˆ˜์˜ ์ฒซ ๋ฒˆ์งธ ์ธ์ž๋กœ๋Š” ์›๋ž˜๋Œ€๋กœ ์ด๋ฒคํŠธ ๊ฐ์ฒด๊ฐ€ ์˜ค๊ฒŒ ๋œ๋‹ค
    alert("your choice is " + fruit);
  };
}

fruits.forEach(function (fruit) {
  var $li = document.createElement("li");
  $li.innerText = fruit;
  $li.addEventListener("click", alertFruitBuilder(fruit));
  $ul.appendChild($li);
});

(2) ์ ‘๊ทผ ๊ถŒํ•œ ์ œ์–ด (์ •๋ณด ์€๋‹‰)

์ •๋ณด ์€๋‹‰์ด๋ž€ ์–ด๋–ค ๋ชจ๋“ˆ์˜ ๋‚ด๋ถ€ ๋กœ์ง์— ๋Œ€ํ•ด ์™ธ๋ถ€๋กœ์˜ ๋…ธ์ถœ์„ ์ตœ์†Œํ™”ํ•˜๋Š” ๊ฒƒ์„ ๋งํ•œ๋‹ค.
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ๋ณ€์ˆ˜ ์ž์ฒด์— ์ ‘๊ทผ ๊ถŒํ•œ์„ ์ง์ ‘ ๋ถ€์—ฌํ•˜๋„๋ก ์„ค๊ณ„๋˜์–ด ์žˆ์ง€๋Š” ์•Š๋‹ค.
๊ทธ๋Ÿฌ๋‚˜, ํด๋กœ์ €๋ฅผ ํ™œ์šฉํ•˜๋ฉด ํ•จ์ˆ˜ ์ฐจ์›์—์„œ, publicํ•œ ๊ฐ’๊ณผ privateํ•œ ๊ฐ’์„ ๊ตฌ๋ถ„ํ•  ์ˆ˜ ์žˆ๋‹ค.

์ด๋ฅผ ์œ„ํ•ด ๊ฐ์ฒด๊ฐ€ ์•„๋‹Œ 'ํ•จ์ˆ˜'์—์„œ ์ง€์—ญ๋ณ€์ˆ˜ ๋ฐ ๋‚ด๋ถ€ ํ•จ์ˆ˜ ๋“ฑ์„ ์ƒ์„ฑํ•œ ํ›„ ๋‚ด๋ถ€์—์„œ๋งŒ ์‚ฌ์šฉํ•  ์ •๋ณด๋“ค์€ return ํ•˜์ง€ ์•Š๊ณ , ์™ธ๋ถ€์— ์ œ๊ณตํ•˜๊ณ ์ž ํ•˜๋Š” ์ •๋ณด๋“ค๋งŒ ๋ชจ์•„์„œ return ํ•˜๋„๋ก ํ•œ๋‹ค.
์™ธ๋ถ€์— ์ œ๊ณตํ•˜๊ณ ์ž ํ•˜๋Š” ๋Œ€์ƒ์ด ์—ฌ๋Ÿฟ์ผ ๋•Œ๋Š” '๊ฐ์ฒด ๋˜๋Š” ๋ฐฐ์—ด', ํ•˜๋‚˜์ผ ๋•Œ๋Š” 'ํ•จ์ˆ˜'๋ฅผ return ํ•œ๋‹ค.

์ด๋•Œ return ํ•˜์ง€ ์•Š์€ ๋Œ€์ƒ์—๋Š” ๋‹น์—ฐํžˆ ์ ‘๊ทผํ•  ์ˆ˜ ์—†์ง€๋งŒ return ํ•œ ๋Œ€์ƒ๋„ ๋‹ค๋ฅธ ๋‚ด์šฉ์œผ๋กœ ๋ฎ์–ด์”Œ์šฐ๊ธฐ๋ฅผ ํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ์ฒด๋ฅผ return ํ•˜๊ธฐ ์ „์— ๋ฏธ๋ฆฌ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์—†๋„๋ก Object.freeze()๋ฅผ ์ด์šฉํ•ด์•ผ ํ•œ๋‹ค.

var createCar = function () {
  // ์ ‘๊ทผ ๊ถŒํ•œ x
  var fuel = ...
  var power = ...
  var moved = ...
  
  // ์ ‘๊ทผ ๊ถŒํ•œ o
  var publicMembers = {
    get moved () { // ์ฝ๊ธฐ ์ „์šฉ ์†์„ฑ
      return moved;
    }
    run: function () {
      ...
    }
  };
  Object.freeze(publicMembers);
  return publicMembers;
};

var car = createCar();

(3) ๋ถ€๋ถ„ ์ ์šฉ ํ•จ์ˆ˜

๋ถ€๋ถ„ ์ ์šฉ ํ•จ์ˆ˜๋ž€ n๊ฐœ์˜ ์ธ์ž๋ฅผ ๋ฐ›๋Š” ํ•จ์ˆ˜์— ๋ฏธ๋ฆฌ m๊ฐœ์˜ ์ธ์ž๋งŒ ๋„˜๊ฒจ ๊ธฐ์–ต์‹œ์ผฐ๋‹ค๊ฐ€, ๋‚˜์ค‘์— (n-m) ๊ฐœ์˜ ์ธ์ž๋ฅผ ๋„˜๊ฒจ ๋น„๋กœ์†Œ ์›๋ž˜ ํ•จ์ˆ˜์˜ ์‹คํ–‰ ๊ฒฐ๊ณผ๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ํ•จ์ˆ˜์ด๋‹ค.

๋ฐฉ๋ฒ• 1: bind ๋ฉ”์„œ๋“œ

var add = function () {
  var result = 0;
  for (var i = 0; i < arguments.length; i++) {
    result += arguments[i];
  }
  return result;
};

var addPartial = add.bind(null, 1, 2, 3, 4, 5);
console.log(6, 7, 8, 9, 10); // 55

๊ทธ๋Ÿฌ๋‚˜, bind ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์•ž์„œ ์‚ดํŽด๋ณธ ๊ฒƒ์ฒ˜๋Ÿผ this๋ฅผ ๋ฌด์กฐ๊ฑด ๋ณ€๊ฒฝํ•ด์•ผ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ฉ”์„œ๋“œ์—์„œ๋Š” ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋‹ค๋Š” ๋ฌธ์ œ๊ฐ€ ์žˆ๋‹ค.

๋ฐฉ๋ฒ• 2: ๋ถ€๋ถ„ ์ ์šฉ ํ•จ์ˆ˜ ๊ตฌํ˜„

var partial = function () {
  var originalPartialArgs = arguments;
  var func = originalPartialArgs[0];
  if (typeof fun !== "function") {
    throw new Error("์ฒซ ๋ฒˆ์งธ ์ธ์ž๊ฐ€ ํ•จ์ˆ˜๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค.");
  }
  return function () {
    var partialArgs = Array.prototype.slice.call(originalPartialArgs, 1);
    var restArgs = Array.prototype.slice.call(arguments);
    return func.apply(this, partialArgs.concat(restArgs));
  }
}

var add = function () {
  var result = 0;
  for (var i = 0; i < arguments.length; i++) {
    result += arguments[i];
  }
  return result;
};

const addPartial = partial(add, 1, 2, 3, 4, 5);
console.log(addPartial(6, 7, 8, 9, 10)); // 55

var dog = {
  name: "๊ฐ•์•„์ง€",
  greet: partial(function(prefix, suffix) {
    return prefix + this.name + suffix;
  }, "์™ˆ์™ˆ, "),
};
console.log(dog.greet("์ž…๋‹ˆ๋‹ค!")); // ์™ˆ์™ˆ, ๊ฐ•์•„์ง€์ž…๋‹ˆ๋‹ค!

๋‹ค๋งŒ, ์ด๋Š” ๋ถ€๋ถ„ ์ ์šฉ ํ•จ์ˆ˜์— ๋„˜๊ธธ ์ธ์ž๋ฅผ ๋ฐ˜๋“œ์‹œ ์•ž์—์„œ๋ถ€ํ„ฐ ์ฐจ๋ก€๋กœ ์ „๋‹ฌํ•  ์ˆ˜๋ฐ–์— ์—†๋‹ค.

๋ฐฉ๋ฒ• 3: ๋ถ€๋ถ„ ์ ์šฉ ํ•จ์ˆ˜ ๊ตฌํ˜„ (์ˆ˜์ •)

์ฒ˜์Œ์— ๋„˜๊ฒจ์ค€ ์ธ์ž๋“ค ์ค‘ _๋กœ ๋น„์›Œ๋†“์€ ๊ณต๊ฐ„๋งˆ๋‹ค ๋‚˜์ค‘์— ๋„˜์–ด์˜จ ์ธ์ž๋“ค์ด ์ฐจ๋ก€๋Œ€๋กœ ๋ผ์›Œ๋„ฃ๋„๋ก ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค.

โ†’ ๋ฐฉ๋ฒ• 2์™€ ๋ฐฉ๋ฒ• 3์€ ๋ฏธ๋ฆฌ ์ผ๋ถ€ ์ธ์ž๋ฅผ ๋„˜๊ฒจ๋‘์–ด ๊ธฐ์–ตํ•˜๊ฒŒ๋” ํ•˜๊ณ , ์ถ”ํ›„ ํ•„์š”ํ•œ ์‹œ์ ์— ๊ธฐ์–ตํ–ˆ๋˜ ์ธ์ž๋“ค๊นŒ์ง€ ํ•จ๊ป˜ ์‹คํ–‰ํ•˜๋„๋ก ํ•œ๋‹ค๋Š” ์ ์—์„œ ํด๋กœ์ €๋ฅผ ํ•ต์‹ฌ ๊ธฐ๋ฒ•์œผ๋กœ ์‚ฌ์šฉํ–ˆ๋‹ค๊ณ  ํ•  ์ˆ˜ ์žˆ๋‹ค.

๋””๋ฐ”์šด์Šค

๋””๋ฐ”์šด์Šค๋ž€ ์งง์€ ์‹œ๊ฐ„ ๋™์•ˆ ๋™์ผํ•œ ์ด๋ฒคํŠธ๊ฐ€ ๋งŽ์ด ๋ฐœ์ƒํ•œ ๊ฒฝ์šฐ ์ด๋ฅผ ์ „๋ถ€ ์ฒ˜๋ฆฌํ•˜์ง€ ์•Š๊ณ  ์ฒ˜์Œ ๋˜๋Š” ๋งˆ์ง€๋ง‰์— ๋ฐœ์ƒํ•œ ์ด๋ฒคํŠธ์— ๋Œ€ํ•ด์„œ ํ•œ ๋ฒˆ๋งŒ ์ฒ˜๋ฆฌํ•˜๋Š” ๊ฒƒ์„ ๋งํ•œ๋‹ค.

var debounce = function (eventName, func, wait) {
  var timeoutId = null;
  return function (event) { // 2-1. ์—ฌ๊ธฐ์„œ event๋Š” ์ด๋ฒคํŠธ ๊ฐ์ฒด
    var self = this; // 1-1. ์—ฌ๊ธฐ์„œ this๋Š” ์ฝœ๋ฐฑ ํ•จ์ˆ˜์— ๋Œ€ํ•œ ์ œ์–ด๊ถŒ์„ ๊ฐ€์ง€๋Š” addEventListener ๋ฉ”์„œ๋“œ์— ์˜ํ•ด body๊ฐ€ ๋œ๋‹ค
    console.log(eventName, "event ๋ฐœ์ƒ");
    clearTimeout(timeoutId);
    timeoutId = setTimeout(func.bind(self, event), wait);
    // 1-2. ๊ทธ body๋ฅผ func ํ•จ์ˆ˜ ๋‚ด๋ถ€์˜ this๋กœ ๋ฐ”์ธ๋”ฉํ•œ๋‹ค.
    // 2-2. ๊ทธ ์ด๋ฒคํŠธ ๊ฐ์ฒด๋ฅผ func์˜ ์ฒซ ๋ฒˆ์งธ ์ธ์ž๋กœ ์ „ํ•ด์ค€๋‹ค.
  };
};

var moveHandler = function (e) { // 2-3. ์—ฌ๊ธฐ์„œ e๋Š” ์ด๋ฒคํŠธ ๊ฐ์ฒด๊ฐ€ ๋œ๋‹ค.
  console.log("move event ์ฒ˜๋ฆฌ");
};
var wheelHandler = function (e) {
  console.log("wheel evnet ์ฒ˜๋ฆฌ");
};

document.body.addEventListener("mousemove", debounce("move", moveHandler, 500));
document.body.addEventListener("mousewheel", debounce("wheel", wheelHandler, 700));

์œ„ ์ฝ”๋“œ์˜ ๊ฒฐ๊ณผ, ๋งˆ์šฐ์Šค๋ฅผ ๋น ๋ฅด๊ฒŒ ๊ณ„์† ์›€์ง์ด๋ฉด 'mouse event ๋ฐœ์ƒ' ์ด๋ผ๋Š” ๋ฌธ๊ตฌ๋Š” ๊ณ„์† ๋œจ์ง€๋งŒ, 'mouse event ์ฒ˜๋ฆฌ' ๋ผ๋Š” ๋ฌธ๊ตฌ๋Š” ๋งˆ์šฐ์Šค ์›€์ง์ž„์„ ๋ฉˆ์ท„์„ ๋•Œ ๋งˆ์ง€๋ง‰ ํ•œ ๋ฒˆ๋งŒ ๋œฌ๋‹ค.
setTimeout์˜ ์ฝœ๋ฐฑ ํ•จ์ˆ˜(์ฆ‰, mouseHandler)๊ฐ€ ์‹คํ–‰๋˜๊ธฐ ์ „์—(๋งˆ์šฐ์Šค ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•˜๊ณ  0.5์ดˆ๊ฐ€ ์ง€๋‚˜๊ธฐ ์ „์—) ๋‹ค๋ฅธ ๋งˆ์šฐ์Šค ์ด๋ฒคํŠธ๊ฐ€ ๋˜ ๋ฐœ์ƒํ•ด์„œ ์ด์ „์— ์‹คํ–‰๋œ setTimeout ํ•จ์ˆ˜๊ฐ€ clearTimeout์— ์˜ํ•ด ์ทจ์†Œ๋˜์—ˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.
์ฐธ๊ณ ๋กœ ์—ฌ๊ธฐ์„œ ํด๋กœ์ €๋กœ ์ฒ˜๋ฆฌ๋˜๋Š” ๋ณ€์ˆ˜์—๋Š” eventName, func, wait, timeoutId๊ฐ€ ์žˆ๋‹ค.

(4) ์ปค๋ง ํ•จ์ˆ˜

์ปค๋ง ํ•จ์ˆ˜๋ž€ ์—ฌ๋Ÿฌ ๊ฐœ์˜ ์ธ์ž๋ฅผ ๋ฐ›๋Š” ํ•จ์ˆ˜๋ฅผ ํ•˜๋‚˜์˜ ์ธ์ž๋งŒ ๋ฐ›๋Š” ํ•จ์ˆ˜๋กœ ๋‚˜๋ˆ ์„œ ์ˆœ์ฐจ์ ์œผ๋กœ ํ˜ธ์ถœ๋  ์ˆ˜ ์žˆ๊ฒŒ ์ฒด์ธ ํ˜•ํƒœ๋กœ ๊ตฌ์„ฑํ•œ ๊ฒƒ์„ ๋งํ•œ๋‹ค.

๋ถ€๋ถ„ ์ ์šฉ ํ•จ์ˆ˜ vs ์ปค๋ง ํ•จ์ˆ˜

๋ถ€๋ถ„ ์ ์šฉ ํ•จ์ˆ˜๋Š” ์—ฌ๋Ÿฌ ๊ฐœ์˜ ์ธ์ž๋ฅผ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, ์ปค๋ง ํ•จ์ˆ˜๋Š” ํ•œ ๋ฒˆ์— ํ•˜๋‚˜์˜ ์ธ์ž๋งŒ ์ „๋‹ฌํ•œ๋‹ค.
๋ถ€๋ถ„ ์ ์šฉ ํ•จ์ˆ˜๋Š” ์‹คํ–‰ ๊ฒฐ๊ณผ๋ฅผ ์žฌ์‹คํ–‰ํ•  ๋•Œ๋งˆ๋‹ค ์›๋ณธ ํ•จ์ˆ˜๊ฐ€ ๋ฌด์กฐ๊ฑด ์‹คํ–‰๋˜์ง€๋งŒ, ์ปค๋ง ํ•จ์ˆ˜๋Š” ๋งˆ์ง€๋ง‰ ์ธ์ž๊ฐ€ ์ „๋‹ฌ๋˜๊ธฐ ์ „๊นŒ์ง€๋Š” ์›๋ณธ ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋˜์ง€ ์•Š๋Š”๋‹ค.

var curry3 = function (func) {
  return function (a) {
    return function (b) {
      return func(a, b);
    };
  };
};

var getMaxWith10 = curry3(Math.max)(10);
console.log(getMaxWith10(8)); // 10
console.log(getMaxWith10(25)); // 25

// ES6
var curry3 = func => a => b => func(a, b);
// curry3์€ func๋ฅผ ์ธ์ž๋กœ ๊ฐ€์ง€๋Š” ํ•จ์ˆ˜์ด๋‹ค
// func๋ฅผ ์ธ์ž๋กœ ๊ฐ€์ง€๋Š” ํ•จ์ˆ˜๋Š” a๋ฅผ ์ธ์ž๋กœ ๊ฐ€์ง€๋Š” ํ•จ์ˆ˜๋ฅผ return ํ•œ๋‹ค
// a๋ฅผ ์ธ์ž๋กœ ๊ฐ€์ง€๋Š” ํ•จ์ˆ˜๋Š” b๋ฅผ ์ธ์ž๋กœ ๊ฐ€์ง€๋Š” ํ•จ์ˆ˜๋ฅผ return ํ•œ๋‹ค
// b๋ฅผ ์ธ์ž๋กœ ๊ฐ€์ง€๋Š” ํ•จ์ˆ˜๋Š” func(a, b)๋ฅผ ์‹คํ–‰ํ•œ ๊ฐ’์„ return ํ•œ๋‹ค

๊ฐ ๋‹จ๊ณ„์—์„œ ๋ฐ›์€ ์ธ์ž๋“ค์„ ๋ชจ๋‘ ๋งˆ์ง€๋ง‰ ๋‹จ๊ณ„์—์„œ ์ฐธ์กฐํ•  ๊ฒƒ์ด๋ฏ€๋กœ ๊ฐ€๋น„์ง€ ์ปฌ๋ ‰ํŒ…๋˜์ง€ ์•Š๊ณ  ๋ฉ”๋ชจ๋ฆฌ์— ์ฐจ๊ณก์ฐจ๊ณก ์Œ“์˜€๋‹ค๊ฐ€, ๋งˆ์ง€๋ง‰ ํ˜ธ์ถœ๋กœ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๊ฐ€ ์ข…๋ฃŒ๋œ ํ›„์—์•ผ ๋น„๋กœ์†Œ ํ•œ๊บผ๋ฒˆ์— ๊ฐ€๋น„์ง€ ์ปฌ๋ ‰ํŒ… ๋œ๋‹ค.

๋”ฐ๋ผ์„œ, ํ•จ์ˆ˜๋ฅผ ์›ํ•˜๋Š” ์‹œ์ ๊นŒ์ง€ ์ง€์—ฐ์‹œ์ผฐ๋‹ค๊ฐ€ ์‹คํ–‰์‹œํ‚ฌ ํ•„์š”๊ฐ€ ์žˆ๋Š” ๊ฒฝ์šฐ ์ปค๋ง ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
ํ˜น์€ ํ•จ์ˆ˜์˜ ๋งค๊ฐœ๋ณ€์ˆ˜๊ฐ€ ํ•ญ์ƒ ๋น„์Šทํ•˜๊ณ  ์ผ๋ถ€๋งŒ ๋ฐ”๋€Œ๋Š” ๊ฒฝ์šฐ์—๋„ ์ปค๋ง ํ•จ์ˆ˜๋ฅผ ์œ ์šฉํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
ํŠนํžˆ fetch ํ•จ์ˆ˜๊ฐ€ url์„ ๋ฐ›์•„ ํ•ด๋‹น url์— HTTP ์š”์ฒญ์„ ํ•  ๋•Œ ์ฃผ๋กœ ์‚ฌ์šฉ๋œ๋‹ค.

var getInformation = baseUrl => path => id => fetch(baseUrl + path + "/" + id);

var imageUrl = "http://imageAddress.com";
var getImage = getInformation(imageUrl); // baseUrl ๋„ฃ์Œ
var getEmoticon = getImage("emoticon"); // path ๋„ฃ์Œ
var emoticon = getEmoticon(100); // ์‹ค์ œ ์š”์ฒญ

๐Ÿ™‹โ€โ™€๏ธ ์งˆ๋ฌธ

  1. ํด๋กœ์ €์™€ ๋ฉ”๋ชจ๋ฆฌ ๊ด€๋ฆฌ
    ์˜ˆ์ œ ์ฝ”๋“œ๊ฐ€ ์ดํ•ด๊ฐ€ ์•ˆ๋จ (์ฑ… ์ฐธ๊ณ )

โœจ ๋‚ด์ผ ํ•  ๊ฒƒ

  1. ํ”„๋กœํ† ํƒ€์ž…
profile
๋Šฅ๋™์ ์œผ๋กœ ์‚ด์ž, ํ–‰๋ณตํ•˜๊ฒŒ๐Ÿ˜

0๊ฐœ์˜ ๋Œ“๊ธ€