자바스크립트에서 ... 이란?

YS·2022년 7월 7일
0

전개 구문(Spread Syntax)란?

전개 구문(Spread Syntax)는 ECMAScript6(2015)에서 새로 추가된 문법으로 간단하게 이 문법은 문법 이름 그대로 객체 혹은 배열들을 펼칠 수 있게 해 준다.

문법

// 펼칠 대상이 객체인 경우
{...obj}


// 펼칠 대상이 배열인 경우
[...arr]
// 혹은
{...arr}

전개 구문의 문법은 엄청 간단하다. 배열이나 객체 앞에 점 3개를 붙여주면 된다. 단, 이 펼쳐진 객체나 배열을 담을 바구니가 필요한데 객체는 객체로, 배열은 객체나 배열로 담아낼 수 있다.

* 펼칠 대상이 객체인 경우

const myObject1 = {
    laptop: 'MacBook Pro',
    tablet: 'iPad Pro 11'
}

const myObject2 = {...myObject1};

console.log(myObject1); // {laptop: "MacBook Pro", tablet: "iPad Pro 11"}
console.log(myObject2); // {laptop: "MacBook Pro", tablet: "iPad Pro 11"}

console.log(myObject1 === myObject2); // false

6번째 줄의 변수 myObject2를 보면 ...이 사용된 걸 볼 수 있는데 앞에 점3개를 부텽서 myObject1을 펼친 것이다. 그러면 당연히 myObject2는 myObject1과 똑같은 모양의 프로퍼티를 갖게 되지만, 마지막 줄에서 보는 것과 같이 두 객체를 비교할 경우 false가 출력되면서 서로 다른 주소 값을 가진 독립적인 객체임을 확인할 수 있다.

* 펼칠 대상이 배열인 경우

const myArray1 = ['Canna', 'Cuzz', 'Faker', 'Teddy', 'Effort'];

const myArray2 = [...myArray1];

console.log(myArray1); // ["Canna", "Cuzz", "Faker", "Teddy", "Effort"]
console.log(myArray2); // ["Canna", "Cuzz", "Faker", "Teddy", "Effort"]

console.log(myArray1 === myArray2); // false

배열도 동일하게 전개구문을 활용해서 배열을 펼쳐 새로운 배열을 만들 수 있고, 두 배열을 비교하면 false가 출력되면서 서로 다른 독립적인 배열이 되는 모습도 확인할 수 있다.

const myArray = ['Canna', 'Cuzz', 'Faker', 'Teddy', 'Effort'];

const myObject = {...myArray};

console.log(myArray); // ["Canna", "Cuzz", "Faker", "Teddy", "Effort"]
console.log(myObject); // {0: "Canna", 1: "Cuzz", 2: "Faker", 3: "Teddy", 4: "Effort"}

만약 펼친 배열을 중괄호로 감싸서 객체로 만든다면, 각 요소는 프로퍼티 값이 되고, 배열의 index가 프로퍼티네임이 된다.

* 나머지 매개변수로의 활용

전개구문은 함수의 나머지 매개변수로도 활용할 수 있다. 매개변수에 전개 구문을 활용하면, 함수를 호출할 때 넘쳐나는(?) 인자들을 하나의 배열로 모아주는 매개변수로 활용할 수 있다.

function myFunction(name, ...members) {
    return {name: name, members: members}
}

const myTeam1 = myFunction('T1', 'Canna', 'Cuzz', 'Faker', 'Teddy', 'Effort');
const myTeam2 = myFunction('Damwon', 'Nuguri', 'Canyon', 'ShowMaker', 'Ghost', 'BeryL');

console.log(myTeam1); // {name: "T1", members: Array(5)}
console.log(myTeam2); // {name: "Damwon", members: Array(5)}


위 콘솔이 찍힌 장면을 보시면 첫 번째 인자는 자연스럽게 name 파라미터에 전달이 되고, 나머지 함수를 호출할 때 전달한 인자들은 members라는 하나의 배열로 전달되어 함수 내에서 활용될 수 있는 모습을 확인할 수가 있다.

profile
"나의 개발 노트"

0개의 댓글