JS 타입 종류
//number
5, 3, 6
//boolen
true, false
//string
"hello"
//undefined
undefined
//null
null
//symbol
Symbol("just symbol")
//object
{}
자바스크립트의 타입 종류는 각각 아래와 같다.
- number: 숫자
- boolen: 참, 거짓
- string: 문자열
- undefined: 아직 정해지지 않은 값
- null: 비어있는 값(undefined과 다르게 비어있다고 정해져 있는 값)
- symbol: es6에서 추가된 변수타입, 유니크한 값을 가진다. symbol 설명글
- 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라 되어있는데 배열은 객체가 맞기도 하고 아니기도 하다.
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 객체라 하며 가비지 콜렉터에 의해 바로 수집되므로 엄밀히 말하면 객체는 아니다.
- 변수타입마다 내장된 메서드들이 있으며 이는 빌트인 객체를 통해 제공한다.
'Front-end > JavaScript' 카테고리의 다른 글
JS Type 3편 - type Coercion(==, === 차이) (0) | 2022.12.30 |
---|---|
JS Type 2편 - 얕은 복사, 깊은 복사(shallow & deep clone) (0) | 2022.12.26 |
JS 동작원리 10편 - call, apply, bind (0) | 2022.12.24 |
JS 동작원리 9편 - Scope(lexical & dynamic)와 this (0) | 2022.12.19 |
JS 동작원리 8편 - 실행 컨텍스트(VE, scope chain, this) (1) | 2022.12.11 |