[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)
  • 태그

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

티스토리툴바