Spread 란?
- 단어의 뜻과 동일하게, 펼친다는 뜻을 가진다.
- 배열이나 객체를 가진 변수 앞에
spread 연산자(...)을 사용하여 작성한다. - 배열이나 객체를 풀어서 인자로 전달하거나, 각각의 요소로 전달할 때 활용한다.
let arr = [1, 2, 3, 4, 5, 6]
console.log(arr) // (6)[1, 2, 3, 4, 5, 6], 배열그대로 리턴된다.
console.log(...arr) // 1 2 3 4 5 6, 배열이 아닌, 내부의 값을 풀어 리턴한다.let obj = {a : 1, b : 2}
let obj2 = {...obj, c : 3}
console.log(obj) // {a : 1, b : 2}
console.log(...obj) // 오류발생
console.log(obj2)// {a : 1, b : 2, c : 3}
// spread 연산자가 적용된 객체는 console.log() 로 출력 할 수는 없지만,
// 위처럼 다른 배열에 불러오는 방식으로는 사용 할 수 있다.- 배열이나 객체가 아니므로,
braket notation으로 접근 할 수 없다.
함수에서의 활용
- 함수의 인자로 사용할 경우
함수이름(...인자)의 형태로 작성한다. - 인자로
spread문법을 사용 할 경우 배열 값의 순서대로 값이 함수의 매개변수에 맞게 나뉘어 입력된다.
function sum (a, b, c){
return a + b + c
}
let num = [1, 2, 3]
sum(...num) // 6, sum(1, 2, 3) 과 같다.배열과 객체에서의 활용
spread문법을 활용하면 배열과 객체 내부의 값을 쉽게 가져 올 수 있다.spread를 이용하여 작성하면 배열과 객체의 내부의 값을 풀어서 가진 값이 된다.- 이를 이용하여 어떤 배열과 객체들을 가져와 한데 묶거나, 내부에 특정한 배열과 객체만 추가하는 것이 가능하다.
// 배열에서의 spread
let arr1 = [1, 2, 3]
let arr2 = ['a', 'b', 'c']
let arrMerge = [...arr1, ...arr2] // [1, 2, 3, 'a', 'b', 'c']
let arrAdd = [...arr1, 4, 5, 6] // [1, 2, 3, 4, 5, 6]
// spread 를 이용하여 반복적으로 가져오는 것도 가능하다.
let arrRpt = [...arr1, ...arr1] // [1, 2, 3, 1, 2, 3]spread를 통해 배열을 복사 할 수도 있다.
// 배열 복사
let arr1 = [1, 2, 3]
let arr2 = [...arr1] // [1, 2, 3]→ 이때는, 주소값이 아니라 내부의 값을 가져와 새로운 배열에 넣는 것이기 때문에 arr2 를 수정해도 arr1 이 바뀌지 않는다.
→ slice() 와 유사
// 객체에서의 spread
let obj1 = {a : 1, b : 2,}
let obj2 = {c : '가', d: '나'}
let objMerge = {...obj1, ...obj2} // {a : 1, b : 2, c : '가', d : '나'}
let objAdd = { ...obj1, f : 'hi', g : 'bye'} // {a : 1, b : 2, f : 'hi', g : 'bye'}
// key가 중복되는 경우
.png)
let conflict = {...arr1, a : '가'} // { a : '가', b : 2 }, a가 재할당 됐다.- 객체의
key가 중복되는 경우 늦게 작성된 값으로 재할당되니 이점을 유의한다.
// 객체 복사
let obj1 = {a : 1, b : 2}
let obj2 = {...obj1}→ 배열과 마찬가지로 주소가 아닌 값을 복사한다.
+
spread로 객체 혹은 배열을 복사하는 경우 내부에 객체 혹은 함수가 존재한다면, 내부의 객체, 배열을주소값으로 불러오게되어 약간 모자른 깊은 복사가 된다.
