[TIL] 220108

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

TIL

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

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

  1. ์‹คํ–‰ ์ปจํ…์ŠคํŠธ

  2. this


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

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

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

2. ์‹คํ–‰ ์ปจํ…์ŠคํŠธ

1) ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๋ž€?

์‹คํ–‰ ์ปจํ…์ŠคํŠธ๋ž€ ์‹คํ–‰ํ•  ์ฝ”๋“œ์— ์ œ๊ณตํ•  ํ™˜๊ฒฝ ์ •๋ณด๋“ค์„ ๋ชจ์•„๋†“์€ ๊ฐ์ฒด๋ฅผ ๋งํ•œ๋‹ค.
๋™์ผํ•œ ํ™˜๊ฒฝ์— ์žˆ๋Š” ์ฝ”๋“œ๋“ค์„ ์‹คํ–‰ํ•  ๋•Œ ํ•„์š”ํ•œ ํ™˜๊ฒฝ ์ •๋ณด๋“ค์„ ๋ชจ์•„ ์ปจํ…์ŠคํŠธ๋ฅผ ๊ตฌ์„ฑํ•˜๊ณ , ์ด๋ฅผ ์ฝœ ์Šคํƒ์— ์Œ“์•„ ์˜ฌ๋ ธ๋‹ค๊ฐ€, ๊ฐ€์žฅ ์œ„์— ์Œ“์—ฌ์žˆ๋Š” ์ปจํ…์ŠคํŠธ์™€ ๊ด€๋ จ ์žˆ๋Š” ์ฝ”๋“œ๋“ค์„ ์‹คํ–‰ํ•˜๋Š” ์‹์œผ๋กœ ์ „์ฒด ์ฝ”๋“œ์˜ ํ™˜๊ฒฝ๊ณผ ์ˆœ์„œ๋ฅผ ๋ณด์žฅํ•œ๋‹ค.

'๋™์ผํ•œ ํ™˜๊ฒฝ', ์ฆ‰ ํ•˜๋‚˜์˜ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ ์ž๋™์œผ๋กœ ์ƒ์„ฑ๋˜๋Š” ์ „์—ญ ๊ณต๊ฐ„๊ณผ eval() ํ•จ์ˆ˜, ํ•จ์ˆ˜ ๊ทธ๋ฆฌ๊ณ  ๋ธ”๋ก(ES6์—์„œ ์ถ”๊ฐ€)์ด ์žˆ๋‹ค.

์‹คํ–‰ ์ปจํ…์ŠคํŠธ๋Š” variableEnvironment, LexicalEnvironment, ThisBinding์ด๋ผ๋Š” ์„ธ ๊ฐ€์ง€ ์ •๋ณด๋ฅผ ์ˆ˜์ง‘ํ•œ๋‹ค.

2) variableEnvironment

์‹คํ–‰ ์ปจํ…์ŠคํŠธ๋ฅผ ์ƒ์„ฑํ•  ๋•Œ varaibleEnvironment์—๋Š” ํ˜„์žฌ ์ปจํ…์ŠคํŠธ ๋‚ด์˜ ์‹๋ณ„์ž๋“ค์— ๋Œ€ํ•œ ์ •๋ณด(environmentRecord)์™€ ์™ธ๋ถ€ ํ™˜๊ฒฝ ์ •๋ณด(outerEnvironmentReference)๊ฐ€ ๋‹ด๊ธด๋‹ค.
๋ณ€๊ฒฝ ์‚ฌํ•ญ์€ ๋ฐ˜์˜๋˜์ง€ ์•Š๋Š”๋‹ค.

3) LexicalEnvironment

์‹คํ–‰ ์ปจํ…์ŠคํŠธ๋ฅผ ์ƒ์„ฑํ•  ๋•Œ variableEnvironment์— ์ •๋ณด๋ฅผ ๋จผ์ € ๋‹ด์€ ๋‹ค์Œ, ์ด๋ฅผ ๊ทธ๋Œ€๋กœ ๋ณต์‚ฌํ•ด LexicalEnvironment๋ฅผ ๋งŒ๋“ค๊ณ , ์ดํ›„์—๋Š” LexicalEnvironment๋ฅผ ์ฃผ๋กœ ์ด์šฉํ•˜๊ฒŒ ๋œ๋‹ค.
๋ณ€๊ฒฝ ์‚ฌํ•ญ์ด ์‹ค์‹œ๊ฐ„์œผ๋กœ ๋ฐ˜์˜๋œ๋‹ค.

(1) environmentRecord

environmentRecord์—๋Š” ํ˜„์žฌ ์ปจํ…์ŠคํŠธ์™€ ๊ด€๋ จ๋œ ์ฝ”๋“œ์˜ ์‹๋ณ„์ž ์ •๋ณด๋“ค(๋งค๊ฐœ๋ณ€์ˆ˜๋ช…, ๋ณ€์ˆ˜์˜ ์‹๋ณ„์ž, ์„ ์–ธํ•œ ํ•จ์ˆ˜์˜ ํ•จ์ˆ˜๋ช… ๋“ฑ)์„ ์ˆ˜์ง‘ํ•œ๋‹ค.
์ด๋Š” ์ฝ”๋“œ๊ฐ€ ์‹คํ–‰๋˜๊ธฐ ์ „์— ์ผ์–ด๋‚˜๋Š” ๊ณผ์ •์œผ๋กœ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์€ ์‹ค์ œ๋กœ ์ฝ”๋“œ๊ฐ€ ์‹คํ–‰๋˜๊ธฐ ์ „์— ์ด๋ฏธ ํ•ด๋‹น ํ™˜๊ฒฝ์— ์†ํ•œ ์ฝ”๋“œ์˜ ๋ณ€์ˆ˜๋ช…์„ ๋ชจ๋‘ ์•Œ๊ณ  ์žˆ๊ฒŒ ๋œ๋‹ค.

์—ฌ๊ธฐ์„œ ํ˜ธ์ด์ŠคํŒ…์ด๋ž€ ๊ฐœ๋…์ด ๋“ฑ์žฅํ•œ๋‹ค.
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์€ ์‹๋ณ„์ž๋“ค์„ ์ตœ์ƒ๋‹จ์œผ๋กœ ๋Œ์–ด์˜ฌ๋ ค๋†“์€ ๋‹ค์Œ ์‹ค์ œ ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•˜๋Š” ๊ฒƒ์ด๋‹ค.

