✏️ 비구조화 할당

📅 본 글은 2022년 5월 1일 개인github 에 작성된 글입니다.

🚀 비구조화 할당

비구조화 할당 사용법에 대해 잘 모르고 있다는 생각이 들었다. 제대로 알아보자!
⚠️ mdn, 블로그에 정리된 내용들을 직접 실행해보며 익혀나가는 방식으로 공부하였습니다. 출처는 글 하단에 기재하였습니다.

비구조화 할당이란?

비구조화 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식!

✅  배열

let [a, b, c, ...f] = [1, 2, 3, 4, 5];
console.log(a); // 1
console.log(b); //2
console.log(c); // 3
console.log(f); // [4,5] 스프레드 연산자를 이용하여 나머지 배열 값 할당

const array = [1, 2, 3, 4, 5];
const [x, y, , , z] = array;
console.log(x); //1
console.log(y); //2
console.log(z); //5

const array = [1, 2, 3, 4, 5];
const [a, b, , , c, d] = array; // 전개 연산자 이후에 변수를 입력하면 에러 발생
[a1, a2, ...rest_a] = { a1: 10, a2: 20 }; // error 좌, 우항이 다른 속성일 경우 에러 발생.

const array = [1];
const [one, two] = array;
console.log(one); // 1
console.log(two); // undefined

// 기본값 지정 가능
const array = [1];
const [one, two = 2] = array;
console.log(one); // 1
console.log(two); // 2

✅  객체

const { a1, a2, ...rest_a } = { a1: 10, a2: 20, a3: 30, a4: 40 };
console.log(a1); // 10
console.log(a2); // 20
console.log(rest_a); // { a3: 30, a4: 40 }

🔎 원래의 키 값과 다른 이름의 변수를 사용하는 방법!

const { a1: a, a2: b, ...c } = { a1: 10, a2: 20, a3: 30, a4: 40 };
console.log(a); // 10
console.log(b); // 20
console.log(a1); // Error : a1 is not defined

✅  비구조화 할당할 때 이름 바꾸기

const animal = {
  name: '멍멍이',
  type: '개',
};
const { name: nickname } = animal;
console.log(nickname); // 멍멍이

✅  함수에서 비구조화 할당!

const object = { a: 1, b: 2 };
function print({ a, b }) {
  console.log(a); // 1
  console.log(b); // 2
}
print(object);

const object = { a: 1 }; // 기본값 설정
function print({ a, b = 2 }) {
  console.log(a);
  console.log(b);
}
print(object);
// 1
// 2

function renderUser({ name, age, addr }) {
  console.log(name);
  console.log(age);
  console.log(addr);
}
const users = [
  { name: 'kim', age: 10, addr: 'kor' },
  { name: 'joe', age: 20, addr: 'usa' },
  { name: 'miko', age: 30, addr: 'jp' },
];
users.map((user) => {
  renderUser(user);
});

 

⚠️ 이미 한번 정리 하였지만, 배열 ,객체의 깊은 복사! 를 할때 비구조화 할당을 이용한다!

2022.08.10 - [🗂 WIL/📁 JavaScript] - 얕은 복사, 깊은 복사

얕은 복사, 깊은 복사

let arr = [1, 2, 3];
let copy1 = arr;
let [...copy2] = arr;
let copy3 = [...arr];
arr[0] = 'String';
console.log(arr); // [ 'String', 2, 3 ]
console.log(copy1); // [ 'String', 2, 3 ]
console.log(copy2); // [ 1, 2, 3 ]
console.log(copy3); // [ 1, 2, 3 ]

🖇 Reference

https://yuddomack.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%AC%B8%EB%B2%95-%EB%B9%84%EA%B5%AC%EC%A1%B0%ED%99%94-%ED%95%A0%EB%8B%B9
https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EB%B9%84%EA%B5%AC%EC%A1%B0%ED%99%94%EA%B5%AC%EC%A1%B0%EB%B6%84%ED%95%B4-%ED%95%A0%EB%8B%B9