Spread / Rest 문법

dev_jo·2023년 2월 9일
0

자바스크립트

목록 보기
4/4
post-custom-banner

객체나 배열 가공을 쉽게 할 수 있도록 도와주는 Spread, Rest 문법을 알아보자

Spread

이 문법을 이용하면 객체나 배열을 합치는데 유용하다.
기존 객체를 건드리지않고 새로운 객체를 만들 때 사용한다.

사용예시

// 객체 사용 예시
let name = {
	name : 'hongGilDong'
};

let address = {
	address : 'incheon'
};

let user = {
	...name, 
  	...address, 
  	age: 13
}; // Spread 문법으로 객체 합체

console.log(user); // {name: 'hongGilDong', address: 'incheon', age: 13}

// 배열 사용 예시
let number1 = [1,2,3];
let number2 = [4,5,6];

let number3 = [...number1, ...number2]; // Spread 문법으로 배열 합체

console.log(number3); // [1, 2, 3, 4, 5, 6]

Rest

이 문법을 사용할때 구조 분해 할당 문법이 함께 사용된다.
하나의 배열이나 객체를 둘 이상으로 나누고 싶을 때 사용한다.

사용예시

// 객체 사용 예시
let user = {
	name : 'hongGilDong',
  	address : 'incheon',
    age : 13
};

let { name, ...rest1 } = user; // user 객체의 name속성과 그 나머지 속성으로 나눔. 


console.log(name); // hongGilDong
console.log(rest1); // {address: 'incheon', age: 13}

// 배열 사용 예시
let numbers = [1, 2, 3, 4, 5, 6];

let [ number1, ...rest2 ] = numbers; 
// numbers 배열의 첫번째 요소와 첫번째를 제외한 나머지 요소로 나눔

console.log(number1); // [1]
console.log(rest2); // [2, 3, 4, 5, 6]

let [ number2, number3, ...rest3 ] = numbers; 
// numbers 배열의 첫번째, 두번째 요소와 그머지 요소로 나눔

console.log(number2); // [1]
console.log(number3); // [2]
console.log(rest3); // [3, 4, 5, 6]


profile
To be a better developer!!
post-custom-banner

0개의 댓글