[Javascript] 전개 연산자(...)

패스트 캠퍼스의 한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online 강의 중 Part 4. JavaScript Level up 내용을 정리하고, 추가 내용을 살짝 덧붙여 포스팅하였습니다.

문제가 되는 내용이 있을 경우 댓글로 알려주신다면 바로 조치하겠습니다. :)

 

 

 

전개 연산자 (...)

전개 연산자는 말 그대로 객체나 배열을 전개할 수 있는 연산자이다.

전개 연산자를 이용하면 기존의 것을 건들이지 않고 새로운 객체를 생성할 수 있다.

 

 

1. 배열

배열에서 전개데이터를 사용할 경우 하나의 배열 데이터를 쉼표로 구분하는 각각의 아이템으로 전개하여 출력한다.

사용법은 단순하게 배열명 앞에 ...을 붙여주면 된다.

const fruits = ['Apple', 'Banana', 'Cherry']
console.log(fruits)
console.log(...fruits)
// console.log('Apple', 'Banana', 'Cherry') 와 동일

 

전개연산자를 사용할 경우 기존 코드를 훨씬 간결하게 표현할 수 있다.

예를 들어 Math.max(a, b, c, ...)를 이용하여 배열 원소들 중 최대값을 구하고 싶을 경우, 원래대로라면 아래와 같이 사용해야 한다. 

let arr = [101, 29, 36, 45, -5, 61]
Math.max(arr[0], arr[1], arr[2], arr[3], arr[4], arr[5]);

 

하지만 배열이 더 길어진다면? 원소의 개수가 당장 10개만 넘어도 매우 번거로운 작업이 될 것이다. 전개 연산자를 이용하면 이를 보다 쉽게 해결할 수 있다.

전개 연산자를 사용하더라도 위와 같은 결과를 출력한다.

console.log(Math.max(...arr))

 

 

 

2. 객체

function toObject(a, b, c) {
    return {
        first: a,
        second: b,
        third: c
    }
}
console.log(fruits)
console.log(toObject(...fruits))
console.log(toObject(fruits[0], fruits[1], fruits[2])) // 와 동일

 

 

2-1. 나머지 매개변수

매개변수에 전개연산자를 사용할 경우 나머지 매개변수를 모두 가져올 수 있다.

const fruits = ['Apple', 'Banana', 'Cherry', 'Orange']
function toObject(a, b, ...c) {
    return {
        a: a,
        b: b,
        c: c 	// 남은 'Cherry', 'Orange'를 Array로 받아옴
    }
}
console.log(toObject(...fruits))

 

2-2. 축약형

객체에서 정의된 속성명과 매개변수명이 동일할 경우 축약하여 사용할 수 있다.

// 매개변수명과 객체의 속성명이 같을 경우 축약 가능
function toObject(a, b, ...c) {
    return {
        a: a,
        b: b,
        c: c
    }
}

// 위와 동일
function toObject(a, b, ...c) {
    return { a, b, c }
}

 

축약형의 경우 화살표 함수를 이용하여 더 간결하게 표현하여 코드의 가독성을 높일 수도 있다.

주의할 점은, 객체 데이터는 중괄호를 이용하여 표현하지만 화살표 함수에서 중괄호는 함수의 범위를 나타내기 때문에 소괄호로 한 번 감싸고 내부에 중괄호를 넣어 정의한다.

// 화살표 함수 사용 - 소괄호 내에 중괄호를 이용
const toObject = (a, b, ...c) => ({ a, b, c })