SlideShare a Scribd company logo
1 of 19
Download to read offline
얕은 복사와
깊은 복사
자바스크립트 객체의
키트웍스 팀스터디
발표자 | 김한솔
1. 데이터 타입
자바스크립트의 데이터 타입
2. 데이터 할당 방식
자바스크립트가 데이터를 저장하는 방식
3. 얕은 복사
얕은 복사의 개념과 구현 방법
4. 깊은 복사
깊은 복사의 개념과 구현 방법
CONTENTS
자바스크립트의 데이터 타입
원시 타입
객체 타입
Number
String
Boolean
null
undefined
Symbol
Object
Array
Function
RegExp
Set
Map
...
Primitive type
Object type
자바스크립트의 데이터 타입
원시 타입 객체 타입
변경 가능 여부
변수에 할당 시
다른 변수에
할당 시
변경 불가능한 값
실제 값 저장
원시 값 복사되어 전달
값에 의한 전달
변경 가능한 값
참조 값 저장
참조 값 복사되어 전달
참조에 의한 전달
자바스크립트의 데이터 할당 방식: 원시 타입
let fruit = ‘사과’
주소 ... 1002 1003 1004 ...
데이터
key: fruit
value: @5003
주소 ... 5003 5004 5005 ...
데이터 ‘사과’
자바스크립트의 데이터 할당 방식: 원시 타입
let fruit = ‘사과’
fruit = ‘오렌지’
주소 ... 1002 1003 1004 ...
데이터
key: fruit
value: @5004
주소 ... 5003 5004 5005 ...
데이터 ‘사과’ ‘오렌지’
원시 타입 변수에 새로운 값 할당 시 새로운 메모리 공간에 값 저장
자바스크립트의 데이터 할당 방식: 객체 타입
let people = {
name: ‘john’
age: 20
}
주소 ... 5003 5004 5005 5006 ...
데이터 @7104 ~ ? ‘john’ 20
주소 ... 7104 7105 7106 7107 ...
데이터
key:
name
value:
@5004
key:
age
value:
@5005
주소 ... 1002 1003 ...
데이터
key:
people
value:
@5003
자바스크립트의 데이터 할당 방식: 객체 타입
let people = {
name: ‘john’
age: 20
}
people.name = ‘anna’
주소 ... 5003 5004 5005 5006 ...
데이터 @7104 ~ ? ‘john’ 20 ‘anna’
주소 ... 7104 7105 7106 7107 ...
데이터
key:
name
value:
@5006
key:
age
value:
@5005
주소 ... 1002 1003 ...
데이터
key:
people
value:
@5003
자바스크립트의 데이터 할당 방식: 객체 타입
let people = {
name: ‘john’
age: 20
}
people.name = ‘anna’
주소 ... 5003 5004 5005 5006 ...
데이터 @7104 ~ ? ‘john’ 20 ‘anna’
주소 ... 7104 7105 7106 7107 ...
데이터
key:
name
value:
@5006
key:
age
value:
@5005
주소 ... 1002 1003 ...
데이터
key:
people
value:
@5003
객체 타입의 변수에 할당된 메모리 주소는
동일하게 유지되면서,
해당 주소에 저장된 실제 데이터는
변경될 수 있음
people이라는 값의 주소는 변하지 않음!
자바스크립트의 데이터 할당 방식: 예시
자바스크립트의 데이터 할당 방식: 예시
새로운 변수 obj_b에 obj_a의 값을 넣을 때
실제 데이터가 아니라
메모리 주소(데이터의 위치)를 참조해가기 때문!
객체의 얕은 복사: 개념
객체의 얕은 복사: 개념
참조형 데이터를 복사할 때 원본 객체의 값이 아닌 참조만을 복사
따라서 새로운 변수는 원본 객체를 참조하며,
내부 객체들은 같은 메모리 주소 공유
이로 인해 내부 객체의 변경은 원본과 복사본 모두에 영향을 미침
객체의 얕은 복사: 구현 방법
객체의 얕은 복사: 구현 방법
객체의 깊은 복사: 개념 & 구현 방법
객체의 깊은 복사: 개념 & 구현 방법
객체의 깊은 복사: 개념 & 장점
원본 객체와 그 내부 객체들까지 모두 복사
따라서 복사본은 원본과 완전히 독립적인 별개의 객체가 됨
이로 인해 내부 객체의 변경은 원본과 복사본 간에 전파되지 않음
원본 데이터의 무결성을 보호하고 예기치 않은 부작용을 방지
감사합니다

