ES6+ 자바스크립트 복습! 객체와 배열의 사용성 개선하기

😗이번에는 ES6+에서 객체와 배열에 추가된 문법을 알아보자.

단축 속성명과 계산된 속성명을 이용하면 객체와 배열을 생성하고 수정하는 코드를 쉽게 작성할 수 있다. 또한, 전개 연산자와 비구조화 할당 덕분에 객체와 배열의 속성값을 밖으로 꺼내는 방법이 한결 쉬워졌다.

단축 속성명과 계산된 속성명

1. 단축 속성명

- 단축 속성명은 객체 리터럴 코드를 간편하게 작성할 목적으로 만들어진 문법. 단축 속성명을 사용하면 간편하게 새로운 객체를 만들 수 있다. 

const name = "mike";
const obj = {
 age: 21,
 name,
 getName() { retrun this.name; },
 }

새로 만들려는 객체의 속성값 일부가 이미 변수로 존재하면 간단하게 변수 이름만 적어주면 된다. 이때 속성명은 변수 이름과 같아진다. 속성값이 함수면 function 키워드 없이 함수명만 적어도 된다. 이때 속성명은 함수명과 같아진다. 

 

function makePerson1(age,name) {
 return { age: age, name: name };
}
function makePerson2(age,name) {
 retrun { age, name };
}

첫번째 함수 단축 속성명을 사용하지 않은 경우이고, 두번째 함수가 단축 속성명을 사용한 경우다. 보다시피 단축 속성명을 사용한 경우가 코드를 작성하기도 편하고 간결하고 가독성도 편하다. 

 

2. 계산된 속성명

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

function makeObject1(key,value){
 const obj = {};
 obj[key] = value;
 return obj;
}
function makeObject2(key,value){
 return{ [key]:value};
}

계산된 속성명을 사용하면 같은 함수를 두 번째 함수처럼 간결하게 작성할 수 있다.

 

전개 연산자와 비구조화 할당

3. 전개 연산자

전개 연산자는 배열이나 객체의 모든 속성을 풀어놓을 때 사용하는 문법이다. 매개변수가 많은 함수를 호출할 때 유용하다 !

Math.max(1,3,7,9); // 이 방식으로는 동적으로 매개변수를 전달할 수 없다.

// 전개 연산자
const numbers = [1,3,7,9];
Math.max(...numbers);

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

 

//배열, 객체 생성
const arr1 = [1,2,3];
const obj1 = {age:23, name:'mike'}

//전개연산자 사용하여 새로운 객체와 배열 생성
const arr2 = [...arr1];
const obj2 = {...obj1};

//전개 연산자 사용해서 새로운 객체가 생성되었기 때문에
//속성을 추가하거나 변경해도 원래의 객체에 영향을 주지 않음!
arr2.push(4);
obj2.age = 80;

배열의 경우 전개 연산자를 사용하면 그 순서가 유지된다.

 

[1, ...[2,3],4]; // [1,2,3,4]
new Date(...[2020, 6, 24]); //2020년 6월 24일

배열 리터럴에서 중간에 전개 연산자를 사용하면 전개 연산자 전후의 순서가 유지된다. 두 번째 함수는 함수의 인수를 정의된 매개변수의 순서대로 입력해야 하므로 순서가 유지되는 전개 연산자의 성질을 이용하기 좋다. 예를 들어 Date 생성자의 매개변수 순서대로 날짜 데이터를 관리하면 Date 객체를 쉽게 생성할 수 있다. 전개 연산자를 사용하면 서로 다른 두 배열이나 객체를 쉽게 합칠 수 있다.

 

const obj1 = {age:21, name:'mike'};
const obj2 = {hobby: 'soccer'};
const obj3 = {...obj1, ...obj2 };
console.log(obj3); // {age:21,name:'mike',hobby:'soccer'}

이 코드에서 obj1과 obj2가 같은 이름의 속성을 가지고 있다면 ? es5까지는 중복된 속성명을 사용하면 에러가 발생했지만, es6부터는 중복된 속성명이 허용된다. 중복된 속성명 사용 시 최종 결과는 마지막 속성명의 값이 되다. 중복된 속성명과 전개 연산자를 이용하면 객체의 특정 속성값을 변경할 때 이전 객체에 영향을 주지 않고 새로운 객체를 만들어 낼 수 있다. 이는 변수를 수정 불가능하도록 관리할 때 유용하게 사용될 수 있다.

 

4. 배열 비구조화

배열 비구조화는 배열의 여러 속성값을 변수로 쉽게 할당할 수 있는 문법이다. 다음은 배열 비구조화를 사용한 코드다.

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

-------------------

let a, b;
[a,b] = [1,2];

배열의 속성값이 왼쪽의 변수에 순서대로 들어간다. 이렇게 새로운 변수로 할당할 수도 있고 이미 존재하는 변수에 할당할 수도 있다. 

 

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

그리고 배열 비구조화를 사용하면 제3의 변수가 필요하지 않을 뿐만 아니라 단 한줄의 짧은 코드로 구현할 수 있다. 배열에서 일부 속성값을 무시하고 진행하고 싶다면 건너뛰는 개수만큼 쉼표를 입력하면 된다. 첫 번째 속성값은 변수 a에 할당된다. 두 번째 속성값은 건너뛰고 세 번째 속성값이 변수 c에 할당된다. 쉼표 개수만큼을 제외한 나머지를 새로운 배열로 만들 수도 있다.

 

const arr = [1,2,3];
const [first, ...rest1] = arr;
console.log(rest1);
const [a,b,c, ...rest2] = arr;
console.log(rest2); // []

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

 

5. 객체 비구조화

const obj1 = {age:21,name:'mike'}
const {age, name} = obj; // 객체 비구조화에서는 중괄호를 사용
console.log(age); // 21
console.log(name); // mike

객체 비구조화는 객체의 여러 속성값을 변수로 쉽게 할당 할 수 있는 문법이다. 객체 비구조화에서는 중괄호를 사용한다. 배열 비구조화에서는 배열의 순서가 중요 했지만 객체 비구조화에서 순서는 무의미하다. 따라서 name과 age의 순서를 바꿔도 결과는 같다. 단, 배열 비구조화에서 왼쪽 변수의 이름은 임의로 결정할 수 있지만, 객체 비구조화에서는 기존 속성명 그대로 사용해야 한다.