[DeepDive] - 15장(let, const 키워드와 블록 레벨 스코프), 16장(프로퍼티 어튜리뷰트) 필요 내용 정리

var / let / const

• var
  • 함수 레벨 스코프(블록 X)
  • 변수 선언시, 런타임 이전 변수의 선언과 초기화(undefined) 동시 발생 및 호이스팅에 의해 스코프의 선두로 끌어 올려진 것처럼 동작(참조 오류 발생 X) => 선언 이전에 호출하여도 에러 X
  • 중복 선언 및 재할당 가능
• let(ES6~)
  • 블록 레벨 스코프
  • 중복 선언 불가, 재할당 가능
  • 변수 호이스팅이 발생하지만, 변수의 선언과 초기화단계가 분리(선언 단계는 런타임 이전, 초기화 단계는 런타임에 발생)됨으로써 선언 이전 호출하였을때 참조 에러 발생(스코프 시작점부터 변수의 초기화 시작 지점까지의 변수 참조가 불가능한 TDZ에 빠지게 된다.)
• const(ES6~)
  • 블록 레벨 스코프
  • 변수의 선언, 초기화, 할당이 동시에 필요하다.
  • 중복 선언 및 재할당 불가

  ---

데이터 프로퍼티, 접근자 프로퍼티

• 데이터 프로퍼티
  • 키와 값으로 구성된 일반적인 프로퍼티(일반적인 객체에서 확인 가능)
  • 데이터 프로퍼티는 다음과 같은 프로제퍼티 어트리뷰트를 갖고 있다.
    • value: 키 접근으로 반환하는 값
    • writable: 프로퍼티 값의 변경 여부
    • enumerable: 프로퍼티 열거 가능 여부
    • configurable: 프로퍼티 재정 여부

const person = {
  firstName: "Yongmin",
  lastName: "Jeon",
};

console.log(Object.getOwnPropertyDescriptors(person));

// {
//   firstName: {
//     value: 'Yongmin',
//     writable: true,
//     enumerable: true,
//     configurable: true
//   },
//   lastName: {
//     value: 'Jeon',
//     writable: true,
//     enumerable: true,
//     configurable: true
//   }
// }

 

• 접근자 프로퍼티
  • 자체적으로 값은 없으며, 다른 데이터 프로퍼티의 값을 읽거나 저장할때 사용하는 접근자 함수로 구성되어 있다.
  • 접근자 함수인 getter/setter 는 선택적으로 정의하고 사용할 수 있다.

const person = {
  firstName: "Yongmin",
  lastName: "Jeon",
};

Object.defineProperty(person, "fullName", {
  // getter 함수
  get() {
    return `${this.firstName}/${this.lastName}`;
  },
  // setter 함수
  set(name) {
    [this.firstName, this.lastName] = name.split(" ");
  },
});

console.log(person, person.fullName); // { firstName: 'Yongmin', lastName: 'Jeon' }, 'Yongmin/Jeon'

person.fullName = "Bruce Wayne";

console.log(person, person.fullName); // { firstName: 'Bruce', lastName: 'Wayne' }, 'Bruce/Wayne'