JavaScript 문법 :three dots 공부

※ 필자는 초초초보자입니다.

※ 틀린 내용에 대한 피드백은 언제든지 환영합니다.

 

 

자바스크립트 코드에서 자주 보는 점 3개(three dots)에 대해서 정리

---

• 공식 명칭은 전개구문(spread syntax)이다. 
• ECMAScript6(2015)에서 새로 추가된 문법이다.

 

배열이나 문자열과 같이 반복 가능한 문자를 (함수로 호출 할 때) 0개 이상의 인수 또는 (배열 리터럴 일 때) 요소로 확장하여

0개 이상의 키-값의 쌍으로 객체를 확장시킬 수 있다.

 

---

[구문]

- 함수 호출 시 인자로 전달

myFunction(...iterableObj);

- 배열 리터럴과 문자열

[...iterableObj, '4', 'five', 6];

/*
const arr = ['A', 'B', 'C'];

console.log("-", ...arr, ": arr", "-"); */

- 객체 리터럴(ECMAScript 2018에서 추가)

let objClone = { ...obj };

/*
let obj = {
	firstName: "kim",
	lastName: "Lee",
	middleName: "Park",
	age: 1,
};

let objClone = { ...obj };

console.log(objClone); 
// { firstName: 'kim', lastName: 'Lee', middleName: 'Park', age: 1 }
*/

 

---

[예시]

- apply 대체

   : 아래의 코드는 동일한 결과(6)를 출력한다.

// sum 함수 정의
function sum(x, y, z, num1, num2) {
	return x + y + z;
}

// 배열 생성
const numbers = [1, 2, 3];

// 함수의 인자로 전개구문(...) 전달
console.log(sum(...numbers, 0, 1));

// 배열의 엘리먼트를 함수의 인자로 전달
console.log(sum.apply(null, numbers), 0, 1);

 

   : 전개 구문은 여러번 사용될 수 있다.

// sum 함수 정의
function printArgs(x, y, z, num1, num2, a, b) {
	console.log(`${x}, ${y}, ${z}, ${num1}, ${num2}, ${a}, ${b}`);
}

// 배열 생성
const numbers = [1, 2, 3];
const string = ["H", "E", "L", "L", "O"];

// 함수의 인자로 전개구문(...) 여러개 전달
printArgs(...numbers, 0, 1, ...string); //1, 2, 3, 0, 1, H, E
printArgs(...numbers, 'a', 'b', ...[3]); // 1, 2, 3, a, b, 3, undefined

 

- 함수의 매개변수로 사용될 수도 있다.

function printArgs(x, y, ...args) {
	console.log(`${x}, ${y}, ${args[0]}, ${args[1]}`);
}

printArgs(0, 1, "a", "b", "c"); //0, 1, a, b
printArgs(0); //0, undefined, undefined, undefined
printArgs("a", "b", "c"); //a, b, c, undefined
printArgs("a", "b"); //a, b, undefined, undefined

 

new를 사용해서 생성자를 호출할 때 사용할 수도 있으며, 배열을 연결할 때 사용할 수도 있다.

* 다양하게 사용할 수 있지만 어쨌든 기본 컨셉(0개 이상의 인수나 요소로 확장하여 0개 이상의 키-값의 쌍에 접근하기)은 변하지 않는 듯 하다.

 

- 객체 리터럴에 사용

   : 얕은 복제(prototype 제외), 객체의 병합에서 Object.assign() 대신 사용할 수 있지만

   : Object.assign()은 setters를 트리거하지만 전개 구문은 그렇지 않기 때문에 완벽하게 대체할 수는 없다.

// 객체 obj1 생성
const obj1 = {
	foo: 'bar',
	x: 42,
};

// 객체 obj2 생성
const obj2 = {
	bar: 'foo',
	y: 50,
};

// 병합
let objClone = { ...obj1, ...obj2 };

console.log(objClone); //{ foo: 'bar', x: 42, bar: 'foo', y: 50 }

 

 

---

 

[주의사항]

-이터러블 객체에만 적용된다.

  (단, spread 프로퍼티인 경우는 제외)

 

 

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax

전개 구문 - JavaScript | MDN