[ES6]Spread Operator 1.

ES6 Spread Operator 라는 문법을 알아봅시다

 

 

그냥 마침표를 연달아서 3개... 찍으시면 그게 spread operator라는 문법입니다.

한글로는 펼침연산자이렇게 번역가능한데 무슨 역할을 하냐면 아주 쉽게 설명하자면 "괄호제거 해주는 연산자" 입니다. 

Array에 붙여보도록 합시다. 

 

그럼 어레이라는 array에 붙어있던 괄호를 제거해줍니다.

▲ 3번줄처럼 spread operator를 붙여서 출력해보시면 괄호가 제거된 'hello', 'world'만 콘솔창에 출력됩니다. 

이게 spread operator의 기능 끝입니다. 동작원리는 쉬워요.

 

 

문자에 붙이면 문자에 붙은 괄호를 제거해줍니다.

괄호가 어딨냐고요? 실은 문자도 array 자료형과 매우 비슷합니다. 안보이는 대괄호가 쳐져있다고 보시면 됩니다. 

(실제로 비슷한건 아니고 느낌이요느낌)

 

 

문자를 이런식으로 array처럼 출력할 수 있다는거 아셨습니까.

hello라는 문자에도 뭔가 대괄호 쳐있는 ['h', 'e', 'l', 'l', 'o'] 느낌이 납니다. 

실제로 그렇다는건 아니고 느낌이요 느낌

그럼 문자에 spread를 붙이면 어떻게 될까요?

대괄호를 제거해줍니다. 

 

console.log('h', 'e', 'l', 'l', 'o') 이렇게 한거랑 똑같다고 보시면 됩니다.

그래서 spread를 문자에 붙이면 알파벳을 하나씩 펼쳐줍니다.

(혹은 그냥 문자의 안보이는 대괄호를 제거해준다고 외우세요)

 

 

 

 

 

 

이걸 어디에 쓰냐면 1. Array 합치기/복사에 매우 자주 씁니다.

 

여러분 array 두개를 합치고 싶으면 어떻게 합니까.

 

옛날엔 뭐 이상한 방식을 마구 썼는데 spread operator를 사용하시면 매우 쉽습니다.

spread operator가 뭐랬죠? 대괄호 제거해주는거라면서요.

그럼 이렇게 써볼게요.

 

이렇게 한 뒤에 c라는 어레이를 출력해보면 [1,2,3,4,5]가 되어있습니다.

... 연산자를 이용해서 괄호를 없앤 a와 b를 집어넣는다는 소리입니다. 

어레이 합치기 완성입니다. 매우 쉽습니다. 

그럼 어레이 복사의 경우도 알아봅시다. 

 

 

 

▼ a라는 어레이를 복사해서 b를 만들고 싶으면 보통 이렇게 하지않을까요

등호 = 를 이용하시면 쉽게 a에 있던 값을 b에 집어넣을 수 있습니다. ( [1,2,3] 복사완료!)

그런데 자바스크립트에선 복사를 이렇게 하시면 큰일납니다. 

등호로 복사를 하시면 a와 b 변수는 [1,2,3]을 각각 따로 하나씩 가진게 아니라 값 공유가 일어납니다. 

그래서 a라는 array를 수정하면 b도 똑같이 바뀌는 신기한 버그가 일어납니다. 

 

object나 array 들은 primitive type data가 아닌 reference type data이기 때문이다. 이는  나중에 다른 포스팅에서 자세히 살펴보겠습니다.

 

때문에 위와 같이 하면 참조하는 메모리주소가 동일한 shallow copy가 일어나게된다.

 

 

그래서 값을 공유하지 않고 각각 독립적인 값을 저장하도록

array를 복사하시려면 옛날엔 이상한 방법을 많이 썼는데 

요즘은 spread를 이용하시면 되겠습니다. 

 

spread를 이용해서 a값의 괄호를 제거해준 다음에 다시 괄호를 씌우는 겁니다.

그렇게 하시면 아까처럼 a와 b 변수의 값 공유가 일어나지 않습니다. 

위와 같은형태는 참조하는 메모리 주소가 달라지기 때문에  deep copy라고도 합니다.

 

 

 

 

 

이걸 어디에 쓰냐면 2. Object합치기/복사에 매우 자주 씁니다.

 

여러분 object 두개를 합치고 싶으면 어떻게 합니까.

 

o2를 만들고 싶은데 o1에 있던 내용들을 그대로 가져다가 추가하고 싶습니다.

그럼 어떻게 해야되냐면 고민하지말고 spread operator를 떠올리시면 됩니다. 

이 연산자는 대괄호 뿐만아니라 중괄호도 제거해줍니다. 

그래서 이렇게 쓰시면 

 

o2라는 오브젝트를 출력해보면 a, b, c키값이 다 들어있습니다.

왜냐면 o1오브젝트를 spread 연산자를 이용해 괄호를 벗겨서 추가했기 때문입니다. 

오브젝트 shallow copy도 비슷한 방식으로 합니다.

어쨌든 결론은 오브젝트나 어레이나 spread를 유용하게 사용하실 수 있습니다. 

 

 

 

 

참고1.

object의 key값이 중복이 발생하면 어떻게 될까요?

o2를 o1항목을 추가해서 만들고 싶은데 a라는 키값이 이미 있는겁니다.

이렇게 a라는 값이 중복이 발생하면 무조건 뒤에 오는 a가 이깁니다. 

그래서 출력해보면 a : 1 이라는 자료가 담겨져있습니다.

 

 

 

 

참고2.

spread 연산자는 함수소괄호, 오브젝트 중괄호내, 어레이 대괄호내에서 보통 사용하셔야합니다.

다른 곳에서 그냥 썼다간 에러가날 수 있습니다. 

 

 

 

 

 

 

출처 : 코딩애플의 매우쉽게 이해하는 JavaScript 객체지향 & ES6 신문법