스프레드 문법 / 전개구문

스프레드 문법은 자바스크립트에서 자주 사용하는 최신문법이다, 라이브러리나, 리액트를 사용할때 많이 사용한다고 한다.

전개구문이라고도 하는데 배열과 같이 반복 가능한 객체를 펼쳐서 확장하는것 입니다.

배열 전개구문

const nums = [1,2,3,4,100,40]
Math.max(nums)

🚨 이렇게 하면 NaN이 나오는데 숫자가 아니라는것이다 그 이유는 배열로 감싸져 있기때문에

그렇다면 이럴떄 전개 구문을 사용하면 된다

const nums = [1,2,3,4,100,40]
Math.max(...nums)
이렇게 하면 전개구문에 배열의 괄호를 지워내서 배열이 펼쳐지고 인수가 따로따로 들어갑니다
따라서 결과값은 100이 나옵니다

콘솔로 찍어보면 
console.log(num)
// [1, 2, 3, 4, 100, 40]

console.log(...num)
// 1 2 3 4 100 40

괄호가 지워진것을 볼수 있다.

여러개의 배열을 하나의 배열로 합치고 싶을때

예를들어 cats이라는 변수 배열과 dog 이라는 변수 배열 2개가 있다고 하자
근데 2개의 변수를 하나의 변수 배열에 담고 싶을때 어떻게 할까? 이럴떄도 스프레드 문법을 사용하면 된다

const cats =["blue", "Scout", "Rocket"];
const dog = ["Rusty", "Wyatt"];
const allPets = [...cats, ...dog]

cats와 dog의 배열을 복사해 allPets 이라는 변수에 담았다 

// 결과값 ['blue', 'Scout', 'Rocket', 'Rusty', 'Wyatt']

객체 전개구문

객체도 배열과 비슷하다 객체를 스프레드 문법을 사용해서 새로운 객체를 복사할수 있다.

const man = {legs : 2, family : 4};
const man1 = {...man}; // {legs: 2, family: 4}

객체 전개구문도 배열과 똑같이 2개의 객체를 1개의 객체에 합쳐 담을수 있다

const man = {legs : 2, family : 4};
const girl = {legs : 2, family : 5}
const person = {...jaeho, ...hoho}

근데 이렇게 합치니까 뭔가 이상하다 결과값으로 {legs : 2, family : 5} 뒤에 객체만 출력이 되는걸 볼수있다 난 분명 2개를 합쳤는데 왜?
그 이유가 뭔가 설명을 들어봤더니 두 객체는 모두 생물 분류의 특성을 가지고 있어서 출력하는 순서가 중요하다는것이다 사실 무슨 말인지 몰르는데 무튼 객체는 2개를 합치면 하나만 나온다

const girl = {legs : 2, family : 5}
const man = {legs : 2, family : 4};
const person = {...jaeho, ...hoho}

// 순서를 바꾸면 결과값으로 {legs : 2, family : 4} 객체가 복사되어 출력된다.

이처럼 스프레드문법을 사용하면 객체나 배열을 펼쳐 새로운 복사본을 만들어 원본을 훼손하지 않고 내용을 수정 및 추가할수있다.