[JavaScript] This 와 Bind

 

JavaScript에서 this 키워드는 많은 개발자들이 헷갈려하는 개념 중 하나입니다. 이 글에서는 this의 의미와 동작 방식, 그리고 실제 사용 예를 통해 이해를 돕고자 합니다.

 

1. this의 기본 개념

this는 한마디로 함수를 호출한 객체를 가리킵니다. 이 간단한 정의가 처음에는 이해하기 어려울 수 있지만, 예제를 통해 살펴보면 이해가 될것입니다!

 

2. 전역 스코프에서의 this

console.log(this) // window 객체가 출력

전역 스코프에서 this는 기본적으로 window 객체를 가리킵니다.

 

3. 객체 메서드에서의 this

const object = {
  name : 'kangNew',
  main : function () {
    console.log(this.name); // kangNew
  }
}

object.main()

 

객체의 메서드 내부에서 this는 해당 메서드를 호출한 객체를 가리킵니다.
위 예제에서 main 함수 내부의 this는 object를 가리키므로, this.name은 'kangNew'가 됩니다.

 

4. 중첩 객체에서의 this

function main(){
  console.log(this) // smallObject 출력 
}

const object = {
  name : 'kangNew',
  smallObject : {
    name : 'kangOld',
    main
  }
}

object.smallObject.main()

 

이 경우, main 함수를 직접 호출한 객체는 smallObject이므로 this는 smallObject를 가리킵니다.

 

 

5. this의 동적 바인딩과 bind 메서드

this의 값이 동적으로 바뀌는 것을 제어하기 위해 bind 메서드를 사용할 수 있습니다.

function main(){
  console.log(this) // this값은 window가 아닌 우리가 넣어준  { name : 'hi' } 객체가 됩니다.
}

const mainBind = main.bind({ name : 'hi'})

mainBind()

bind 메서드는 새로운 함수를 반환하며, 이 함수의 this는 bind에 전달된 객체로 고정됩니다.

 

 

6. 전통적인 함수 문법 vs 화살표 함수 문법

//전통적인 함수 문법
function main(){
  console.log(this)
}

//화살표 함수 문법
const main = () => {
  console.log(this)
}

 

전통적인 함수 문법

- 호출 방법에 따른 this가 변화합니다.

- this를 고정하기 위해 bind()를 사용합니다.

 

화살표 함수 문법

- 더 간결한 함수 선언 문법

- this가 호출에 따라 바뀌지 않습니다.

- this를 외부에서 가져옵니다.

 

이 둘의 차이점은 다음 블로그에서 더 자세히 작성하겠습니다.

 

 

결론

JavaScript에서 this의 값은 함수가 어떻게 호출되었는지에 따라 동적으로 결정됩니다.