[JavaScript] ES6에서 객체와 배열에 추가된 문법

단축 속성명

단축 속성명은 객체 리터럴 코드를 간편하게 작성할 목적으로 만들어진 문법이다.

//사용 전
function func1(a, b) {
  return { a: a, b: b };
}
//사용 후
function func2(a, b) {
  return { a, b };
}

객체의 속성값 일부가 이미 변수로 존재하면 간단하게 변수 이름만 적어주면 된다.

계산된 속성명

계산된 속성명은 객체의 속성명을 동적으로 결정하기 위해 나온 문법이다.

let obj = {};

for (let i = 0; i < 5; i++){
    obj['Key' + i] = i;
}

[] 안에 변수, 계산식 등을 이용해 속성명을 동적으로 결정할 수 있다.

전개 연산자

전개 연산자는 배열이나 객체의 모든 속성을 풀어놓을 때 사용한다.

1. 함수의 매개변수 입력하기

const numbers = [1, 3, 7, 9]
Math.max(...numbers);

전개 연산자를 사용하면 동적으로 함수의 매개변수를 전달할 수 있다.

2. 배열, 객체 복사하기

const arr1 = [1, 2, 3];
const arr2 = [ ...arr1];

arr2.push(4);

const obj1 = { age: 28, name: 'kim'};
const obj2 = { ...obj1 };

obj2.age = 80;

전개 연산자를 사용해서 새로운 객체나 배열을 생성하면 깊은 복사가 되기 때문에 속성을 추가하거나 변경해도 원래의 객체에 영향을 주지 않는다.

3. 객체 병합하기

const obj1 = { age: 27, name: 'kim' };
const obj2 = { age: 28, hobby: 'listening to music' };
const obj3 = { ...obj1, ...obj2 };
console.log(obj3); 
// { age: 28, name: 'kim', hobby: 'listening to music' };

전개 연산자를 사용하면 두 객체를 병합할 수 있고 중복된 속성명 사용 시 최종 결과는 마지막 속성명의 값이 된다.

배열 비구조화

배열 비구조화는 배열의 여러 속성값을 변수로 쉽게 할당할 수 있는 문법이다.

1. 값 할당하기

const arr = [1, 2];
const [a, b] = arr;
console.log(a); // 1
console.log(b); // 2

배열의 속성값이 왼쪽의 변수에 순서대로 들어간다.

2. 기본값 설정하기

const arr = [1];
const [a = 10, b= 20] = arr;
console.log(a); // 1
console.log(b); // 20

첫 번째 변수의 속성값은 존재하므로 기본값 10이 아닌 속성값이 그대로 할당되고 두 번째 변수는 속성값이 undefined이므로 설정한 기본값 20이 할당된다.

3. 변수 값 교환하기

let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1

배열 비구조화를 사용하면 제3의 변수 없이 짧은 코드로 변수의 값을 교환할 수 있다.

4. 나머지 값을 별도의 배열로 만들기

const arr = [1, 2, 3];
const [first, ...rest] = arr;
console.log(rest); // [2,3]

배열의 비구조화 시 마지막에 ...와 함께 변수명을 입력하면 나머지 속성값이 새로운 배열에 만들어진다.

객체 비구조화

객체 비구조화는 객체의 여러 속성값을 변수로 쉽게 할당 할 수 있는 문법이다.

const obj = { age: 28, name: 'kim' };
const { age, name } = obj;
console.log(age); // 28
console.log(name); // kim

중괄호를 사용해 객체 비구조화할 수 있고 배열 비구조화와 달리 배열의 순서는 무의미하지만 기존 속성명을 그대로 사용해야 한다.

1. 별칭, 기본값 사용하기

const obj = { age: undefined, name: 'kim' };
const { age: theAge, name } = obj; // 별칭 사용
const { age = 0, name } = obj; // 기본값 사용
const { age: theAge = 0, name } = obj; // 별칭 + 기본값 사용
console.log(theAge); // 0

속성명 age의 값을 theAge 변수에 할당하고 값이 undefined이므로 기본값 0이 들어간다. 주의할 점은 null의 경우는 기본값이 들어가지 않는다.

2. 나머지 속성들 별도의 객체로 생성하기

const obj = { age: 21, name: 'kim', grade: 'A' };
const { age, ...rest } = obj;
console.log(rest); // { name: 'kim', grade: 'A' }

배열 비구조화와 비슷한 방식으로 나머지 속성들을 별도의 객체로 분리할 수 있다.