.png)
스프레드 연산자란?
반복가능한 객체(Iterable Object) = 배열, 문자열, 객체 등등
스프레드 연산자 = 반복가능한 객체를 개별 요소로 만들어 주는 기능
문자로 간단하게 정리해보았습니다.
하지만, 역시나 잘 이해가 되지 않습니다.😹
예제로 살펴볼까요?
//Array
var arr1 = [1,2,3]
var arr2 = [...arr1, 4,5,6]//1,2,3,4,5,6
//String
var str1 = "hello world"
var str2 = [...str1] // h,e,l,l,o, ,w,o,r,l,d위의 예제에서 알 수 있듯이 배열이나 문자열을 개별요소로 만들어 줌을 알 수 있습니다.
실제 Javascript 코드 환경에서 어떻게 활용할 수 있을지 알아 봅시다.
1. 배열에서의 Spread 연산자
1-1. 배열병합(Array Combination)
두개의 배열을 하나로 합치고 싶습니다. 그럼 어떻게 해왔을까요?
concat메서드를 활용해왔습니다.
하지만 spread연산자를 활용할 수 있습니다.👍
//이전 방식
var arr1 = [1,2,3]
var arr2 = [4,5,6]
var arr = arr1.concat(arr2) //[1,2,3,4,5,6]
//Spread Operator
var arr1 = [1,2,3]
var arr2 = [4,5,6]
var arr= [...arr1, ...arr2] //[1,2,3,4,5,6]
//Spread Operator 활용 version
var arr1 = [1,2,3]
var arr2 = [4,5,6]
var arr1.push(...arr2)
console.log(arr1) // [1,2,3,4,5,6]
//Spread Operator 활용 version2
var arr1 = [1,2]
var arr2 = [0, ...arr1, 3, 4] // [0,1,2,3,4]
1-2. 배열복사(Array Copy)
JavaScript에서 배열을 새로운 변수에 할당하더라도 기존의 배열을 참조합니다.
즉, 새로운 배열을 Update해도 원래 본 배열이 바뀝니다.
var arr = ['React','Vue']
var newArr = arr
newArr.push('Angular')
console.log(newArr) // 'React', 'Vue', 'Angular'
console.log(arr) // 'React', 'Vue', 'Angular'여기서 기존의 배열 arr은 원래의 상태로 유지하고 싶은데 오염이 된 것을 알 수 있습니다.
배열 복사하기
물론 es5방식으로 두 가지 방법이 있습니다.
//slice 활용하기
var arr = ['React','Vue']
var newArr = arr.slice();
newArr.push('Angular')
console.log(newArr) // 'React', 'Vue', 'Angular'
console.log(arr) // 'React', 'Vue'
//map 활용하기
var arr = ['React','Vue']
var newArr = arr.map((item) => item)
newArr.push('Angular')
console.log(newArr) // 'React', 'Vue', 'Angular'
console.log(arr) // 'React', 'Vue'Spread 연산자를 활용하면 훨씬 더 깔끔 명료 해집니다!👍
var arr = ['React','Vue']
var newArr = [...arr] //복사 완료
newArr.push('Angular')
console.log(newArr) // 'React', 'Vue', 'Angular'
console.log(arr) // 'React', 'Vue'하지만, 여기서 이루어지는 복사는 얉은 복사(Shallow Copy)입니다.
이는 배열안에 객체가 있을 경우엔 객체복사가 이루어지지 않습니다.
var arr = [{stack1: 'React', stack2: 'Vue'}]
var newArr = [...arr]
var arr[0].stack3 = 'Angular'
console.log(newArr) // 'React', 'Vue', 'Angular'
console.log(arr) // 'React', 'Vue', 'Angular'원배열이 오염당했음을 확인할 수 있습니다.
2. 함수에서의 Spread 연산자
2-1. Rest Parameter
함수의 선언 및 호출 시 매개변수(Parameter)에 Spread 연산자 형태로 적어주는 것을 Rest Parameter라고 합니다.
그럼 Rest Parameter의 장점은 무엇인가요?🤔
Parameter로 받는 값을 그대로 배열형태로 저장합니다.
즉, Parameter의 갯수를 정확히 정하지 않으며 깔끔한 함수 표현이 가능합니다.
예시 : 입력한 값을 모두 더하는 함수 만들기
여기서 매개변수를 정확히 몇개인지 규정할 순 없습니다.
const add = (...array) => {
let sum = 0;
for( item of array){
sum += item
}
return sum;
}
console.log(add(1))//1
console.log(add(1,2))//3
console.log(add(1,2,3))//6Spread연산자는 다른 일반 매개변수와 함께 쓰일 수 도 있습니다.
const addWhatever = (method, ...array) => {
if(method === "add"){
let sum = 0;
for( item of array){
sum += item
}
return sum
}
else if(method === "multiply"){
let sum = 1;
for( item of array){
sum *= item
}
return sum
}
}
console.log(addWhatever("add",1,2,3)) //6
console.log(addWhatever("multiply",1,3,5))//15단, 여기서 주의할점!
Spread 연산자는 제일 마지막 파라미터가 되어야 합니다.
2-2. 함수 호출 인자로 사용
Spread 연산자를 사용하면 배열인 상태로 함수 호출 시 인자로 사용할 수 있습니다.
var arr1 = [1,3,5]
Math.min(...arr1) //1
//Extra 가장 어려운 난이도 값 구하기
var stacks = [{name: 'Vue', level: 1},
{name: 'React', level: 2},
{name: 'Angular', level: 3}
]
var hardLevel = Math.max(...stacks.map((item) => item.level))
console.log(hardLevel) // 33. 객체에서의 Spread 연산자
3-1. 객체 복사 or 업데이트
//객체 복사
var object = { name: '철수', gender: 'male'};
var object2 = { ...object, age: 20};
console.log(object2)//{name: '철수', gender:'male', age:'20'}
console.log(object)//{name: '철수', gender:'male'}
//객체 업데이트
object = { ...object, gender: 'female'}
console.log(object)//{name: '철수', gender:'female'}