[ JS ] Rest And Spread

🔴  Introduction to Spread

⚪  spread는 변수를 가져가서 요소를 전개한다.

 

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

console.log(friends);  // [1, 2, 3, 4] => array
console.log(...friends);  // 1 2 3 4 => elements
// spread merge
console.log([friends, family]);  // [ [1, 2, 3, 4], ["a", "b", "c"] ]
console.log([...friends, ...family]);  // [1, 2, 3, 4, "a", "b", "c"]

 

🟠  Spread Applications

 

// spread add
const first = ["mon", "tue", "wed"];
const weekend = ["sat", "sun"];
const fullWeek = [...first, "thu", "fri", ...weekend];

console.log(fullWeek);

 

// conditional spread
const lastName = prompt("Last name");

const user = {
  userName: "ryong",
  age: 28,
  ...(lastName !== "" && { lastName })
};

console.log(user);  // {userName: "ryong", age: 28, lastName: "lalala"}

 

🟡  Intro to Rest Parameters

 

const bestFriendMaker = (firstOne, ...rest) => {
  console.log(`My best friend is ${firstOne}`);  // ~ ryong
  console.log(rest);  // ["lin", "hyun", "hun"]
};

bestFriendMaker("ryong", "lin", "hyun", "hun");

 

🟢  Rest + Spread + Destructure Magic

⚪  object를 지우거나 정리할 때 사용

 

const user = {
  name: "ryong",
  age: 28,
  password: 12345
};

const killPassword = ({ password, ...rest }) => rest;

const cleanUser = killPassword(user);

console.log(cleanUser);  // {name: "ryong", age: 28}

⚪  기본값 설정하기

 

const user = {
  name: "ryong",
  age: 28,
  password: 12345
};

const setCountry = ({ country = "KR", ...rest }) => ({ country, ...rest });

console.log(setCountry(user));
// {country: "KR", name: "ryong", age: 28, password: 12345}

⚪  key 값 변경하기

 

const user = {
  NAME: "ryong",
  age: 28,
  password: 12345
};

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

console.log(rename(user));
// {name: "ryong", age: 28, password: 12345}