๋งค๊ฐœ๋ณ€์ˆ˜์™€ ๋ณ€์ˆ˜์— ๋Œ€ํ•œ ํ˜ธ์ด์ŠคํŒ…

environmentRecord๋Š” ํ˜„์žฌ ์‹คํ–‰๋  ์ปจํ…์ŠคํŠธ์˜ ๋Œ€์ƒ ์ฝ”๋“œ ๋‚ด์— ์–ด๋–ค ์‹๋ณ„์ž๋“ค์ด ์žˆ๋Š”์ง€์—๋งŒ ๊ด€์‹ฌ์ด ์žˆ๊ณ , ๊ฐ ์‹๋ณ„์ž์— ์–ด๋–ค ๊ฐ’์ด ํ• ๋‹น๋  ๊ฒƒ์ธ์ง€๋Š” ๊ด€์‹ฌ์ด ์—†๋‹ค.
๋”ฐ๋ผ์„œ, ๋ณ€์ˆ˜๋ฅผ ํ˜ธ์ด์ŠคํŒ…ํ•  ๋•Œ ๋ณ€์ˆ˜๋ช…๋งŒ ๋Œ์–ด์˜ฌ๋ฆฌ๊ณ , ํ• ๋‹น ๊ณผ์ •์€ ์›๋ž˜ ์ž๋ฆฌ์— ๊ทธ๋Œ€๋กœ ๋‚จ๊ฒจ๋‘”๋‹ค.

ํ•จ์ˆ˜ ์„ ์–ธ์˜ ํ˜ธ์ด์ŠคํŒ…

๋ณ€์ˆ˜๋Š” ์„ ์–ธ๋ถ€์™€ ํ• ๋‹น๋ถ€๋ฅผ ๋‚˜๋ˆ„์–ด ์„ ์–ธ๋ถ€๋งŒ ๋Œ์–ด์˜ฌ๋ฆฌ๋Š” ๋ฐ˜๋ฉด, ํ•จ์ˆ˜ '์„ ์–ธ'์€ ํ•จ์ˆ˜ ์ „์ฒด๋ฅผ ๋Œ์–ด์˜ฌ๋ฆฐ๋‹ค.

ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ๊ณผ ํ•จ์ˆ˜ ํ‘œํ˜„์‹

console.log(sum(1, 2));
console.log(multiply(3, 4));

// ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ
function sum (a, b) {
  return a + b;
}

// ํ•จ์ˆ˜ ํ‘œํ˜„์‹
var multiply = function (a, b) {
  return a * b;
}

ํ•จ์ˆ˜ ํ‘œํ˜„์‹์ด๋ž€ ํ•จ์ˆ˜๋ฅผ ๋‹ค๋ฅธ ๋ณ€์ˆ˜์— ๊ฐ’์œผ๋กœ์จ ํ• ๋‹นํ•œ ๊ฒƒ์„ ๋งํ•œ๋‹ค.

ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ๊ณผ ํ•จ์ˆ˜ ํ‘œํ˜„์‹์€ ํ˜ธ์ด์ŠคํŒ…์— ์žˆ์–ด ๊ทน๋ช…ํ•œ ์ฐจ์ด์ ์„ ๊ฐ€์ง„๋‹ค.
ํ˜ธ์ด์ŠคํŒ…์„ ๋งˆ์นœ ์ƒํƒœ๋ฅผ ์ž„์˜๋กœ ์ฝ”๋“œ๋กœ์จ ํ‘œํ˜„ํ•˜๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

var sum = function sum (a, b) { // (ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ) ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ ์ „์ฒด๋ฅผ ํ˜ธ์ด์ŠคํŒ…
  return a + b;
}

var multiply; // (ํ•จ์ˆ˜ ํ‘œํ˜„์‹) ๋ณ€์ˆ˜ ์„ ์–ธ๋ถ€(ํ•จ์ˆ˜๋ฅผ ํ• ๋‹นํ•œ ๋ณ€์ˆ˜๋ช…)๋งŒ์„ ํ˜ธ์ด์ŠคํŒ…

console.log(sum(1, 2));
console.log(multiply(3, 4));

multiply =function (a, b) { // (ํ•จ์ˆ˜ ํ‘œํ˜„์‹) ๋ณ€์ˆ˜ ํ• ๋‹น๋ถ€๋Š” ์›๋ž˜ ์ž๋ฆฌ์— ๋‚จ๊ฒจ๋‘ 
  return a * b;
}

๋”ฐ๋ผ์„œ, multiply(3, 4)๋ฅผ ์ถœ๋ ฅํ•˜๊ณ ์ž ํ•  ๋•Œ ๋ณ€์ˆ˜ multiply์—๋Š” ์•„์ง ํ•จ์ˆ˜๊ฐ€ ํ• ๋‹น๋˜๊ธฐ ์ „์ด๋ฏ€๋กœ 'multiply is not a function'์ด๋ผ๋Š” ์—๋Ÿฌ๊ฐ€ ๋œฌ๋‹ค.

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

(2) ์Šค์ฝ”ํ”„, ์Šค์ฝ”ํ”„ ์ฒด์ธ, outerEnvironmentReference

์Šค์ฝ”ํ”„๋ž€ ์‹๋ณ„์ž์— ๋Œ€ํ•œ ์œ ํšจ๋ฒ”์œ„๋ฅผ ๋งํ•œ๋‹ค.
ES5๊นŒ์ง€์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์ „์—ญ ๊ณต๊ฐ„์„ ์ œ์™ธํ•˜๋ฉด ์˜ค์ง ํ•จ์ˆ˜์— ์˜ํ•ด์„œ๋งŒ ์Šค์ฝ”ํ”„๊ฐ€ ์ƒ์„ฑ๋œ๋‹ค.
(ES6์—์„œ๋Š” ๋ธ”๋ก์— ์˜ํ•ด์„œ๋„ ์Šค์ฝ”ํ”„ ๊ฒฝ๊ณ„๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค.)

