1. Spread Operator

마침표를 연달아서 3개.. 찍으시면 그게 spread operator라는 문법입니다. 한글로는 펼침 연산자라고 번역가능한데, 무슨 역할을 하냐면 아주 쉽게 설명하자면, “괄호제거 해주는 연산자” 입니다.

1
let 어레이 = ['hello', 'world']
2
console.log(어레이) // [ 'hello', 'world' ]
3
console.log(...어레이) // hello world

3번줄처럼 spread operator를 붙여서 출력해보시면 괄호가 제거된 'hello', 'world'만 콘솔창에 출력됩니다. 문자에 붙이면 문자에 붙은 괄호를 제거해줍니다. 괄호가 어딨냐고요? 실은 문자도 array 자료형과 매우 비슷합니다. 안보이는 대괄호가 쳐져있다고 보시면 됩니다.

1
let 문자 = 'hello'
2
console.log(문자[0]) // h
3
console.log(문자[1]) // e

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

1
let 문자 = 'hello'
2
console.log(문자) // hello
3
console.log(...문자) // h e l l o

위 코드 셋째줄을 출력해보면 콘솔창에 h e l l o 라는 문자들이 출력됩니다. console.log('h', 'e', 'l', 'l', 'o') 이렇게 한거랑 똑같다고 보시면 됩니다. 그래서 spread를 문자에 붙이면 알파벳을 하나씩 펼쳐줍니다.

1.1 예시 : Array 합치기

1
let a = [1, 2, 3]
2
let b = [4, 5]
3
let c = [
4
  /* 여기엔 1,2,3,4,5 가 들어오게 만들려면? */
5
]

spread operator를 사용하시면 매우 쉽습니다.

• spread operator = 대괄호 제거

1
let a = [1, 2, 3]
2
let b = [4, 5]
3
let c = [...a, ...b]
4
console.log(c) // [ 1, 2, 3, 4, 5 ]

1.2 예시 : Array 복사

a라는 array를 복사해서 b를 만들고 싶으면,

1
let a = [1, 2, 3]
2
let b = a // a의 값을 가리키는 화살표를 대입
3

4
console.log(a) // [ 1, 2, 3 ]
5
console.log(b) // [ 1, 2, 3 ]

등호 = 를 이용하시면 쉽게 a에 있던 값을 b에 집어넣을 수 있습니다. ( [1,2,3] 복사완료!) 그런데 자바스크립트에선 복사를 이렇게 하시면 큰일납니다. 등호로 복사를 하시면, a와 b 변수는 [1,2,3]을 각각 따로 하나씩 가진게 아니라 값 공유가 일어납니다. 그래서 a라는 array를 수정하면 b도 똑같이 바뀌는 신기한 버그가 일어납니다. 왜나하면 값을 복사한게 아니라 [1,2,3] 값이 저기있어요~ 라고 가리키는 화살표를 복사하신 것입니다.

그래서 값을 공유하지 않고 각각 독립적인 값을 저장하도록, array를 복사하시려면,

1
let a = [1, 2, 3]
2
let b = [...a] // a값의 괄호를 제거해준 다음에 다시 괄호씌워서 배열 복사
3

4
console.log(a) // [ 1, 2, 3 ]
5
console.log(b) // [ 1, 2, 3 ]

spread를 이용해서 a값의 괄호를 제거해준 다음에 다시 괄호를 씌우는 겁니다. 이렇게 하면 a와 b 변수의 값 공유가 일어나지 않습니다.

1.3 예시 : Object 합치기/복사

object 두개를 합치고 싶으면,

1
let o1 = { a: 1, b: 2 }
2
let o2 = { c: 3 /* 그리고 o1에 있는거 전부... */ }

o2를 만들고 싶은데, o1에 있던 내용들을 그대로 가져다가 추가하고 싶습니다. spread operator는 대괄호 뿐만아니라 중괄호도 제거해줍니다.

1
let o1 = { a: 1, b: 2 }
2
let o2 = { c: 3, ...o1 }
3
console.log(o2) // { c: 3, a: 1, b: 2 }

o2라는 오브젝트를 출력해보면 a, b, c키값이 다 들어있습니다. 왜냐면 o1오브젝트를 spread 연산자를 이용해 괄호를 벗겨서 추가했기 때문입니다.

1.4 Object의 key값 중복

Object의 key값 중복이 발생하면,

1
let o1 = { a: 1, b: 2 }
2
let o2 = { a: 3, ...o1 }
3
console.log(o2) // { a: 1, b: 2 }

o2를 o1항목을 추가해서 만들고 싶은데 a라는 키값이 이미 있는겁니다. 이렇게 a라는 값이 중복이 발생하면 뒤에 오는 a가 이깁니다. 그래서 출력해보면 a : 1이라는 자료가 담겨져있습니다.

1.5 예시 : Array 모든 값 더하기

1
function 더하기(a, b, c) {
2
  console.log(a + b + c)
3
}
4

5
let 어레이 = [10, 20, 30]
6
더하기(...어레이)

2. Rest 파라미터

함수를 만들 때 ...이라는 기호를 파라미터 왼쪽에 추가가능합니다.

1
function 함수2(...파라미터들) {
2
  console.log(파라미터들)
3
}
4

5
함수2(1, 2, 3, 4, 5, 6, 7) // [1, 2, 3, 4, 5, 6, 7]

위 코드를 실행해보면 파라미터들이라는 변수를 출력해줍니다. 파라미터들이라는 변수는 모든 파라미터를 [] array 안에 담고 있습니다. 이게 바로 ES6 환경에서 쓸 수 있는 rest 파라미터입니다. 원하는 파라미터 왼쪽에 ...기호를 붙여주시면, “이 자리에 오는 모든 파라미터를 [] 중괄호로 감싸준 파라미터” 라는 뜻입니다.

2.1 응용

그 자리에 있는 파라미터를 [] 안에 감싸준다고 했으면, 다른 자리에 쓰면 어떻게 될까요?

1
function 함수2(a, b, ...파라미터들) {
2
  console.log(파라미터들) // [ 3, 4, 5, 6, 7 ]
3
}
4

5
함수2(1, 2, 3, 4, 5, 6, 7)

위 코드를 실행해보면 [3,4,5,6,7]이 출력됩니다. 첫 두개의 파라미터는 a, b로 쓰는데, a,b 그 뒤에 나오는 모든 파라미터는 중괄호에 감싸서 파라미터들이라는 array가 됩니다.

rest(나머지) 파라미터라는 뜻대로 나머지 부분에만 사용가능합니다. 그니까 항상 파라미터가 여러개면 rest는 항상 마지막 파라미터로 넣으셔야합니다.

1
function 함수2(a, ...파라미터들, b){
2
  console.log(파라미터들)
3
}

이렇게 사용하시면 에러난다는 소리입니다.

1
function 함수2(a, ...파라미터들, ...파라미터들2){
2
  console.log(파라미터들)
3
}

이것도 안됩니다. 2개 이상 사용할 수 없습니다.