[JavaScript] 자바스크립트의 원시 타입

2022. 6. 18. 15:06·JavaScript
반응형

기초 

자바스크립트에는 6가지 원시 데이터 타입이 있다. 

원시 데이터 타입이란 자바스크립트에서 객체가 아닌 것을 말하면 값 그대로 저장된 것을 말한다. 

  • Booleans : true or false
  • null
  • undefined
  • number
  • string
  • symbol

6가지 원시 타입에 ECMAScript 표준은 Object를 정의했다. Object는 키-값 저장소이다. 

const object = {
    key: "value"
}

즉, 원시 타입( Primitive Type )이 아닌 것은 Object이다. 여기에는 함수와 배열도 포함이다. 

// Primitive Types
true instanseof Object;       // false => boolean
numm instanseof Object;       // false => null
undefined instanseof Object;  // false => undefined
0 instanseof Object;          // false => number
'string' instanseof Object;   // false => string

// Non Primitive Types
const func = function () {};  
func instanseof Object;       // true  => function

 

원시 타입

원시 타입은 변수에 할당될 때, 메모리의 고정 크기로 원시 값을 저장하고 해당 저장된 값을 변수가 가리키는 형태이다.

그리고 재할당 시 기존 값을 변경시키는 것처럼 보일지 몰라도 새로운 메모리에 재할당한 값이 저장되고 

변수가 가리키는 메모리가 달라지는 불변성을 가지고 있다. 

let a = 100;
a = 50;

a라는 변수에 100이란 값을 할당하고 2번째 라인에 50으로 재할당해준 예시이다. 

첫 라인이 실행되면 메모리에 Number 타입의 100이 생성되고 a는 메모리에 생성된 100의 주소를 가리킨다. 

그 후, 두 번째 라인이 실행되면 100이란 값이 50으로 수정되는 것이 아닌 새로운 Number 타입의 50이 생성되고 

a가 가리키던 메모리를 바꾸는 것이다. 

반면에 Object는 참조 타입으로 데이터 자체는 별도의 메모리 공간 ( Heap )에 저장되며, 변수에 할당 시 

데이터에 대한 주소 ( Heap 메모리의 주소 값 )가 저장되기 때문에 자바스크립트 엔진은 변수가 가지고 있는 

메모리 주소를 이용해서 변수의 값에 접근한다. 

함수 

함수는 특별한 프로퍼티를 가진 새로운 형태의 객체이다. 

const func = function (props) {};
func.name;   // "func"
func.length; // 1

일반적인 객체와 같이 함수에 새로운 프로퍼티를 추가하는 것도 가능하다. 

func.age = 11;
func.age; // 11;

 

반응형
저작자표시 비영리 변경금지 (새창열림)

'JavaScript' 카테고리의 다른 글

[JavaScript] ==과 === 차이  (1) 2022.06.20
[JavaScript] 암묵적 타입 변환  (1) 2022.06.19
[JavaScript] Destructuring 문법  (0) 2022.06.13
[JavaScript] ... 문법  (2) 2022.06.11
[JavaScript] 콜스택  (1) 2022.06.04
'JavaScript' 카테고리의 다른 글
  • [JavaScript] ==과 === 차이
  • [JavaScript] 암묵적 타입 변환
  • [JavaScript] Destructuring 문법
  • [JavaScript] ... 문법
잉여개발자
잉여개발자
풀스택 개발자를 목표로 잉여롭게 개발 공부도 하면서 다양한 취미 생활도 즐기고 있는 잉여 개발자입니다.
  • 잉여개발자
    잉여로운 개발일지
    잉여개발자
    • 분류 전체보기 (789)
      • 개발정보 (36)
      • 개발환경 (7)
      • 개발생활 (19)
      • React (141)
        • 이론 (23)
        • 기능 (12)
        • 실험실 (88)
        • 버그 (6)
        • 패스트캠퍼스 (9)
        • Npm (3)
      • React Native (28)
        • 공통 (6)
        • TypeScript (3)
        • JavaScript (18)
        • 버그 (1)
      • Next.js (30)
        • 이론 (13)
        • 실험실 (13)
        • 버그 (3)
      • Web (35)
      • 알고리즘 (202)
        • 풀이 힌트 (39)
      • JavaScript (47)
      • TypeScript (29)
        • 기초 (27)
        • 실험실 (2)
      • Node.js (13)
        • 이론 (0)
        • 기능 (3)
        • 실험실 (9)
        • 버그 (1)
      • 도커 (4)
      • CCNA (22)
        • 이론 (4)
        • 문제 (18)
      • 취미생활 (167)
        • 잉여로운 칵테일 (2)
        • 잉여의 식물키우기 (130)
        • 잉여로운 여행기 (11)
        • 잉여의 제2외국어 (21)
        • 잉여로운 책장 (2)
      • Java (1)
        • Java의 정석 (1)
      • 꿀팁 공유 (3)
  • 태그

    식물
    덤프
    영어회화
    Node.js
    타입스크립트
    영어독학
    Docker
    알고리즘
    리얼학습일기
    typescript
    타일러영어
    다이소
    redux
    javascript
    react
    바질
    Babel
    리액트
    프로그래머스
    CCNA
    자바스크립트
    ChatGPT
    리얼클래스
    next.js
    CSS
    네트워크
    네이버 부스트캠프
    바질 키우기
    ReactNative
    webpack
  • hELLO· Designed By정상우.v4.10.1
잉여개발자
[JavaScript] 자바스크립트의 원시 타입
상단으로

티스토리툴바