구조분해할당

박은정·2021년 8월 25일

TIL

목록 보기

17/72

구조 분해 할당

destructuring-assignment
배열이나 객체의 속성을 해체해서 → 그 값을 개별 변수에 담을 수 있게 하는 JS 표현식
객체나 배열을 변수로 분해할 수 있게 해주는 특별한 문법이다

구조분해할당 : 어떤 것을 복사한 이후에 변수로 북해해준다는 의미이다
이 과정에서 분해(destructuring)대상은 수정 또는 파괴(destructive)되지 않는다
배열의 요소를 직접 변수에 할당하는 것보다는, 코드의 양이 줄어든다는 점민다르다

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

let [firstName, surname] = arr;

alert(firstName); // Bora
alert(surname); // Lee

let [firstName, surname] = "Bora Lee".split(' ');
// split('') 메서드를 이용해서 ['firstName', 'surname'] 배열 반환했다

구조 분해 할당을 이용해서
→ firstName 에는 arr[0], surname 에는 arr[1] 을 할당한다

이렇게 각각의 요소에 변수가 할당되서 ~~인덱스를 이용해 배열에 접근하는 것이 아니라~~
변수로 "Bora", "Lee"을 사용할 수 있게 되었다

구조 분해 할당을 사용하는 이유

객체와 배열은 자바스크립트에서 가장 많이 쓰이는 자료구조인데

객체 사용 : key를 가진 데이터 여러 개를 하나로 묶어서 저장할 때
(= 하나의 엔티티 로 저장해야 할 때 객체를 사용된다)
배열 사용 : 컬렉션 에 데이터를 순서대로 저장할 때

Entity 데이터베이스 엔티티
보통은 개체를 말하는데
사람이 생각하는 개념이나 정보 단위와 같은
현실 세계의 대상체, 실세계에 존재하는 유형 혹은 무형 정보의 대상이며,
서로 구별이 되는 하나하나의 대상을 의미한다

Collections 컬렉션

함수에 객체나 배열에 저장된 ~~데이터 전체가 아닌,~~ 일부만 전달할 때 사용된다
함수의 매개변수가 많거나
매개변수의 기본값이 필요한 경우에도 사용하면 장점이 있다

구조분해할당의 특징

1. 쉼표를 이용한 요소 무시하기

쉼표를 사용하면 필요하지 않은 배열요소를 버릴 수 있다

// 두 번째 요소는 필요하지 않음
let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

alert( title ); // Consul

두 번째 요소는 생략되었지만, 세 번째 요소는 title이라는 변수에 할당되었다
할당할 변수가 없기 때문에 네 번째 요소 역시 생략되었습니다.

2. 할당 연산자 우측 : 모든 이터러블

배열뿐만 아니라 모든 이터러블iterable, 반복 가능한 객체 에 구조 분해 할당을 적용할 수 있다

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

💡 iterable, 반복 가능한 객체 더 알아보기

3. 할당 연산자 좌측 : 뭐든 가능

할당 연산자 좌측엔 ‘할당할 수 있는(assignables)’ 것이라면 어떤 것이든 올 수 있어서
객체 property도 가능하다

let user = {};
[user.name, user.surname] = "Bora Lee".split(' ');

alert(user.name); // Bora

4. .entries() 메서드로 반복

이 메서드 + 구조 분해를 조합 → 객체의 키와 값을 순회해 → 변수로 분해할당이 가능하다

let user = {
  name: "John",
  age: 30
};

// 객체의 키와 값 순회하기
for (let [key, value] of Object.entries(user)) {
  alert(`${key}:${value}`); // name:John, age:30이 차례대로 출력
}

맵에서도 .entries() 메서드 활용이 가능하다

let user = new Map();
user.set("name", "John");
user.set("age", "30");

for (let [key, value] of user) {
  alert(`${key}:${value}`); // name:John, then age:30
}

5. 변수 교환 트릭

두 변수에 저장된 값을 교환할 때에도 구조분해할당을 할 수 있다
아래 코드에서는 임시 배열을 만들어 두 변수를 담고, 요소 순서를 교체해 배열을 분해하는 방식을 사용했는데
이 방식을 사용하면 두 개뿐만 아니라 그 이상의 변수에 담긴 값도 교환할 수 있다

let guest = "Jane";
let admin = "Pete";

// 변수 guest엔 Pete, 변수 admin엔 Jane이 저장되도록 값을 교환함
[guest, admin] = [admin, guest];

alert(`${guest} ${admin}`); // Pete Jane(값 교환이 성공적으로 이뤄졌음)