일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- dependency injection
- Excel
- Singleton
- Java
- BEAN
- 싱글톤
- Stateless
- Kotlin
- di
- Setter
- javascript
- DB
- Security
- HTTP
- 의존성 주입
- Repository
- HTTP 메서드
- VUE
- thymeleaf
- js
- Vue.js
- 로그인
- vue-cli
- vuex
- JPA
- Spring
- 캐시
- 프로토타입
- cache
- 라이프 사이클
- Today
- Total
jhhan의 블로그
Spread Operator ( ... ) 본문
이번 글에서는 Spread Operator에 대해서 알아보겠습니다.
아마 spread operator라는 단어를 모를 수도 있습니다.
하지만 js 코드를 보다보면 "...list " 라는 형식으로 쓰여진 변수들을 간혹 찾아볼 수 있습니다.
이렇게 ... 이 붙어있는 것을 spread operator 라는 문법으로 불린다고 합니다.
쉽게 설명하면 '괄호제거 연산자'라고 볼 수 있습니다.
예시를 한번 보시죠
let arr = ['a', 'b', 'c'];
console.log(arr);
console.log(...arr);
js 코드를 위와 같이 작성한 후 실행을 한다면
라는 결과를 얻을 수 있습니다.
- console.log(arr); : 배열 형태로 출력합니다.
- console.log(...arr); : []가 제거되고 값만 출력됩니다.
- 이렇게 값만 출력되는아주 단순한 문법입니다.
다른 예시도 있습니다.
let str1 = 'hello';
console.log(...str1);
console.log(str1[0]);
console.log(str1[1]);
코드 작성 후 실행해 본다면
라는 결과를 볼 수 있습니다.
문자 형식의 변수에 적용한다면 알파벳을 하나씩 나열한다는 것을 볼 수 있습니다.
문자인 경우에는 조금 예외적으로 알아두면 될 것 같습니다.
그럼 spread operator의 장점은 뭐가 있을지 알아보겠습니다.
1. array의 합치기 & 복사
2개의 array를 1개의 array로 만들어야 할 때
let a = [1, 2, 3];
let b = [4, 5, 6];
let c = [...a, ...b];
console.log(c);
그리고 코드 실행을 한다면
라는 결과를 얻을 수 있습니다.
- a 와 b 배열이 있고 c 배열에 두 개를 합치려고 했습니다.
- [...a, ...b]를 통해서 손쉽게 배열이 합쳐집니다.
다음은 array를 복사할 때 입니다
let a = [1, 2, 3];
let b = a;
let c = [...a];
a[1] = 7;
console.log(a);
console.log(b);
console.log(c);
그리고 실행을 하면
인 결과를 얻을 수 있습니다.
- a, b, c 배열로 진행합니다.
- b 배열처럼 복사를 한다면 a 배열의 값을 바꿀 때 b 배열의 값이 같이 바뀌는 것을 알 수 있습니다.
- 이는 b 배열이 복사된 것이 아니라 a 배열과 값 공유를 하기 때문입니다.
- 그렇기 때문에 배열 복사를 할 때는 저런 코드를 쓰면 안 됩니다.
- spread operator를 사용해서 c 배열처럼 만든다면 정상적인 복사가 일어난 것을 알 수 있습니다.
- 이렇게 배열 복사를 하면 원본 값과 별개로 사용할 수 있게 됩니다.
- 이렇게 복사하는 것을 deep copy라고 부릅니다.
(deep copy에 대해서는 설명을 따로 적지는 않겠습니다.)
2. 오브젝트 형 합치기
지금까지 array 형태에서만 사용해봤지만
spread operator는 오브젝트 형에서 사용해도 됩니다.
let a = {a : 1};
let b = {b : 2, c : 3};
let c = { ...a, ...b };
console.log(c);
실행을 해본다면
라는 결과를 볼 수 있습니다.
이것을 통해 c 오브젝트에 a 와 b 오브젝트가 합쳐진 것을 확인할 수 있습니다.
혹시 겹치는 key에 대해서는 어떻게 처리할까요?
let a = {a : 1, b : 2};
let b = {a : 3, ...a};
let c = {...a, a : 3};
console.log(b);
console.log(c);
나중에 오는 key의 value 값으로 덮어쓰는 것을 확인할 수 있습니다.
3. 파라미터 형태로 들어가야 할 때
예시부터 보겠습니다.
function plusAction(a,b,c) {
console.log(a + b + c);
}
plusAction(3,4,6); // 13
let arr = [2,6,8];
- plusAction이라는 함수를 하나 만들었습니다.
- 파라미터 3개를 넣으면 결과가 잘 출력되는 것을 확인할 수 있습니다.
- 이 때, Array가 있으면 어떻게 해야할까요
function plusAction(a,b,c) {
console.log(a + b + c);
}
let arr = [2,6,8];
plusAction(arr[0], arr[1], arr[2]);
plusAction(...arr);
- plusAction(arr[0], arr[1], arr[2]); : spread operator를 몰랐다면, 그리고 없었을 때에는 이렇게 썼을 것입니다.
- plusAction(...arr); : spread operator를 통해 변수 3개를 인식해서 동일한 결과를 보여줍니다.
spread operator를 알고 있다면 코드 작성이 조금 더 수월해질 수 있을 것 같습니다.
만약 파라미터보다 배열이 더 길면 어떨까요?
function plusAction(a,b,c) {
console.log(`a = ${a}, b = ${b}, c = ${c}`);
console.log(a + b + c);
}
let arr = [2,6,8,5,1];
plusAction(...arr);
아까의 코드를 조금 변형해봤고, 결과입니다.
- 동일한 결과가 나오는 것을 확인할 수 있습니다.
- 그리고 각 파라미터에도 우리가 예상한 값이 들어간 것을 확인할 수 있습니다.
- 그리고 뒤에 더 있는 값들은 무시가 되는 것을 알 수 있습니다.
그러면 만약 파라미터보다 배열이 더 짧다면 어떨까요?
function plusAction(a,b,c) {
console.log(`a = ${a}, b = ${b}, c = ${c}`);
console.log(a + b + c);
}
let arr = [2,6];
plusAction(...arr);
아까의 코드를 또 조금 변형했고, 결과입니다.
- 첫번째, 두번째 파라미터는 인식했지만, 세번째 파라미터는 undefined로 표시됩니다.
- 그리고 그에 해당하는 결과도 우리가 원하는 결과가 나오지 못했습니다.
- 배열이 짧다면 문제가 있다는 것을 확인할 수 있습니다.
배열이 파라미터 형태로 들어갈 때는 파라미터 개수와 같거나 더 많아야 정상 작동한다는 것을 알 수 있었습니다.
이렇게 spread operator ( ... ) 에 대해 알아봤습니다.
가끔씩 사용하는 것을 봤고, 이거에 대해 검색하는 것도 약간 어려웠는데,
이렇게라도 알고 정리하게 되었네요.
이제 실전에서 잘 써먹으면 될 것 같습니다
이것으로 spread operator에 대한 글을 마치겠습니다.
출처: 코딩애플 - 쉽게 이해하는 JavaScript 객체지향 & ES6 신문법
'Javascript' 카테고리의 다른 글
extends & super (1) | 2024.01.06 |
---|---|
Constructor & Prototype (0) | 2024.01.05 |
문자열 다루기 (0) | 2023.10.20 |
javascript - this에 관하여(2) (2) | 2023.10.18 |
javascript - this에 관하여(1) (0) | 2023.10.17 |