Front-end/JavaScript

JS Type 1편 - 자바스크립트 타입 종류(primitive, non-primitive)

파리외 개발자 2022. 12. 26. 00:17

JS 타입 종류

//number
5, 3, 6
//boolen
true, false
//string
"hello"
//undefined
undefined
//null
null
//symbol
Symbol("just symbol")
//object
{}

자바스크립트의 타입 종류는 각각 아래와 같다.

  1. number: 숫자
  2. boolen: 참, 거짓
  3. string: 문자열
  4. undefined: 아직 정해지지 않은 값
  5. null: 비어있는 값(undefined과 다르게 비어있다고 정해져 있는 값)
  6. symbol: es6에서 추가된 변수타입, 유니크한 값을 가진다. symbol 설명글
  7. object: 객체 타입

primitive, non-primitive (원시형, 참조형)

//primitive
typeof 1;
typeof true;
typeof "string";
typeof undefined;
typeof null;
typeof Symbol("im symbol");

//non-primitive
typeof {};
typeof [];
typeof function () {};

위 변수 타입들은 원시값을 가진다.

원시값이란 call by value, 해당 타입의 변수는 자신의 메모리 공간에 값이 저장된다.

여기서 null의 타입을 보면 object라고 되어있는 데

이는 JS가 초창기에 개발될 때 typeof함수를 만드는 과정에서 생긴 에러이다.

현재도 에러를 인지하고 있지만 몇 가지 이유때문에 고치지 않을 뿐

명백한 에러이니 null은 object가 아님을 명시하겠다.

다음으로 참조형 변수이다.

원시형 변수와 다르게 자신의 메모리 공간에 값이 아닌 주소가 저장된다.

주소들을 따라가면 참조해야 될 값들이 저장되있으므로 참조형 변수다.

여기서 배열의 타입을 보면 object라 되어있는데 배열은 객체가 맞기도 하고 아니기도 하다.

non-primitive type Is Object

JS Built in Object?

//call by reference, obj did not have memory 1, directly
const obj={
  property:1
}

console.log(obj.property)//1
console.log(property)//err

객체란 속성을 키-값 쌍으로 가지는 데이터 타입을 의미한다.

객체 obj의 속성 property(key) : 1(value)에 접근하기 위해서는

obj에 .(dot연산자)를 사용해 접근할 수  있는데

이는 obj라는 객체에는 주소값이 저장되며

해당 주소에 해당하는 데이터 공간에서 속성의 값을 참조할 수 있음을 의미한다.

따라서 속성 property를 전역에서 그냥 찾으려고 하면 참조오류를 발생시킨다.

function a() {
  return 5;
}

a.hi = "a is hi";

console.log(a.hi);

이번엔 함수를 보자, 함수의 타입은 확실히 object가 아닌 function이었다.

그런데 함수에 속성을 추가하고 정상적으로 출력까지 할 수가 있다.

이게 어떻게 된 일일까? 함수도, 배열도 결국 객체인 것일까?

Array Is Array

var arr = ["1", "2", "3"];

var arr = {
  0: "1",
  1: "2",
  2: "3",
};

위는 배열이고 아래는 객체이다.

비슷해 보이지만 엄연히 다르다.

Array.isArray([1, 2, 3]);
Array.isArray({
  0: "1",
  1: "2",
  2: "3",
});

Array는 내장함수 isArray를 사용해 배열인지 아닌지 확인할 수 있다.

이로써 배열은 객체가 아닌 것을 밝혀냈다.

그런데 왜 배열의 type은 객체로 나왔으며 객체일 수 도 있고 아닐 수도 있다고 했을까?

Standard Built in Object

빌트인 객체에 대해선 다뤄야 할 부분이 상당히 많기 때문에

타입에 대해 다루는 해당 글에서는 간략하게만 다룬다.

JS는 객체 기반이며 모든 변수 타입은 객체와 연관이 깊다.

Number()
String(a)
//...
Boolean(true).toString()

js에는 변수 타입 형식의 함수형식들이 있다.

물론 undefined나 null등 모두 존재하는 것은 아니다.

var num=1;
var numObj=new Number(1);

console.log(num);
console.log(numObj);

console.log(typeof num);
console.log(typeof numObj);

console.log(num.valueOf());
console.log(numObj.valueOf());

그중 Number를 사용해 보겠다.

하나는 일반 변수처럼 숫자 1을 할당했고

다른 하나에는 Number를 사용해 1의 값을 가지는 인스턴스를 생성시켰다.

각각 1의 값과 Number객체를 할당받았다.

각각 타입은 number타입과 object타입을 가진다.

그리고 둘 모두 같은 1 값을 가진다.

그리고 둘 다 dot연산자를 찍어보면 내장함수를 동일하게 가지는 것을 알 수 있다.

  • Array와 function은 객체의 또 다른 형태, 특별한 객체이다.
  • 참조형 변수뿐 아니라 원시형 변수 또한 dot연산자를 사용할 때 순간적으로 객체취급을 받는데 이는 wrapper 객체라 하며 가비지 콜렉터에 의해 바로 수집되므로 엄밀히 말하면 객체는 아니다.
  • 변수타입마다 내장된 메서드들이 있으며 이는 빌트인 객체를 통해 제공한다.