[Javascript] Spread/ Reat문법 (feat. 비구조화(구조분해) 할당)

 

 

💖 전개(Spread Syntax) 연산자

1. Spread 라는 단어의 의미는 펼치다, 퍼뜨리다 이다.

 

2. 이 문법을 이용하면, 객체 혹은 배열을 펼칠 수 있다. (객체나 배열을 통채로 끌고와서 사용 가능!)

 

3. 기존의 것은 건들이지 않고 새로운 객체를 만들 때 사용한다.

 

 

// 펼칠 대상이 객체인 경우
{...obj}

// 펼칠 대상이 배열인 경우
[...arr]
// 혹은
{...arr}

 

전개 구문의 문법 자체는 정말 간단하다. 그저 배열이나 객체 앞에 점 세 개를 붙여주면 된다.

 

 

 

 

 

🎁 MDN 문서 🎁

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

Spread syntax (...) - JavaScript | MDN

 

 

 

---

 

🖥️ ES5 배열 조합

ES5에서는 배열의 내용을 합쳐 새로운 배열을 만들기 위해서 concat메소드를 활용한다.

 

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];
const arrWrap = arr1.concat(arr2, arr3);

console.log(arrWrap); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

 

 

🖥️ ES6 배열 조합

전개 연산자를 활용하여 새로운 배열을 만들었다. concat 메서드를 사용한 코드보다 간결하고, 가독성도 개선되었다.

concat 메서드는 인자로 전달받은 값 순으로 기존 배열 끝에서부터 값을 추가하지만, 전개 연산자는 위처럼 배열의 아무 곳에나 추가 할 수 있다.

 

 

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];
const arrWrap = [...arr1, ...arr2, ...arr3];

console.log(arrWrap); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

 

const arr = [4, 5, 6];
const arrWrap = [1, 2, 3, ...arr, 7, 8, 9]

console.log(arrWrap); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

 

 

 

---

💖 Rest 파라미터

 

Rest 파라미터(나머지 매개변수) 구문을 구조 분해 할당 문법과 같이 사용하면 나머지 (객체, 배열)을 rest에 담아서 추출할 수 있다.

Rest 파라미터(나머지 매개변수) 구문을 사용하면 함수에서 정해지지 않은 수의 매개변수를 배열로 받을 수 있다.

 

 

1. rest의 생김새가 spread와 비슷하지만 역할은 매우 다르다.

 

2. rest는 객체, 배열, 함수의 매개변수에서 사용가능하다.

 

3. rest는 객체와 배열에서 사용할 때는 구조 분해 할당 문법과 함께 사용된다.

 

4. 사용할 때는 주로 rest 라는 키워드를 사용하게 되는데 추출값의 이름이 꼭 rest 일 필요는 없다.

 

 

 

 

 

🎁 MDN 문서 🎁

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters

나머지 매개변수 - JavaScript | MDN

 

 

 

---

 

🖥️ 객체에서의 rest 파라미터

 

// Rest 사용 예) 객체의 경우 1
const a = {
  one: '하나',
  two: '둘'
  three: '셋'
}

const { three, ...rest } = a;

console.log(three); // '셋'
console.log(rest); // { one:'하나', two:'둘' }

// rest 안에는 three 값을 제외한 값이 들어있다.

 

// Rest 사용 예) 객체의 경우 2
const a = {
  one: '하나',
  two: '둘',
  three: '셋'
}

const { two, three, ...rest } = a;

console.log(two); // '둘'
console.log(rest); // { one:'하나' }

 

🖥️ 배열에서의 rest 파라미터

 

// Rest 사용 예) 배열의 경우 1
const a = [1, 2, 3];

const [ one, ...rest ] = a;

console.log(one); // 1
console.log(rest); // [2, 3]

 

 

📌 주의! 오류 구문

 

// Rest 사용 예) 오류남
const a = [1, 2, 3];

const [ ...rest, last ] = a;

 

🖥️ 함수 매개변수에서의 rest 파라미터

 

 

👍 함수의 매개변수가 몇 개가 될지 모르는 상황에서 rest 매개변수를 사용하면 유용하다.

 

// Rest 사용 예) 함수 파라미터 1
function sum(...rest) {
  return rest;
}

const result = sum(1,2,3);

console.log(result); // [1, 2, 3]

 

 

👍 result 가 가리키고 있는 것은 함수에서 받아온 매개변수들로 이뤄진 배열이다. 즉, 매개변수가 배열 형식으로 들어온다.

 

// Rest 사용 예) 함수 파라미터 2
function sum(...rest) {
  return rest.reduce((acc,crr) => {
    return acc + crr;
  }, 0);
}

const result = sum(1,2,3);

console.log(result); // 6

 

 

 

 

 

---

 

💖 비구조화(구조분해) 할당

 

1. 비구조화 할당(destructuring assignment) 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식(expression)'입니다.

 

2. 간단하게 정리하면 배열 [], 혹은 객체 {} 안의 값을 편하게 꺼내 쓸 수 있는 문법입니다.

 

3. 배열, 객체 내 값을 추출하는 코드가 매우 간단해진다. 또 필요한 객체오 나머지 요소 분리가 매우간단해지며 기본값 지정이 가능하다.

 

// 구조 분해 할당
let a = [1, 2, 3, 4];
let [one, two, three, four] = a;

one // 1
two // 2

 

 

 

 

🎁 MDN 문서 🎁

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

구조 분해 할당 - JavaScript | MDN

 

 

 

 

---

🖥️ 간단한 코드 정리

 

let fruit = ['Apple', 'Banana', 'Peach']; 

let Apple = fruit[0]; 
let Banana = fruit[1]; 
let Peach = fruit[2]; 

console.log(Apple); 
console.log(Banana); 
console.log(Peach);

 

let fruit = ['Apple', 'Banana', 'Peach']; 

let [Apple,Banana, Peach] = fruit; 

console.log(Apple); 
console.log(Banana); 
console.log(Peach);

 

🖥️ 비구조화할당 구조 분해

하나의 값은 변수에 넣고 나머지는 나머지 변수에 할당도 가능하다.

전개 연산자인 ... 을 이용하면 매칭 된 값 외 모든 데이터 값을 할당할 수 있다.

 

let fruit = ['Apple', 'Banana', 'Peach', 'Pear']; 

let [Apple, ...etc] = fruit;

console.log(Apple); // Apple
console.log(etc); // (3)["Banana", "Peach", "Pear"]

 

🖥️ 기본값 지정

지정한 변수에 매칭할 값이 업사면 undefined가 발생합니다. 

만약 이때 undefined가 아니라 기본적으로 넣어주는 값이 있다고 하면 기본 값을 지정하는 것도 가능하다.

 

let fruit = ['Apple', 'Banana', 'Peach']; 
let [Apple,Banana, Peach, Pear='Pear'] = fruit;

console.log(Apple); //Apple
console.log(Banana); //Banana
console.log(Peach); //Peach
console.log(Pear); //Pear