Javascript ES6 문법 공부 7

1. spread

Spread: 변수를 가져와서 값을 전개하는 것!

* array

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

console.log([...friends, ...family]);

* object

const sexy = {
    name: 'dong',
    age: '27',
};

const hello = {
    sexy: false,
    hello: 'hello',
};

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

다음과 같이 array 와 object에 사용이 가능하다.
안의 값들만 가져오는 것이 가능하고, 병합할 때 유용하게 쓸 수 있다.

* updating

const friends = ['nico', 'lynn'];

const newFriends = [...friends, 'dal'];

console.log(newFriends);

const nico = {
    username: 'nico',
};

console.log({ ...nico, password: 123 });

새로운 값을 추가 할 때도 유용하게 사용이 가능하다.

* conditional

const lastName = prompt('Last name');

const user = {
    username: 'nico',
    age: 24,
    ...(lastName !== '' && { lastName }),
};

console.log(user);

다음과 같이 조건을 사용해 값을 추가 해 줄수 있다.
lastName이 비어있다면, 만들지 않고,

2. rest parameter

rest : 축소시키는 것, spread의 반대 개념

const infiniteArgs = (...kimchi) => {
    console.log(kimchi);
};

infiniteArgs('1', 2, true, 'lalala');

하나의 변수로 축소가능

const bestFriendMaker = (firstOne, ...potato) => {
    console.log(`My best friend is ${firstOne}`);
    console.log(potato);
};

bestFriendMaker('nico', 'lynn', 'dal', 'japan guy');

원하는 값만 할당한 뒤 나머지를 한개의 변수로 축소 할 수 있다.

* example (spread + rest + destructuring)

1. cleaning object

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

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

const cleanUser = killPassword(user);

console.log(cleanUser);

2. set default

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

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

console.log(setCountry(user));

3. rename property

const user = {
    NAME: 'nico',
    age: 24,
    password: 12345,
};

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

console.log(rename(user));