[JS] 스프레드 문법과 구조분해할당

 

 

- 리액트 할 때 정말 많이 썼던 자바스크립트 문법

- 잘 이해하고 알아두면 리액트 앱 만들 때 고생을 덜 할수있다.(과거 나에게...)

---

스프레드 문법 (Spread)

const arr = [1, 2, 3];
const max = Math.max(arr); // NaN

const max = Math.max(...arr); // 3

• es6
• ...
• 순회가 가능한(이터러블한) 여러 값들의 집합체를 펼쳐 개별적인 값들의 목록으로 만든다.
• 값을 생성하는 연산자가 아니기 때문에 변수에 할당할 수 없다.
• Rest 파라미터와 형태가 동일하지만 전혀 다른 컨셉을 가지고 있다. 
  • Rest 파라미터는 전달된 인수들의 목록을 배열로 전달받기 위해 매개변수 앞에 사용하는 것
• 기존에 사용했던 concat, splice, slice 메서드를 더 간결하고 가독성있게 사용 가능하다.

 

 

 

- Rest parameters

function foo(...rest) {
    console.log(rest); // [1, 2, 3, 4, 5]
}

foo(1, 2, 3, 4, 5)

 

사용예제

 

1.

const arr1 = [1, 2];
const arr2 = [4, 5];
let arr = arr1.concat(arr2);
console.log(arr); // [1, 2, 4, 5]

arr = [...arr1, 3 ,...arr2]
console.log(arr); // [1, 2, 3, 4, 5]

 

2.

const employee = { name: 'jay', department:FB };
const updated = {
    ...employee,
    position: 'intern', 
};
console.log(updated); // { name: 'jay', department:FB, position: 'intern' }

---

구조 분해 할당 (Destructuring Assignment)

 

- 배열 디스트럭처링 할당

const arr = [1, 2, 3, 4];
const [one, two, ...nums] = arr;

console.log(one); // 1
console.log(two); // 2
console.log(...nums); // [3, 4]

const arr = [1, 2, 3];
const [one, two, three, four = 4] = arr; //기본값 설정

 

- 객체 디스트럭처링 할당

const user = { firstName: 'jay', lastName: 'lee' };
const { lastName, firstName } = user;

console.log(firstName, lastName); // jay lee

• es6
• 배열, 객체를 구조분해하려 변수에 할당하는 것
• 배열, 객체에서 필요한 값만 변수에 할당할 때 유용하다.
• 기본값을 설정할 수 있다.
• 객체의 할당기준은 프로퍼티 키로 순서는 상관없다. 

 

✨ 함수에 객체를 전달하여 분해 

const user = { firstName: 'jay', lastName: 'lee' };
function info({firstName, lastName}){
    console.log('성', lastName);
    console.log('이름', firstName);
}
info(user);

 

참고📌

모던자바스크립트 Deep dive

https://poiemaweb.com/js-array