[새로운 기능] 강화된 객체 표현과 연산자

es2015에서는 객체를 쉽게 표현하고 분리하거나 추출하는 기능을 제공한다. Vue등 framework에서 많이 볼 수 있는 형태이므로 잘 배워두자.

 

Enhanced Object Literal(강화된 객체 표현)

 

강화된 객체 표현(Enhanded Object Literal)은 객체를 표현할 때 좀 더 간결한 문법을 제공하는데 2가지의 개선이 이뤄졌다.

• property shorthand: 객체의 속성과 값이 같을 경우는 하나만 사용한다.
• consise method: 객체에 함수 속성을 정의할 때 

 

강화된 객체 표현 사용

먼저 기존에 객체를 정의하던 형태를 살펴보자.

let language = "javascript";

let oldStyle = {
    language: language,
    sayLang: function () {
        console.log(`사용 언어는 ${this.language} 이다.`);
    },
};

oldStyle의 languate 는 속성과 값(사용하는 변수)가 같다. 그리고 sayLang 속성은 함수로 선언되어있다. 이 문장을 ES6 형태로 변경하면 아래와 같다.

let language = "javascript";
    
let newStyle = {
    language,
    sayLang() {
        console.log(`사용 언어는 ${this.language} 이다.`);
    },
};

 

Spread Operator

Spread Operator는 기존의 객체 또는 배열의 값을 다른 객체나 배열로 복제하거나 옮길 때 사용한다.

객체의 내용 복제란

예를 들어 아래와 같은 객체가 있다고 생각해보자.

let normal = {
  name:"hong",
  age:30,
}

이제 새로운 객체를 만들껀데 우연찮게 normal에 있는 내용을 그대로 가져간다. 예를 들어 아래와 같이 구성된다.

let special = {
  name:"hong",
  age:30,
  nick:"율도국왕"
}

즉 special 이라는 객체는 normal 객체의 속성에 추가로 nick이 있는 새로운 객체이다.

이전의 javascript에서는..

special을 만들기 위해 이전의 javaScript는 아래와 같이 작성할 수 있었다.

let oldHero = {
  name: normal.name,
  age: normal.age,
  nick: "율도국왕",
};

console.log(oldHero, normal);

즉 새로운 객체를 만들면서 기존 객체의 속성을 하나씩 가져오고 추가 속성을 작성하면 된다. 물론 반복문을 이용할 수도 있었을 것이다.

 

spread operator를 사용하면..

spread operator(...)는 단어 뜻 그대로 객체를 펼쳐서 넣어준다.

let newHero = {
  ...oldHero,
  wish: `아버지를 아버지라고 부르고 싶어함.`,
};

console.log(newHero, oldHero, normal);

이렇듯 spread operator를 사용하면 기존 객체의 속성을 이용하여 쉽게 새로운 객체를 생성할 수 있다.

let addr = { zip: "200-100", sido: "서울", gugun: "중랑구" };
let tel = { part1: "010", part2: "1234", part3: "5678" };
let person = { name: "홍길동", ...addr, ...tel };

이 연산자는 배열에서도 동일하게 적용될 수 있다.

let arr = [1, 2, 3];
let newArr = [...arr, 4, 5, 6];

 

de-structuring(구조의 분해)

일반적으로 객체나 배열을 사용하는 이유는 여러 가지 데이터를 하나의 변수에 담아서 사용하기 위해서 사용한다. 이 과정을 구조를 만드는(structuring) 것이라고 이야기 할 수 있다.

let person = {
  name: "홍길동",
  age: 10,
  addr: "서울 중랑구",
};

그런데 person의 속성들을 하나씩 꺼내서 변수에 할당하고 사용하려면 상당히 수고스럽다.

let name = person.name;
let age = person.age;
let addr = person.addr;

console.log(`${name}은 ${age}살인데 ${addr}에 살아.`);

 

de-structuring은 structuring의 반대말?

de-structuring은 변수 선언 시 { } 를 이용해서 여러 변수를 선언할 수 있고 객체에 뭉쳐있던 속성들이 해체되서 할당된다.

let { name, age, addr } = person;
console.log(`${name}은 ${age}살인데 ${addr}에 살아.`);

즉 위와 같은 한 줄의 코드로 3줄을 대체할 수 있다. 물론 이 과정에서 person의 모든 속성을 다 받아들여야 하는 것은 아니다. 필요한 것만 변수에 선언해주면 된다.

de-structuring은 특히 객체가 함수의 파라미터로 전달 될 때 코드를 간략하게 하기 위해서 사용된다.

function printUser({ name, age, addr }) {
  console.log(`${name}은 ${age}살인데 ${addr}에 살아.`);
}

위의 함수는 파라미터 부분에 de-structuring 연산자가 사용되었다. 즉 함수 호출 시 전달되는 객체에서 name, age, addr 속성을 뽑아서 바로 변수에 할당해주는 형태이다. 

 

computed property name

 

가끔 객체의 속성을 동적으로 만들어야 하는 경우가 있는데 이때 사용할 수 있는 방법이 computed property name이다. 이 방법은 객체의 속성 선언 시 []를 사용할 수 있는데 [] 안의 내용을 실행해서 속성 이름으로 사용할 수 있다.

다음의 코드는 dynamic_prop_obj를 만들면서 name_1이라는 속성을 동적으로 만들고 있는 예를 보여준다.

let dynamic_prop_obj = {
  ["name"+"_1"]:"hong"
}
console.log(dynamic_prop_obj) // {name_1: 'hong'}

이 기법은 일반적으로 키의 이름을 배열등에 저장하고 이것을 참조해서 키 이름을 구성할 때 유용하다.

const propNames = ["name", "age", "addr"];

const user = {
    [propNames[0]]: "hong gil dong",
    [propNames[1]]: 20,
    [propNames[2]]: "seoul",
};