๐Ÿ“ƒ ํ”„๋ก ํŠธ์—”๋“œ ์ธํ„ฐ๋ทฐ ๋ฌธ์ œ ๋‹ตํ•ด๋ณด๊ธฐ #8 Javascript this

Jake Seoยท2020๋…„ 6์›” 12์ผ
1

๐Ÿ“ƒ ํ”„๋ก ํŠธ์—”๋“œ ์ธํ„ฐ๋ทฐ ๋ฌธ์ œ ๋‹ตํ•ด๋ณด๊ธฐ #8 Javascript this

Prologue

๊นƒํ—ˆ๋ธŒ๋ฅผ ๋Œ์•„๋‹ค๋‹ˆ๋‹ค๊ฐ€ ์˜ˆ์ „์— ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž ์ธํ„ฐ๋ทฐ ์งˆ๋ฌธ์ด๋ผ๋Š” ๋ ˆํฌ์ง€ํ† ๋ฆฌ๋ฅผ ๋ณธ์ ์ด ์žˆ๋‹ค. ์‚ฌ์‹ค ๊ทธ ๋‹น์‹œ์—๋Š” ๊ทธ๋ƒฅ ์Šคํƒ€๋งŒ ๋ˆŒ๋Ÿฌ๋†“๊ณ  ํฐ ๊ด€์‹ฌ์ด ์—†์—ˆ์ง€๋งŒ ์ง€๊ธˆ๋ถ€ํ„ฐ ํ•˜๋‚˜์”ฉ ํ’€์–ด๋ณด๋ ค ํ•ฉ๋‹ˆ๋‹ค.

๋ฌผ๋ก  ๋งŽ์€ ๋‹ต๋“ค์ด ์ด๋ฏธ ์ด ๋ ˆํฌ์ง€ํ† ๋ฆฌ์— ์ž‘์„ฑ๋˜์–ด ์žˆ๊ธด ํ•œ๋ฐ, ์ž‘์„ฑ๋˜์ง€ ์•Š์€ ๊ฒƒ๋“ค๋„ ์žˆ๊ณ  ๋‚ด ๋‹ต์ด๋ž‘ ๋ชจ๋ฒ”๋‹ต์•ˆ์„ ๋น„๊ตํ•˜๋Š” ๊ฒƒ๋„ ์ข‹์„ ๊ฒƒ ๊ฐ™์•„์„œ ํ•œ๋ฒˆ ํ’€์–ด๋ณด๋ ค ํ•ฉ๋‹ˆ๋‹ค.

๋ฌธ์ œ ์„ ์ •

๊ธฐ์กด ๋ ˆํฌ์ง€ํ† ๋ฆฌ์—๋Š” ๋ฌธ์ œ์˜ ๋ถ„๋ฅ˜๊ฐ€ ์•„๋ž˜์™€ ๊ฐ™์ด ๋˜์–ด์žˆ์Šต๋‹ˆ๋‹ค.

  1. General Questions
  2. HTML Questions
  3. CSS Questions
  4. JS Questions
  5. Accessibility Questions (external link)
  6. Testing Questions
  7. Performance Questions
  8. Network Questions
  9. Coding Questions
  10. Fun Questions

๋งค์ผ 1๊ฐ€์ง€์”ฉ ๋Œ์•„๊ฐ€๋ฉฐ ํ’€ ๊ฑด๋ฐ, General Questions ํ•ญ๋ชฉ์—์„œ ๋„ˆ๋ฌด ์ผ๋ฐ˜์ ์ธ ๋ฌธ์ œ๋Š” ํ’€์ง€ ์•Š์„ ๊ฒƒ์ด๋‹ค. ๋„ˆ๋ฌด ์ผ๋ฐ˜์ ์ธ ๋ฌธ์ œ์˜ ์ •์˜๋Š” ์‚ฌ๋žŒ๋งˆ๋‹ค ๋‹ต์ด ๋‹ค๋ฅผ ์ˆ˜ ์žˆ๋Š” ๋ฌธ์ œ์ž…๋‹ˆ๋‹ค.

