[Javascript] - this의 의미

this는 함수를 호출한 객체이다

💡 this ➡️｛⁇｝this는 어떤 객체를 가리키는 키워드이다 ! 그런데 this가 가리키는 객체는 상황에 따라 변한다.

1. main함수를 만들고 this를 출력해보자.

이렇게 main() 함수를 만들고 실행시켜 주면 this는 Window객체가 된다.

즉, main() === Window.main()과 같은 의미인 것이다 👍

 

우리가 만든 main 함수도 잘 들어있다.

---

2. object객체를 만들고 object의 main 메서드를 호출하여 this를 출력해 보자.

---

3. object.main을 담는 main2를 출력해 보자. 

 

main2 함수를 호출한 객체는 더 이상 object가 아니기 때문에 main2의 this는 Window객체를 출력한다.

여기서 우리가 알아야할 점 !! 은 this는 함수가 정의된 위치나 방법에 영향받지 않는다.

---

4. this는 함수가 정의된 위치나 방법에 영향을 받지 않는다.

따라서 main함수를 호출한 객체는 직접적으로 호출한 starObject이기 때문에 this 값은 starObject객체가 된다.

이렇게 동적으로 바뀌는 this값을 추적하게 되는 일은 코드가 복잡해질수록 귀찮아질 것이다 ㅠ

만약 this값을 우리가 원하는 객체로 고정하고 싶다면 어떻게 해야 될까 ? 

이 문제를 해결하는 방법은 .bind()를 사용하면 된다 !!

---

5. 바인드 메서드 사용해서 this가 가리키는 객체 고정해 보기

bind의 인자로 우리가 원하는 객체를 넣어준다.

이렇게 하면 mainBind를 어떻게 호출하던 상관없이 똑같이 {name: 'hi'}를 출력할 수 있다.

왜 이렇게 되는 것일까 ?

그 이유는 바로, binds는 새로운 함수를 반환해 주기 때문이다.

main.bind({name: 'hi'}); 는 우리가 만든 객체를 this 값으로 설정된 새로운 함수를 반환해 준다.

그 새로운 함수가 mainBind에 들어가서 우리가 mainBind를 호출해 준 것이다.

여기서 우리가 주의해야할 점 !! 은 this는 이미 바인드 된 것을 또 바인딩해 줄 수 없다.

👩🏻‍💻 이렇게 this에 대해서 알아보았다. 이를 통해서 this에 대한 개념을 명확히 할 수 있었고, 앞으로 JavaScript 코드를 작성할 때 더 주의 깊게 접근할 수 있을 것 같다.

this가 가리키는 대상을 명확하게 이해하는 것이, 코드의 품질을 높이는 데 큰 도움이 될 것같다.