1. Spread 연산자

Spread Opertor(...) 을 이용하여 배열, 객체, 함수 등에서 사용할 수 있는 연산자이다.
"풀어 헤친다" 라는 의미를 가지는 연산자이다.

1.1 배열 Spread

배열의 병합에 사용할 수 있다. 기존에는 concat 을 이용했다면
이제는 스프레드 연산자를 이용하여 간결하게 사용 가능하다.

const friends = [1,2,3,4];
const family = ["a","b","c"];

console.log([...friends, ...family]);
//하나의 배열에 두개의 데이터가 병합된다.

1.2 객체 Spread

객체도 병합 할 수 있다.

const userInfo1 = {
    name : "gildong",
    age : 24
};

const userInfo2 = {
    phone : "01012345678",
    address : "서울시 구로구"
}

console.log({...userInfo1, ...userInfo2});
//{name: 'gildong', age: 24, phone: '01012345678', address: '서울시 구로구'}
// 다음과 같은 결과를 보여준다.

1.3 Spread 연산자 사용 예제

const friends = ["gildong" ,"younghee"];
const newFriend = [...friends, "chulsoo"];
//const newFriend = ["chulsoo", ...friends];
//반대로도 사용 가능하다.

console.log(newFriend);
//(3) ['gildong', 'younghee', 'chulsoo'] 의 결과를 보여준다.

const user = {
    userName : "name",
};

console.log({...user, password : "1234"});
//{userName: 'name', password: '1234'}

const first = ["mon","tue","wed"];

const weekend = ["sat", "sun"];

const fullWeek = [...first, "thu", "fri", ...weekend];

console.log(fullWeek);
//['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun']여
//여러개의 배열도 병합이 가능하다.

조건별로 속성 추가

=> 기존 방식

const lastName = prompt("성은 무엇입니까?");

const user = {
    userName : "gildong",
    lastName : lastName !== "" ? lastName : "",
    age : 24
};

console.log(user);
//{userName: 'gildong', lastName: '', age: 24}
//성을 입력하지 않았지만 lastName 속성은 존재한다.

const lastName = prompt("성은 무엇입니까?");

const user = {
    userName : "gildong",
    age : 24,
    ...(lastName !== "" && {lastName})
};
console.log(user);
//{userName: 'gildong', age: 24}
//lastName 을 입력하지 않으면 해당 속성도 추가되지 않도록 할 수 있다.

2. Rest parameter

... 연산자를 이용하여 파라미터를 축약한다.

const infiniteArgs = (...param) => console.log(...param);

infiniteArgs("1", 2, true, "test", [1,2,3,4,5]);
//1 2 true test (5) [1, 2, 3, 4, 5]
//전달된 param argument 가 모두 표시된다.

const bestFriendMaker = (firstOne, ...rest) => {
    console.log(`My best friend is ${firstOne}`);
    console.log(`and 나머지 친구들은 ${rest}`);
}

bestFriendMaker("gildong", "younghee","chulsoo");
//My best friend is gildong
//and 나머지 친구들은 younghee,chulsoo
//3개의 파라미터에서 첫번째 파라미터 별도로 네이밍하고 나머지를 표현하는데 ...rest 를 사용하였다.

2.1 Rest + Spread + Destructure

const user = {
    name : "gildong",
    age : 24,
    password : 12345
};

const killPassword = ({password, ...rest}) => rest;
//파라미터에서 비구조화를 사용하고 ...rest 를 사용 한 후 rest 만 리턴하였다.

console.log(killPassword(user));
//{name: 'gildong', age: 24}
//password 가 제거된 항목만 리턴되었다.

const user = {
    name : "gildong",
    age : 24,
    password : 12345
};

const setCountry = ({country = "KR", ...rest}) => ({country, ...rest});
//파라미터에서 비구조화, rest 를 사용하고 리턴에서 spread 연산자를 통해 병합하였다.

console.log(setCountry(user));
//{country: 'KR', name: 'gildong', age: 24, password: 12345}

//console.log(setCountry({...user, country : "EN"}));
//객체내에서 spread 사용도 가능하다.

const user = {
    NAME : "gildong",
    age : 24,
    password : 12345
};

const rename = ({ NAME:name, ...rest}) => ({name, ...rest});

console.log(rename(user));
//{name: 'gildong', age: 24, password: 12345}
//속성명이 변경되었다.