[Javascript] ES6 객체 리터럴의 확장 기능 / 객체 메소드

 

ES6 객체 리터럴의 확장 기능

 

프로퍼티 축약표현

프로퍼티의 값으로 변수를 사용할 때 변수이름과 프로퍼티 키가 동일할 경우 값을 생략할 수 있다.

let x = 1, y = 2;

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

 

계산된 프로퍼티 이름

프로퍼티의 key를 대괄호로 묶어 계산된 형식으로 생성 가능

const name = "Jay";

const obj = {
 [1 + 1] : 2
 [`${name} 1`] : name,
}

console.log(obj) // {2: 2, Jay 1: 'Jay'}

 

메서드 축약 표현

const obj = {
  name: 'Jay',
  sayHi() {
    console.log('Hi!' + this.name)
  }
  /* es5
  sayHi: function() {
    console.log('Hi! ' + this.name);
  }*/
}

obj.sayHi(); // Hi! Jay

 

 

- 객체에서 사용할 수 있는 methods

 

Object.assign()

객체의 깊은 복사

 

const user = {
  name: 'Jay',
  age: 28
}

const userCopy = Object.assign({}, user);
// 여기서 {}은 초기값이며 뒤에 값이 병합된다.
// {} + { name: 'Jay', age: 28 }

userCopy.name = 'Soo'

console.log(userCopy.name) // 'Soo'
console.log(userCopy == user) // false

첫 번째 인자로 초기값을 받고, 두 번째 인자로 병합할 객체를 받는다.

 

const user = { name: 'Jay'};
const age = { age: 28 };
const gender = { gender: 'female'}

const newUser = Object.assign(user, age, gender);

console.log(newUser) {name: 'Jay', age: 28, gender: 'female'}

여러 개의 값도 병합하여 생성할 수 있다.

 

Object.keys()

객체 프로퍼티의 키를 배열로 반환

const user = {
  name: 'Jay',
  age: 28
}

console.log(Object.keys(user))
//['name', 'age']

 

Object.value()

객체 프로퍼티의 값을 배열로 반환

const user = {
  name: 'Jay',
  age: 28
}

console.log(Object.values(user))
//['Jay', 28]

 

Object.entries()

객체 프로퍼티의 키와 값을 쌍으로 묶어서 배열로 반환

const user = {
  name: 'Jay',
  age: 28
}

console.log(Object.entries(user))
// [['name', 'Jay'], ['age', 28]]

 

Object.fromEntries()

키와 값을 쌍으로 묶은 배열을 객체로 반환

const user = [['name', 'Jay'], ['age', 28]];

console.log(Object.fromEntries(user))
//{name: 'Jay', age: 28}