JS primitive, reference

ou·2024년 1월 18일
0

basic

목록 보기
7/24

모든 프로그래밍 언어에는 내장된 자료구조가 존재함
JS에서 사용할 수 있는 내장 자료구조와 그 속성에 대해서 알아보자

Primitive(원시 값)

객체가 아니면서 메서드, 속성도 가지지 않는 데이터

  • string
  • number
  • bigint
  • boolean
  • undefined
  • symbol
  • null

모든 원시 값은 불변하여 변형할 수 없음.
원시 값 자체와 원시 값을 할당한 변수를 혼동하지 않도록 주의
변수에는 새로운 값을 할당할 수 있지만, 이미 생성한 원시 값은 객체, 배열, 함수와 달리 변형할 수 없음. 원시 값을 변경하는 기능을 언어에서 제공하지 않음.

원시 값에는 메서드가 없지만 마치 메서드가 있는 것 처럼 동작.
원시 값의 속성에 접근하면 JS는 래퍼 객체로 자동포장해서 객체 속성에 접근
예를 들어

const foo = "string"; //string primitive
foo.includes("s") // true
//암묵적으로 String 래퍼 객체를 생성하고 해당 객체에 대해 String.prototype.includes()를 호출

원시 값은 메모리의 콜스택에 저장된다.
더 알아보니 모든 원시 값이 스택 메모리에 저장되는 것은 아닌듯하다.
사실 메모리가 스택과 힙으로 구분되는게 맞는지도 아직까지 모호함.
-> 스택과 힙으로 구분된다. 이 글 참고
추후에 알게되면 다시 와서 수정하도록 하겠다.

Reference

원시 값 외의 객체는 참조 타입으로 변수의 크기가 동적으로 변하기 때문에 Heap에 저장된다.
객체는 유일한 변경 가능한 값으로 Function도 사실 객체이다.
콜스택에는 Heap의 주소가 저장돼있고 예를 들어 배열의 push, pop이 발생할 경우 Heap으로 찾아서 value를 수정한다.

아래 그림을 보면 myArray 변수는 Call stack의 Value에 Heap의 Address가 기록돼있다. myArray에 push나 pop이 발생하면 Heap의 해당 주소로 찾아서 Value를 갱신한다.

마지막으로 원시, 참조 타입을 정리해둔 테이블이다.

이번 글을 마치며

이번 글에서 또 JS 엔진의 콜스택, 힙이라는 개념이 등장하고
이번 글이 const와 let이 어떻게 동작하는지에 대한 배경이기도 하다.?
배우면 배울수록, 알아가면 알아갈수록 연쇄적으로 알아야하는 것들도 많아지고
여태까지 그냥 써왔던 const,let도 지금은 아 그래서~~ 라는 느낌으로 조금 이해되기 시작했다. 머리 아픈데 한편으로 재미있기도하다.

참고자료
https://charming-kyu.tistory.com/19 (⭐⭐)
https://developer.mozilla.org/ko/docs/Glossary/Primitive
https://seokzin.tistory.com/entry/JavaScript-JavaScript-%EC%97%94%EC%A7%84-%EA%B5%AC%EC%A1%B0-Call-Stack-Memory-Heap (let과 const까지 ⭐)
https://velog.io/@milkyway/%EB%A9%94%EB%AA%A8%EB%A6%AC-%ED%9E%99heap%EA%B3%BC-%EC%BD%9C%EC%8A%A4%ED%83%9DCall-stack (⭐)

profile
경험을 현명하게 사용한다면, 어떤 일도 시간 낭비는 아니다.

0개의 댓글

관련 채용 정보