[자바스크립트] 람다식과 일반 함수

자바스크립트에서 이벤트 처리를 하면서 "응? 왜 안 되지? 왜 다르지?"라는 생각을 갖게 되었다.

가장 기초적인 부분이지만 나는 이를 놓치고 "그냥 쓰라니까 써야지"하고 넘어갔던 부분이었다.

 

<button class="..." id="text-button">USD</button> 
<div class="..." id="list"> 
  <a href="#">한국</a> 
  <a href="#">미국</a> 
  <a href="#">일본</a> 
</div>

document.querySelectorAll("#list a").forEach((menu) => 
  menu.addEventListener("click", function() { 
        document.getElementById("text-button").textContent = this.textContent; 
        fromCurrency = this.textContent; 
  }) 
);

document.querySelectorAll("#list a").forEach((menu) => 
  menu.addEventListener("click", () => { 
        document.getElementById("text-button").textContent = this.textContent; 
        fromCurrency = this.textContent; 
  }) 
);

위의 자바스크립트 코드를 보면 일반 함수 function() {}과 람다식 () => {}로 작성하였다.

버튼에 마우스를 올리면 a링크로 되어 있는 "한국", "미국", "일본"이 리스트로 출력된다.

그리고 그 중 하나를 선택했을 경우, 버튼의 값이 선택한 나라의 값으로 변경이 된다.

 

그러나 람다식으로 작성할 경우, 나라의 값으로 변경되지 않고 빈 값으로 출력이 된다.

 

그 이유는 다음과 같다.

 

일반 함수는 함수를 호출했을 때, this가 동적으로 정해지지만,

람다식. 즉, 화살표 함수는 자신만의 this 객체가 없다. 그리고 정적 범위에서 외부 코드 블록의 this를 참조한다.

화살표 함수에서 this는 함수가 정의된 위치에서 외부 코드 블록의 this 하나로 고정되기 때문에 동적으로 this가 필요한 경우에는 화살표 함수를 사용하면 안 된다.

 

 이는 기초적인 지식의 하나이다. 그러나 나는 이를 확실하게 알지 못하고 "화살표 함수도 적극적으로 활용해봐"라는 말을 듣고 나서 왜 사용해야 하는지. 일반 함수와 다른 점은 무엇인지 알지 못하고 사용했다. 그리고 반성했다. 어떤 기능을 사용할 때는 제대로 알고 나서 사용해야 함을 깨달았다.