사과먹는중
당근먹는하니
귀엽고 행복해
당근먹는하니
전체 방문자
오늘
어제
  • 분류 전체보기 (274)
    • 다람쥐🐿 (26)
    • C++ 공부빵야 (7)
    • 공부👻 (5)
    • 프론트엔드✏️ (228)
      • 코드캠프 (120)
      • 팀 프로젝트✨ (31)
      • 개인공부 (67)
    • 프론트엔드 - 바닐라js (7)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • typescript
  • algorithm
  • 알고리즘
  • graphql
  • 팀 프로젝트
  • React-hook-form
  • 코드캠프
  • 회고
  • 공통 컴포넌트
  • emotion
  • 리액트
  • 팀프로젝트
  • 코딩 부트캠프
  • javascript
  • 배포
  • 팀플
  • HTML
  • next.js
  • refreshtoken
  • CSS
  • 부트캠프
  • JS
  • 배열
  • javascrpit
  • 코딩
  • 프로그래머스
  • react
  • ssg
  • 프론트엔드
  • 자바스크립트

최근 댓글

최근 글

티스토리

250x250
반응형
hELLO · Designed By 정상우.
당근먹는하니
프론트엔드✏️

토끼는 당근과 사과 둘 다 먹고 싶어! 얕은복사와 깊은 복사. Shallow Copy와 Deep Copy

토끼는 당근과 사과 둘 다 먹고 싶어! 얕은복사와 깊은 복사. Shallow Copy와 Deep Copy
프론트엔드✏️

토끼는 당근과 사과 둘 다 먹고 싶어! 얕은복사와 깊은 복사. Shallow Copy와 Deep Copy

2022. 7. 1. 10:09
728x90
반응형

 

 

 쉽게 말하자면, 얕은 복사는 주소값을 복사하는 것이고 깊은 복사는 값 자체를 복사해오는 것이다.

 

 객체는 참조 자료형으로 값 자체를 담고 있는 게 아니라 값이 있는 주소를 담고 있다.

그래서 like2를 like에 복사한 후, like2의 food를 변경한 거지만 사실은 그 주소로 찾아가 carrot을 apple로 바꾼 것이기 때문에

같은 주소를 공유하는 like, like2 둘 다 apple이 된 것이다!!!

 

(박스에 당근이 담겨있는 곳의 주소가 들어있다. 그리고 그 박스를 두 개 만들었으니 당근은 여전히 하나고 주소를 담는 박스만 복사된 것이다. )

 

  C++ 공부할 땐... string을 복사할 때 많은 문제가 있었다. 다른 건 원시자료형인데 string이 참조자료형이었기 때문이다.

자바스크립트에서 string은 그렇지 않으니 괜찮다.(자바스크립트에선 원시 자료형이다.)

 

 

 하지만 토끼는 당근 하나, 사과 하나를 먹고 싶다! 전부 사과로 바꾸고 싶은 것이 아니다.

그러면 주소를 복사하는 게 아니라 값 자체를 가져오면 된다. 

 let like2 = {...like}; 의 뜻은 새로운 객체를 만들고 그 안에 like의 내용을 스프레드로 뿌려서 할당한다는 것이다.

그래서 like2는 like와 완전 별도의 객체가 된다. 그래서 이때는 각각의 주소값이 다르고 값도 따로 있기 때문에 like2의 당근만이 사과로 변경된 것이다! 이걸 깊은 복사라고 한다. 박스만 복사한 게 아니라 새로운 박스에 당근을 복사해서 담고, 그 당근을 사과로 바꾼 것이다. 

728x90
반응형
저작자표시 비영리 동일조건 (새창열림)

'프론트엔드✏️' 카테고리의 다른 글

Javascript와 Node.js, JS V8 Engine  (0) 2022.07.01
==(동등 연산자), ===(일치 연산자)의 차이점  (0) 2022.07.01
나 보고 있는거야?!?!?!! observable/promise. Hot&Coooool  (0) 2022.07.01
*-커비 프로젝트-* MBTI와 로스트아크 캐릭터!  (0) 2022.06.12
*-커비 프로젝트-* 가 무색하게 커비는 의미없어지고 있어  (0) 2022.06.09
    '프론트엔드✏️' 카테고리의 다른 글
    • Javascript와 Node.js, JS V8 Engine
    • ==(동등 연산자), ===(일치 연산자)의 차이점
    • 나 보고 있는거야?!?!?!! observable/promise. Hot&Coooool
    • *-커비 프로젝트-* MBTI와 로스트아크 캐릭터!
    당근먹는하니
    당근먹는하니

    티스토리툴바

    단축키

    내 블로그

    내 블로그 - 관리자 홈 전환
    Q
    Q
    새 글 쓰기
    W
    W

    블로그 게시글

    글 수정 (권한 있는 경우)
    E
    E
    댓글 영역으로 이동
    C
    C

    모든 영역

    이 페이지의 URL 복사
    S
    S
    맨 위로 이동
    T
    T
    티스토리 홈 이동
    H
    H
    단축키 안내
    Shift + /
    ⇧ + /

    * 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.