[코드팩토리] 자바스크립트의 데이터 타입

자바스크립트의 데이터 타입

Primitive Type:원시타입 (6개)

1. Number (숫자)

2. String (문자열)

3. Boolean (불리언, 참과 거짓)

4. undefined (정의가 되지 않은 상태)

5. null (정의가 되지 않은 상태)

6. Symbol

Object Type (1개)

7. Object (객체) : object, array, function(이 글에서 다루진 않음)

---

1. Number (숫자)

const age = 32;

위 변수는 Number 타입으로 선언한 모습이다.

const temperature = -10;와 같이 음수로도 선언 가능하다.

해당 변수가 어떤 타입인지 확인하고 싶을 때 console.log(typeof age);로 콘솔에 띄워볼 수 있다.

2. String (문자열)

const name = '자바스크립트';와 같이 변수의 값으로 문자를 할당하는 경우.

작은 따옴표로 감싸도 되고 큰 따옴표로 감싸도 된다.

다만 string 자체에 '' ""와 같이 따옴표를 사용하고 싶을 때는 내가 사용하고 싶은 따옴표 말고 다른 따옴표로 변수를 선언해주면 된다.

그런데 문자열을 쓰다 보면 줄바꿈(엔터)을 넣고 싶거나 할 수 있는데 엔터가 입력되면 다른 코드를 작성하게 되기 때문에 아래처럼 Escaping Character를 사용하여야 한다.

 

1. newline(줄바꿈) : \n

2. tap(탭) : \t

3. 백슬래시 : \\ (백슬래시 두번 넣기)

※ 백슬래시는 키보드에서 보통 엔터키 위에 있는 원화표시를 누르면 된다.

문자열에 따옴표를 하나만 넣을 때도 앞에 백슬래시를 넣으면 된다. \'

이렇게 작성하면 오류가 난다.

하지만 이렇게 작성하면 따옴표 하나만 사용할 수도 있다.

 

그런데, 위의 규칙을 모두 준수하기엔 복잡하다. 그래서 나온 것이 `` 백틱(키보드 물결표시)이다.

`` 백틱 안에 글자를 넣으면 우리가 코드입력창에서 보는 그대로  String을 출력 가능하다.

이것을 사용하면 Escaping Character를 사용하지 않고도 다양하게 String을 구성할 수 있다.

 

백틱을 사용하는 또 다른 예시는 이미 선언된 변수에 다른 String을 변수 선언 없이 추가하는 경우인데,

아래의 두 예시는 모두 같은 값을 보여준다.

 

매번 +를 넣기도 불편하고 또 공백을 따옴표 안에서 직접 넣어줘야 하기 때문에 코드가 지저분해질 수 있는데, 백틱을 사용하면 더 편리하다.

백틱을 사용해서 변수를 지정할 때는 ${변수명}의 형태로 변수를 불러온다.

3. Boolean

true, false 으로만 이루어진 값.(참과 거짓)

true와 false는 이미 정해진 keyword이기 때문에 변수명으로는 지정을 할 수 없다.

4. undefined

사용자가 직접 값을 초기화하지 않았을 때 지정되는 값.

사용자가 직접 undefined로 값을 지정하는 경우는 없다.

둘 다 같은 undefined 값을 출력하지만, 어차피 변수의 값을 할당하지 않으면 기본값으로 undefined가 출력되기 때문에 굳이 undefined로 값을 할당할 필요가 없다는 뜻이다.

5. null

undefined와 같이 값이 없을 때 사용되는 값이지만, undefined는 사용자가 값을 지정하지 않았을 때 default로 지정되는 값이고, null은 사용자의 의지로 값을 일부러 지정하지 않을 때 사용하는 값이다.

위의 코드를 보면 name이라는 변수의 값으로 일부러 null로 할당했다.

그랬더니 콘솔에 출력할 때도 null 값으로 표현되지만, typeof 함수로 변수의 타입을 출력해보니 object라고 출력된다.

null 데이터타입은 primitive type임에도 object라고 뜨는 건 자바스크립트의 버그이다.

6. Symbol Type

유일무이한 값을 생성할 때 사용한다.

다른 primitive type과 다르게 Symbol 함수를 호출해서 사용한다.

사용빈도가 많진 않지만 object type을 다룰 때 사용되기도 한다.

위의 코드를 보면 test1과 test2라는 변수는 모두 Number type을 사용해 값을 1로 할당하였고 이 두 개의 변수가 같은 값인지 === 를 통해 콘솔에 띄웠더니 true 값이 출력됐다.

그리고 1이라는 값을 '' 따옴표 안에 넣어 test3, test4라는 변수의 값으로 할당했는데 이것도 true로 출력된다.

즉 Number type이든 String type이든 같은 값으로 출력되는데 이 1을 Symbol type으로 지정하면 결과가 달라진다.

Symbol(); 이라는 데이터 타입을 사용해서 1을 number type과 string type으로 동일하게 했음에도 모두 false가 출력된다.

이것은 각각 지정한 symbol1~4라는 변수가 그 자체로 유일무이한 값을 가졌기 때문이다.

여기서 중요한 것은 Symbol 타입을 사용할 때는 반드시 S를 대문자로 사용해야 한다.

7. Object Type

자바스크립트에서 사용빈도가 가장 높다.

Map이라고 표현을 하는데 key:value 형태로 이루어진다.

사용 형태는 다음과 같다.

const dictionary = {값};

 

이렇게 응용도 가능하다.

오브젝트 변수에 할당된 값을 불러올 때는 key값['value값']의 형태로 불러온다.

 

7-1. Array type

object type은 아니지만 object type에 해당하는 타입이다.

값을 리스트로 나열할 수 있는 타입이다.

기본형은 변수명 = ['값1', '값2', '값3']; 이다.

위와 같이 value의 순서대로 0부터 시작해서 key값[n번째 value] 의 형태로 value를 꺼내올 수 있다.

위에서 '사과', '배' 같이 지정된 것을 Index라고 한다.

그런데 const로 변수를 선언하면 값을 바꿀 수 없지만 array에서는 가능하다.

 

 

 

 

팁: Static typing과 dynamic typing

static typing은 변수를 선언할 때 어떤 타입의 변수를 선언할지 명시를 해야 하는데,

dynamic typing은 변수의 타입을 명시적으로 선언하지 않고 값에 의해 타입을 추론한다.

JavaScript의 경우에는 dynamic typing 방식이다.

 

 

 

 

 

 

 

출처 : https://youtu.be/ZOVG7_41kJE?si=sNplqTAaQSJGLekm