JavaScript ) Spread Operator

윤보라·2022년 11월 21일

자바스크립트

목록 보기
4/11

Spread Operator

: 기본적으로 ‘모든 괄호를 없애준다’고 이해하자!

  1. 배열에 사용 시
const array = [A,B,C]
console.log(...array)
// A B C (괄호 없애고 출력됨!!)
  1. 문자열에 사용 시
const name = 'bora'
console.log(...name) 
// b o r a (하나씩 따로 펼쳐준다)
= console.log('b','o','r','a')

Spread Operator 사용 예제

1. 배열 합치기

let a = [1,2,3]
let b = [4,5]
let c = [...a, ...b]
console.log(c)
// [1,2,3,4,5]

2. 배열 깊은복사

let a = [1,2,3]
let b = a  // 이렇게 쓰면 a와 b의 값이 변경될 때 둘이 같이 바뀜
let c = [...a]
=> c의 방법으로 값이 공유되지 않도록 깊은복사가 가능하다

3. 객체 합치기

let object1 = { name: 'bora', age: 20 };
let object2 = { catname: 'ddubi', ...object1 };
console.log(object2);
// {catname: 'ddubi', name: 'bora', age: 20}

참고 ) 키값 중복이 발생하면, 가장 뒤쪽에 있는 키값이 적용된다.

얕은 복사시에 많은 버그를 유발할 수 있으므로 간편한 방법인 Spread Operator를 사용해 꼭 깊은 복사하는 습관을 들이자!

profile
Front-End 개발자

0개의 댓글