Section 8. 자바스크립트 Object 깊게 다루기

I. Object 클래스

자바스크립트 카테고리에서 지금까지 소개된 자바스크립트 객체들의 원형이다

console.log(
  new String('ABC') instanceof Object,
  new Number(123) instanceof Object,
  [] instanceof Object,
  (function () {}) instanceof Object,
  globalThis instanceof Object
); //true true true true true

 생성자 함수는 다음과 같다

// 빈 객체 생성
console.log(
  new Object(),
  new Object(null),
  new Object(undefined),
); //{} {} {}

// 각 값에 적합한 래핑함수로 작용
console.log(
  new Object(1),
  new Object('ABC'),
  new Object(true),
  new Object([1, 2, 3])
); //Number {1} String {'ABC'} Boolean {true} (3) [1, 2, 3]

II. 주요 정적 메서드

1. assign - 인자로 주어진 객체(들)의 프로퍼티들을 대상 객체에 붙여넣은 메서드

• 대상 객체를 변경한다.
• 결과 객체를 반환한다.
• 얕은 복사가 일어난다.

인자들 :

• 대상 객체
• 원본 객체(들)

const intro1 = {
  name: '홍길동'
};
const intro2 = { ...intro1 };

console.log(intro1, intro2); //{name: '홍길동'} {name: '홍길동'}

const personal = {
  age: 25,
  married: false
};
const career = {
  job: '개발자',
  position: '팀장'
}

Object.assign(intro1, personal);
console.log(intro1); //{name: '홍길동', age: 25, married: false}

객처들을 생성하고 assign을 통해 personal 객체의 프로퍼티를 intro1의 프로퍼티에 추가했다.

Object.assign(intro2, personal, career);
console.log(intro2); //{name: '홍길동', age: 25, married: false, job: '개발자', position: '팀장'}

둘 이상의 원본에서 가져올 수도 있는 것을 볼 수 있다. 

const obj1 = new Object();
const obj2 = { x: 1, y: 2 };
const obj3 = { y: 3 };
const obj4 = { z: { a: 1 }}

Object.assign(obj1, obj2, obj3, obj4);

console.log(obj1); //{x: 1, y: 3, z: {…}}

프로퍼티의 키가 같을 경우 뒤에 오는 인자의 것이 덮어 쓴다.

 

2. keys, values, entries - 객체의 키 / 값 / [키, 값] 을 배열로 반환하는 메서드

const obj = {
  x: 1,
  y: 2,
  z: 3
};

console.log(
  Object.keys(obj),
); //['x', 'y', 'z']

console.log(
  Object.values(obj),
); //[1, 2, 3]

console.log(
  Object.entries(obj),
);

entries의 출력문만 자세히 보면 다음과 같다.

배열에 사용할 경우는 다음과 같다

// 배열에 사용할 경우
const arr = [1, 2, 3, 4, 5];

console.log(
  Object.keys(arr), //['0', '1', '2', '3', '4']
  Object.values(arr), //[1, 2, 3, 4, 5]
  Object.entries(arr) //
);

entries의 출력문은

 

객체가 아닐 경우 객체로 변환한다

// 객체가 아닐 경우 객체로 변환
const str = 'ABCDEFG';

console.log(
  Object.keys(str), //['0', '1', '2', '3', '4', '5', '6'] 
  Object.values(str), //['A', 'B', 'C', 'D', 'E', 'F', 'G'] 
  Object.entries(str)
);

entries의 출력문은

 

3. preventExtensions - 프로퍼티 추가 금지 메서드

const obj = { x: 1, y: 2 };

console.log(Object.isExtensible(obj)); //true

Object.preventExtensions(obj);

console.log(Object.isExtensible(obj)); //false

isExtensible은 해당 인자로 받은 것에 프로퍼티를 추가하는 것이 가능하냐의 여부를 반환하는 메서드이다.

obj 객체를 처음 생성했을때는 true를 반환했지만 preventExtensions를 사용하고 난 뒤에는 프로퍼티 추가가 불가능하게 바뀌어 isExtensible 했을때 false를 반환하는 것을 볼 수 있다. 

obj.x++; // 프로퍼티 수정 가능
delete obj.y // 프로퍼티 삭제 가능
obj.z = 3; // 💡 프로퍼티 추가 금지

console.log(obj); //{x: 2}

배열에 적용하면 다음과 같다

const arr = [1, 2];
Object.preventExtensions(arr);

arr[2] = 3; // 동작하지 않음

console.log(arr); //[1, 2]

 

4. seal - 프로퍼티 추가와 삭제 금지 메서드

const obj = { x: 1, y: 2 };

console.log(Object.isSealed(obj)); //false

isSealed는 프로퍼티 추가와 삭제가 가능한 여부를 반환하는 메서드이다. false를 반환하니까 obj 객체는 프로퍼티 추가와 삭제가 가능한 상태이다.

Object.seal(obj);

console.log(Object.isSealed(obj)); //true

obj.x++; // 프로퍼티 수정 가능
delete obj.y // 💡 프로퍼티 삭제 금지
obj.z = 3; // 💡 프로퍼티 추가 금지

console.log(obj); //{x: 2, y: 2}

 

5. freeze - 객체 동결하는 메서드 - 읽기만 가능

// 객체에 사용
const obj = { x: 1, y: 2 };

console.log(Object.isFrozen(obj)); //false

isFrozen은 해당 여부를 확인하는 메서드이다. 객체가 읽기만 가능한지 여부를 반환한다. 

Object.freeze(obj);

console.log(Object.isFrozen(obj)); //true

obj.x++; // 💡 프로퍼티 수정 불가
delete obj.y // 💡 프로퍼티 삭제 금지
obj.z = 3; // 💡 프로퍼티 추가 금지

console.log(obj); //{x: 1, y: 2}

배열에 사용하면 다음과 같다.

// 배열에 사용
const arr = [1];

Object.freeze(arr);

arr[0]++; // 💡 요소 수정, 추가, 삭제 불가

console.log(arr); //[1]

 

*freeze 메서드를 써도 얕게만 적용된다

const obj = {
  x: 1,
  y: { a: 1 }
};

Object.freeze(obj);

obj.x++;
obj.y.a++;

console.log(obj); //{x: 1, y: {…}}

좀더 자세히 출력문을 살펴보자

당연히 x의 값은 freeze가 됐지만 y의 경우 (값으로 또 객체를 갖는 경우) freeze가 되지 않았음을 알 수 있다.

이것을 얕게만 적용된다 라고 알고 넘어가자.