spread 문법, rest 문법

리액트를 공부하면서 처음 알게 되었던 스프레드 연산자(...)를
부트캠프 공부를 하면서 더욱 자세히 알게 되었다.

스프레드 연산자는 객체와 배열을 복사, 합치거나 매개변수를 배열로 전달해주는 등 다양한 기능이 있다.

1. 복사하기

let arr = [1,2,3,4];
let arr2 = [...arr];

arr === arr2;	//false

배열은 한개의 데이터를 가지고 주소값을 복사할 수 있을뿐 데이터 자체를 복사할 수 없다.
하지만 스프레드 문법을 사용하면 빠르게 배열을 새로운 배열로 복사할 수 있다.

let user = {name: "son"};
let user2 = {...user};

user === user2 //false

이는 객체도 마찬가지!! 단, 객체는 배열과 달리 {...} 중괄호를 사용해야한다는 점 명심.
(객체를 복사할땐 {}, 배열을 복사할 땐 [])

스프레드 연산자는 spread 문법과 rest 문법으로 사용할 수 도 있다.

1. spread 문법

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

sum(...numbers)	//6

spread 문법은 배열을 함수의 매개변수로 사용할 때 스프레드 연산자를 넣어 전달하면 
숫자 그대로 매개변수로 사용할 수 있다!!

말그대로 배열을 풀어서 숫자로 바꾸어 인자로 넣어준다고 생각하면 된다.



2. rest 문법

function findBiggestArg(...args) {
  let biggestArg = 0;
  for (let i = 0; i < args.length; i += 1){
    if (biggestArg < args[i]){
      biggestArg = args[i]
    }
  }
  return biggestArg
}

let value = findBiggestArg(10, 30, 40, 20)	//40

rest 문법은 인자를 배열로 받아 올 수있다. 인자의 갯수가 가변적일 때 유용하다.
함수의 인자가(...args)스프레드 연산자이기 때문에, 지금 함수에 전달 된 인자는
[10,30,40,20]이 된다.

따라서 함수 내에서 args.length는 4가 되고, args[0]은 10이 되는 등 인자가 배열로 쓰일 수 있게 되는 것.

스프레드 문법은 특히 배열에서 큰 힘을 발휘 하는데, 아래와 같이 다양하게 사용할 수 있다.

1. 배열 복사하기

let arr = [1, 2, 3, 4];
let newArr = [...arr];

newArr.push(5);

arr //[1,2,3,4]
newArr	//[1,2,3,4,5]

newArr은 arr의 값을 복사 한 완전히 새로운 배열이기 때문에,
newArr의 값이 달라진다해서 arr의 값이 달리지지 않는다!!



2. 배열 합치기

let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2];	//[0,1,2,3,4,5]

스프레드 문법을 통해 간단하게 arr1과 arr2를 합쳐서 arr1에 새로운 값을 할당한다!!



3. 객체에서 사용하기

let obj1 = { foo: 'bar', x: 42 };
let obj2 = { foo: 'baz', y: 13 };

let clonedObj = { ...obj1 };	//{ foo: 'bar', x: 42 }
let mergedObj = { ...obj1, ...obj2 };	//{ foo: 'baz',x: 42, y: 13 }

배열과 달리 객체는 서로 합칠때 중복되는 key가 있다면 처음 객체에서 합치는 객체의 key의 value로 재할당 시킨다!!  



4. 함수에서 나머지 인자로 받아오기

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);	//one
  console.log("b", b);	//two
  console.log("manyMoreArgs", manyMoreArgs);	//three, four, five, six
}

myFun("one", "two", "three", "four", "five", "six");

먼저 myFun에 전달 된 6개의 인자 중, 첫번째는 a로, 두번째는 b로 할당 된다.
그리고 ...manyMoreArgs는 함수내에 나머지 4개의 인자가 manyMoreArgs로 할당되어 사용할 수 있게 된다!!

구조분해할당

구조분해할당이란, 4번의 예제처럼 스프레드 문법을 통해 값을 해체하여 변수에 새롭게 값을 각각 할당하는 것을 말한다.

1. 배열

const [a, b, ...rest] = [10, 20, 30, 40, 50];
a	//10
b	//20
rest	//[30,40,50]

a, b에 전달 된 값을 제외한 나머지는 스프레드 문법을 사용 한 rest에 배열로 할당된다.



2. 객체

const {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
a	//10
b	//20
rest	//{c: 30, d: 40}

궁금했던게, 만약 const{notA, notB, ...rest} = {a: 10, b: 20, c: 30, d: 40};라면
notA에 10이 할당이 안되는 것 이였다. 그래서 chatGPT에 물어보았다.

결론은 할당하려는 변수의 이름이 원본 객체와 동일하지 않으면 undefined가 할당 된다는 것이다.

화살표함수

화살표 함수를 사용하면 함수선언문 또는 함수표현식을 보다 간결하게 표현할 수 있다.
그 밖에도 다양한 장점이 있는데, 아래와 같다.

채선생 참 똑똑하구나

또, 화살표 함수를 사용할때 더욱 간단하게 만들 수 있는 방법이 있다.

1. 매개변수가 한개라면 소괄호를 생략할 수 있다.

const square = x => { return x * x }

// 위 코드와 동일하게 동작한다.
const square = ( x ) => { return x * x }

// 단, 매개변수가 없는 경우엔 소괄호를 생략할 수 없다.
const greeting = () => { return 'hello world' }



2. 함수 코드 블록 내부가 하나의 문으로 구성되어 있다면 중괄호({})를 생략할 수 있다. 
이때 코드 블록 내부의 문이 값으로 평가 될 수 있으면 return 키워드를 생략할 수 있다.  

//아마 화살표 함수로 만들 수 있는 가장 간단한 코드이지 않을까
const squre = x => x * x 

// 위 코드와 동일하게 동작한다.
const square = x => { return x * x }

// 위 코드와 동일하게 동작한다.
const square = function (x) {
	return x * x
}