[Javascript] Object 객체

객체들의 객체인 Object 객체에 대해서 알아보겠습니다.

---

1. Object 객체

Object 객체는 객체에 대한 공통적인 속성과 기능을 제공하는 객체입니다. 다시말해 Object 객체는 객체의 객체라고 할 수 있습니다. 내장형 객체와 사용자 정의 객체도 Object 객체에 포함되어 Object 객체의 기능들을 이용할 수 있습니다.

Object 객체는 많은 멤버들을 가지고 있는데, 그 중에서 가장 많이 사용되는 멤버들을 몇 가지 소개하고 넘어가겠습니다.

멤버	설명
constructor	생성자 함수 지정
assign(target, obj, ...)	객체 target에 obj 객체들을 복사
create(prototype)	prototype 객체를 기반으로 새 객체 생성
is(value1, value2)	value1과 value2가 일치하는지 판정
toString()	객체의 문자열 표현 반환
valueOf()	객체의 원시 값 반환
preventExtensions(obj)	객체 프로퍼티 추가 금지
seal(obj)	객체 봉인
freeze(obj)	객체 동결

이 중에서 우리가 더 자세히 알아볼 멤버는 assign()과 preventExtensions()/seal()/fressze()입니다.

 

 

2. Object.assign()

Object.assign(target, obj, ...);

target: 대상 객체
obj: 복사 할 객체

Object.assign()은 target으로 지정된 객체에 복사 대상 객체 obj들을 복사(결합)해 넣습니다. 반환값으로 결합 된 객체를 반환하는데 이 객체는 target 객체를 변화 시킨 객체입니다.(target 객체가 변화함!)

그럼 예제 코드와 함께 assign() 메소드의 동작에 대해서 살펴보겠습니다.

let student1 = {
    name: '호호',
    department: '정보통신학과',
    grade: 2,
    description: {
        email: 'hhh@hhh.net',
    },
};

let student2 = {
    name: '깔깔',
    department: '컴퓨터공학과',
    stdID: 101010,
    description: {
        address: '서울시 여러분 담배꽁초',
    }
};

Object.assign(student1, student2);

console.log(student1);

원본인 target 객체(student1)에 assign을 하고 출력했더니 위와 같은 결과가 나왔습니다. 우리는 이로부터 assign의 동작을 알 수 있습니다.

이름이 같은 프로퍼티는 복사 대상의 것으로 교체되었고, description 내부의 객체도 통째로 덮어 쓰여졌습니다. 존재하지 않는 프로퍼티는 그대로 남거나, 추가되는 식으로 복사/결합이 되었습니다.

assign의 동작을 정리하면 다음과 같습니다.

• 같은 이름의 프로퍼티는 나중의 객체(복사 하는 객체)의 것으로 덮어 쓰여진다.
• 존재하지 않는 객체는 그대로 나타나거나, 새로 결합된다.
• 내부 객체는 결합되지 않고 덮어 쓰여진다.

 

 

3. preventExtentions(), seal(), freeze()

preventExtentions(), seal(), freeze() 서로 연관있는 메소드입니다. 이들은 불변 객체를 정의하는데 이용되는 메소드들입니다.

불변 객체란, 인스턴스 이후 값을 변경할 수 없는 객체를 의미합니다. 인스턴스 이후에도 값이 변하면 의도하지 않은 동작으로 인한 오류를 발생시키므로, 이를 방지하기 위한 방법 중 하나가 불변 객체라고 할 수 있습니다. 그리고 자바스크립트는 불변 객체 정의를 위해 메소드를 제공하고 있습니다.

다시 세 메소드로 돌아와서 불변 객체를 정의하도록 도와주는 세 메소드들은 허용 범위에 대한 차이만을 가지고 있으므로, 어떤 행동을 허용하는지에 따라서 정의해서 사용하면 됩니다. 각 메소드들의 허용 범위는 다음과 같습니다.

	preventExtentions()	seal()	freeze()
프로퍼티 추가	X	X	X
프로퍼티 삭제	O	X	X
프로퍼티 변경	O	O	X

가장 엄격하게 금지하는것이 freeze() 메소드라는 것을 알 수 있습니다.

우선 preventExtentions() 메소드에 대한 동작 코드입니다.

let student = {
    name: '호호',
    department: '정보통신학과',
    grade: 2,
};

Object.preventExtensions(student);

student.name = '커비';
delete student.grade;
student.stdID = 123456;

변경과 삭제는 이루어졌지만, 프로퍼티 추가(객체 확장)가 불가능하다고 에러를 띄웁니다.

참고로, 지금은 IDE에서 오류를 잡아주긴 했지만, VSCODE 등에서는 Strict 모드가 아닐 경우 예외를 보여주지 않을 수도 있습니다. 따라서 코드 최상단에 'use Strict'를 추가해주시면 제대로 예외를 처리해줍니다.

다음은 seal()의 동작입니다.

let student = {
    name: '호호',
    department: '정보통신학과',
    grade: 2,
};

Object.seal(student);

student.name = '커비';
delete student.grade;
student.stdID = 123456;

 

이번에는 delete 구문에서 에러가 발생했습니다. 프로퍼티 삭제가 불가능하다고 에러를 띄웁니다. 이처럼 seal은 삭제도 금지합니다.

마지막으로 freeze()입니다.

let student = {
    name: '호호',
    department: '정보통신학과',
    grade: 2,
};

Object.freeze(student);

student.name = '커비';
delete student.grade;
student.stdID = 123456;

프로퍼티 변경(read only)이 불가능하다는 에러 메세지를 띄웁니다. 이처럼 freeze()는 세 메소드 중 가장 엄격한 메소드임을 확인할 수 있습니다.

---

참조

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object

Object - JavaScript | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Object.assign() - JavaScript | MDN