JavaScript - 객체 다루기

Shorthand Properties

객체에 key-value을 할당 시 변수 그대로 할당을 하면 변수 이름 그대로 key가 되고 변수값 그대로 value로 값을 할당할 수 있다.

예제)

BAD

const name = "Tom";
const age = 20;

const person = {
    "name" : name, 
    "age" : age, 
};

console.log(person);

// 결과
{  
    age: 20, 
    name: "Tom" 
}

GOOD

const name = "Tom";
const age = 20;

// 다음과 같이 축약해서 사용 가능하다.
const person = {
    name, 
    age
};

console.log(person);

// 결과
{
    age: 20
    name: "Tom"
}

 

 

Computed Property Name

객체 key 값을 동적으로 할당할 수 있는 방법이다.
대괄호 []로 묶어서 대입하면 된다. `는 이스케이프를 하기 위한 문법이다.

const prop = 'c'

const obj = {
	"a": 5,
	"b": 10,
	[prop]: 15
} 

console.log(obj.c) // 15

문자열과 혼합하여 사용 가능하며

const fieldNumber = 3

const obj = {
	"a": 5,
	"b": 10,
	['field' + fieldNumber]: 15
}

console.log(obj.field3) // 15

템플릿 문법과 혼합하고도 사용 가능하다.

const obj = 3

const obj = {
	"a" : 5,
	"b": 10,
	[`field${fieldNumber}`]: 15
}

console.log(obj.field3) // 15

Lookup Table

계속되는 분기문보다 key-value 값으로 하는 객체(맵 형식)을 만들어서 간단히 하는 방법이다.

예제)

BAD

function getObj(key) {
    switch (key) {
        case 'name':
            return '이름';
        case 'age':
            return '나이';
        default:
            return '없음';
    }
}

getObj("name") // 이름

GOOD

const PROPS = {
    "name" : "이름",
    "age" : "나이"
}

function getObj(key) {
    return PROPS[key] || "해당없음";
}

getObj("name") // 이름

 

 

Object Destructuring

함수 선언시 순서가 있는 파라미터가보다 순서 없이 동적으로 받아서 사용할 수 있는 방법이다.

예제)

BAD

function Person(name, age) {
    this.name = name;
    this.age = age;
}

const person = new Person("홍길동", 20);
console.log(person);

// 결과
{
    age: 20
    name: "홍길동"
}

GOOD

function Person({name, age}) {
    this.name = name;
    this.age = age;
}

const person = new Person({
	age : 30,
    name : "영수"
});
console.log(person);

// 결과
{
    age: 30
    name: "영수"
}

 

Object.freeze

Object.freeze로 객체를 생성하면 값을 변경 못하도록 막을 수 있다.
하지만 직속 프로퍼티만 동결할 수 있을뿐 중첩 객체는 동결할 수 없다.

문제점

const FREEZE = Object.freeze({ 
    "STATUS1" : "NOT CHANGED",
    "STATUS2" : {
        "NAME" : "CAN CHANGE"
    }
});

// STATUS1 변경 (직속 프로퍼티는 변경 불가능함)
console.log(Object.isFrozen(FREEZE.STATUS1)); // true
console.log(FREEZE.STATUS1); // NOT CHANGED
FREEZE.STATUS1 = "TEST";

console.log(Object.isFrozen(FREEZE.STATUS1)); // true
console.log(FREEZE.STATUS1); // NOT CHANGED



// STATUS2 변경 (직속 프로퍼티가 아니면 변경 가능해짐)
console.log(Object.isFrozen(FREEZE.STATUS2.NAME)); // true
console.log(FREEZE.STATUS2.NAME); // CAN CHANGE
FREEZE.STATUS2.NAME = "TEST";

console.log(Object.isFrozen(FREEZE.STATUS2.NAME)); // false
console.log(FREEZE.STATUS2.NAME); // TEST

해결방안

재귀적 함수를 만들어서 동결 처리가 가능해진다.

function deepFreeze(object) {

	// 객체에 정의된 속성명을 추출
	var propNames = Object.getOwnPropertyNames(object);

	// 스스로를 동결하기 전에 속성을 동결

	for (let name of propNames) {
		let value = object[name];
		object[name] = value && typeof value === "object" ? deepFreeze(value) : value;
  	}

	return Object.freeze(object);
}

const FREEZE = Object.freeze({ 
    "STATUS1" : "NOT CHANGED",
    "STATUS2" : {
        "NAME" : "CAN CHANGE"
    }
});

deepFreeze(FREEZE);

// STATUS2 변경 (직속 프로퍼티가 아니라도 변경 불가능해짐)
console.log(Object.isFrozen(FREEZE.STATUS2.NAME)); // true
console.log(FREEZE.STATUS2.NAME); // CAN CHANGE
FREEZE.STATUS2.NAME = "TEST";

console.log(Object.isFrozen(FREEZE.STATUS2.NAME)); // true
console.log(FREEZE.STATUS2.NAME); // CAN CHANGE