์Šค์ฝ”ํ”„ ์ฒด์ธ์ด๋ž€ ์‹๋ณ„์ž์˜ ์œ ํšจ๋ฒ”์œ„๋ฅผ ์•ˆ์—์„œ๋ถ€ํ„ฐ ๋ฐ”๊นฅ์œผ๋กœ ์ฐจ๋ก€๋กœ ๊ฒ€์ƒ‰ํ•ด๋‚˜๊ฐ€๋Š” ๊ฒƒ์„ ๋งํ•œ๋‹ค.
์ด๋ฅผ ๊ฐ€๋Šฅ์ผ€ ํ•˜๋Š” ๊ฒƒ์ด LexicalEnvironment์˜ ๋‘ ๋ฒˆ์งธ ์ˆ˜์ง‘ ์ž๋ฃŒ์ธ outerEnvironmentReference์ด๋‹ค.
(์ฒซ ๋ฒˆ์งธ ์ˆ˜์ง‘ ์ž๋ฃŒ: environmentRecord / ๋‘ ๋ฒˆ์งธ ์ˆ˜์ง‘ ์ž๋ฃŒ: outerEnvironmentReference)

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

outerEnvironmentReference๋Š” ํ˜„์žฌ ํ˜ธ์ถœ๋œ ํ•จ์ˆ˜๊ฐ€ ์„ ์–ธ๋  ๋‹น์‹œ์˜ LexicalEnvironment(์ฆ‰, ๋ฐ”๋กœ ์ง์ „ ์ปจํ…์ŠคํŠธ์˜ LexicalEnvironment)๋ฅผ ์ฐธ์กฐํ•œ๋‹ค.

  • ์ „์—ญ ์ปจํ…์ŠคํŠธ ์ž๋™์œผ๋กœ ์ƒ์„ฑ
    ์ „์—ญ ์ปจํ…์ŠคํŠธ์˜ L.E
    e: { a, outer } (์ „์—ญ ์ปจํ…์ŠคํŠธ๋Š” ์„ ์–ธ ์‹œ์ ์ด ๋”ฐ๋กœ ์—†๊ธฐ ๋•Œ๋ฌธ์— outerEnvironmentReference๋Š” ์—†๊ณ  environmentRecord๋งŒ ์žˆ๋‹ค.)
  • outer() ํ•จ์ˆ˜ ์‹คํ–‰ ์‹œ outer ์‹คํ–‰ ์ปจํ…์ŠคํŠธ ํ™œ์„ฑํ™”
    outer ์‹คํ–‰ ์ปจํ…์ŠคํŠธ์˜ L.E
    e: { inner }
    o: GLOBAL L.E ( = outer() ํ•จ์ˆ˜๊ฐ€ ์„ ์–ธ๋œ ๋‹น์‹œ์˜ L.E )
  • inner() ํ•จ์ˆ˜ ์‹คํ–‰ ์‹œ inner ์‹คํ–‰ ์ปจํ…์ŠคํŠธ ํ™œ์„ฑํ™”
    inner ์‹คํ–‰ ์ปจํ…์ŠคํŠธ์˜ L.E
    e: { a }
    o: outer L.E ( = inner() ํ•จ์ˆ˜๊ฐ€ ์„ ์–ธ๋œ ๋‹น์‹œ์˜ L.E )

๋”ฐ๋ผ์„œ, ์ด์ฒ˜๋Ÿผ ์—ฌ๋Ÿฌ ์Šค์ฝ”ํ”„์—์„œ ๋™์ผํ•œ ์‹๋ณ„์ž๋ฅผ ์„ ์–ธํ•œ ๊ฒฝ์šฐ์—๋Š” ๋ฌด์กฐ๊ฑด ์Šค์ฝ”ํ”„ ์ฒด์ธ ์ƒ์—์„œ ๊ฐ€์žฅ ๋จผ์ € ๋ฐœ๊ฒฌ๋œ ์‹๋ณ„์ž์—๋งŒ ์ ‘๊ทผ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.
์Šค์ฝ”ํ”„ ์ฒด์ธ ์ƒ์˜ ์–ด๋–ค ์Šค์ฝ”ํ”„์˜ LexicalEnvironment์— ์ฐพ๋Š” ์‹๋ณ„์ž๊ฐ€ ์กด์žฌํ•œ๋‹ค๋ฉด ๋” ์ด์ƒ ์Šค์ฝ”ํ”„ ์ฒด์ธ ๊ฒ€์ƒ‰์„ ์ง„ํ–‰ํ•˜์ง€ ์•Š๊ณ  ์ฐพ์€ ์‹๋ณ„์ž์˜ ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•˜๊ฒŒ ๋œ๋‹ค.
์ฆ‰, ์ƒ์œ„ ์Šค์ฝ”ํ”„์˜ LexicalEnvironment์— ๊ฐ™์€ ์‹๋ณ„์ž๊ฐ€ ์กด์žฌํ•˜๋”๋ผ๋„ ์ ‘๊ทผํ•  ์ˆ˜ ์—†๋‹ค.
์ด๋ฅผ ๋ณ€์ˆ˜ ์€๋‹‰ํ™”๋ผ๊ณ  ํ•œ๋‹ค.

์ด๋•Œ ์ „์—ญ ์ปจํ…์ŠคํŠธ์˜ LexicalEnvironment์— ๋‹ด๊ธด ๋ณ€์ˆ˜๋ฅผ ์ „์—ญ๋ณ€์ˆ˜๋ผ๊ณ  ํ•˜๊ณ , ๊ทธ ๋ฐ–์˜ ํ•จ์ˆ˜์— ์˜ํ•ด ์ƒ์„ฑ๋œ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ์˜ ๋ณ€์ˆ˜๋“ค์„ ์ง€์—ญ๋ณ€์ˆ˜๋ผ๊ณ  ํ•œ๋‹ค.

4) this

๋งˆ์ง€๋ง‰์œผ๋กœ, ์‹คํ–‰ ์ปจํ…์ŠคํŠธ์˜ thisBinding์—๋Š” this๋กœ ์ง€์ •๋œ ๊ฐ์ฒด๊ฐ€ ์ €์žฅ๋œ๋‹ค.
this๋Š” ์‹คํ–‰ ์ปจํ…์ŠคํŠธ ํ™œ์„ฑํ™” ๋‹น์‹œ์— ์ง€์ •๋˜๊ณ , ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋”ฐ๋ผ ๊ทธ ๊ฐ’์ด ๋‹ฌ๋ผ์ง„๋‹ค.
๋งŒ์•ฝ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ ํ™œ์„ฑํ™” ๋‹น์‹œ์— this๊ฐ€ ์ง€์ •๋˜์ง€ ์•Š์•˜๋‹ค๋ฉด, this์—๋Š” ์ „์—ญ ๊ฐ์ฒด๊ฐ€ ์ €์žฅ๋œ๋‹ค.


