[JS] 스프레드 연산자(...)

원시 값이란 객체가 아니면서 메서드도 가지지 않는 데이터를 말한다.

• string
• number
• bigint
• boolean
• undefined
• symbol
• null

원시값은 변형할 수 없지만 재할당 할 수는 있다.

let a = "hello"; // 주소 : 1000, 값 : hello
a = 1; // 주소 : 1001, 값 : 1

 

• 재할당은 새 메모리 공간을 확보하는 것이다.
• 값을 저장한 후 변수(a)가 이전에 참조하던 메모리 주소를 변경함(1000 -> 1001)으로써 이루어진다.

 

 

원시값을 복사하면 어떻게 될까?

let a = 2; // 주소: 1000 값: 2
let copiedA = a; // 주소: 1001 값: 2

a = 3; // 주소: 1002 값: 3

console.log(a); // 3
console.log(copiedA); // 2

• 원시값은 주소가 복사되지 않는다.
• 값이 복사되기 때문에 copiedA와 a는 별개의 주소 값을 가진다.

 

 

객체를 복사하면 어떻게 될까?

let person = {
  name: 'Mark',
  age: 1
} // 주소: 1000

let copiedPerson = person; // 참조 주소값 복사 주소: 1000

copiedPerson.age = 2;

console.log(person); // 주소: 1000 {name: 'Mark', age: 2}
console.log(copiedPerson); // 주소: 1000 {name: 'Mark', age: 2}

 

• person과 copiedPerson 모두 {name: 'Mark', age: 2}가 나온다.
• 데이터 자체를 복사한 것이 아니라 참조 주소 값을 복사하여 하나의 데이터를 공유한다.
• 이를 얕은 복사라 한다.

 

 

그럼 객체 데이터 자체를 복사하려면 어떻게 해야할까?

let person = {
  name: 'Mark',
  age: 1
} // 주소: 1000

let copiedPerson = {
  name: person.name,
  age: person.age
} // 주소: 1001

console.log(person); // 주소: 1000 {name: 'Mark', age: 1}
console.log(copiedPerson); // 주소: 1001 {name: 'Mark', age: 1}

• {중괄호}를 열고, 내용들을 하나 하나 따로 넣으면 다른 새로운 주소에 할당된다.
• 이를 깊은 복사라고 한다.
• 하지만 이렇게 일일히 쓰는 것은 번거롭기에 짧게 쓰는 방법이 있다.
• 스프레드 연산자 (Spread Operator, 전개 연산자)를 사용하면 된다. ...(점 세 개)
  • 단, 2차원 객체, 배열은 얕은 복사가 된다

let person = {
  name: 'Mark',
  age: 1
} // 주소: 1000

let copiedPerson = { ...person } // 주소: 1001

console.log(person); // 주소: 1000 {name: 'Mark', age: 1}
console.log(copiedPerson); // 주소: 1001 {name: 'Mark', age: 1}

 

 

배열에서 스프레드 연산자

전개 연산자가 사용된 배열의 각 값을 가져와 배열에 추가한다.

const hobbies = ["Sprots","Cooking"];
const newHobbies = ["Reading"];

const mergedHobbies = [...hobbies, ...newHobbies];

console.log(mergedHobbies); // ["Sprots","Cooking","Reading"]

 

 

객체에서 스프레드 연산자

전개 연산자가 사용된 객체의 모든 키-값을 쌍으로 가져와 객체에 추가한다.

const user = {
	name: "Max",
	age: 34
}

const extendedUser = {
	isAdmin: true,
	...user
}

console.log(extendedUser); // {isAdmin: true, name: 'Max', age: 34}

 

 

2차원 객체, 배열 깊은 복사

let arr=[[1, 2], [3, 4]];
let arr2=[...arr];

arr2[0][0]=10;

console.log(arr); // [ [ 10, 2 ], [ 3, 4 ] ]
console.log(arr2); // [ [ 10, 2 ], [ 3, 4 ] ]

• arr라는 원본을 놔두고 새 배열을 복사에 값을 변경했다.
• 복사된 arr2[0][0]의 값을 변경했는데 arr[0][0] 값도 변경되었다.
• 스프레드 연산자는 한 단계까지만 복사한다. 이는 얕은 복사이다.

배열이나 객체가 2차원 이상이면 내부 값을 재귀적으로 찾아와서 복사해야한다.

let arr=[[1, 2], [3, 4]];
let arr2=arr.map(innerArr => [...innerArr]);

arr2[0][0]=10;

console.log(arr); // [ [ 1, 2 ], [ 3, 4 ] ]
console.log(arr2); // [ [ 10, 2 ], [ 3, 4 ] ]

• map 함수로 내부 배열을 가져와 한번 더 복사해주면 된다.