복사
- 문자열 복사
const cat = "Tom"
const cat2 = cat
cat2 //Tom
- 숫자 복사
let money = 100
let money2 = money
money2 // 100
money = 500
money2 // 100
➡️ 복사본은 원본의 값을 그대로 가져오기만 할 뿐 , 원본에 영향을 끼치지 않는 서로 완전히 다른 존재이다.
- 객체 복사
const person = {
name: 'Jamie',
age: 26,
school: 'sm',
};
const person2 = person; // 주소값이 복사 된다
person2.name = "Jay"
person // {name : "Jay", age : 26, school : "sm"}
🚨 원본 객체의 변화가 복사된 개체에도 영향을 끼친다. --> 변수의 메모리에 해당 객체가 아닌 주소값이 저장되어 있기 때문이다.( 객체에 담긴 각 속성 (name,age,school)에 실제 데이터가 저장되어 있다. )
즉, person과 person2는 같은 주소값을 공유하기 때문에 person2에 변화가 생기면 같은 주소값을 공유하는 원본인 person에도 같은 변화가 생기며 이러한 특징은 배열에도 적용된다.
const arr = [1,2,3,4,5]
const arr2 = arr
arr2.push(6)
console.log(arr) // [1,2,3,4,5,6]
➡️ 이를 통해 const로 선언된 객체와 배열의 값을 변경할 수 있었던 이유를 알 수 있다.
const person = {
name: "Jamie",
age: 26,
school: "sm",
}
person.name = "Jay" // const 키워드로 선언된 person에 담긴 객체의 주소값은 변화하지 않았음
profile = [1, 2, 3] // 에러 발생 : const 키워드로 선언된 profile 자체를 변화시키려 시도
🚨 객체 person은 const로 선언되었기 때문에 상수 이지만 그 안에 담긴 속성을 변경 했기 때문에 값의 변화가 가능했던 것이다. --> 상수로 선언된 person 자체에 다른 데이터나 주소값을 할당 하려고 하면 에러가 발생한다.
얕은 복사 (스프레드 연산자)
- 객체를 그대로 복사하는 것에는 성공하였으나 만약 그 안에 또 다른 객체 혹은 배열이 존재한다면, 그 부분까지는 완전하게 복사하지 못한다. 실질적인 의미의 얕은 복사는 실제 값이 아닌 주소값을 복사하는 방식을 의미하며,spread 연산자를 통한 복사는 실제 값을 복사하되 그 안의 객체, 배열은 주소값을 복사하기 때문에 얕은 복사라고 볼 수 있습니다.
const student = {
name: "Jamie",
age: 26,
school: "sm",
hobby: {
one: "swimming",
two: "reading books",
},
}
const student2 = { ...student };
student2
/*
{
name: "Jamie",
age: 26,
school: "sm",
hobby: {
one: "swimming",
two: "reading books",
},
}
*/
student.hobby.one = "singing"
student2.hobby.one; // "singing"
➡️ spread 연산자를 사용했음에도 객체 내의 객체는 원본 객체와 같은 주소값을 공유하는 것을 확인할 수 있다.
깊은 복사 (JSON.parse(JSON.stringify))
JSON.stringify()는 인자로 들어온 데이터를 문자열로 변환시켜주는데, 이를 통해 원본 객체와는 전혀 다른 단지 객체의 모양을 한 문자열을 돌려받게 된다.
const student = {
name: "Jamie",
age: 26,
school: "sm",
hobby: {
one: "swimming",
two: "reading books",
},
}
JSON.stringfy(student)
//"{"name":"Jamie","age":"26","school":"sm","hobby":{"one":"swimming,"two":"reading books"}}"
JSON.parse()는JSON.stringify()를 통해 얻어낸 문자열을 객체 형태로 변환시켜준다.
JSON.parse(JSON.stringify(student))
/*
{
name: 'Jamie',
age: 26,
school: 'sm',
hobby: {
one: 'swimming',
two: 'reading books',
}
}
*/
➡️ 이를 통해 우리가 이전에 생성한 객체와 똑같은 모양, 값을 가진 객체를 복사했다. 이는 이전의 얕은 복사를 통해 생성된 객체처럼 원본과 같은 주소값을 공유하는 객체가 아닌,JSON.stringify(), JSON.parse()를 활용한 깊은 복사를 통해 생성된 완전히 독립적인 하나의 객체이다.
REST 파라미터
- 구조 분해 할당을 통해 제외하고자 하는 값의 key를 입력하고 나머지 값들을 담아줄 수 있는 변수를 하나 지정해 주면 특정 key를 제거 가능하다.
const student = {
name: "Jamie",
age: 26,
school: "sm",
height : 160
}
const {name, age, ...rest} = student
name // Jamie
age // 26
rest // {schoo;:"sm",height:160}
//...rest는 변수명이므로 임의 지정 가능하다.
🚨 이러한 Rest parameter를 통해 생성되는 객체는 스프레드 연산자를 사용했을 때와 같이 얕은 복사로 생성되는 객체이다.