More Related Content

More from Wonjun Hwang

Go언어로 디스코드 봇 만들기
Go언어로 디스코드 봇 만들기Go언어로 디스코드 봇 만들기
Go언어로 디스코드 봇 만들기Wonjun Hwang
 
완전 유용한 CSS 모음
완전 유용한 CSS 모음완전 유용한 CSS 모음
완전 유용한 CSS 모음Wonjun Hwang
 
2024 개발 트렌드
2024 개발 트렌드2024 개발 트렌드
2024 개발 트렌드Wonjun Hwang
 
디바운싱과 쓰로틀링
디바운싱과 쓰로틀링디바운싱과 쓰로틀링
디바운싱과 쓰로틀링Wonjun Hwang
 
스마트한 팀 협업
스마트한 팀 협업스마트한 팀 협업
스마트한 팀 협업Wonjun Hwang
 
구름톤 8기 후기
구름톤 8기 후기구름톤 8기 후기
구름톤 8기 후기Wonjun Hwang
 
2024년 키워드로 알아보는 트렌드
2024년 키워드로 알아보는 트렌드2024년 키워드로 알아보는 트렌드
2024년 키워드로 알아보는 트렌드Wonjun Hwang
 
오버라이딩 조금 더 알아보기
오버라이딩 조금 더 알아보기오버라이딩 조금 더 알아보기
오버라이딩 조금 더 알아보기Wonjun Hwang
 
컴포넌트 설계
컴포넌트 설계컴포넌트 설계
컴포넌트 설계Wonjun Hwang
 
Flutter & Firebase
Flutter & FirebaseFlutter & Firebase
Flutter & FirebaseWonjun Hwang
 
이미지 최적화
이미지 최적화이미지 최적화
이미지 최적화Wonjun Hwang
 
프론트엔드 비동기 프로그래밍
프론트엔드 비동기 프로그래밍프론트엔드 비동기 프로그래밍
프론트엔드 비동기 프로그래밍Wonjun Hwang
 

More from Wonjun Hwang (20)

Go언어로 디스코드 봇 만들기
Go언어로 디스코드 봇 만들기Go언어로 디스코드 봇 만들기
Go언어로 디스코드 봇 만들기
 
완전 유용한 CSS 모음
완전 유용한 CSS 모음완전 유용한 CSS 모음
완전 유용한 CSS 모음
 
2024 개발 트렌드
2024 개발 트렌드2024 개발 트렌드
2024 개발 트렌드
 
디바운싱과 쓰로틀링
디바운싱과 쓰로틀링디바운싱과 쓰로틀링
디바운싱과 쓰로틀링
 
Passkey
PasskeyPasskey
Passkey
 
스마트한 팀 협업
스마트한 팀 협업스마트한 팀 협업
스마트한 팀 협업
 
AI News '23.12
AI News '23.12AI News '23.12
AI News '23.12
 
Google Analytics
Google AnalyticsGoogle Analytics
Google Analytics
 
구름톤 8기 후기
구름톤 8기 후기구름톤 8기 후기
구름톤 8기 후기
 
2024년 키워드로 알아보는 트렌드
2024년 키워드로 알아보는 트렌드2024년 키워드로 알아보는 트렌드
2024년 키워드로 알아보는 트렌드
 
상속과 구현
상속과 구현상속과 구현
상속과 구현
 
오버라이딩 조금 더 알아보기
오버라이딩 조금 더 알아보기오버라이딩 조금 더 알아보기
오버라이딩 조금 더 알아보기
 
컴포넌트 설계
컴포넌트 설계컴포넌트 설계
컴포넌트 설계
 
성능 테스트
성능 테스트성능 테스트
성능 테스트
 
WebRTC
WebRTCWebRTC
WebRTC
 
Flutter & Firebase
Flutter & FirebaseFlutter & Firebase
Flutter & Firebase
 
SOLID
SOLIDSOLID
SOLID
 
MSW
MSWMSW
MSW
 
이미지 최적화
이미지 최적화이미지 최적화
이미지 최적화
 
프론트엔드 비동기 프로그래밍
프론트엔드 비동기 프로그래밍프론트엔드 비동기 프로그래밍
프론트엔드 비동기 프로그래밍
 