3. this

1) ์ƒํ™ฉ์— ๋”ฐ๋ผ ๋‹ฌ๋ผ์ง€๋Š” this โ‘ค

๋Œ€๋ถ€๋ถ„์˜ ๊ฐ์ฒด์ง€ํ–ฅ ์–ธ์–ด์—์„œ this๋Š” ํด๋ž˜์Šค๋กœ ์ƒ์„ฑํ•œ ์ธ์Šคํ„ด์Šค ๊ฐ์ฒด๋ฅผ ์˜๋ฏธํ•œ๋‹ค.
๊ทธ๋Ÿฌ๋‚˜, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ์˜ this๋Š” ์–ด๋””์„œ๋“  ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์–ด ํ˜ผ๋ž€์„ ์•ผ๊ธฐํ•œ๋‹ค.

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ this๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๊ฐ€ ์ƒ์„ฑ๋  ๋•Œ(์ฆ‰, ํ•จ์ˆ˜๊ฐ€ ํ˜ธ์ถœ๋  ๋•Œ) ๊ฒฐ์ •๋œ๋‹ค.
ํ•จ์ˆ˜๋ฅผ ์–ด๋–ค ๋ฐฉ์‹์œผ๋กœ ํ˜ธ์ถœํ•˜๋Š๋ƒ์— ๋”ฐ๋ผ ๊ทธ ๊ฐ’์ด ๋‹ฌ๋ผ์ง„๋‹ค.

(1) ์ „์—ญ ๊ณต๊ฐ„์—์„œ์˜ this

์ „์—ญ ๊ณต๊ฐ„์—์„œ์˜ this๋Š” ์ „์—ญ ๊ฐ์ฒด(๋ธŒ๋ผ์šฐ์ €์—์„œ๋Š” window, Node.js์—์„œ๋Š” global)์„ ๊ฐ€๋ฆฌํ‚จ๋‹ค.

cf. ์ „์—ญ ๋ณ€์ˆ˜์™€ ์ „์—ญ ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ

์ „์—ญ ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•˜๋ฉด, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์€ ์ด๋ฅผ ์ „์—ญ ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ๋กœ ํ• ๋‹นํ•œ๋‹ค.
์‚ฌ์‹ค ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋ชจ๋“  ๋ณ€์ˆ˜๋Š” ํŠน์ • ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ๋กœ์„œ ๋™์ž‘ํ•œ๋‹ค.
์ด๋•Œ ํŠน์ • ๊ฐ์ฒด๋ž€ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ์˜ LexicalEnvironment๋ฅผ ๋งํ•œ๋‹ค.

๋”ฐ๋ผ์„œ, ๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ ์ „์—ญ ์ปจํ…์ŠคํŠธ์—์„œ๋Š” var๋กœ ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•˜๋Š” ๊ฒƒ๊ณผ window์˜ ํ”„๋กœํผํ‹ฐ์— ์ง์ ‘ ํ• ๋‹นํ•˜๋Š” ๊ฒƒ์€ ๋˜‘๊ฐ™์ด ๋™์ž‘ํ•œ๋‹ค.
๊ทธ๋Ÿฌ๋‚˜, ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ๋ฅผ ์ œ๊ฑฐํ•˜๋Š” 'delete ์—ฐ์‚ฐ์ž'๋Š” ์ „์ž์˜ ๊ฒฝ์šฐ์—๋Š” ์ œ๋Œ€๋กœ ์ž‘๋™ํ•˜์ง€ ์•Š๋Š”๋‹ค.
์ „์—ญ ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•˜๋ฉด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์ด ์ด๋ฅผ ์ž๋™์œผ๋กœ ์ „์—ญ ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ๋กœ ํ• ๋‹นํ•˜์ง€๋งŒ, ์ถ”๊ฐ€๋กœ ํ•ด๋‹น ํ”„๋กœํผํ‹ฐ์˜ configurable ์†์„ฑ(๋ณ€๊ฒฝ ๋ฐ ์‚ญ์ œ ๊ฐ€๋Šฅ์„ฑ)์„ false๋กœ ์ •์˜ํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

console.log(window.c, this.c, c); // c is not defined

window.c = 3;

console.log(window.c, this.c, c); // 3 3 3
var c = 3;

delete c; // ํ˜น์€ delete window.c;

console.log(c, window.c, this.c); // 3 3 3 (delete ์—ฐ์‚ฐ์ž๊ฐ€ ์ž‘๋™ x)

์ •๋ฆฌํ•˜์ž๋ฉด, var๋กœ ์„ ์–ธํ•œ ์ „์—ญ ๋ณ€์ˆ˜์™€ ์ „์—ญ ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ๋Š” ํ˜ธ์ด์ŠคํŒ… ์—ฌ๋ถ€ ๋ฐ configurable ์—ฌ๋ถ€์—์„œ ์ฐจ์ด๋ฅผ ๋ณด์ธ๋‹ค๊ณ  ํ•  ์ˆ˜ ์žˆ๋‹ค.

(2) ๋ฉ”์„œ๋“œ๋กœ์„œ ํ˜ธ์ถœํ•  ๋•Œ ๊ทธ ๋ฉ”์„œ๋“œ ๋‚ด๋ถ€์—์„œ์˜ this

๋ฉ”์„œ๋“œ ๋‚ด๋ถ€์—์„œ์˜ this๋Š” ๋ฉ”์„œ๋“œ ํ˜ธ์ถœ ์ฃผ์ฒด(๋ฉ”์„œ๋“œ๋ช… ์•ž์˜ ๊ฐ์ฒด)๋ฅผ ๊ฐ€๋ฆฌํ‚จ๋‹ค.

(3) ํ•จ์ˆ˜๋กœ์„œ ํ˜ธ์ถœํ•  ๋•Œ ๊ทธ ํ•จ์ˆ˜ ๋‚ด๋ถ€์—์„œ์˜ this

ํ•จ์ˆ˜ ๋‚ด๋ถ€์—์„œ์˜ this

๊ฒฐ๋ก ๋ถ€ํ„ฐ ๋งํ•˜์ž๋ฉด, ํ•จ์ˆ˜ ๋‚ด๋ถ€์—์„œ์˜ this๋Š” ์ „์—ญ ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚จ๋‹ค.

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

