자바스크립트 8.1 Spread 문법 (전개문법)

이전에 매개변수를 기록하면서 매개변수를 Rest Parameter를 활용해서 배열로 받아왔다. 그러면 반대의 경우인 배열을 통째로 매개변수에 넘기려면 어떻게 해야하는지 기록해 보자!

function showNatoAlphabet(a, b, c) {
 console.log(a); // Alpha
 console.log(b); // Bravo
 console.log(c); // Charlie
}

let arr = ['Alpha', 'Bravo', 'Charlie'];

showNatoAlphabet(...arr);

 먼저 함수를 하나 만들어 주었다. 이 함수는 매개변수 하나하나를 찍어주는 함수를 만들었다. 그리고 나서 배열을 하나 만들어 주었다. 그리고 마지막에 함수를 실행시켜 주었는데, '...'을 활용해 주었다.

 

showNatoAlphabet(...arr)
/*
...arr 즉...['Alpha', 'Bravo', 'Charlie']은 각각의 개별 요소로 분리된다. => ('Alpha', 'Bravo', 'Charlie')
*/

이렇게 해당하는 배열 앞에 점 세개(...)를 찍으면, 그 배열을 각각의 개별요소로 분리해서 보내게 된다. 그리고 이런것도 가능하다!

let arr1 = ['Alpha', 'Bravo', 'Charlie'];
let arr2 = ['Delta', 'Echo', 'Foxtrot']; 

let merge = [...arr1, ...arr2, 'Golf']
// merge는 ['Alpha', 'Bravo', 'Charlie', 'Delta', 'Echo', 'Foxtrot', 'Golf']가 도니다.

이런식으로 배열을 합치는 것에도 사용할 수 있다. ㄴO.Oㄱ 꼭 배열 뿐만이 아니라, iterable한 객체이면 전개문법을 사용할 수 있다.

그래서 문자열에도 사용이 가능한데, 어떻게 되는지 한번 기록해보자!

let str = 'Oscar';
[...str] // ['O', 's', 'c', 'a', 'r']

문자 하나하나 요소의 배열로 반환되는 모습을 살펴 볼 수 있다. 

다음은 무엇을 기록해볼까!