javascript 의 데이터 타입에 대해 알아보자.
우선 크게 기본 타입과 참조 타입으로 나뉜다.
기본 타입은 다음과 같다.
Number : 모든 숫자는 소수형태로 저장된다. 모든 숫자는 Number 타입이라고 보면 된다.
String : " " 를 사용하여 만들면 스트링이다. ' ' 로 만들어도 된다. 변수로 한 번 만들면 read만 가능하다. 인덱스로 접근 가능하다.
Boolean : True or False
null : null로 명시적으로 지정한 경우다. typeof 를 사용하여 찍어보면 Object로 나오고 해당 값이 null이다.
undefined : 어떠한 타입도 아닌 경우이다. 기본 타입 4개를 비롯해 어떤 값도 안 들어있는 경우이다. var a; 와 같이 선언만 해두면 타입이 없기 때문에 undefined이다.
정리하면
기본 타입 종류 | typeof | value |
Number | number | 1, 2, 1.5, -1 과 같은 모든 숫자 |
String | string | "hello", 'hi' 과 같은 모든 스트링 |
boolean | boolean | true/false |
null | object | null |
undifined | undifined | undefined |
기본 타입이 아니면 참조 타입이다.
참조 타입은 Object라는 데이터타입으로 관리된다.
따라서, javascript를 잘 다루기 위해서는 Object을 통해 데이터를 관리하는 것이 핵심이다.
쉽게 말하면, 앞서 설명한 기본타입이 아니면 Object라고 보면 된다.
Object는 무엇이고 어떻게 관리될까?
javascript(이하 js)에서 Object는 key:value를 저장하는 컨테이너이다. 쉽게 생각해서 python의 딕셔너리나 c의 struct 를 생각하면 쉬울 것이다. 자료구조의 해시맵 형태인 것이다.
이것이 전부이며 앞으로 Object에 들어갈 수 있는 배열, 함수, 정규표현식을 배우게 된다.
우선 빈 Object를 생성해보자.
var foo = new Object();
참조 타입의 전부라는 Object를 생성했다.
var foo = {};
이렇게 써도 똑같다.
그럼 안에 내용이 들어있는 Object를 생성해보자.
var foo = { name : 'foo', age : 30 };
json, dictionary(python), struct(c) 와 같은 것들 중에 하나라도 써보았다면 너무 쉬울 것이다.
Object 안에 들어있는 것을 사용하는 법도 직관적이다.
이름을 가져오고 싶으면 foo.name으로 가져오면 된다. foo['name']도 똑같다.
단, key에 숫자나 foo-name과 같은 표현식이 들어갈 경우에는 대괄호([])를 사용해야만 접근이 가능하다.
foo = {1: 'a'}; 와 같이 만들고 foo.1 은 안된다.
새로운 key:value를 추가해보자.
foo.address = 'seoul';
속성 추가나 속성 사용시 . 과 [] 를 어떻게 구분해서 써야하는지 헷갈릴 것이다. 기준을 간단하게 잡으면 편하다.
숫자면 []사용, 숫자가 아니면 . 사용
단순하게 생각하고 익숙해졌을 때 다른 방식도 사용하는 것이 좋다.
foo{'name' : 1, 5: 1234}
각각의 속성을 사용할 때 어떻게 써야할까?
답은 foo.name과 foo[5]를 사용하면 된다. 추가할 때도 똑같다. 참고로 foo{name: 1} 으로 저장하는 것과 foo{'name' : 1}로 저장하는 것은 모두 foo{name: 1}로 저장된다.
key:value를 삭제해보자
del foo.name;
참조
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures
'웹(web) > 프론트엔드-javascript' 카테고리의 다른 글
[Operator] Primitive type & standard method (0) | 2020.05.30 |
---|---|
[Data type] Array (0) | 2020.05.30 |
[Data type] Prototype (0) | 2020.05.30 |
[Data type] Object (0) | 2020.05.30 |
HTML DOM 이란?(Document Object Model) (0) | 2020.05.05 |