[JavaScript] '...' 표현식 (전개 구문) - Spread Syntax, 배열 최대값 구하기 예제

dhkim 1월 01, 2023

 


  JavaScript에서 유용하게 사용하는 표현식인 Spread Syntax(...)에 대해 다룹니다.



1. 예제로 보는 전개 구문

 다음 예제는 배열의 최대값을 구하는 예제입니다.

본래 Math.max() 함수에는 각각의 숫자형 인자가 들어가지만, 

숫자원소 배열을 전개 구문을 통해 원소가 풀어진 형태로 인자에 전달됩니다.


아래 두 가지 호출방법은 동일한 결과(10)을 출력합니다.

[소스코드]

1
2
3
4
5
6
7
/** 전개 구문 (Spread Syntax) */

let arrNumber = [3,4,5,10,8];

// 본래 Math.max() 함수는 Math.max(3,4,5,10,8) 과 같이 복수개 인자를 받는 함수.
console.log(Math.max(3,4,5,10,8));
console.log(Math.max(...arrNumber));



2. 배열(Array) 병합 및 복사로의 사용

 Spread Syntax의 원소단위로 풀어지는 개념을 통해 아래와 같은 활용 예제를 생각해 볼 수 있습니다.

[예제 #1 : 원소 추가]

1
2
3
4
5
6
let fruit = ['apple', 'banana', 'melon'];

// 원소 추가
fruit = ['grape', 'mango', ...fruit];

console.log(fruit);

[결과]



[예제 #2 : 배열 간의 병합]

1
2
3
4
5
6
let fruit = ['apple', 'banana', 'melon'];
let animal = ['monkey' ,'dog', 'cat'];

let mergedArray = [...fruit, ...animal];        // Array.prototype.concat()과 같은 동작

console.log(mergedArray);

[결과]




3. 모듈형 함수 구현 시 활용

 인자 개수를 특정하기 어려울 때, 아래 예제와 같이 표현할 수 있습니다.

아래 예제는 5개의 인자로 함수(sample)을 호출하지만,

명시적으로 정의된 첫 번째(a), 두 번째(b)를 제외하고는 Spread Syntax로 표현된 세 번째(c)로 전달 받습니다.

이 부분은 전개 구문뿐만 아니라 구조 분해 할당 (Distructuring assignment)를 참고하셔도 좋습니다.


[소스코드]

1
2
3
4
5
6
7
8
const sample = (a, b, ...c)=>{

	console.log('a : ', a);
	console.log('b : ', b);
	console.log('c : ', c);
}

sample(1,2,3,4,5);


[결과]




0 댓글