JavaScript

[JavaScript] 일반 함수와 화살표 함수에 따른 this 바인딩

joheamin 2025. 2. 2. 19:49

❓ 오늘의 문제

자바스크립트로 클릭하면 텍스트가 빨간색으로 변하는 코드를 짜던 도중 막혔다.

 

  <body>
    <p id="text">hello</p>
  </body>
 
  <script>
    onload = () => {
      let p = document.getElementById("text");

      // () => : 화살표 함수
      p.onclick = () => {
        this.style.color = "red";
      };
    };
  </script>

👆 위 코드는 문서가 준비가 다 되었을 시점(onload) 에 id 가 text인 DOM객체를 찾고

      해당 DOM객체를 클릭 할 시 this를 통해 클릭된 DOM객체의 color를 빨간색으로 바꾸도록 하였다.

 

그러나 이렇게 하였을 때 텍스트를 클릭하여도 빨간색으로  바뀌지 않았다.

 


그리고 콘솔 창에 에러가 발생하였다.

 

정의되지 않은 타입에 속성을 변경할 수 없다. 

즉 this로 가져온 것이 undefined 라는 것 이다.

 

 

💡 해결 ?

검색을 해보니 화살표 함수는 this 바인딩이 안된다는 이유로 일반 함수로 해야 한다는 내용을 보고 코드를 바꿔보았다.

 

    onload = () => {
      let p = document.getElementById("text");

	  // function () : 일반 함수
      p.onclick = function () {
        this.style.color = "red";
      };
    };

👉 이렇게 하였더니 정상적으로 텍스트의 색깔이 바뀌었다.

 

 


🤔 그렇다면 화살표 함수는 this 바인딩이 안된다는 소리가 도대체 무엇일까?

 

우선 this라는 객체에 대해서 먼저 알아보자

 

❓ this 란

호출되는 방식에 따라 값이 결정되는 특수한 객체이며,

일반 함수인지 화살표함수 인지에 따라 호출 값이 달라진다.

 

 


🔷 일반 함수에서의 this 바인 

일반 함수에서의 this는 함수를 호출한 객체를 가리키게 된다.

 

즉 부모 함수 내부에 자식 함수가 있을 경우

자식 함수에서 this를 호출 했을 때

 

자식 함수를 호출한 부모를 가리키게 되는 것이다.

 

 

 

1️⃣ 일반 함수에서 바로 호출

function hello () {
	console.log(this);
}

 

👉 전역 객체 즉 window를 가리킨다.

 

 

2️⃣ 객체 메서드에서 호출

    const person = {
      name: "홍길동",
      method: function () {
        console.log(this.name);
      },
    };

    person.method();

👉 this 는 method 함수를 호출한 person객체를 가리키며 , person의 name을 가져오게된다.

 

 

 

3️⃣ 중첩 함수에서 호출

 const person = {
        method1: function () {
          console.log(this); //this -> person2
          
          //일반 함수로 호출된 메서드 -> 모두 전역 객체 (window)
          function method2() {
            console.log(this); //this -> window
          }
          method2();
        },
      };
      person.method1();

👉 객체 메서드에서 호출 된 함수는 메서드 안에서 호출 된것이므로 일반 함수로 분류 된다.

      따라서 일반 함수의 this는 window를 가리키게 된다. 

 


🔷 화살표 함수의 this 바인딩

 

화살표 함수에는 this 라는 객체가 존재하지 않는다.

 

그렇기 때문에 화살표 함수에서 this를 사용할 경우 상위 스코프의 this를 사용하게 된다.

 

함수를 호출한 객체 를 가져오는 일반 함수와 달리

    함수를 호출한 객체를 또 호출한 객체 를 가져오는 것이다.

 

그렇다면 중첩 함수를 통하여 화살표 함수의 this가 어떤식으로 호출되는지 알아보자

 

중첩 함수 예제
    const person = {
      name: "홍길동",
      
      //객체 안에 메서드
      method: function () {
        name: "김철수";
        console.log("일반:" + this.name);
        
        
        //객체 안에 메서드 내부 속 메서드
        method2 = () => {
          console.log("화살표:" + this.name);
        };
        func2();
      },
    };
    person.method();

👆 위 코드는 person 이라는 객체 내부에 method라는 객체 안에 중첩으로 저장된 method2라는 메서드가 있다.

     객체 안에 있는 메서드는 일반함수로 this를 호출하게 될 경우 해당 함수를 호출한 객체인 person이 호출된다.

 

❓ 결과

     객체 안에 메서드 내부에서 생성된 화살표 함수 method2는 해당 함수를 호출한 method(함수) 라고 하니 

     

     원래라면 해당 메서드를 호출한 메서드인 method의 this가 가져와지는 것 인데.

    

💡화살표 함수는 this라는 객체가 존재하지않아 상위 스포크 즉, this를 호출한 함수를  또 다시 호출한 함수의 객체를

    가져오는것이다.

 

따라서 method2가 실행된 다면 method() 함수를 호출하는 객체를 가져오게된다.