함수에서 this 바인딩

 

Do it! 웹 프로그래밍을 위한 자바스크립트 기본 편

무엇이든 처음 공부할 때는 기본기부터 빠르게 정복해야 한다. 그래야 그 분야에 재미를 느끼며 빠르게 적응할 수 있다. 《Do it! 웹 프로그래밍을 위한 자바스크립트 기본 편》은 자바스크립트를 통해 웹 프로그래밍에 입문하는 사람들이 가장 먼저 배워야 할 기본 문법을 웹 분야 베스트셀러 저자인 고경희 선생이 모아 엮은 책이다. 137개 예제를 통해 직접 프로그램을 만들면서 기본 문법을 흥미롭게 배운 뒤 ‘1분 복습’, ‘마무리 실습’, ‘연습 문제’ 등

 

저자

고경희

출판

이지스퍼블리싱

출판일

2019.03.26

요즘 Do it 시리즈의 자바스크립트 기본편을 공부하고 있다!

 

대략 이런 프로그램이다.

 

x 버튼을 눌렀을때 해당 아이템을 삭제하는 함수를 작성해보는 중 말로만 듣던 this 를 써보게 되었는데 바인딩 문제(!) 를 직면하여 포스팅에 남긴다.

---

 

▼  처음 교재를 보며 따라친 코드이다. 

function deleteItem() {
  // console.log(this); // 이벤트가 발생한 <span> 요소 출력
  const id = this.getAttribute("id");
  itemList.splice(id, 1);
  showList();
  console.log(itemList);
}

 

▼ 그리고 다시 스스로 동일한 프로그램을 짜보는 중에 작성한 코드

const deleteItem = () => {
  const id = this.getAttribute("id");
  itemList.splice(id, 1);
  showList();
};

 

분명 똑같은데 아래 코드는 작동을 안하고 type error 가 발생했다.

 

찾아보니 

this 가 가르키는 대상이 달라졌기 때문에 제대로 동작하지 않은것인데, 

그 이유는 화살표함수에 있었다.

 

화살표 함수에서 this 는 자기 자신이 아닌 상위 스코프이며, 따라서 전역객체인 window 를 가르키게 된다.

따라서 

const deleteItem = (e) => {
  const id = e.target.getAttribute("id");
  itemList.splice(id, 1);
  showList();
};

이렇게 e.target으로 접근해야 한다.

 

반면  function 으로 선언한 함수에서는 this는 이벤트를 발생시킨 요소이다.

따라서 id 속성을 잘 가져올 수 있는것이다. 

---

this 에 대해 공부했을때 언급한 기억은 있는데, 막상 코드에서 에러를 마주쳤을때 원인이 그것일거라고 예상하지도 못했다 ㅎㅎ

역시 닥쳐봐야 배운다고나 할까.. 😂  

 

잠시 사설을 덧붙이자면, 투두 리스트쯤이야 쉽게 만들수있지 했는데, 바닐라 자바스크립트 너무 낯선것이다...

이렇게 힘겹게 만들다니 약간의 자괴감을 느껴따..

히힛 썸네일 울궈먹기...