자바스크립트 딥다이브 5일차

프로퍼티 어트리뷰트 

프로퍼티와 어트리뷰트

• 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 정의한다.

프로퍼티의 상태란
프로퍼티의 값, 값의 갱신 가능 여부, 열거 가능 여부, 재정의 가능 여부를 말한다. 

 

• 프로퍼티 어트리뷰트는 자바스크립트 엔진이 관리하는 내부 상태 값인 내부슬롯 [[Value]], [[writebale]], [[Eumerable]], [[Configurable]]이다. 
• 따라서 프로퍼티 어트리뷰트에 직접 접근할 수 없지만 Object.getOwnPropertyDescriptor 메서드를 사용하여 간접적으로 확인할 수 있다. 

const person = {
  name : 'Lee'
};

// 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터 객체를 반환한다. 
console.log(Object.getOwnPropertyDescriptor(person, 'name'));

• Object.getOwnPropertyDescriptors 메서드는 프로퍼티 어트리뷰트를 정보를 제공하는 프로퍼티 디스크립터 객체를 반환한다.
• 먄약 존재하지 않는 프로퍼티나 상속받은 프로퍼티에 대한 프로퍼티 디스크립터를 요구하면 unefined가 반환된다. 

 

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

• 프로퍼티는 데이터 프로퍼티와 접근자 프로퍼티로 구분할 수 있다. 
  • 데이터 프로퍼티 : 키 와 값으로 구성된 일반적인 프로퍼티.
  • 접근자 프로퍼티 : 자체적으로 값을 갖지 않고 다른 데이터 프로퍼티 값을 읽거나 저장할 때 호출되는 접근자 함수로 구성된 프로퍼티다. 

데이터 프로퍼티 

• 데이터 프로퍼티는 다음과 같은 프로퍼티 어트리뷰트를 갖는다. 이 프로퍼티 어트리뷰트는 자바스크립트 엔진이 프로퍼티를 생성할 때 기본적으로 자동 정의된다. 

const person = {
  name : 'Lee'
};

// 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터 객체를 반환한다. 
console.log(Object.getOwnPropertyDescriptor(person, 'name'));

• 위 예제를 브라우저 콘솔로 찍어보니 value = 'Lee'가 담겼는데 프로퍼티 어트리튜브 [[Value]]의 값이 'Lee'인 것을 말한다. 나머지 값도 잘 나온 것을 볼 수 있다. 

 

접근자 프로퍼티

• 접근자 프로퍼티는 자체적으로는 값을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 사용하는 접근자 함수로 구성된 프로퍼티다 
• 접근자 프로퍼티는 다음과 같은 프로퍼티 어트리뷰트를 갖는다.

• 접근자 함수는 getter/setter 함수라고도 불린다. 다음 예제를 보자

const person = {
  // 데이터 프로퍼티
  firstName: 'Ungmo',
  lastName: 'Lee',

  // fullName은 접근자 함수로 구성된 접근자 프로퍼티다.
  // getter 함수
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  },

  // setter 함수
  set fullName(name) {
    // 배열 디스트럭처링 활용: "31.1배열 디스트럭처링" 참고
    [this.firstName, this.lastName] = name.split(' ');
  }
};

// 데이터 프로퍼티를 통한 프로퍼티 값 참조.
console.log(person.firstName + ' ' + person.lastName); // Ungmo Lee

// 접근자 프로퍼티를 통한 프로퍼티 값 저장
// 접근자 프로퍼티 fullName에 값을 저장하면 setter 함수가 호출된다.
person.fullName = 'Heegun Lee';
console.log(person); // {firstName: "Heegun", lastName: "Lee"}

// 접근자 프로퍼티를 통한 프로퍼티 값 참조
// 접근자 프로퍼티 fullName에 접근하면 getter 함수가 호출된다.
console.log(person.fullName); // Heegun Lee

• person 객체의 firstName, lastName 프로퍼티;는 일반적인 데이터 프로퍼티다. 
• 메서드 앞에 get, set이 붙은 메서드가 있는데 이것이 getter/setter 함수이다.
• 접근자 프로퍼티는 자체적으로 값을 가지지 않으며 데이터 프로퍼티의 값을 읽거나 저장할 떄 관여할 뿐이다. 

 

