[자바스크립트] 타입 종류의 특징 및 예제(Primitive Data Type)

Primitive Data Type에 대해서 알아보고 자바스크립트 엔진에서 자동 캐스팅 되는 것을 확인해 보자. 

 

 

Primitive Data Type 종류 

1. Number 타입

2. String 타입

3. Boolean 타입

4. Undefined 타입

5. Null 타입

 

 

1. number 타입

소스 코드

// Number

let age = 31;

let tall = 186.7;

let inf = Infinity;

let minusInf = -Infinity;

let nan = NaN;

console.log(age, typeof age);

console.log(tall, typeof tall);

console.log(inf, typeof inf);

console.log(minusInf, typeof minusInf);

console.log(nan, typeof nan);

결과

31  "number"

186.7 "number"

Infinity "number"

-Infinity "number"

NaN "number"

number 형식에는 정수, 실수, Infinity, NaN 등 다양한 number 형식이 존재한다.

아래 결과 log를 보면 typeof 함수를 사용해서 각 변수들의 타입을 확인할 수 있다.

모든 결과가 number 형식인 것을 확인할 수 있다. 

 

 

2. string 타입

소스 코드

// String

let name = "shoney";

let name2 = "쇼니";

name = `shoney ${name2}`; //물결을 누르면 ``사용 가능

console.log(name);

console.log(typeof name);

결과

shoney 쇼니

string

string에서 설명할 내용은 ~물결 버튼을 눌러서 `` 를 사용하는 것이다.

그리고 ${}를 통해서 string에 변수를 넣어 사용할 수 있다. 

 

3. boolean 타입

소스 코드

// Boolean

let isSwitchOn = false;

console.log("스위치 On 인가 ? : " + isSwitchOn);

console.log(typeof isSwitchOn);

결과

스위치 On 인가 ? : false

boolean

true, false를 값을 필요로 할때 boolean 타입을 사용한다. 

 

4. undefined 타입

소스 코드

// Undefined

let a;

console.log(a);

결과

undefined

일반적인 언어들과의 차이가 있었다. 보통 선언만 하고 값을 넣지 않는 경우에는 null값을 가지는 것이 보편적인데, 자바스크립트에서는 아무것도 값을 넣지 않으면 undefined로 출력된다. 

 

5. null 타입

소스 코드

// Null

let b = null;

console.log(b);

결과

null

undefined로 출력되고 싶지 않다면, null을 직접 넣어줘야지 사용할 수 있다. 

 

6. 자바스크립트 엔진에서 자동 캐스팅

자바 스크립트 엔진에서 자동으로 캐스팅해주는 것을 아래 예제로 확인할 수 있다. 

소스 코드

// 자바스크립트 엔진이 알아서 캐스팅이 진행됨

let numberA = 12;

let numberB = "2";

console.log(numberA * numberB); //곱셈은 두 변수를 숫자로 캐스팅해서 사용

console.log(numberA + numberB); //덧셈은 두 변수를 문자로 캐스팅해서 사용

console.log(numberA + parseInt(numberB)); // parseInt 사용해서 덧셈 가능

결과

24

122

14

숫자 12와 문자 2를 곱하면 24로 출력되는 것을 확인할 수 있다. 보통 다른 언어에서는 다른 형식 곱셈은 지원하지 않는다. 이런점에서 자바스크립트의 장점이기도 하고 문자와 숫자를 구분을 정확하게 하지 않는다면 원치 않는 값을 반환할 수도 있는 단점? 이 존재한다. 

덧셈에서는 또 다른 결과가 나오는데, 숫자 12와 문자2를 덧셈하면 122라는 문자를 반환한다. 자바스크립트 엔진에서 캐스팅 하는 조건이 다양할 것으로 예상되는데 결과값을 충분히 확인하고 log를 찍도록 해야한다. 14의 값을 나오도록 하고 싶다면, parseInt를 사용해서 문자를 숫자로 변형 후에 덧셈을 진행하면 원하는 값을 반환할 수 있다.