AI 웹개발 취업캠프 - 7일차 [NIPA/정보통신산업진흥원]

📝과제 - this. 를 안 붙이면 reference Error가 뜨는 이유 찾아보기

this. 를 안 붙이면 reference Error가 뜨는데 위에 선언을 했음에도 불구하고 왜 에러가 뜨는지 원인 찾아보기

**예시코드
var person = {
    name: "홍길동",      // 이름 프로퍼티를 정의함.
    birthday: "030219",  // 생년월일 프로퍼티를 정의함.
    age: 30,
    pId: "1234567",      // 개인 id 프로퍼티를 정의함.
    fullId: function() { // 생년월일과 개인 id를 합쳐서 주민등록번호를 반환함.
        return this.birthday + this.pId;
    },
};

이유

자신이 속한 객체의 프로퍼티나 다른 메서드를 참조하려면 자신이 속한 객체를 참조해야한다.

var birthday = "050505"

var person = {
    name: "홍길동",      // 이름 프로퍼티를 정의함.
    birthday: "030219",  // 생년월일 프로퍼티를 정의함.
    age: 30,
    pId: "1234567",      // 개인 id 프로퍼티를 정의함.
    fullId: function() { // 생년월일과 개인 id를 합쳐서 주민등록번호를 반환함.
      console.log(birthday) // 050505
      console.log(person.birthday); // 030219
      console.log(this.birthday); // 030219
    },
};

person.fullId(); 
// 050505
// 030219

먼저 전역변수로 birthday를 초기화 후 person.fullId메서드에서 console.log로 birthday를 출력할 때 객체의 프로퍼티가 아닌 전역변수 birthday를 참조하게 된다. 마침표 표기법을 사용해 person.birthday로 프로퍼티에 접근하여야 객체의 프로퍼티 값을 출력하였다. 또 메서드 내부에 this키워드는 메서드를 호출한 객체에 바인딩되기에 this.birthday로 프로퍼티에 접근이 가능하다.

따라서 문제가 된 코드에서 reference Error가 발생한 이유는 정의되지 않은 값을 찾으려고 했기 때문이다.

본 후기는 정보통신산업진흥원(NIPA)에서 주관하는 <AI 서비스 완성! AI+웹개발 취업캠프 - 프론트엔드&백엔드> 과정 학습/프로젝트/과제 기록으로 작성 되었습니다.