🌱Inflearn🌱 spread연산자,얕은복사 깊은복사

 

---

 

 

❤ 김춘장이의 위키백과 - 나만의 공부 기록 Tistory ❤ 

GitHub - gayulz/StudyHistory: 나의 공부 기록 commit

 

 

---

 

 

 

 

spread 연산자

개념 : 하나로 뭉쳐있는 값들의 집합을 전개해주는 연산자
전개란? 값을 펼쳐준다, 배열을 한커플 벗겨주는 행위

작성법 : … 점 세개가 있으면 됨

예제

let arr = [1,2,3,4,5]
console.log(arr) // [1,2,3,4,5]
console.log(...arr) // 1 2 3 4 5 

let str = "hello"
console.log(...str) // h e l l o

 

 

왜 사용하는 걸까 ?
데이터 복사를 하기 위해 사용한다.

 

 

보통 데이터 복사시 하는 예제

const obj = { name : "otter", gender : "male" }
obj // { name : 'otter' , gender : 'male' }

const newObj = obj
newObj.name = 'rabbit'

obj // { name : 'rabbit' , gender : 'male' }
newObj // { name : 'rabbit' , gender : 'male' }

 

이렇게 하는 경우 원본에도 영향이 생긴다.
그걸 방지 하기 위해 spread연산자를 사용하는데
현재 같은 구조에서 왜 원본 객체에도 문제가 생기는 걸까 ?
이유는 '참조 타입’의 복사이기 때문이다
해당 내용으로 그림을 그려보면 이러하다

 

 

이렇게 되기 때문에 원본에도 영향이 생긴다
그럼 어떻게 해야하는걸까 ?
spread 연산자를 사용하면 된다
아무것도 없는 상태에서 spread연산자를 사용하면 문법 오류가 발생된다
그래서 객체를 하나 만들면서 사용해야 한다

 

const copyObj = {...obj}
obj에 있는 객체의 값이 중괄호를 벗긴 후 중괄호 밖으로 빼낸 뒤 , 
중괄호가 없어진 데이터에 다시 중괄호를 씌워주며 copyObj에게 대입시키는 것

예제

obj 
// { name : 'rabbit' , gender : 'male' }
newObj 
// { name : 'rabbit' , gender : 'male' }
copyObj 
// { name : 'rabbit' , gender : 'male' }
--------------------------------------------------------------
copyObj.gender = 'female'
--------------------------------------------------------------
copyObj 
// { name : 'rabbit' , gender : 'female' }
obj 
// { name : 'rabbit' , gender : 'male' }
--------------------------------------------------------------
obj.name = ' otter '
--------------------------------------------------------------
obj 
// { name : 'otter' , gender : 'male' }
copyObj
// { name : 'rabbit' , gender : 'female' }

 

이렇게 별도의 객체처럼 진행되어 복사된다.

단 이러한 단순한 복사는 얕은 복사이다.

obj 객체 안에 다른 객체나 다른 참조 객체가 있는 경우
spread 복사를 하더라도 같은 객체처럼 진행된다

 

예제

obj.hobby = { one : 'shopping' , two : 'playing Game' }
--------------------------------------------------------------
obj
// {
	name : 'otter' ,
	hobby : {
			one : 'shopping', 
			two : 'playing Game'
	},
	gender : 'male'
}
--------------------------------------------------------------
const newCopyObj = {...obj}
--------------------------------------------------------------
// 출력
--------------------------------------------------------------
newCopyObj 
// {
	name : 'otter' ,
	hobby : {
			one : 'shopping', 
			two : 'playing Game'
	},
	gender : 'male'
}
--------------------------------------------------------------
// 객체 안에 객체 추가 
newCopyObj.hobby.two = 'watching movie'
--------------------------------------------------------------
// 출력
newCopyObj
// {
	name : 'otter' ,
	hobby : {
			one : 'shopping', 
			two : 'watching movie'
	},
	gender : 'male'
}
obj
// {
	name : 'otter' ,
	hobby : {
			one : 'shopping', 
			two : 'watching movie'
	},
	gender : 'male'
}

