[Javascript]스프레드 문법의 다양한 사용 방법(배열 합치기, 배열 복사, 배열 연결)

📌Spread Operator(스프레드 연산자)란?

 ES6에서부터 등장한 Javascript의 Spread Operator에 대해서 알아보자. 처음 코드를 보았을 때는 누군가의 오타인 줄 알 만큼 문법의 형태가 특이했다. 이 스프레드 연산자를 사용하면 배열이나 문자열을 이용한 복잡한 연산을 단순하게 할 수 있고, 원본(배열, 객체)에 영향 없이 새로운 형태의 배열을 생성할 수 있다.  한번 알아보도록 하자.

 

 

📌기본 배열

const a = [1, 2, 3];
const b = [4, 5, 6];
const c = [7, 8, 9];

console.log(a);
console.log(b);
console.log(c);

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

 

📌배열 복사(전개 연산자 사용)

const A = [1, 2, 3];
const B = [4, 5, 6];
const C = [7, 8, 9];

//배열 A 복사
const copyA = [...A];
console.log(copyA);

//result
//[1, 2, 3]

배열 A와 copyA의 출력되는 값은 같지만, 메모리상의 주소값은 다르기 때문에 원본을 복사한 새로운 배열의 생성된다. 또한 전개 연산자를 사용한다면 무조건적으로 1차원 배열만이 생성된다.  

 

📌배열 병합(전개 연산자 사용)

const A = [1, 2, 3];
const B = [4, 5, 6];
const C = [7, 8, 9];

//배열 A, B, C의 병합
const mergeArr = [...A, ...B, ...C];
console.log(mergeArr);

//result
//[1, 2, 3, 4, 5, 6, 7, 8, 9];

 

📌객체 병합(전개 연산자 사용)

const InfoA = {
               name : "moonstar", 
               age  : "25"
               }
const InfoB = {
               addr : "경기 부천",
               phoneNumber : "010-0000-0000"
               }
               
const mergeObj = {...InfoA, ...InfoB};
console.log(mergeObj);


//result
//{
//    name : "moonstar", 
//    age  : "25",
//    addr : "경기 부천",
//    phoneNumber : "010-0000-0000"
//}

Spread Operator(전개 연산자)는 배열뿐만 아니라 객체에도 적용할 수 있다.

 

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

const A = [1, 2, 3];
const result = Math.max(...A);

console.log(result);
//3