๋ฉ”์„œ๋“œ์˜ ๋‚ด๋ถ€ ํ•จ์ˆ˜์—์„œ์˜ this

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

cf. ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋  ๋•Œ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๊ฐ€ ์ƒ์„ฑ๋˜๋ฉด์„œ ํ˜ธ์ด์ŠคํŒ…, ์Šค์ฝ”ํ”„ ์ฒด์ธ ์ˆ˜์ง‘, this ๋ฐ”์ธ๋”ฉ ๋“ฑ์„ ์ˆ˜ํ–‰ํ•œ๋‹ค.

๊ทธ๋Ÿฐ๋ฐ ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด this์— ๋Œ€ํ•œ ๊ตฌ๋ถ„์€ ๋ช…ํ™•ํžˆ ํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, this๋ผ๋Š” ๋‹จ์–ด๊ฐ€ ์ฃผ๋Š” ์ธ์ƒ๊ณผ๋Š” ๋‹ฌ๋ผ์ ธ ๋ฒ„๋ ธ๋‹ค.
ํ˜ธ์ถœ ์ฃผ์ฒด๊ฐ€ ์—†์„ ๋•Œ ์ž๋™์œผ๋กœ ์ „์—ญ ๊ฐ์ฒด๋ฅผ ๋ฐ”์ธ๋”ฉํ•˜๊ธฐ๋ณด๋‹จ, ํ˜ธ์ถœ ๋‹น์‹œ ์ฃผ๋ณ€ ํ™˜๊ฒฝ์˜ this๋ฅผ ๊ทธ๋Œ€๋กœ ์ƒ์†๋ฐ›์•„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค๋ฉด ๋” ์ข‹์„ ๊ฒƒ์ด๋‹ค.

๐Ÿ’ก ๋ฉ”์„œ๋“œ์˜ ๋‚ด๋ถ€ ํ•จ์ˆ˜์—์„œ์˜ this๋ฅผ ์šฐํšŒํ•˜๋Š” ๋ฐฉ๋ฒ•

ES5๊นŒ์ง€๋Š” ์ž์ฒด์ ์œผ๋กœ ๋‚ด๋ถ€ ํ•จ์ˆ˜์— this๋ฅผ ์ƒ์†ํ•  ๋ฐฉ๋ฒ•์€ ์—†๋‹ค.
๋‹ค๋งŒ, ๋ณ€์ˆ˜์— ์ƒ์œ„ ์Šค์ฝ”ํ”„์˜ this๋ฅผ ์ €์žฅํ•ด์„œ ์ด๋ฅผ ๋‚ด๋ถ€ ํ•จ์ˆ˜์—์„œ ํ™œ์šฉํ•˜๋Š” ์‹์œผ๋กœ this๋ฅผ ์šฐํšŒํ•  ์ˆ˜ ์žˆ๋‹ค.

var obj = {
  outer: function () {
    console.log(this); // obj
    var innerFunc1 = function () {
      console.log(this); // window
    };
    innerFunc1();
    
    var self = this; // outer ํ•จ์ˆ˜๊ฐ€ ํ˜ธ์ถœ๋  ๋‹น์‹œ์˜ ํ˜ธ์ถœ ์ฃผ์ฒด = obj ( โˆต obj.outer(); )
    var innerFunc2 = function () {
      console.log(self); // obj
    };
    innerFunc2();
  }
};
obj.outer();

์ด๋ฐ–์—๋„ call / apply / bind ๋ฉ”์„œ๋“œ ๋“ฑ์„ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ๋‹ค. ์ด๋“ค์€ ๋’ค์—์„œ ์‚ดํŽด๋ณผ ๊ฒƒ์ด๋‹ค.

๐Ÿ’ก ํ™”์‚ดํ‘œ ํ•จ์ˆ˜: this๋ฅผ ๋ฐ”์ธ๋”ฉํ•˜์ง€ ์•Š๋Š” ํ•จ์ˆ˜

ํ•œํŽธ, ES6์—์„œ๋Š” ํ•จ์ˆ˜ ๋‚ด๋ถ€์—์„œ this๊ฐ€ ์ „์—ญ ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚ค๋Š” ๋ฌธ์ œ๋ฅผ ๋ณด์™„ํ•˜๊ณ ์ž ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋Š” ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๋ฅผ ์ƒ์„ฑํ•  ๋•Œ ์•„์˜ˆ this๋ฅผ ๋ฐ”์ธ๋”ฉํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ํ™”์‚ดํ‘œ ํ•จ์ˆ˜ ๋‚ด๋ถ€์—๋Š” this๊ฐ€ ์•„์˜ˆ ์—†์–ด ์ด์— ์ ‘๊ทผํ•˜๋ ค๋ฉด ์Šค์ฝ”ํ”„์ฒด์ธ์ƒ ๊ฐ€์žฅ ๊ฐ€๊นŒ์šด this์— ์ ‘๊ทผํ•˜๊ฒŒ ๋œ๋‹ค.

(4) ์ฝœ๋ฐฑ ํ•จ์ˆ˜ ํ˜ธ์ถœ ์‹œ ๊ทธ ํ•จ์ˆ˜ ๋‚ด๋ถ€์—์„œ์˜ this

setTimeout(function () { console.log(this) }, 300); // window

[1, 2, 3, 4, 5].forEach(function (x) {
  console.log(this, x); // window
});

// addEventListener๋Š” ์ž์ฒด์ ์œผ๋กœ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•  ๋•Œ ์ž์‹ ์˜ this๋ฅผ ์ƒ์†ํ•˜๋„๋ก ์ •์˜๋˜์–ด ์žˆ๋‹ค
document.querySelector("button").addEventListener("click", function () {
  console.log(this); // <button>๋ฒ„ํŠผ</button>
  
});

์ฝœ๋ฐฑ ํ•จ์ˆ˜์—์„œ์˜ this๋Š” ํ•ด๋‹น ์ฝœ๋ฐฑ ํ•จ์ˆ˜์˜ ์ œ์–ด๊ถŒ์„ ๋„˜๊ฒจ๋ฐ›์€ ํ•จ์ˆ˜(setTimeout, forEach, addEventListener ๋“ฑ)๊ฐ€ ์ •์˜ํ•œ ๋ฐ”์— ๋”ฐ๋ฅด๋ฉฐ, ์ •์˜ํ•˜์ง€ ์•Š์€ ๊ฒฝ์šฐ์—๋Š” ์ฝœ๋ฐฑ ํ•จ์ˆ˜ ๋˜ํ•œ ํ•จ์ˆ˜๋กœ์„œ ํ˜ธ์ถœํ•˜๋Š” ๊ฒƒ์ด๊ธฐ ๋•Œ๋ฌธ์— ์ „์—ญ ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚ค๊ฒŒ ๋œ๋‹ค.