얕은복사,깊은복사

  • 1. 얕은 복사와 깊은 복사 자바스크립트 객체의 키트웍스 팀스터디 발표자 | 김한솔
  • 2. 1. 데이터 타입 자바스크립트의 데이터 타입 2. 데이터 할당 방식 자바스크립트가 데이터를 저장하는 방식 3. 얕은 복사 얕은 복사의 개념과 구현 방법 4. 깊은 복사 깊은 복사의 개념과 구현 방법 CONTENTS
  • 3. 자바스크립트의 데이터 타입 원시 타입 객체 타입 Number String Boolean null undefined Symbol Object Array Function RegExp Set Map ... Primitive type Object type
  • 4. 자바스크립트의 데이터 타입 원시 타입 객체 타입 변경 가능 여부 변수에 할당 시 다른 변수에 할당 시 변경 불가능한 값 실제 값 저장 원시 값 복사되어 전달 값에 의한 전달 변경 가능한 값 참조 값 저장 참조 값 복사되어 전달 참조에 의한 전달
  • 5. 자바스크립트의 데이터 할당 방식: 원시 타입 let fruit = ‘사과’ 주소 ... 1002 1003 1004 ... 데이터 key: fruit value: @5003 주소 ... 5003 5004 5005 ... 데이터 ‘사과’
  • 6. 자바스크립트의 데이터 할당 방식: 원시 타입 let fruit = ‘사과’ fruit = ‘오렌지’ 주소 ... 1002 1003 1004 ... 데이터 key: fruit value: @5004 주소 ... 5003 5004 5005 ... 데이터 ‘사과’ ‘오렌지’ 원시 타입 변수에 새로운 값 할당 시 새로운 메모리 공간에 값 저장
  • 7. 자바스크립트의 데이터 할당 방식: 객체 타입 let people = { name: ‘john’ age: 20 } 주소 ... 5003 5004 5005 5006 ... 데이터 @7104 ~ ? ‘john’ 20 주소 ... 7104 7105 7106 7107 ... 데이터 key: name value: @5004 key: age value: @5005 주소 ... 1002 1003 ... 데이터 key: people value: @5003
  • 8. 자바스크립트의 데이터 할당 방식: 객체 타입 let people = { name: ‘john’ age: 20 } people.name = ‘anna’ 주소 ... 5003 5004 5005 5006 ... 데이터 @7104 ~ ? ‘john’ 20 ‘anna’ 주소 ... 7104 7105 7106 7107 ... 데이터 key: name value: @5006 key: age value: @5005 주소 ... 1002 1003 ... 데이터 key: people value: @5003
  • 9. 자바스크립트의 데이터 할당 방식: 객체 타입 let people = { name: ‘john’ age: 20 } people.name = ‘anna’ 주소 ... 5003 5004 5005 5006 ... 데이터 @7104 ~ ? ‘john’ 20 ‘anna’ 주소 ... 7104 7105 7106 7107 ... 데이터 key: name value: @5006 key: age value: @5005 주소 ... 1002 1003 ... 데이터 key: people value: @5003 객체 타입의 변수에 할당된 메모리 주소는 동일하게 유지되면서, 해당 주소에 저장된 실제 데이터는 변경될 수 있음 people이라는 값의 주소는 변하지 않음!
  • 11. 자바스크립트의 데이터 할당 방식: 예시 새로운 변수 obj_b에 obj_a의 값을 넣을 때 실제 데이터가 아니라 메모리 주소(데이터의 위치)를 참조해가기 때문!
  • 13. 객체의 얕은 복사: 개념 참조형 데이터를 복사할 때 원본 객체의 값이 아닌 참조만을 복사 따라서 새로운 변수는 원본 객체를 참조하며, 내부 객체들은 같은 메모리 주소 공유 이로 인해 내부 객체의 변경은 원본과 복사본 모두에 영향을 미침
  • 14. 객체의 얕은 복사: 구현 방법
  • 15. 객체의 얕은 복사: 구현 방법
  • 16. 객체의 깊은 복사: 개념 & 구현 방법
  • 17. 객체의 깊은 복사: 개념 & 구현 방법
  • 18. 객체의 깊은 복사: 개념 & 장점 원본 객체와 그 내부 객체들까지 모두 복사 따라서 복사본은 원본과 완전히 독립적인 별개의 객체가 됨 이로 인해 내부 객체의 변경은 원본과 복사본 간에 전파되지 않음 원본 데이터의 무결성을 보호하고 예기치 않은 부작용을 방지