Introduction to Spread

spread는 변수를 해채하고 전개하는 것이다. …으로 array를 해제하고 각각의 데이터 타입에맞추어 모든 값을 반환한다.

<aside> 📝 Spread declaration

const variable = [value, •••] …variable

const friends = [1, 2, 3, 4];
console.log(...friends);
> `1 2 3 4`

</aside>

/**
 * `spread ...`를 사용하여 array나 object를 해채하여 안의
 * 모든 요소들을 반환한다.
 */
const friends = [1, 2, 3, 4];
const family = ["a", "b", "c"];
console.log([...family, ...friends]);

const sexy = {
  name: "nico",
  age: 24,
};

const hello = {
  sexy: true,
  hello: "hello",
};

console.log({ ...sexy, ...hello });

Spread Applications

Spread만으로 값이나 요소를 손쉽게 추가할 수 있다. Array와 object를 원하는 위치에 추가하고자 하면 …variable로 작성하면 되는것이다.

<aside> 📝 Add spread

const variable = [value1, •••] const newVariable = [value2, …variable, •••]

const friends = ["nico", "lynn"];
const newFriends = ["marco", ...friends, "dal"];

</aside>

/**
 * push를 사용하지않고 spread만으로 요소를 손쉽게 추가하는 방법이다.
 */
const friends = ["nico", "lynn"];
const newFriends = [...friends, "dal"];

console.log(newFriends);

/**
 * object도 쌉가능이다.
 */
const nico = {
  username: "nico",
};
console.log({ ...nico, password: 123 });

/**
 * 좀더 다양하고 복잡한 코드도 쉽게 구현이 가능하다.
 */
const first = ["mon", "tue", "wed"];
const weekend = ["sat", "sun"];

const fullWeek = [...first, "thu", "fri", ...weekend];
console.log(fullWeek);

Spread를 object한정으로 조건부 달아서 요소를 추가하고 넣는 방법이 있다. Object에 일반적으로 요소 값을 추가하는 방법으론 삼항연산식을 사용을 하지만 요소 값이 없어도 object에 요소가 추가가 된다는 것이다. 만약 조건문으로 원치않은 요소를 제외하고 싶다면 spread condition을 사용하면 된다.

<aside> 📝 Object spread condition

…(condition && {})

const lastName = prompt("Last name");
const user ={
	...(lastName != "" && { lastName })
}

</aside>

/**
 * 여러가지 방법으로 lastName이라는 값을 요소에 추가할 수 있다.
 * 하지만 spread를 이용하여 object요소에 lastName값이 없으면
 * 아예 요소로 추가하지 않게 할려면 `...(condition && {})`으로
 * 정의해야한다.
 */
const lastName = prompt("Last name");
const user = {
  username: "nico",
  age: 24,
  ...(lastName != "" && { lastName }),
  //lastName: lastName != "" ? lastName : undefined,
};
console.log(user);

Intro to Rest Parameters

Rest는 함수의 파라미터형태 중 하나이다. Spread처럼 …을 사용하여 여러개의 인수를 하나의 array로 사용한다. object 형식으로 제공하면 rest는 object인수로 제공된다.