구조 분해 할당,확장(spread) 연산자, 나머지 연산자
구조 분해 할당 구문은 배열이나 객체의 속성을 해체해서 그 값을 개별 변수에 담을 수 있게 하는 표현이다.
구조분해 할당에 대해선 설명보다 사용법을 보는게 훨씬 빠르게 익혀지는 것 같다
몇가지 예시를 살펴보자
let x, y; x = y = 9; // x = 9, y = 9
const z = (y++, x + y); // z = 19
x += y; x %= y; x &= y; x ^= y; // x = x + y; x = x & y;
const u = {id: 1, name: 'hong', age: 29}; // object
let {id, name, addr} = u; // id = 1, name = 'hong', addr = undefined, age = ?
let {id, ...info} = u; // id = 1, info = { name: 'hong', age: 29 }
let id, name;
{id, name} = u; // Error! ⇒ ({id, name} = u);
const arr = [1, 2, 3, 4, 5];
let [a, b, ...c] = arr; // a=1,b=2,c=[3,4,5]
let [x,,y,,z] = arr; // x=1 , y=3 , z=5
[a, b] = [b, a]; // a=2 , b=1위에서 부터 살펴보면 =이라는 할당연산자가 연속해서 붙을 경우 변수에 할당되는 값들은 가장 마지막에 있는 값으로 할당된다.
중요한 부분은 객체를 구조분해 할당하는 u부분이다
객체를 구조분해 할당할 때 주의할 점은 할당받을 변수를 분해할 객체의 키값과 동일하게 작성해야 한다는 것이다
할당받을 변수의 이름을 통해 분해할 객체의 키를 검색하여 그대로 할당하여 줌으로 변수 이름을 키와 맞지 않게 입력할 경우 let a;와 같이 undefined로 할당된다.
이때는 const로 구조분해 할당하더라도 원래 const a;로 입력할 경우 생기는 에러가 이때는 생기지 않으니 꼭 주의하자!
배열의 경우 키값이 없지만 Javascript에서의 배열은 객체와도 같다.
객체로 변환되면 키는 index를 통해 나오는데 이와 같이 각각의 index위치에 맞게 구조분해 할당되어 각각 변수에 들어가게 된다.
이때 만약 하나의 인덱스를 뛰어 넘고 싶다면 해당 index 위치는 ,,를 입력하여 뛰어 넘으면 된다
그리고 같이 알아야할 나머지 연산자로 ...가 존재하는데 구조분해 할당을 할때 입력되는 ...는 스프레드 연산자가 아니라는 걸 기억하자
전개(확장) 연산자 (spread operator)
여러개의 변수가 들어갈 자리에 배열의 원소들을 분포시킬 때 사용한다.
사용 주의 사항으론 iterable한지가 중요하니 만약 iterable하지 않은지 꼭 확인하자
현재는 객체에서도 사용 가능하다
const arr = [1, 2, 3, 4, 5];
const arr2 = [...arr];
const arr3 = arr;
console.log(arr === arr3); // true
console.log(arr === arr2); // false여기서 눈여겨 봐야할 것은 arr3=arr처럼 메모리 주소를 그대로 할당하는 것이 아닌 복사하여 새로운 메모리 주소에 할당된다는 것이다.
이로인해 arr의 내용물을 바꾼다 하여도 arr2에는 전혀 영향이 없다.
하지만 주의할 점으론 만약 객체 배열일 경우 배열의 값들은 객체겠지만 실제론 각 객체들의 메모리 주소를 배열로 가지고 있는 상태로 spread 연산자를 사용해서 복사한다 하더라도 메모리 주소가 그대로 복사됨으로 각 객체들까지 독립적으로 복사되진 않는다
이로인해 얕은 복사라고 불리기도 한다
나머지 연산자 (rest operator)
비 구조화 할당을 사용하되, 배열의 일부 부분을 다른 변수에 배열로 할당하고자 할 때 나머지 연산자를 사용할 수 있다.
const arr = [1, 2, 3, 4, 5];
let [a, b, ...c] = arr; // a=1,b=2, c=[3,4,5]
const u = { id: 1, name: "lee", id: 27 };
let { id, ...u2 } = u; // id =1 , u2 = {name:'lee',id:27}위에서 본 예시와 똑같은데 할당되고 남은 나머지 값들을 객체 또는 배열로 묶어서 반환해준다.
화살표 함수를 사용할 때 들어오는 매개변수의 값도 나머지 연산자를 자주 사용할 수 있으니 꼭 참고하자
변수명 변경과 기본값 할당
만약 키 값과 동일하게 변수를 사용하고 싶지 않고 다른 변수명을 사용하고 싶을때는 어떻게 할까?
const u = { id: 1, name: "lee", id: 27 };
let { id, name: nickName, id } = u;이렇듯 간단하게 : 를 사용하고 뒤에 원하는 변수 명을 쓸 경우 name을 통해 키값을 찾아 구조분해 한 뒤 :뒤에 입력된 nickName이란 이름의 변수로 값을 할당한다.
const u = { id: 1, name: "lee", id: 27 };
let { id, addr = "seoul" } = u;위는 addr이라는 u라는 객체에 존재하지 않는 키값을 찾고 있다.
이 경우 원래대로 라면 undefined가 할당되어야 하지만 =할당 연산자를 통해 'seoul'이라는 기본 값을 할당함으로 undefined가 아닌 'seoul'값이 할당되게 된다.
만약 객체에 존재하는 키값이라 하면 당연히 기본값 'seoul'은 무시되고 구조분해 할당받은 값이 addr에 들어오게 된다
이처럼 구조분해 할당과 나머지 연산자를 쓸 경우 간단한 얕은 복사와 배열들을 처리할 수 있게 되고 후에 프레임워크를 사용할 때 자주 사용할 테니 여러번 반복해서 사용해봐야겠다
