배열의 요소, 객체를 나열해주는 전개 연산자(Spread Operator)

전개 연산자

전개 연산자는 배열의 요소나 객체를 나열해주는 연산자이다.

배열이나 객체의 복사본(원본에 영향을 미치지 않는)을 만들 수 있으며,

여러개의 배열이나 객체를 손쉽게 병합할 수도 있다.

또한, 함수의 매개변수나 인자 값으로도 사용이 가능한 연산자이다.

사용법은 객체나 배열을 담은 변수 앞에 '...'을 붙이면 된다.

ex) 배열일 경우

     변수 = [...변수명]   

    객체일 경우

     변수 = {...변수명}

전개 연산자 사용법

배열에서 전개 연산자 사용

배열 복사

let numArr = [1, 2, 3, 4, 5, 6];
let copyNumArr = [...numArr];

console.log(numArr, copyNumArr);
console.log(numArr === copyNumArr);

(실행결과)

[ 1, 2, 3, 4, 5, 6 ] [ 1, 2, 3, 4, 5, 6 ]
false

 

numArr라는 배열의 값을 전개해서 그대로 copyNumArr 변수에 저장을 했다.

출력했을때의 값은 같으나 둘은 다른 주소값을 가지고 있는 엄연한 다른 변수이다.

 

배열 병합

let leftArr = [1, 2, 3, 4, 5];
let rightArr = [6, 7, 8, 9, 10];

let mergeArr = [...leftArr, ...rightArr];

console.log(mergeArr);

 

 push 메소드 사용

let leftArr = [1, 2, 3, 4, 5];
let rightArr = [6, 7, 8, 9, 10];

leftArr.push(...rightArr);

console.log(leftArr);

(실행결과)

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

 

배열의 중간에 값 병합하기

let leftArr = [1, 2, 3, 4, 5];
let rightArr = [6, 7, ...leftArr, 8, 9, 10]; // 중간에 전개 연산자를 이용한 배열 삽입

console.log(rightArr);

(실행결과)

[6, 7, 1, 2, 3, 4, 5, 8, 9, 10]

 

전개 연산자를 이용하여 두개의 배열을 쉽게 병합할 수 있다.

 

함수의 인자값으로 전개 연산자 사용

let sum = function(a, b, c){
	return a+b+c;
}

let arr = [1,10,100];

console.log(sum(arr[0], arr[1], arr[2])); // 전개 연산자 미사용시
console.log(sum(...arr)); // 전개 연산자 사용시

(실행결과)

111
111

 

위의 코드에서 sum 함수에 3개의 매개변수가 있는데

전개 연산자 미사용의 경우 arr 배열의 인덱스를 이용해 각각의 매개변수에 집어넣었지만,

전개 연산자 사용의 경우 arr 배열의 요소를 나열해서 각각의 매개변수에 자동으로 들어갔다.

 

함수의 매개변수로 전개 연산자 사용

let sum = function(...arr){
	let result = 0;
	for(i of [...arr]){
		result += i;
	}
	return result;
}

console.log(sum(1, 100, 1000, 100000));
console.log(sum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10));

(실행결과)

101101
55

 

매개변수 중, 고정으로 들어가는 인자 값 이외에 인자 값이 가변일 경우

let sum = function(a, ...arr){
	let result = 0;
	for(i of [...arr]){
		console.log(i);
		result += i;
	}
	return a * result;
}

console.log(sum(5, 100, 1000, 100000));
console.log(sum(10,2,3,4,5,6,7,8,9,10));

(실행결과)

505500
540

 

매개변수로 전개 연산자를 사용하는 경우, 함수의 인자 값이 가변일 경우에 유용하다.

 

객체에서 전개 연산자 사용

객체 복사

let Person = {
	name : "ludeno",
	from : "Korea",
	language : "Javascript"
};

let anotherPerson = {...Person};

console.log(Person);
console.log(anotherPerson);
console.log(Person === anotherPerson);

(실행결과)

{ name: 'ludeno', from: 'Korea', language: 'Javascript' } 
{ name: 'ludeno', from: 'Korea', language: 'Javascript' }
false

 

마찬가지로 Person 객체의 내용을 전개해서 그대로 anotherPerson 변수에 저장을 했다.

출력했을때의 값은 같으나 둘은 다른 주소값을 가지고 있는 엄연한 다른 객체이다.

 

객체 복사

let Person = {
	name : "ludeno",
	from : "Korea",
	language : "Javascript"
};
let clone = {
	...Person,
	butHeIs : "Clone"
};
console.log(clone);

(실행결과)

{ name: 'ludeno', from: 'Korea', language: 'Javascript' }

{ name: 'ludeno', from: 'Korea', language: 'Javascript', butHeIs: 'Clone' }

 

Person 객체의 내용을 전개해서 clone 객체에 내용을 복사 하였다.

 

객체 병합

let Person = {
	name : "ludeno",
	language : "Javascript"
}
let Korean = {
	from : "Korea",
	UsedIDE : "Vscode"
}

let mergeObj = {...Person, ...Korean};

console.log(mergeObj);

(실행결과)

{
  name: 'ludeno',
  language: 'Javascript',
  from: 'Korea',
  UsedIDE: 'Vscode'
}

 

Person 객체와 Korean 객체를 하나의 변수에 병합한 모습이다.