프로퍼티 정의 

•  프로퍼티 정의란 새로운 프로퍼티를 추가하면서 프로퍼티 어트리뷰트를 명시적으로 정의하거나, 기존 프로퍼티의 프로퍼티 어트리뷰트를 재정의하는 것을 말한다. 
• Object.defineProperty 메서드를 사용하면 프로퍼티의 어트리뷰트를 정의할 수 있다. 

const person = {};

// 데이터 프로퍼티 정의 
Object.defindeProperty(person, 'firstName', {
  value: 'Unmgo',
  wirtable: true,
  enumerable: true,
  configurable: true
});

// 디스크립터 객체의 프로퍼티를 누락시키면, undefined, false가 기본값이다
Object.defineProperty(person, 'lastName', {
   value: 'Lee'
});

• value, get, set은 생략시키면 undefined가 기본값으로 적용된다. 
• Object.defineProperty 메서드는 한번에 하나의 프로퍼티만 정의가 가능하고, Object,defineProperties 메서드를 사용하면 여러개의 프로퍼티를 정의할 수 있다. 

const pseron = {};

Object.defineProperties(person, {
  firstName: {
    value: 'Unmgo',
    writeable: true,
    eumerabel: true,
    configurable: true
  },
  
  firstName: {
    value: 'Unmgo',
    writeable: true,
    eumerabel: true,
    configurable: true
  },
  
  firstName: {
   get() {
     return `${this.firstName} ${this.lastName}`
   }
   
    set() {
     [this.firstName, this.lastName] = name.split(' ');
   }
  },
})

객체 변경 금지

• 객체는 변경 가능한 값이다. 즉 이로인해 프로퍼티를 추가하거나 삭제 할 수 있다. 

객체 확장 금지

• 객체 확장 금지란 프로퍼티 추가 금지를 의미한다. 
• 즉 확장이 금지된 객체는 프로퍼티 추가가 금지된다.

객체 밀봉

• Object.seal 메서드는 객체를 밀봉한다. 객체 밀봉이란 프로퍼티 추가 및 삭제와 프로퍼티 어트리뷰트 재정의 금지를 의미한다. 
• 밀봉된 객체는 읽기와 쓰기만 가능하다. 즉 갱신은 가능하다

const pseron = { name : 'Lee' };

console.log(person) // { name : 'Lee' };

Object.seal(person);

person.age = 20; // 무시.. 된다
console.log(person); // { name: 'Lee' };

person.name = 'donny';
console.log(person); // { name: 'donny' };

객체 밀봉

• object.freeze 메서드는 객체를 동결한다. 객체 동결이란 프로퍼티 추가 및 삭제와 프로퍼티 어트리뷰트 재정의 금지, 등을 금지한다. 
• 동결된 객체는 읽기만 가능하다. 

불변객체

• object.freeze 메서드로 객체를 동결하여도 중첩 객체까지 동결할 수 없다. 

const person = {
  name : 'Lee',
  address: { city: 'seoul' }
};

// 얕은 객체 동결
Object.freeze(person); 

// 중첩 객체는 동결하지 못한다
console.log(Object.isFrozen(person.address)); // false

• 객체의 중첩까지 불변으로 만들기 위해서는 객체를 값으로 갖는 모든 프로퍼티에 대해 재귀적으로 Object.freeze 메서드를 호출해야 한다. 

function deepFreeze(target) {
  // 객체가 아니거나 동결된 객체는 무시하고 객체만 동결한다.
  if (target && typeof target === 'object' && !Object.isFrozen(target)) {
    Object.freeze(target);
    // 모든 프로퍼티를 순회하며 재귀적으로 동결한다.
    Object.keys(target).forEach(key => deepFreeze(target[key]));
  }
  return target;
}

const person = {
  name: 'Lee',
  address: { city: 'Seoul' }
};

// 깊은 객체 동결
deepFreeze(person);

console.log(Object.isFrozen(person)); // true
console.log(Object.isFrozen(person.address)); // true

person.address.city = 'Busan'; // 값 변경 시도

console.log(person); // {name: "Lee", address: {city: "Seoul"}}