(5) ์ƒ์„ฑ์ž ํ•จ์ˆ˜ ๋‚ด๋ถ€์—์„œ์˜ this

์ƒ์„ฑ์ž ํ•จ์ˆ˜ ๋‚ด๋ถ€์—์„œ์˜ this๋Š” ์ƒ์„ฑ์ž์— ์˜ํ•ด ๊ณง ์ƒˆ๋กœ ๋งŒ๋“ค์–ด์งˆ ๊ฐ์ฒด, ์ฆ‰ ์ธ์Šคํ„ด์Šค๊ฐ€ ๋œ๋‹ค.

cf. ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋Š” ์–ด๋–ค ๊ณตํ†ต๋œ ์„ฑ์งˆ์„ ์ง€๋‹ˆ๋Š” ๊ฐ์ฒด๋“ค์„ ์ƒ์„ฑํ•˜๋Š” ๋ฐ ์‚ฌ์šฉํ•˜๋Š” ํ•จ์ˆ˜์ด๋‹ค.
๊ฐ์ฒด์ง€ํ–ฅ ์–ธ์–ด์—์„œ๋Š” ์ƒ์„ฑ์ž๋ฅผ ํด๋ž˜์Šค, ํด๋ž˜์Šค๋ฅผ ํ†ตํ•ด ๋งŒ๋“  ๊ฐ์ฒด๋ฅผ ์ธ์Šคํ„ด์Šค๋ผ๊ณ  ํ•œ๋‹ค.

2) ๋ช…์‹œ์ ์œผ๋กœ this๋ฅผ ๋ฐ”์ธ๋”ฉํ•˜๋Š” ๋ฐฉ๋ฒ•

(1) call ๋ฉ”์„œ๋“œ

call ๋ฉ”์„œ๋“œ๋Š” ํ•ด๋‹น ๋ฉ”์„œ๋“œ์˜ ํ˜ธ์ถœ ์ฃผ์ฒด์ธ ํ•จ์ˆ˜๋ฅผ ์ฆ‰์‹œ ์‹คํ–‰ํ•˜๋„๋ก ํ•˜๋Š” ๋ช…๋ น์ด๋‹ค.
call ๋ฉ”์„œ๋“œ์˜ ์ฒซ ๋ฒˆ์งธ ์ธ์ž๋ฅผ this๋กœ ๋ฐ”์ธ๋”ฉํ•˜๊ณ , ์ดํ›„์˜ ์ธ์ž๋“ค์„ ํ˜ธ์ถœํ•  ํ•จ์ˆ˜์˜ ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ํ•œ๋‹ค.

(2) apply ๋ฉ”์„œ๋“œ

apply ๋ฉ”์„œ๋“œ ๋˜ํ•œ call ๋ฉ”์„œ๋“œ์™€ ๊ธฐ๋Šฅ์ ์œผ๋กœ ์™„์ „ํžˆ ๋™์ผํ•˜๋‹ค.
๋‹ค๋งŒ, apply ๋ฉ”์„œ๋“œ๋Š” call ๋ฉ”์„œ๋“œ์™€ ๋‹ฌ๋ฆฌ ๋‘ ๋ฒˆ์งธ ์ธ์ž๋ฅผ '๋ฐฐ์—ด'๋กœ ๋ฐ›์•„ ๊ทธ ๋ฐฐ์—ด์˜ ์š”์†Œ๋“ค์„ ํ˜ธ์ถœํ•  ํ•จ์ˆ˜์˜ ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ์ง€์ •ํ•œ๋‹ค๋Š” ์ ์—์„œ ์ฐจ์ด๊ฐ€ ์žˆ๋‹ค.

(3) call / apply ๋ฉ”์„œ๋“œ์˜ ํ™œ์šฉ

์œ ์‚ฌ๋ฐฐ์—ด๊ฐ์ฒด์— ๋ฐฐ์—ด ๋ฉ”์„œ๋“œ๋ฅผ ์ ์šฉ

์œ ์‚ฌ๋ฐฐ์—ด๊ฐ์ฒด๋ž€ โ‘  ๋ฐฐ์—ด์˜ ๊ตฌ์กฐ์™€ ์œ ์‚ฌํ•œ ๊ฐ์ฒด, ์ฆ‰ ํ‚ค๊ฐ€ 0 ๋˜๋Š” ์–‘์˜ ์ •์ˆ˜์ธ ํ”„๋กœํผํ‹ฐ๊ฐ€ ์กด์žฌํ•˜๊ณ  length ํ”„๋กœํผํ‹ฐ์˜ ๊ฐ’์ด 0 ๋˜๋Š” ์–‘์˜ ์ •์ˆ˜์ธ ๊ฐ์ฒด๋ฅผ ๋งํ•œ๋‹ค.
โ‘ก ํ•จ์ˆ˜ ๋‚ด๋ถ€์—์„œ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š” arguments ๊ฐ์ฒด๋‚˜ โ‘ข querySelectorAll, getElementsByClassName ๋“ฑ์˜ Node ์„ ํƒ์ž๋กœ ์„ ํƒํ•œ ๊ฒฐ๊ณผ์ธ NodeList๋„ ์œ ์‚ฌ๋ฐฐ์—ด๊ฐ์ฒด์— ํ•ด๋‹น๋œ๋‹ค.

var str = "abc def";

var newArr = Array.prototype.map.call(str, function(char) { return char + "!"; });

console.log(newArr); // [ "a!", "b!", "c!", "!", "d!", "e!", "f!" ]

๋˜ํ•œ, โ‘ฃ ๋ฐฐ์—ด์ฒ˜๋Ÿผ ์ธ๋ฑ์Šค์™€ length ํ”„๋กœํผํ‹ฐ๋ฅผ ๊ฐ€์ง€๋Š” ๋ฌธ์ž์—ด์— ๋Œ€ํ•ด์„œ๋„ ๋ฐฐ์—ด ๋ฉ”์„œ๋“œ๋ฅผ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
๋‹ค๋งŒ, ์ด ๊ฒฝ์šฐ์—๋Š” ์›๋ณธ ๋ฌธ์ž์—ด์— ๋ณ€๊ฒฝ์„ ๊ฐ€ํ•˜๋Š” ๋ฉ”์„œ๋“œ๋Š” ์ ์šฉํ•  ์ˆ˜ ์—†๋‹ค.

