비구조화 할당
ES6부터 추가된 문법으로 구조 분해 할당(Destructuring Assignment)라고도 하며, 배열이나 객체의 값을 새로운 변수에 쉽게 할당한다.
분해(Deconstructing)의 의미
💡 구조 분해 할당이란 명칭은 어떤 것을 복사한 이후에 변수로 '분해(destructurize)'해준다는 의미로, 분해 대상은 수정 또는 파괴되지 않는다.
1. 객체 비구조화 할당
var employee = { firstName: "Tim", lastName: "Cook" , age: 61, position: "CEO"};
var {firstName, position} = employee;
console.log(`firstName >>> ${firstName}`); // "Tim"
console.log(`position >>> ${position}`); // "CEO"비구조화 할당은 보통 객체나 배열의 값 중 일부만 취하고 싶을 때 사용할 수 있다. 위의 예시코드에서 employee 객체의 프로퍼티 중 firstName, position 프로퍼티값만 비구조화 할당을 통해서 가져오고 있다.
비구조화 할당을 하는 방법은 중괄호를 쓰고 비구조화 할당하고자 하는 객체의 프로퍼티명을 써주면 해당 프로퍼티값이 변수에 할당이 된다.
새로운 변수명으로 할당하기 & 기본값 설정
// {기존 프로퍼티명: 새로운 변수명=기본값}
var {firstName:employeeName="unknown", salary: salary="$60,000"} = employee;
기존 프로퍼티명이 아닌 새로운 변수명에 프로퍼티값을 할당할 수도 있고 기본값을 설정할 수도 있다.
위의 예시에서 employee 객체 프로퍼티 중 firstName 프로퍼티값을 employeeName이라는 새로운 변수에 할당하고, 만약 firstName 프로퍼티값이 없는 경우 "unknown"이라는 문자열을 할당하라는 의미이다.
두번째 프로퍼티 자리에는 salary 프로퍼티값을 salary라는 변수에 할당하고 salary 프로퍼티값이 없을 시 "$60,000"라는 문자열을 할당하라는 의미이다.
console.log(`employeeName >>> ${employeeName}`) // "Tim"
console.log(`salary>>> ${salary}`) // "$60,000"각 변수를 콘솔창에 출력해보면 각각 "Tim"과 "$60,000" 라는 값을 출력한다. employeeName 변수에는 firstName 프로퍼티값인 "Tim"이 할당 되었고 salary에는 기본값으로 설정한 "$60,000"이 할당된 것을 확인할 수 있다. salary는 employee 객체에 없는 프로퍼티이므로 즉 프로퍼티값이 없다. 따라서 기본값을 할당하게 된다.
2. 배열 비구조화 할당
배열의 요소를 각각 변수에 저장하는 코드를 작성한다고 가정해보자.
var arr = [1, 2, 30, 44, 5]
var num1 = arr[0]
var num2 = arr[1]
var rest = arr.splice(2)비구조화 할당을 사용하지 않으면 일일이 배열의 요소를 각각 변수에 할당하는 코드를 여러줄 써야한다.
var [num1, num2, ...rest] = arr;
console.log(`num1 >>> ${num1}`); // 1
console.log(`num2 >>> ${num2}`); // 2
console.log(`rest >>> ${rest}`); // 30,44,5비구조화 할당을 이용하면 좀더 간결한 코드로 변수에 배열의 요소를 할당해 줄 수 있다.
배열의 요소가 해당 요소의 인덱스에 선언된 변수에 할당된다.
기본값 설정
var [a=10, f=9] = [1];객체 비구조화 할당과 마찬가지로 기본값을 설정해줄 수도 있다. 해당 인덱스의 요소가 없는 경우 기본적으로 할당해줄 값을 설정해주는 것이다.
위의 예시에서 1이라는 값 하나만 가지고 있는 배열을 비구조화 할당하고 있다. 첫번째 인덱스에 있는 변수 a에는 배열의 첫번째 요소를 할당하고 첫번째 요소가 없는 경우 10을 할당해준다. 두번째 인덱스에 있는 변수 f에는 배열의 두번째 요소를 할당하고 두번째 요소가 없는 경우 9를 할당해준다.
console.log(`a >>> ${a}`); // 1
console.log(`f >>> ${f}`); // 9두 변수를 출력해보면 각각 1과 9라는 값이 출력된다. 첫번째 요소값이 1이므로 a에는 1이 할당되었고 두번째 요소가 없으므로 기본값인 9가 f에 할당되었음을 알 수 있다.
변수 교환 트릭
비구조화 할당을 이용하여 두 변수에 저장된 값을 교환할 수 있다.
let guest = "Jane";
let admin = "Pete";
[guest, admin] = [admin, guest];
console.log(`${guest} ${admin}`); // Pete Jane쉼표를 사용하여 요소 무시하기
함수를 호출하여 배열을 반환받는 경우, 반환된 배열의 전체가 아닌 일부 요소만 사용하고 싶다면, 비구조화 할당을 통해 사용하지 않을 요소의 인덱스에 comma를 써서 해당 요소를 무시할 수 있다.
function getArr(){
return [13, 46, 23, 4, 74, 98]
}
var [first, , , , , last] = getArr();위의 예시에서는 반환된 배열의 첫번째 요소와 마지막 요소만 변수에 할당하고 나머지 요소는 쉼표처리를 하여 무시하고 있다.
console.log(`first >>> ${first}`); // 13
console.log(`last >>> ${last}`); // 98출력해보면 first 변수에 배열의 첫번째 요소인 13이, last 변수에 배열의 마지막 요소인 98이 할당된 것을 확인할 수 있다.
