2024-10-24(this,scope 실습 오답노트)

const team = {
    name: 'Developers',
    members: ['Alice', 'Bob'],
    introduceTeam() {
        this.members.forEach(function(member) {
          console.log(`${member}는 ${this.name} 팀에 속해 있습니다.`);
        });
    },
    introduceTeamArrow() {
      this.members.forEach(member => {
        console.log(`${member}는 ${this.name} 팀에 속해 있습니다.`);
      });
    },
};

team.introduceTeam();
// Q1. 콘솔에 어떻게 출력이 될까요?

team.introduceTeamArrow();
// Q2. 콘솔에 어떻게 출력이 될까요?

 

두개의 차이는 일반함수의 this vs 화살표함수의 this 였는데 두개를 반대로 생각했다...

정확히는 첫번째 introduceTeam에서 function는 forEach 콜백함수의 일반함수이다.

여기서 this는 forEach를 호출한 전역객체(브라우저라면 window)이기 때문에 this.name은 undefined이다.

 

두번째는 forEach 콜백함수의 화살표함수이다. 

화살표함수는 외부 컨텍스트의 this를 유지하기 때문에 this.name은 Developers이다.

 

*렉시컬 스코프에서 함수는 선언된 위치에 따라 스코프를 갖는다.