๊ทธ๋Ÿฐ๋ฐ ์‚ฌ์‹ค call/apply๋ฅผ ์ด์šฉํ•ด ํ˜•๋ณ€ํ™˜์„ ํ•˜๋Š” ๊ฒƒ์€ 'this๋ฅผ ์›ํ•˜๋Š” ๊ฐ’์œผ๋กœ ์ง€์ •ํ•ด์„œ ํ˜ธ์ถœํ•œ๋‹ค'๋ผ๋Š” ๋ณธ๋ž˜ ๋ฉ”์„œ๋“œ์˜ ์˜๋„์™€๋Š” ๋‹ค์†Œ ๋™๋–จ์–ด์ง„ ํ™œ์šฉ๋ฒ•์ด๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ๋‹ค.
์ด์— ES6์—์„œ๋Š” ์œ ์‚ฌ๋ฐฐ์—ด๊ฐ์ฒด ๋˜๋Š” ์ˆœํšŒ ๊ฐ€๋Šฅํ•œ ๋ชจ๋“  ์ข…๋ฅ˜์˜ ๋ฐ์ดํ„ฐ ํƒ€์ž…์„ ๋ฐฐ์—ด๋กœ ์ „ํ™˜ํ•˜๋Š” Array.from() ๋ฉ”์„œ๋“œ๋ฅผ ๋„์ž…ํ–ˆ๋‹ค.

์ƒ์„ฑ์ž ๋‚ด๋ถ€์—์„œ ๋‹ค๋ฅธ ์ƒ์„ฑ์ž๋ฅผ ํ˜ธ์ถœ

function Person(name, gender) {
  this.name = name;
  this.gender = gender;
}

function Student(name, gender, school) {
  Person.call(this, name, gender); // this๋Š” 'syong'๋ฅผ ๊ฐ€๋ฆฌํ‚จ๋‹ค
  this.school = school;
}

var syong = new Student("์ˆ‘", "female", "๋Œ€ํ•™๊ต");

์ƒ์„ฑ์ž ํ•จ์ˆ˜ ๋‚ด๋ถ€์—์„œ ๋‹ค๋ฅธ ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ์ธ์Šคํ„ด์Šค์˜ ์†์„ฑ์„ ์ •์˜ํ•จ์œผ๋กœ์จ ๋ฐ˜๋ณต์„ ์ค„์ผ ์ˆ˜ ์žˆ๋‹ค.

์—ฌ๋Ÿฌ ์ธ์ˆ˜๋ฅผ ๋ฌถ์–ด ํ•˜๋‚˜์˜ ๋ฐฐ์—ด๋กœ ์ „๋‹ฌํ•˜๊ณ  ์‹ถ์„ ๋•Œ - apply ํ™œ์šฉ

var numbers = [10, 20, 3, 16, 45];
var max = Math.max.apply(null, numbers);
console.log(max); // 45

์—ฌ๋Ÿฌ ๊ฐœ์˜ ์ธ์ˆ˜๋ฅผ ๋ฐ›๋Š” ๋ฉ”์„œ๋“œ์—, ํ•˜๋‚˜์˜ ๋ฐฐ์—ด๋กœ ์ธ์ˆ˜๋“ค์„ ์ „๋‹ฌํ•˜๊ณ  ์‹ถ์„ ๋•Œ, apply ๋ฉ”์„œ๋“œ๋ฅผ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

(4) bind ๋ฉ”์„œ๋“œ

bind ๋ฉ”์„œ๋“œ๋Š” call ๋ฉ”์„œ๋“œ์™€ ๋น„์Šทํ•˜์ง€๋งŒ ํ•ด๋‹น ๋ฉ”์„œ๋“œ์˜ ํ˜ธ์ถœ ์ฃผ์ฒด์ธ ํ•จ์ˆ˜๋ฅผ ์ฆ‰์‹œ ํ˜ธ์ถœํ•˜์ง€๋Š” ์•Š๊ณ  ๋„˜๊ฒจ ๋ฐ›์€ this ๋ฐ ์ธ์ˆ˜๋“ค์„ ๋ฐ”ํƒ•์œผ๋กœ ์ƒˆ๋กœ์šด ํ•จ์ˆ˜๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
์ด๋Š” this๋ฅผ ์ง€์ •ํ•  ๋ฟ ์•„๋‹ˆ๋ผ ๋ถ€๋ถ„ ์ ์šฉ ํ•จ์ˆ˜๋ฅผ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋„ ์‚ฌ์šฉ๋œ๋‹ค.

name ํ”„๋กœํผํ‹ฐ

call/apply ๋ฉ”์„œ๋“œ๋Š” ๋ช…์‹œ์ ์œผ๋กœ ๋ณ„๋„์˜ this๋ฅผ ๋ฐ”์ธ๋”ฉํ•˜๋Š” ๋ฐฉ๋ฒ•์ด์ง€๋งŒ ์˜คํžˆ๋ ค ์ด๋กœ ์ธํ•ด this๋ฅผ ์˜ˆ์ธกํ•˜๊ธฐ ์–ด๋ ต๊ฒŒ ๋งŒ๋“ค๊ธฐ๋„ ํ•œ๋‹ค.
๋ฐ˜๋ฉด, bind ๋ฉ”์„œ๋“œ์— ์˜ํ•ด ๋ฐ˜ํ™˜๋œ ํ•จ์ˆ˜์˜ name ํ”„๋กœํผํ‹ฐ์—๋Š” 'bound'๋ผ๋Š” ์ ‘๋‘์–ด๊ฐ€ ๋ถ™์–ด call์ด๋‚˜ apply ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ๋ณด๋‹ค ์ฝ”๋“œ๋ฅผ ์ถ”์ ํ•˜๊ธฐ๊ฐ€ ์‰ฝ๋‹ค๋Š” ์žฅ์ ์ด ์žˆ๋‹ค.

