[JS] ES6 - Rest and Spread

이채현

💡 Javascript ES6 문법을 배워보자 - Rest & Spread

Rest and Spread

Spread

기본적으로 변수를 가져와 풀어 해쳐 전개해놓는 것.

/**
 * Spread
 */
const friends = [1, 2, 3, 4];

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

const family = ["a", "b", "c"];
console.log(friends + family); // 1,2,3,4a,b,c
console.log([friends, family]); // [ [ 1, 2, 3, 4 ], [ 'a', 'b', 'c' ] ]
console.log([...friends, ...family]); // [ 1,   2,   3,   4, 'a', 'b', 'c' ]
// spread를 통해 모든 요소를 담고 있는 하나의 object를 얻을 수 있다.
// array.push()를 이용하지 않고 값을 추가하여 새로운 객체를 만든다.
const newFriends = [...friends, 5, 6, 7];
console.log(newFriends); // [ 1, 2, 3, 4, 5, 6, 7]

const admin = {
  username: "admin",
};
console.log({ ...admin, password: 123 }); // { username: 'admin', password: 123 }
// 조건식
// lastName을 입력받았을 때 값이 있을 때만 객체에 넣어주기
const lastName = prompt("Last name: ");
const person = {
  username: "person",
  age: 24,
  ...(lastName !== "" && { lastName }), // spread로 전개하려면 데이터가 object여야하므로, 중괄호로 감싸줌
  //   lastName: lastName !== "" ? lastName : undefined,
};
console.log(person);

Rest Parameters

끝없는 인자를 받아 볼때 유용하게 이용할 수있다

spread는 죄다 펼쳐 확대시키는 것이고, ****rest는 하나에 담아서 축소시키는것

어디에 들어가느냐에 따라 spread와 rest(parameter부분에 들어가면 )로 갈릴수있음

const infiniteArge = (...kimchi) => console.log(kimchi);

infiniteArge("1", 2, true, "lalala", [1, 2, 3, 4]);
// 전부 배열에 넣어서 출력된다.

const bestFriends = (firstPotato, ...potatos) => {
	console.log(`he is ${firstPotato}`);
	console.log(potatos);
}

bestFriends("nico", "lynn", "steve", "flynn");
// he is nico
// ["lynn", "steve", "flynn"]
// 이렇게 출력된다

Rest + Spread + Destructure Magic

object를 지우거나 정리할 때 유용하다

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

const killPassword = ({password, ...rest}) => rest; // destructure + rest
// destructuring을 통해 user의 password를 가져오고, 나머지를 rest에 저장

const cleanUser = killPassword(user)
console.log(cleanUser) // {name:"nico", age:24} 출력한다

const setCountry = ({ country = "KR", ...rest }) => ({ country, ...rest });
// default 설정 + rest + spread

console.log(setCountry(user));

// {country : "KR", name :"nico", age:24, password : 12345} 출력