본문 바로가기
웹(web)/프론트엔드-javascript

[Data type] data type

by 바코94 2020. 5. 30.

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