JavaScript - destructuring, rest (22.10.17 TIL)

 객체와 배열은 자바스크립트에서 가장 많이 쓰이는 자료 구조이다. 키를 가진 데이터 여러 개를 하나의 엔티티에 저장할 땐 객체를, 컬렉션에 데이터를 순서대로 저장할 땐 배열을 사용한다. 그런데 함수에 객체나 배열을 전달해야 하는 경우나, 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우에는 어떻게 하면 좋을까? 그럴 때 사용할 수 있는 것이 객체나 배열을 분해할 수 있게 해주는 문법인 destructuring 이다.

// 이름과 성을 요소로 가진 배열
let arr = ["Jenna", "Jun"]

// destructuring 을 이용해 firstName엔 arr[0]을,
// surname엔 arr[1]을 할당함.
let [firstName, surname] = arr;

console.log(firstName); // Jenna
console.log(surname);   // Jun

 자바처럼 arr[0], arr[1] 이런 방식으로 인덱스를 이용해서 접근하는 방식이 아니라서 조금 낯설게 느껴졌지만, 인덱스를 이용하지 않고 배열에 접근할 수 있다니 익숙해지기만 하면 정말 편할 것 같다는 생각이 든다.

 또 아래 예시처럼 split 같은 반환값이 배열인 메서드를 함께 활용해도 좋다.

let [firstName, surname] = "Jenna Jun".split(' ');

 배열뿐만이 아니라 모든 반복 가능한 객체에도 적용할 수 있다.

let [a, b, c] = "abc"; // ["a", "b", "c"]
let [one, two, three] = new Set([1, 2, 3]);

 또 신기한 문법이 있는데 바로 '...' 으로 나머지 요소를 가져올 수 있는 rest 라는 문법이 있다. 간혹 배열 앞 쪽에 위치한 값 몇 개만 필요하고, 그 이후 나머지 값들은 한 데 모아서 저장하고 싶을 때가 있는데 그럴 때 rest 를 사용하면 된다. 점 세개 '...' 를 붙인 매개변수 하나를 추가하면 나머지(rest) 요소를 가져올 수 있다.

let [name1, name2, ...rest] = ["오늘", "점심", "라면", "김밥"];

alert(name1); // 오늘
alert(name2); // 점심

// `rest`는 배열이다!!!
console.log(rest[0]); // 라면
console.log(rest[1]); // 김밥
console.log(rest.length); // 2

 
 rest 는 나머지 배열 요소들이 저장된 새로운 배열이 된다. rest 대신에 다른 이름을 사용해도 되는데, 변수 앞의 점 세 개 (...) 와 변수가 가장 마지막에 위치해야 한다는 것은 꼭 지켜야 한다.

 자바스크립트에는 신기한 문법이 참 많다. 아직은 한번에 직관적으로 이해되지 않는데 점점 익숙해지겠지,,아직 1일차니까 힘내보잣,,!