나머지 매개변수, 전개 구문(Rest parameters, Spread syntax) - 자바스크립트 중급 강좌 #10

자바스크립트 중급 강좌 #10 나머지 매개변수, 전개 구문(Rest parameters, Spread syntax)

 

인수 전달

- 자바스크립트에서 함수의 인수는 갯수 제한이 없다.

- name 하나만 인수로 받는 함수 showName 을 만들었다고 했을 때,

Mike 하나만 인수로 전달하는 것이 아니라, Mike 와 Tom 두 개를 같이 인수로 전달해도 오류는 나지 않는다.

이 경우 Mike만 콘솔에 찍히게 된다.

인수로 아무것도 전달하지 않아도 오류는 나지 않는다. 단, undefined 가 찍힌다.

 - 이러한 특징을 갖는 '함수의 인수'에 접근하는 방법은 2가지가 있다.

첫째, arguments 를 이용하는 방법

둘째, 나머지 매개 변수를 이용하는 방법

 

arguments

- arguments를 통해 함수로 넘어 온 모든 인수에 접근할 수 있다. 

- 함수 내에서 이용 가능한 지역 변수이다.

- length 와 index를 사용할 수 있기 때문에 배열이라고 생각할 수 있지만, 사실은 Array 형태의 객체이다.

- Array 형태의 객체는 length 와 index 와 같은 속성은 갖고 있지만, map 이나 forEach 같은 배열의 내장 메서드는 사용할 수 없다.

- arguments.length 는 받은 인수의 갯수를 의미한다. => 예시에서는 2

- 첫번째 인수는 Mike, 두번째 인수는 Tom 이다.

 

나머지 매개변수 (Rest parameters)

- es6 인 경우 가급적 나머지 매개변수의 사용을 권장한다.

- 나머지 매개변수는 정해지지 않은 갯수의 인수를 배열로 나타낼 수 있게 해준다.

- 점 세 개를 찍고 배열 이름을 names 라고 정해주었다.

그러면 names 라는 배열 안에 전달되는 인수들이 들어가게 된다. 

아무것도 전달하지 않으면 undefined 가 아니라, 빈 배열이 된다.

 

나머지 매개변수를 활용해서 함수 만들기

- 전달받은 모든 수를 더하는 함수를 만든다고 했을 때, 어떤 때는 3개가 전달되고 어떤 때는 10개가 전달되는 식으로 매번 전달된 수의 갯수가 다르다면 어떻게 해야 할까?

- 나머지 매개변수는 arguments 와 달리, forEach 같은 배열 메서드들도 사용 가능하다. 해당 예제에서는 forEach를 사용했다. 물론 for 문을 활용해서도 가능하다.

- 배열의 메서드 중 하나인 reduce를 활용해서도 해결 가능하다.

 

나머지 매개변수를 활용해서 생성자 함수 만들기

- 이름, 나이, 스킬을 받아서 user 객체를 만든다고 했을 때, 스킬의 갯수에는 제한을 두지 않고 받도록 생성자 함수를 만들어보자.

- name 과 age는 일반적인 변수로 받았고, skills 는 갯수를 정확히 정해두지 않았기 때문에 나머지 매개변수로 받는다.

- 주의해야 할 점: 나머지 매개변수는 반드시 맨 마지막에 위치해야 한다.

name, age, ...skills 는 괜찮지만

name, ...skills, age 는 안 되고,

name, age, ...skills, etc 도 당연히 안 된다.

 

전개 구문(Spread syntax) : 배열

-  '...arr1' 은 [1,2,3] 을 풀어서 쓴 것이고, '...arr2' 는 [4,5,6] 을 풀어서 쓴 것이다.

- 중간에 넣는 것도 가능하다.

- 배열 중간에 새로운 요소를 넣거나 병합하는 작업들은 push, splice, concat 등등을 활용해서 할 수는 있지만 꽤 복잡한 작업이었는데, 전개 구문을 활용하면 간단하게 해결할 수 있다.

 

전개 구문(Spread syntax) : 객체

- 객체도 마찬가지로 사용 가능하다.

 

전개 구문 : 복제

- user2 의 name 을 바꾸어도, user의 name에는 영향을 미치지 않는다. 전개 구문을 통해 user에서 분리된 user2를 복제했기 때문이다.

 

전개 구문 활용해서 배열 작업하기

- arr1 을 [4, 5, 6, 1, 2, 3] 으로 만들려면,

arr2 ([4, 5, 6])를 먼저 역순으로 만들어주고 ([6, 5, 4])

그 다음 [1, 2, 3] 에 하나씩 unshift를 해준다. [6, 1, 2, 3] => [5, 6, 1, 2, 3] => [4, 5, 6, 1, 2, 3]

- 이렇게 하면 되긴 되지만 꽤 복잡해 보인다.

- 반면, 전개구문을 활용하면 이렇게 한 줄로 간단하게 해결할 수 있다.

 

전개 구문 활용해서 객체 작업하기

- user 객체에 필요한 정보들을 합친다고 했을 때, 다음과 같이 복잡한 과정을 거친다.

먼저, Object.assign 을 통해 객체 틀을 만들어줘야 하고,

skills 에 fe 와 lang 배열들을 넣어줘야 한다.

- 반면, 전개구문을 활용하면 정말 간단하게 해결할 수 있다.