๐Ÿ’ก ์ƒ์œ„ ์ปจํ…์ŠคํŠธ์˜ this๋ฅผ ๋‚ด๋ถ€ ํ•จ์ˆ˜๋‚˜ ์ฝœ๋ฐฑ ํ•จ์ˆ˜์— ์ „๋‹ฌํ•˜๊ธฐ

  • ๋ฉ”์„œ๋“œ์˜ ๋‚ด๋ถ€ ํ•จ์ˆ˜
var obj = {
  outer: function () {
    console.log(this); // obj
    var innerFunc = function () {
      console.log(this); // ์›๋ž˜๋Š” window์ง€๋งŒ call ๋ฉ”์„œ๋“œ์— ์˜ํ•ด obj๊ฐ€ ๋จ
    };
    innerFunc.call(this);
  }
};
obj.outer();
var obj = {
  outer: function () {
    console.log(this); // obj
    var innerFunc = function () {
      console.log(this); // ์›๋ž˜๋Š” window์ง€๋งŒ bind ๋ฉ”์„œ๋“œ์— ์˜ํ•ด obj๊ฐ€ ๋จ
    }.bind(this);
    innerFunc();
  },
};
obj.outer();
  • ์ฝœ๋ฐฑ ํ•จ์ˆ˜ ๐Ÿ”ฅ
var obj = {
  logThis: function () {
    console.log(this);
  },
  logThisLater1: function () {
    // console.log(this); // ์—ฌ๊ธฐ์„œ this๋Š” obj ( โˆต obj.logThisLater1(); )
    setTimeout(this.logThis, 500); // ๋”ฐ๋ผ์„œ, ์—ฌ๊ธฐ์„œ this๋„ obj
  },
  logThisLater2: function () {
    setTimeout(this.logThis.bind(this), 1000); // ์—ฌ๊ธฐ์„œ this๋„ obj
    // โ— ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋กœ ๊ฐ์ฒด์˜ ๋ฉ”์„œ๋“œ๋ฅผ ์ „๋‹ฌํ–ˆ๋”๋ผ๋„ ์ฝœ๋ฐฑ ํ•จ์ˆ˜ ๋˜ํ•œ ํ•จ์ˆ˜์ด๊ธฐ ๋•Œ๋ฌธ์—
    // this๋ฅผ ๋”ฐ๋กœ ๋ฐ”์ธ๋”ฉํ•ด์ฃผ์ง€ ์•Š์œผ๋ฉด '์ฝœ๋ฐฑ ํ•จ์ˆ˜ ๋‚ด๋ถ€์—์„œ์˜ this'๋Š” ์›๋ž˜ ์ „์—ญ ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚จ๋‹ค.
    // bind ๋ฉ”์„œ๋“œ๋ฅผ ์ด์šฉํ•ด obj๋ฅผ ์ฝœ๋ฐฑ ํ•จ์ˆ˜ ๋‚ด๋ถ€์—์„œ์˜ this๋กœ ๋ฐ”์ธ๋”ฉํ•ด์คฌ๋‹ค.
    // ์ฃผ์˜! this.logThis์—์„œ์˜ this๋Š” obj์ด๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ด๋Š” ์ฝœ๋ฐฑ ํ•จ์ˆ˜ ๋‚ด๋ถ€์—์„œ์˜ this์—๋Š” ์˜ํ–ฅ์„ ๋ฏธ์น˜์ง€ ์•Š๋Š”๋‹ค.
    // bind(this)๋ฅผ ํ†ตํ•ด ์ฝœ๋ฐฑ ํ•จ์ˆ˜ ๋‚ด๋ถ€์—์„œ์˜ this๊ฐ€ obj๊ฐ€ ๋˜๋Š” ๊ฒƒ์ด๋‹ค.
  }
};
obj.logThisLater1(); // window
obj.logThisLater2(); // ์›๋ž˜๋Š” window์ง€๋งŒ bind ๋ฉ”์„œ๋“œ์— ์˜ํ•ด obj๊ฐ€ ๋จ

(5) ๋ณ„๋„์˜ ์ธ์ž๋กœ this๋ฅผ ๋ฐ›๋Š” ๊ฒฝ์šฐ (์ฝœ๋ฐฑ ํ•จ์ˆ˜ ๋‚ด์—์„œ์˜ this)

์š”์†Œ๋ฅผ ์ˆœํšŒํ•˜๋ฉด์„œ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ๋ฐ˜๋ณต ํ˜ธ์ถœํ•˜๋Š” ๋‚ด์šฉ์˜ ์ผ๋ถ€ ๋ฉ”์„œ๋“œ๋Š”, ๋ณ„๋„์˜ ์ธ์ž๋กœ this๋ฅผ ๋ฐ›๊ธฐ๋„ ํ•œ๋‹ค.
์ฝœ๋ฐฑ ํ•จ์ˆ˜์™€ ํ•จ๊ป˜ this๋กœ ์ง€์ •ํ•  ๊ฐ์ฒด(thisArg)๋ฅผ ์ธ์ž๋กœ ํ•จ๊ป˜ ๋ฐ›๋Š” ๊ฒƒ์ด๋‹ค.

var report = {
  sum: 0,
  count: 0,
  add: function () {
    // console.log(this); // 1. ์—ฌ๊ธฐ์„œ this๋Š” report ( โˆต report.add(60, 85, 95); )
    var args = Array.prototype.slice.call(arguments);
    args.forEach(function (entry) {
      this.sum += entry; // 3. ์›๋ž˜ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋„ ํ•จ์ˆ˜์ด๋ฏ€๋กœ ์ฝœ๋ฐฑ ํ•จ์ˆ˜ ๋‚ด๋ถ€์˜ this๋Š” window์ง€๋งŒ, '2'์— ์˜ํ•ด report๊ฐ€ ๋จ
      ++this.count;
    }, this); // 2. ๋”ฐ๋ผ์„œ, ์—ฌ๊ธฐ์„œ this๋„ report
  },
  average: function () {
    return this.sum / this.count; // ์—ฌ๊ธฐ this๋Š” '1'๊ณผ ๊ฐ™์€ ๋งฅ๋ฝ์—์„œ report
  }
};

report.add(60, 85, 95);
console.log(report.sum, report.count, report.average()); // 240 3 80

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

  1. ์ฝœ๋ฐฑ ํ•จ์ˆ˜
profile
๋Šฅ๋™์ ์œผ๋กœ ์‚ด์ž, ํ–‰๋ณตํ•˜๊ฒŒ๐Ÿ˜

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