this

• 어떠한 object를 가리키는 키워드
  • java에서의 this와 python에서의 self는 인스턴스 자기 자신을 가리킴
• JavaScript의 함수는 호출될 때 this를 암묵적으로 전달 받음
• JavaScript에서 this는 일반적인 프로그래밍 언어에서의 this와 조금 다르게 동작
• JavaScript는 해당 함수 호출 방식에 따라 this에 바인딩 되는 객체가 달라짐
• 즉, 함수를 선언할 때 this에 객체가 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 동적으로 결정됨

전역 문맥에서의 this

• 브라우저 전역 객체인 window를 가리킴
  • 전역 객체는 모든 객체의 유일한 최상위 객체를 의미

console.log(this)  // window

함수 문맥에서의 this

• 함수의 this 키워드는 다른 언어와 조금 다르게 동작
  • this의 값은 함수를 호출한 방법에 의해 결정됨
  • 함수 내부에서 this의 값은 함수를 호출한 방법에 의해 좌우됨

단순 호출

• 전역 객체를 가리킴
• 브라우저에서 전역은 window를 의미함

const myFunc = function () {
    console.log(this)
}
// 브라우저
myFunc()  // Window

Method (Function in Object, 객체의 메서드로서)

• 메서드로 선언하고 호출한다면, 객체의 메서드이므로 해당 객체가 바인딩

const myObj = {
    data : 1,
    myFunc() {
        console.log(this)  // myObj
        console.log(this.data)  // 1
    }
}
myObj.myFunc()  // myObj

Nested

Fuction 키워드

• forEach의 콜백 함수에서의 this가 메서드의 객체를 가리키지 못하고 전역 객체 window를 가리킴
• 단순 호출 방식으로 사용되었기 때문
• 이를 해결하기 위해 등장한 함수 표현식이 바로 화살표 함수

const myObj2 = {
    numbers: [1],
    myFunc() {
        console.log(this)  // myObj
        this.numbers.forEach(function(num)
        {
            console.log(num)  // 1
            console.log(this)  // window
        })
    }
}
myObj2.myFunc()

화살표 함수

• 이전에 일반 function 키워드와 달리 메서드의 객체를 잘 가리킴
• 화살표 함수에서 this는 자신을 감싼 정적 범위
• 자동으로 한 단계 상위의 scope의 context를 바인딩

const myObj3 = {
    numbers: [1],
    myFunc() {
        console.log(this)  // myObj
        this.numbers.forEach(number =>
        {
            console.log(number)  // 1
            console.log(this)  // myObj
        })
    }
}
myObj3.myFunc()

• 화살표 함수는 호출의 위치와 상관 없이 상위 스코프를 가리킴 (Lexical scope this)

Lexical scope

• 함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 결정
• Static scope라고도 하며 대부분의 프로그래밍 언어에서 따르는 방식
• 따라서 함수 내의 함수 상황에서 화살표 함수를 쓰는 것을 권장

let x = 1  // global
function first() {
    let x = 10
    second()
}
function second() {
    console.log(x)
}
first()  // 1
second()  // 1