[JavaSript] 12. 자바스크립트 Spread 와 Rest

# Spread

spread는 이름과 같이 객체 또는 배열을 펼쳐 새로운 객체나 배열을 만들 수 있습니다.

다음과 같은 코드가 있습니다. person01과 person02 객체에는 country : "KOREA" 라는 공통된 속성이 포함되어 있는데요.

const person01 = {
    country : "KOREA",
    gender : "Female",
    age : 24
};

const person02 = {
    country : "KOREA",
    gender : "Male",
    age : 26
};

console.log(person01);
console.log(person02);

 

이런 공통된 내용을 spread를 사용하여 좀 더 간편하게 코드를 작성할 수 있습니다. spread 연산자는  ... 문자로 표현합니다.

const person01 = {
    country : "KOREA",
    gender : "Female",
    age : 24
};

const person02 = {
    ...person01,
    gender : "Male",
    age : 26
};

console.log(person01); // { country: 'KOREA', gender: 'Female', age: 24 }
console.log(person02); // { country: 'KOREA', gender: 'Male', age: 26 }

 

또한, spread를 사용하면 객체를 복사하거나

const person01 = {
    country : "KOREA",
    gender : "Female",
    age : 24
};

const person02 = {...person01};

console.log(person01); // { country: 'KOREA', gender: 'Female', age: 24 }
console.log(person02); // { country: 'KOREA', gender: 'Female', age: 24 }

 

객체를 합쳐 새로운 객체를 만들 수 있습니다.

const person = {
    country : "KOREA",
    gender : "Female"
};

const info = {
    name : "송우든",
    age : 24
};

console.log({...info,...person}); 
// 출력 : { name: '송우든', age: 24, country: 'KOREA', gender: 'Female' }

 

 

# Rest

rest는 spread와 비슷하게 보이지만 다른 문법인데요!

rest는 객체, 배열 그리고 함수에 마지막 매개변수 앞에  ... 을 붙여서도 사용할 수 있습니다.

아래는 객체에서 rest를 사용한 경우 예제입니다.

const person = {
    name : "송우든",
    age : 24,
    country : "KOREA",
    gender : "Female"
};

const {name,...rest} = person;

console.log(name); // 송우든 
console.log(rest); // { age: 24, country: 'KOREA', gender: 'Female' }

person 객체의 name 속성을 제외한 나머지 속성은 rest에 들어가게 되며 다음과 같은 출력 결과를 얻을 수 있습니다.

 

다음은 rest를 함수의 매개변수로 사용한 예제입니다.

const introduce = (name,...info) => { // ...뒤 rest가 아닌 다른 이름 사용 가능!
    console.log(`${name} : ${info}`);
};

introduce("송우든","female",24,"ComputerScience");
// 출력 : 송우든 : female,24,ComputerScience