본문 바로가기

javascript

javascript spreed 와 rest

spreed, rest !

//spreed ...써서 사용하며 기존 배열이나 객체를 복사 할때 사용된다.
let arr1 = [1, 2, 3, 4, 5];
let arr2 = [5, 6, 7, 8, 9];
let array = [...arr1, ...arr2];
console.log(array); //[1, 2, 3, 4, 5, 6, 7, 8, 9]

const person1 = {
   name: 'yeongoo'
};
const person2 = {
  ...person1,
  age: 31
};
const person3 = {
  ...person2,
  //age: 32, 있는 값을 넣으면 덮어 쓰게 된다.
  son: 'eden'
};
console.log(person1); // {name: 'yeongoo'}
console.log(person2); // {name: 'yeongoo', age: 31}
console.log(person3); // {name: 'yeongoo', age: 31, son: 'eden'}

//rest ...써서 사용하며 정해지지 않은 수를 배열로 받아온다.
function num(...rest){
  for(let i = 0; i < rest.length; i++){
    console.log(rest[i]); // 1, 2, 3, 4, 5, 6, 7 이 출력 된다.
  }
};
num(1,2,3,4,5,6,7);

// 배열, 객체 추출도 가능 하다.
let array = [1, 2, 3, 4, 5]
let [a , ...rest] = array;
console.log(a); // 1
console.log(rest); // [2, 3, 4, 5]

let person = {
   name: 'yeongoo',
   age: 31,
   son: 'eden'
}
let {name, ...rest} = person;
console.log(name); // 'yeongoo'
console.log(rest); // {age: 31, son: 'eden'}

//주의사항은 ...은 항상 마지막에 와야한다. 아래와 같이 사용할 수 없다.
function num(...rest, a){ }; 
let [...rest, a];
let {...rest, son}; 

'javascript' 카테고리의 다른 글

javascript callback함수  (0) 2020.10.08
javascript 동기적처리와 비동기적 처리  (0) 2020.10.08
javascript 반복문 !  (0) 2020.10.08
javascript 배열과 내장함수 !  (0) 2020.10.07
javascript getter 와 setter !  (0) 2020.10.07