์ด๋ฅผํ…Œ๋ฉด...

What did you learn yesterday/this week? (์–ด์ œ/์ด๋ฒˆ์ฃผ์— ๋ฌด์—‡์„ ๋ฐฐ์› ๋‚˜์š”)
What excites or interests you about coding? (๋ฌด์—‡์ด ๋‹น์‹ ์„ ์ฝ”๋”ฉํ•˜๊ณ  ์‹ถ๊ฒŒ ๋งŒ๋“œ๋‚˜์š”?)
What is a recent technical challenge you experienced and how did you solve it?(์ตœ๊ทผ์— ๊ฒช์€ ๊ธฐ์ˆ ์ ์ธ ์–ด๋ ค์›€๊ณผ ๊ทธ๊ฒƒ์„ ์–ด๋–ป๊ฒŒ ํ•ด๊ฒฐํ–ˆ๋Š”์ง€ ์•Œ๋ ค์ฃผ์„ธ์š”)

์ด๋Ÿฌํ•œ ๊ฒƒ๋“ค์€ ๋‹ต๋ณ€ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฐ ๋ฌธ์ œ๋Š” ๊ทธ๋•Œ๊ทธ๋•Œ ๋‹ต์ด ๋‹ฌ๋ผ์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ฐธ๊ณ 

๋‚˜์˜ ๋‹ต๋ณ€์€ ๋†’์€ ํ™•๋ฅ ๋กœ ํ‹€๋ฆด ์ˆ˜๋„ ์žˆ์œผ๋ฉฐ, ์•„๋‹ˆ๋ฉด ๋งž๊ฒŒ ๊ฐ€๋‹ค๊ฐ€ ์ค‘๊ฐ„์— ์ด์ƒํ•œ ๊ธธ๋กœ ๋น ์งˆ ์ˆ˜๋„ ์žˆ๋‹ค. ๋Œ“๊ธ€์— ์ž์‹ ๋งŒ์˜ ๋‹ต์„ ์˜ฌ๋ ค์ฃผ๋ฉด ๋งค์šฐ ๊ณ ๋งˆ์šธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

Q: ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ this๊ฐ€ ์–ด๋–ป๊ฒŒ ์ž‘๋™๋˜๋Š”์ง€ ์„ค๋ช…ํ•  ์ˆ˜ ์žˆ๋‚˜์š”? ๊ทธ๋ฆฌ๊ณ  ES6์—์„œ this๊ฐ€ ์–ด๋–ป๊ฒŒ ์ž‘๋™ํ•˜๋Š”์ง€์— ๋Œ€ํ•œ ์˜ˆ๋„ ํ•˜๋‚˜ ๋“ค์–ด์ฃผ์„ธ์š”.

Explain how this works in Javascript and can you give me an example of one of the way that working with this has changed in ES6

A1: ์ผ€์ด์Šค๋ณ„ ์ •๋ฆฌ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํ•จ์ˆ˜๋Š” ํ˜ธ์ถœ๋  ๋•Œ, ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ์ „๋‹ฌ๋˜๋Š” ์ธ์ž ๊ฐ’ ์ด์™ธ์— ์ธ์ž๋ฅผ Objectํ˜•์‹์œผ๋กœ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” arguments Object์™€ this๋ฅผ ์•”๋ฌต์ ์œผ๋กœ ๋ฐ›์Šต๋‹ˆ๋‹ค.

this๋Š” ์ž๋ฐ”์—์„œ๋Š” ์ธ์Šคํ„ด์Šค ์ž์‹ ์„ ๊ฐ€๋ฆฌํ‚ค๋Š” ์ฐธ์กฐ๋ณ€์ˆ˜๋กœ ์“ฐ์ด๋Š” ๋ฐ˜๋ฉด์—, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ๋Š” ํ•จ์ˆ˜ ํ˜ธ์ถœ ๋ฐฉ์‹์— ๋”ฐ๋ผ ๋ฐ”์ธ๋”ฉ๋˜๋Š” this๊ฐ€ ๋‹ค๋ฆ…๋‹ˆ๋‹ค.

