[데브코스] TIL - 27일차

Yunjjeong·2022년 4월 28일
0

오늘 공부한 내용 💻

  • 고양이 사진첩

  • 원시형과 참조형

  • 깊은 복사 VS 얕은 복사

  • 스프레드 오퍼레이터


원시형과 참조형

  • 원시형(primitive type)

    객체가 아니면서 method도 가지지 않는 데이터.
    string, number, bigint, boolean, undefined, symbol, null

  • 참조형(reference type)

    원시형이 아닌 모든 자료형을 의미한다.
    객체, 배열, 함수 등이 참조형에 속한다.

원시 타입의 불변성

원시 타입은 변수에 할당될 때 고정된 메모리의 크기로 원시 값을 저장하고 그 값을 변수가 직접 가리키는 형태를 띄며 불변성을 가지고 있다.

let a = 1;
a = 2;

그렇지만 ,,, 불변성이라니 ,,, 위처럼 재할당을 하면 값이 바뀌지 않는가 ,,,?

바뀌는게 아니라 바뀌는것 처럼 보이는거다 ! 😈

원시 타입은 값이 변하지 않는 불변성을 가지고 있기 때문에 재할당을 하면 기존 값이 변하는 것 처럼 보일지 몰라도, 재할당을 하면 새로운 메모리에 다시 값을 저장하고 변수는 그 메모리를 가르키게 된다.

결국, 가리키는 메모리가 달라졌을 뿐.

그럼 참조형은?

참조형은 변수에 값을 저장할때 변수에 값이 아닌 주소를 저장한다.
그렇기 때문에 참조형 자료는 복사를 하면 문제가 발생하는데 ,,,
a에만 4를 push했으니 a = [1, 2, 3, 4] / b = [1, 2, 3] 과 같은 결과를 기대하지만,
a 뿐만 아니라 b에 모두 추가된 모습을 볼 수 있다.

각각 값을 가리키는것이 아닌 같은 주소를 가리키기 때문에 함께 변경된다.

얕은 복사 VS 깊은 복사

  • 얕은 복사(shallow copy)

    얕은 복사는 참조(주소) 값의 복사를 나타낸다.
    복사를 할 때 새로운 데이터가 생성되는 것이 아니라 해당 데이터의 참조값을 전달하여 한 데이터를 공유하는 것 !!
    객체, 배열과 같은 참조 자료형을 복사하는 것이 얕은 예시라고 할 수 있다.

  • 깊은 복사(deep copy)

    깊은 복사는 값 자체의 복사를 나타낸다.
    원시 타입의 복사가 이에 해당되며, 복사를 할 때 독립적인 메모리에 값을 할당하여 생성하는 것 !!


어려웠던 내용 🤢

스프레드 오퍼레이터(spread operator)

스프레드 오퍼레이터(...)는 특정 객체 또는 배열의 값을 다른 객체, 배열로 복제하거나 옮길 때 사용한다.
참조형에서 깊은 복사를 하고싶을 때 사용 가능하다 !

하지만 ...

😈 depth가 두 단계 이상이라면 깊은 복사를 할 수 없다 !! 😈
(Object.assign()도 이와 같은 경우에 해당한다.)

따라서 depth가 두 단계 이상이라면 JSON.stringify 같은 메소드나 라이브러리를 사용해야 한다 😁

느낀점 👀

여태껏 과제나 프로젝트를 하면서 생각없이 객체나 배열을 복사하는 경우가 얼마나 많았을까 ... 라는 생각을 하게 되었다 😣

이런 부분이 나중에 생각치 못한 오류를 불러오고, 이런 오류는 나중에 해결하는 것은 굉장히 어렵겠지 ,,,

강의 외에 따로 이렇게 공부를 하고 정리를 하는 시간을 가지니까 하루의 마무리가 굉장히 뿌듯하다아


참고 사이트 🙄

profile
Studying FrontEnd Development

2개의 댓글

comment-user-thumbnail
2022년 4월 28일

👍👍👍

1개의 답글

관련 채용 정보