📃 프론트엔드 인터뷰 문제 답해보기 #8 Javascript this

📃 프론트엔드 인터뷰 문제 답해보기 #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객체로 보면 됩니다.