ํ•จ์ˆ˜ ํ˜ธ์ถœ ๋ฐฉ์‹์€ ์ผ๋ฐ˜์ ์œผ๋กœ 4๊ฐ€์ง€๋กœ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  1. ๋ฉ”์†Œ๋“œ ํ˜ธ์ถœ Obj.func();
  2. ํ•จ์ˆ˜ ํ˜ธ์ถœ func();
  3. ์ƒ์„ฑ์ž ํ•จ์ˆ˜ ํ˜ธ์ถœ new anyInstance();
  4. apply/call/bind ํ˜ธ์ถœ `func.call(); func.apply(); func.bind()();
  5. ํ™”์‚ดํ‘œ ํ•จ์ˆ˜์— ์˜ํ•ด ํ˜ธ์ถœ (() => { })();

๋ฉ”์†Œ๋“œ ํ˜ธ์ถœ์˜ ๊ฒฝ์šฐ

Object ๋‚ด๋ถ€ ๋ฉ”์†Œ๋“œ์—์„œ์˜ this

var obj = {
    func: function() {
        console.log(this); // obj
    }
}

obj.func();

์˜ค๋ธŒ์ ํŠธ ๋‚ด๋ถ€์— ์„ ์–ธ๋œ ๋ฉ”์†Œ๋“œ๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ๊ฒฝ์šฐ this๋กœ ํ•ด๋‹น ์˜ค๋ธŒ์ ํŠธ๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

ํ•จ์ˆ˜ ํ˜ธ์ถœ์˜ ๊ฒฝ์šฐ

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

function func1() {
  console.log(this); // window
  function func2() {
    console.log(this); // window
  }
}

func1();

ํ•จ์ˆ˜ ๋‚ด๋ถ€์—์„œ ํ˜ธ์ถœํ•˜๋ƒ์— ๋”ฐ๋ผ ์ƒ๊ด€์—†์ด this๋Š” window๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

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

var obj = {
  func: function() {
    setTimeout(function() {
      console.log(this); // window
    });
  }
};

obj.func();

์˜ค๋ธŒ์ ํŠธ ๋‚ด๋ถ€์— ๋“ค์–ด์žˆ๋”๋ผ๋„ ๊ทธ ์•ˆ์— ๋˜ ์ฝœ๋ฐฑํ•จ์ˆ˜๋ฅผ ์„ ์–ธํ•˜๊ณ  this๋ฅผ ์ถœ๋ ฅํ•˜๋ฉด window๊ฐ€ ๋‚˜์˜ต๋‹ˆ๋‹ค.

์ƒ์„ฑ์ž ํ•จ์ˆ˜ ํ˜ธ์ถœ์˜ ๊ฒฝ์šฐ

function newFunc(test){
    this.test = test;
    console.log("this = ", this); // new -> newFunc / without new -> window
}

new newFunc('abc'); // newFunc
newFunc('abc'); // window

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

this ๋ฐ”์ธ๋”ฉ์ด ์ž๋™์œผ๋กœ ๋œ๋‹ค๊ณ  ์ƒ๊ฐํ•˜์ž.

apply/call/bind ํ˜ธ์ถœ

apply/call/bind๋Š” ๋ฐ”์ธ๋”ฉ๋  this๋ฅผ ์‚ฌ์šฉ์ž๊ฐ€ ์ง์ ‘ ์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ์„ธ ํ•จ์ˆ˜์˜ ๊ธฐ๋Šฅ์€ ๊ฑฐ์˜ ๋™์ผํ•œ๋ฐ, ๋งˆ์ง€๋ง‰ argument๋ฅผ ์ฃผ๋Š” ๋ฐฉ๋ฒ•๋“ค์ด ์กฐ๊ธˆ์”ฉ ๋‹ค๋ฆ…๋‹ˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  bind์˜ ๊ฒฝ์šฐ ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰์‹œํ‚ค์ง€ ์•Š๊ณ  ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ์‹คํ–‰์‹œํ‚ค๋ ค๋ฉด ๋’ค์— ()๋ฅผ ํ•œ๋ฒˆ ๋” ๋ถ™์—ฌ์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

func.call(this, arg1, arg2, arg3);   // this๋ฅผ ๋ฐ”์ธ๋“œํ•˜์—ฌ ํ•จ์ˆ˜ ์‹คํ–‰
func.apply(this, [arg1, arg2, arg3]);  // this๋ฅผ ๋ฐ”์ธ๋“œํ•˜์—ฌ ํ•จ์ˆ˜ ์‹คํ–‰
func.bind(this, [arg1, arg2, arg3]); // this๋ฅผ ๋ฐ”์ธ๋“œํ•˜์—ฌ ํ•จ์ˆ˜ ๋ฐ˜ํ™˜

ํ™”์‚ดํ‘œ ํ•จ์ˆ˜์— ์˜ํ•ด ํ˜ธ์ถœ

ํ™”์‚ดํ‘œ ํ•จ์ˆ˜์— ์˜ํ•ด this๊ฐ€ ํ˜ธ์ถœ๋˜๋Š” ๊ฒฝ์šฐ, this๋Š” ๋ฐ”๋กœ ์ƒ์œ„ ์Šค์ฝ”ํ”„์˜ ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚ค๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

let funcfunc = {
    func1: function() {
        (() => {
            console.log(this); // funcfunc object
        })()
    }
};

funcfunc.func1();
let funcfunc2 = {
  func1: function() {
    (function() {
      console.log(this); // window object
    })()
  }
};

funcfunc2.func1();

A2: ํ•œ ๋ฒˆ์— ์ •๋ฆฌ

  1. ์ƒ์„ฑ์ž๋กœ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ๊ฒฝ์šฐ this๋Š” ์ƒ์„ฑ๋˜๋Š” self ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚ต๋‹ˆ๋‹ค.
  2. apply, call, bind๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ this๋Š” ํ˜ธ์ถœ ์‹œ ๋ฐ”์ธ๋”ฉ ์‹œํ‚จ ๊ฐ์ฒด์ž…๋‹ˆ๋‹ค.
  3. object.method()์™€ ๊ฐ™์ด ํ˜ธ์ถœํ•˜๋Š” ๊ฒฝ์šฐ, this๋Š” ํ•จ์ˆ˜๊ฐ€ ์†ํ•œ ๊ฐ์ฒด์ž…๋‹ˆ๋‹ค.
  4. ์—„๊ฒฉ ๋ชจ๋“œ์ธ ('use strict') ๊ฒฝ์šฐ this๋Š” ์ „์—ญ ๊ฐ์ฒด ๋Œ€์‹  undefined๊ฐ€ ๋ฉ๋‹ˆ๋‹ค.
  5. ํ•จ์ˆ˜๊ฐ€ ES2015์˜ ํ™”์‚ดํ‘œ ํ•จ์ˆ˜์ธ ๊ฒฝ์šฐ, ์ƒ์œ„ ์Šค์ฝ”ํ”„์˜ ๊ฐ์ฒด๋ฅผ ๋ฐ›๊ฒŒ๋ฉ๋‹ˆ๋‹ค.
  6. ์ด ์™ธ์˜ ๊ฒฝ์šฐ this๋Š” window๊ฐ์ฒด๋กœ ๋ณด๋ฉด ๋ฉ๋‹ˆ๋‹ค.
profile
ํ’€์Šคํƒ ์›น๊ฐœ๋ฐœ์ž๋กœ ์ผํ•˜๊ณ  ์žˆ๋Š” Jake Seo์ž…๋‹ˆ๋‹ค. ์ฃผ๋กœ Jake Seo๋ผ๋Š” ๋‹‰๋„ค์ž„์„ ๋งŽ์ด ์”๋‹ˆ๋‹ค. ํ”„๋ก ํŠธ์—”๋“œ: Javascript, React ๋ฐฑ์—”๋“œ: Spring Framework์— ๊ด€์‹ฌ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

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