자바스크립트 this 바인딩 개념이 헷갈리는데 도와주실 수 있나요?

조회수 85회

안녕하세요. 얼마전 자바스크립트 공부를 시작한 대학생입니다.

저 혼자서는 해결이 안되는 문제가 있어서 질문합니다.

자바스크립트의 화살표 함수를 공부하던 중에 아래 예제를 보게되었습니다.

class Prefixer {
  constructor(prefix) {
    this.prefix = prefix;
  }

  add(arr) {
    return arr.map((item) => this.prefix + item);
  }
}

const prefixer = new Prefixer("-webkit-");
console.log(prefixer.add(["transition", "user-select"]));

trantition, user-select에 -webkit- 접두어를 붙여 출력하는 예제이고 화살표 함수는 자체적인 this 바인딩을 갖지 않고 상위 스코프의 this를 가져온다는걸 보여주는 예제입니다.

그런데 다른건 다 이해가 되는데, 화살표 함수가 가져온 상위 스코프의 this가 어째서 Prefixer 클래스의 this와 같은지 모르겠습니다.

제 생각에는 화살표 함수를 호출하는건 고차함수인 arr.map이니 화살표 함수의 상위 스코프는 arr.map의 스코프가 되어야할 것 같고, map은 arr의 메서드로서 호출되었으니 map의 this는 arr을 가리켜 화살표 함수의 this도 arr을 가리켜야할 것 같습니다.

몇번 코드를 수정해서 실행시켜봐도 왜 이런 결과가 나오는지 알 수가 없어서 질문합니다..

제가 궁금한 것은 두가지입니다.

  1. arr.map()은 자체적인 this를 갖지 않나요? 그렇다면 어째서인가요? 제가 개념을 잘못 알고있는 부분이 있다면 어느 부분에 문제가 있는건가요?
  2. 화살표 함수의 this는 어떻게 정해진건가요?

긴 글 읽어주셔서 감사합니다.

  • 대충 찾아보니 바로 그 context 헷갈림을 없애려고 도입한 게 lambda로서의 화살표함수 라는것 같아요. 화살표함수를 쓸경우 → 컨텍스트는 항상 상위 https://stackoverflow.com/a/20279485/8680764 엽토군 2022.9.11 09:35

1 답변

  • 좋아요

    1

    싫어요
    채택 취소하기

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#description

    화살표로 명시된 함수의 경우 자체 scope을 따로 갖지 않습니다. 함수를 정의한 스콥의 this를 자동으로 받게 됩니다.

    • 답변해주셔서 감사합니다. 화살표 함수를 정의한 스코프의 this를 자동으로 받게된다고 하셨는데, 그렇다면 화살표 함수를 누가 호출하는지와는 전혀 관계 없이 언제나 정의한 위치만 this에 영향을 준다고 생각해도 되는건가요? 또, 화살표 함수가 arr.map의 콜백함수로서 정의되었는데 이 경우엔 arr.map의 스코프에서 정의된 것이 아니라 add(arr)의 스코프에서 정의되었다고 보는건가요? yje07039@gmail.com 2022.9.13 13:13
    • 네 둘다 맞습니다. 예시로 const mapper = (item) => (this.prefix + item); class Prefixer { constructor(prefix) { this.prefix = prefix; } add(arr) { return arr.map(mapper); } } class Prefixer { constructor(prefix) { this.prefix = prefix; } add(arr) { const mapper = (item) => (this.prefix + item); return arr.map(mapper); } } 의 결과를 비교하시면 둘의 결과가 다른 것을 확인하실수 있습니다. 두번째 예시가 질문자님이 처음 작성하신 코드와 동일하다고 생각하시면 됩니다. eunsun.choi0@gmail.com 2022.9.14 01:30
    • 답변해주셔서 고맙습니다. 덕분에 잘 이해되었습니다. yje07039@gmail.com 2022.9.15 11:22

답변을 하려면 로그인이 필요합니다.

Hashcode는 개발자들을 위한 무료 QnA 사이트입니다. 계정을 생성하셔야만 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 계정을 생성하셔야만 글을 작성하실 수 있습니다.