모든 괄호를 없애주는 마법의 ... Spread 연산자
1. Array를 합치기 / Copy하기
2. Object 합치기 / Copy하기
요약
함수의 '소괄호' ()
Object '중괄호' 내 { }
Array '대괄호 내' [ ]
이 3가지 괄호 안에서 사용해야 한다.
번외)
Object 값 중복되면 가장 뒤에 있는 중복 되는 값을 적용함
var obj = { a : 1, b : 2}
var obj2 = { ...obj, a : 2}
=> obj2 = { a : 2, b : 1}Spread is ...
spread는 '...'으로 자바스크립트 '코드'에서 표현한다.
기본적으로 무언가 촤악, 화아알짝 펼치고 싶으면
'...' 을 사용하면 된다.
Array를 펼쳐볼까?
Array를 펼쳐보면서 동작원리를 알아보자
var arr = ['hello','world']
console.log(...arr) // 'hello', 'world'그냥 펼치고 싶으면 '앞'에 ...을 3개만 붙입시다.
console결과와 같이 배열이 벗겨지면서 문자열 2개가 출력 되는 것을 알 수 있다.
...은 역시 할말 없을 때도 편히 쓰이는데 Spread도 쉽다.
문자열도 펼칠 수 있다.
문자열도 어쨋건 배열 아닌가??
var str = 'hello world'
console.log(...str.length)
// 'h' 'e' 'l' 'l' 'o' ' ' 'w' 'o' 'r' 'l' 'd'근데 이걸 어디다 사용할까?
1. Array를 합치기 / Copy하기
Array를 합쳐보자
Array 두개를 합치고 싶을 때, copy 하고 싶을 때가 있다.
있다.
증말루 코딩 하다보면 '굳이?'라는 단어가 떠오르면 '반드시'라는 단어로 바뀐다
var arr1 = [1,2,3];
var arr2 = [4,5];
var arr3 = [...arr1,...arr2]
var arr4 = [...arr2, ...arr1] //반대로하고 싶으면
console.log(arr3) //[1,2,3,4,5]Array를 Copy 해보자
var 집문서들 = ['강남집','영등포집'];
var 넘겨줄Copy본 = 집문서들;
넘겨줄Copy본[0] = '모르는사이에 팔려감';
console.log(집문서들) // ['모르는사이에 팔려감','영등포집']
console.log(넘겨줄Copy본) //['모르는사이에 팔려감','영등포집']▲ 위 코드와 같이 했다면, 집문서들 다 날려버리게 된다..
나중에 여기에 링크를 걸겠지만 Array/Object는 참조형 데이터 타입이기 때문에 값 공유가 일어나기에
넘겨줄Copy본 변수의 값을 수정하면 원본인 집문서들의 값도 수정 된다.
따라서...
Spread를 사용하여 복사해보자
var 집문서들 = ['강남집','영등포집']
//spread를 이용하여 대괄호를 벗겨주고 다시 채우면...
var 넘겨줄Copy본 = [...집문서들];
넘겨줄Copy본[0] = '수정불가능한 Copy본'
console.log(집문서들) // ['강남집','영등포집']
console.log(넘겨줄Copy본)//['수정불가능한 Copy본','영등포집']
2. Object를 합치기 / Copy하기
Object를 합쳐보자
var obj1 = { a : 1, b : 2 };
//spread 연산자 사용해서
var obj2 = { c : 3, ...obj1 };
console.log(obj2)//{ c : 3, a : 1, b : 2 }Spread는 대괄호 뿐만 아니라 중괄호도 없애주기에
쉽게 합칠 수 있습니다.
Object를 Copy 해보자
Object copy도 Array와 똑같은 원리이다.
var obj1 = { name : 'kim' }
// spread연산자 사용하여
var obj2 = {...obj1}
obj2.name = 'choi'
console.log(obj1) // name :'kim'
console.log(obj2) // name : 'choi'정말 쉽게 Copy가 된다.
그러나
// 중첩된 object || Array
var obj = {
name :'choi',
obj2 : {
age :21
}
}
var arr = [1,2,3,[2,3,4],5]▲ 위와 같이 중첩된 Object / Array는 할 수 가 없다.
대신 다음 완전 DeepCopy에 대해 어떻게 하는지 알아보자
3. array를 파라미터형태로 집어넣고 싶을 때 씁니다.
var arr = [1,2,3]
function 더하기(a,b,c){
console.log(a+b+c)
}
더하기(arr);어레이라는 자료 안에 있는 모든 숫자 10,20,30을 더하기() 함수의 파라미터로 집어넣으려면 어떻게...
더하기(10,20,30)
// 또는
더하기(arr[0],arr[1],arr[2])이렇게 직접 hardCoding 해야 하겠지만 귀찮다...
이렇게 귀찮을 땐
####Spread 연산자를 사용해보자
var arr = [1,2,3]
function 더하기(a,b,c){
console.log(a+b+c)
}
더하기(...arr); // spread를 이용한 요즘방식
더하기.apply(undefined, arr)// 옛날 방식spread 문법이 없을 땐 apply함수를 이용했는데, apply 함수를 알고 싶다면 apply함수를 클릭해주쇼
이렇듯 spread가 가져다주는 편리함이란
이루 말할 수 없다...
모든걸 없애거나 펼쳐버리는 이 쉬원함~~😘
번외) - Object를 합칠 때... 값이 중복되면?
Q. 오브젝트의 key값 중복이 발생하면 어떻게 될까?
var obj = { a : 1, b : 2}
var obj2 = { a : 2, ...obj}
console.log(obj2) // {a: 1, b: 2} A. 자바스크립트는 값이 중복되면 가장 뒤에 있는 object 값을 적용
Q. 그렇다면 중복되는 값을 앞으로 보내면??
var obj = { a : 1, b : 2}
var obj2 = { ...obj, a : 2}
console.log(obj2) // {a: 2, b: 2}A. 최종값이 a 가 2 이니까 a : 2 가 최종으로 됨