1. object안에 다른 object가 없을 때 spread 연산자를 활용한 복사시 별도의 객체러럼 진행된다
2. object안에 다른 Object가 있을 때엔 spread 연산자 복사를 하더라도 같은 객체처럼 진행된다

 

 

 

 

 

 

 

 

얕은복사와 깊은복사

 

얕은복사 : 주소값까지만 복사한다
깊은복사 : 실제 데이터까지 복사한다

참조타입의 복사는 원본데이터까지 영향이 되기 때문에 얕은복사와 깊은복사 모두다
알고 있어야 한다
원시타입과 참조타입을 고려하면 된다

 

임시 저장 메모리
유동적으로 크기가 변하는 데이터들을 저장한다
배열이나 객체

 

 

 

 

 

의문점 1

const 키워드는 상수이다
const 키워드로 선언한 obj 객체는 왜 프로퍼티가 추가되고 수정이 되는건가?
obj는 값을 가지고 있는건 주소값이다.
실제 주소값이 재할당 되거나 재선언이 된게 아니다 보니 가능하다

의문점 2

그럼 객체와 배열을 꼭 const로 선언해야하는 걸까?
const 키워드의 이점[상수] 선언을 통해 해당 객체만 포함하게 된다
상수로 선언 하였기 때문에 객체 자체가 변하는 것이 아닌 항상 obj객체만
담겨있음을 먼저 가늠할 수 있고, 코딩시 해당 객체의 데이터를 확인하지 않더라도
유추가 가능해진다, 객체나 배열은 const로 선언하는 습관을 좋은 것 이다

 

 

 

 

얕은 복사

예제

let origin = {
	name : 'otter' , 
	age : 25
}

let copy = {
	name : origin.name , 
	age : origin.age 
}

 

각각 매번 값을 직접 복사함으로 불편한 단점이 있다.
보안점으로 spread 연산자를 사용한다

 

let copy = {...origin} 

 

배열도 가능하다

 

let arr = [ 1,2,3,4,5 ]
let secArr = [ 6,7,8]
let copy = [...arr, ...secArr]

console.log(copy)
// [1,2,3,4,5,6,7,8]

 

이러한 복사는 원본과 연결이 끊어져 있어 원본에 영향이 되지 않는다

 

 

 

 

 

 

깊은 복사

객체안에 또 다른 객체, 또 다른 참조가 있는 경우 얕은 복사를 했을 때
원본에 영향이 생기기 때문에 깊은 복사를 하였을때 원본에 영향이 가지 않는다

 

객체 안에 또 다른 객체가 있었을때 얕은 복사를 할 경우

let origin = {
	name : 'otter', 
	age : 25, 
	favoriteFood : {
		first : 'sushi' , 
		second : 'hamburger'
	}
};

const copy = {...origin}

const.favoriteFood.first = "cold noodle"

console.log(origin.favoriteFood)
// { first : 'cole noodle' , second : 'hamburger' }

 

 

원본까지 문제가 생기는 것이 보여진다. 그림으로 그렸을때 이유를 알게 된다

 

 

 

 

얕은 복사로는 지속 원본에 문제가 되는 이유를 알게 되었다.

깊은 복사의 방법은 2단계로 진행된다

 

 

1. JSON.stringify(복사대상)
2. JSON.parse(변환대상)

 

 

stringify메서드는 JSON데이터로 변환을 해준다.
데이터 포멧 형식은 String 이다.
parse메서드는 JSON데이터를 JS데이터로 변환을 해준다.

 

 

 

예제

const copy = JSON.stringify(origin)

console.log(copy)

// { "name" : "ot Lter" , "age" : 25, "favoritedFood" : { "first" : "sushi", "second" : "hamburger"}}

const deepCopy = JSON.parse(copy)
// 원래 형태로 변환시켜준다

 

 

 

왜 이러한 절차가 깊은 복사일까?

JSON.stringify로 완전한 문자열 상태로 변환시키면 기존 객체의 주소값을
더이상 갖고 있지 않기 때문에 원본과 연결이 끊어지게 된다.

그렇게 새로운 객체에 다시 변환시켜 담아주게 되면 원본 주소값과 전혀 다른
새로운 주소값을 갖는 객체가 생성되기 때문에 원본에 영향이 없게 된다
개발공부중인 개린이의 포스팅 입니다📝