자바스크립트 세개의 점 (...) 의미와 쓰는 방법

다음은 자바스크립트 에서 자주보이는 세개의 점 (...) 에 대한 의미를 정리한 포스트입니다.

 

array 또는 object 의 전개연산자(spread operator)

 

먼저 다음과 같은 object가 있다고 가정합시다.

const jinho = {
  fullName: 'Lim Jinho',
  occupation: 'Software developer',
  age: 29,
  website: 'https://oprea.rock'
};

여기에서 만약 name과 website만 다르고 나머지는 비슷한 object를 또 만든다고 가정할 때, 이 전개연산자(spread operator)를 사용하면 훨씬 간결하게 만들 수 있습니다.

const minhee = {
  ...jinho,
  fullName: 'Kim Minhee',
  website: 'https://top.rock'
};

 

위의 코드는 jinho object에서 다르게 지정된 fullName, website를 오버라이트한 것입니다. 다시 말하면 jinho의 프로퍼티들을 새로운 object에 복사한 후 오버라이트를 한 것이지요.

 

위와같은 형식은 object 뿐만아니라 array에서도 비슷하게 적용이 가능합니다. 

const numbers1 = [1, 2, 3, 4, 5];
const numbers2 = [ ...numbers1, 1, 2, 6,7,8]; // 결과 [1, 2, 3, 4, 5, 1, 2, 6, 7, 8]

 

 

rest 연산자(rest operator)

rest 연산자는 함수의 파라미터들(arguments)을 array 형태로 전달할 수 있게끔 해주는 역할을 합니다. 즉 함수는 이러한 rest 연산자를 인자값으로 받아들여 array로 쓸 수 있도록 합니다.

 

다음의 예제는 argument로 전달되는 숫자들의 전체 합을 구하는 함수입니다. 여기서 주목할 점은 두개 내지 세개정도의 합이 아닌 argument에 전달된 총 갯수에 대한 합이라는 것입니다. 만약 다른 argument 와 섞어서 쓴다면 이러한 rest operator는 제일 마지막에 있어야 합니다. ( function test(arg1, arg2, ...rest) ) 

 

function sum(...numbers) {
	return numbers.reduce((accumulator, current) => {
		return accumulator += current;
	});
};
 
sum(1,2) // 3
sum(1,2,3,4,5) // 15

 

 

 

참조

oprea.rocks/blog/what-do-the-three-dots-mean-in-javascript/