JS | ES6 문법 - spread operator (전개구문)

spread operator (전개구문)

1. 반복 가능한(iterable) 요소에 적용할 수 있는 문법입니다. ex) 배열이나 문자열 등

2. 배열이나 문자열 등을 풀어서 요소 하나하나로 전개시킬 수 있다. 

 

기존에는 index를 사용해서 배열의 값을 뽑아낼 수 있었지만,

배열이름 앞에 ...을 넣어주면 배열의 값을 바로 차례대로 뽑아준다.

 

let arr = [1,2,3];
//전개구문은 반복이 가능한 요소에서만 사용 가능함 (ex.배열, 문자열 / 객체는 안됨))
console.log(...arr); //전개구문 //1 2 3 배열의 요소를 풀어서 나열시킨다.
        
let str = "hello";
console.log(...str);
console.log([...str]); // ['h', 'e', 'l', 'l', 'o'] 

//배열의 추가
let arr2 = [1,2,3,...arr];
// let arr2 = [1,2,3,arr]; -> 배열안에 배열을 집어넣겠다는 뜻
console.log(arr2); //[1, 2, 3, 1, 2, 3]


//배열의 중간에 추가
let arr3 = [1,2,3,...arr,5]; 
console.log(arr3); // [1, 2, 3, 1, 2, 3, 5]

//배열의 복사
let arr4 = [...arr];
console.log(arr4); // [1, 2, 3]

//배열의 연결 
let arr5 = [...arr, ...arr2, ...arr3];
console.log(arr5); //[1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3, 5]

 

함수에서의 spread operator (전개구문)

매개변수 ( ...arr) 의 뜻은

나열된 어떤 요소의 배열을 받아준다.는 뜻이다.

function sum(x,y,z) {
    return x + y + z;
}
let arr = [1,2,3];
//sum(arr[0],arr[1],arr[2]);
        
console.log(sum(...arr)); // 1, 2, 3 //6

console.log(sum(10,...arr)); // 10, 1, 2, 3 //16


//함수를 선언시 - 가변적 매개변수(반드시 맨 마지막에 선언)
function sum2(x, ...y) {
    return [x, ...y];
}

console.log(sum2(1)); //[1]
console.log(sum2(1,2)); //[1, 2]
console.log(sum2(1,2,3)); //[1, 2, 3]
console.log(sum2(1,2,3,4)); //[1, 2, 3, 4]

//함수의 default매개변수
//값을 전달하지 않으면 = 뒤에 값이 들어간다.
function sum3(x,y=10,z=100) {
    return x + y + z;
}
console.log(sum3(1)); //111
console.log(sum3(1,2)); //103, x=1,y=2
console.log(sum3(1,2,3)); //6
console.log(sum3(...arr)); //6