본문 바로가기
개발자의 공부방/Frontend

javascript] 함수 파라미터에서의 spread 연산자와 rest연산자.

by 쥬니준 2021. 12. 18.
728x90
반응형

함수에서 사용되는 스프레드 연산자와 rest연산자를 학습해본다.

function  sum(a, b, c, d, e, f, g) {
  return a + b + c + d + e + f + g;
}

console.log(sum(1,2,3,4,5,6))

위의 코드는 예를 들어서 sum이라는 함수에 파라미터가 총 7개가 있는데

만약에 sum함수에 파라미터를 6개만 담는다면? 과연 콘솔 결과에는 어떻게 표시가 될까?

 

NaN 이라고 뜬다. 이유는 하나가 undifiend기 때문이다.

 

sum함수의 파라미터 갯수와 다른 갯수를 넣었을 때, NaN이라고 안뜨게 하려면 어떻게 해야할까?

많은 방법이 있겠지만 if를 사용해서 하나하나 처리하는 방법이 있을 것이다.

 

function  sum(a, b, c ,d , e, f ,g) {
  let result = 0;
  if(a) result += a;
  if(b) result += b;
  if(c) result += c;
  if(d) result += d;
  if(e) result += e;
  if(f) result += f;
  if(g) result += g;
  return result;
}

console.log(sum(1,2,3,4,5,6))

이런 복잡한 코드를 전에 배웠던 것으로 대체할 수 있다.

 

function  sum(...rest) {
  return rest.reduce((acc, current) => acc + current, 0) 
}

console.log(sum(1,2,3,4,5,6))

//...rest를 하면 하나의 [] 배열로 받아온다.

...rest는 하나의 배열로 만들기때문에 js의 내장함수인 reduce를 활용해서 sum 연산을 할 수 있다.

(reduce는 초기값을 설정하지 않으면 자동으로 초기값이 0번째 인덱스의 값이 된다.)


다음은 함수의 인자에서 스프레드 연산자를 사용하는 것을 알아보자.

 

파라미터 : 함수에서 사용되는 값.

function subtract(x, y) {
	return x - y;
}

 

인자 : 함수를 사용할 때 넣는 값.

아래 코드에서는 1, 2가 인자값이다.

const result = subtract(1, 2);

아래와 같은 코드가 있을 때 스프레드 연산자를 사용해서 동일한 결과를 얻을 수 있다.

function subtract(x, y) {
  return x - y;
}

const result = subtract(1, 2)

console.log(result);

 

스프레드 연산자 사용 예시.

function subtract(x, y) {
  return x - y;
}

const numbers = [1, 2];
const result = subtract(...numbers);

console.log(result);

 

또 다른 예시는 모든 원소들의 값을 인자로 넣어주려면 ...numbers 스프레드를 써서 넣으면 된다.

function sum(...rest) {
  return rest.reduce((acc, curr) => acc + curr);
}


const numbers = [1,2,3,4,5,6,7,8,9];
console.log(sum(...numbers));
반응형

'개발자의 공부방 > Frontend' 카테고리의 다른 글

javascript] getter setter  (0) 2021.12.29
javascript] 코드와 함께  (0) 2021.12.23
javascript] spread와 rest 연산자  (0) 2021.12.18
javascript] 비구조화 할당  (0) 2021.12.18
javascript] 함수의 기본파라미터  (0) 2021.12.16

댓글0