강의 진도

• 자바스크립트의 this-1

• 자바스크립트의 this-2

• this와 화살표 함수

• 동물 앨범 만들기 1-1

• 동물 앨범 만들기 1-2

미션

1. 자바스크립트의 this

다음 코드에서 regularFunction과 arrowFunction이 있습니다.

두 함수 모두 this가 어떻게 작동하는지 확인하기 위해 각각 this.value를 출력하려고 합니다.

각 함수의 this가 무엇을 가리키는지 확인하고, 각 함수가 정상적으로 this.value를 출력할 수 있도록 코드를 수정하세요. (주석으로 작성된 질문에 대한 답도 주석으로 남겨주세요!!)

const obj = {
    value: 42,
    regularFunction: function () {
        console.log(this.value); // 1. 여기서 this는 무엇을 가리키나요?
    },
    arrowFunction: () => {
        console.log(this.value); // 2. 여기서 this는 무엇을 가리키나요?
    },
};

obj.regularFunction(); // 출력: 42
obj.arrowFunction(); // 출력: undefined (3. 이유를 설명해보세요)

답변

1. obj를 가리킨다.
   regularFunction은 일반 함수로 선언되었고, 메서드로 호출되었기 때문에 해당 메서드를 소유한 객체 obj를 this로 가리킨다.

2. 전역 객체를 가리킨다.
   arrowFunction은 화살표 함수로 선언되었고, 화살표 함수는 자신만의 this 바인딩을 생성하는 것이 아닌 렉시컬 스코프의 this를 사용하기 때문에 함수가 선언된 객체 obj의 상위 스코프인 전역 스코프의 this를 참조하기 때문이다.

3. 전역 객체에는 value라는 프로퍼티가 정의되어 있지 않기 때문에 undefined를 반환한다.

2.동물 앨범 만들기

만든 동물 앨범 웹 페이지를 캡쳐해서 올려주세요!!

연관 게시글