자바스크립트 정리하며 배우기[03] - Data type[기본 타입(primitive)

안녕하세요. Tay 입니다.

자바스크립트 사용에 앞서 기본적으로 알아야할 데이터 타입에 대해 설명하겠습니다.

데이터 타입은 1) 기본 타입 과 2) 참조 타입 으로 나뉩니다.

기본 데이터 타입 - Primitive values

각 타입 데이터 자체가 하나의 값을 나타낸다.

자바스크립트 기본 타입의 종류는 아래와 같다.

숫자 (number)
문자열 (string)
논리형 (boolean)
초기값 혹은 할당되지 않은 값이 없음 (undefined)
할당 된 값이 없음 (null)

자바 스크립트는 우리가 알고있는 C, Java 등과 자료형이 조금 다르다. 각각의 내용을 아래에 설명하겠다.

숫자(number)

타 언어는 정수, 실수를 int, float으로 구분하지만, 자바스크립트는 number 라는 하나의 숫자형만 존재한다.

이유 : 자바스크립트는 모든 숫자를 64비트 부동 소수점 형태로 저장하며 모든 숫자를 실수로 처리한다. ※ 데이터 처리시 주의하자 ※

아래 예제로 자료형을 확인 해보자.

1) index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script src="number.js"></script>
  </body>
</html>

2) number.js

let intNum = 10;
let floatNum = 3.14;
let minusNum = -5.2;

document.write(`typeof intNum ${intNum} : ${typeof intNum} <br/>`);
document.write(`typeof floatNum ${floatNum} : ${typeof floatNum} <br/>`);
document.write(`typeof minusNum ${minusNum} : ${typeof minusNum} <br/>`);

결과 :

Github Commit

위와 같이 정수(양수, 음수), 실수 전부 number 자료형이다.

※ 주의점 ※

자바스크립트는 모든 숫자를 실수로 처리한다. 그러하여 연산의 경우 주의해야한다.

위 number.js 에 아래의 코드를 추가하여 돌려보자.

let intNum = 10;
let floatNum = 3.14;
let minusNum = -5.2;

document.write(`typeof intNum ${intNum} : ${typeof intNum} <br/>`);
document.write(`typeof floatNum ${floatNum} : ${typeof floatNum} <br/>`);
document.write(`typeof minusNum ${minusNum} : ${typeof minusNum} <br/><br/>`);

document.write(`10 - 4 = ${intNum - 4} <br/>`);
document.write(`10 / 3 = ${intNum / 3} <br/>`);
document.write(`10 / 3 = ${Math.floor(intNum / 3)} <br/>`);

결과 :

10 - 4 는 6 이다.

하지만 10 / 3 의 연산은 3.33333... 이다.

이유는 무엇일까?

- 다시 한번 말하자면, 자바스크립트는 모든 숫자를 실수로 처리하기 때문이다.

정수만 처리하기 위해 마지막 줄에 Math 라이브러리를 사용했다.

Github Commit

문자열(string)

' (single quotes) 또는 " (double quotes) 로 감싼 하나의 문자 혹은 문자들을 의미한다.

'이것은 문자열' - 1
"이것도 문자열" - 2
'이것은 에러" - 3
"이것도 에러' - 4

위의 1, 2 처럼 싱글 또는 더블로 시작했으면 꼭 시작한 것으로 끝을 맺어야한다. 그렇지않은 3, 4 의 경우는 에러이다.

1) index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script src="string.js"></script>
  </body>
</html>

2) string.js

const lastName = "kim";
let firstName = 'geuntae';

let favFood = "kimchi";

document.write("typeof lastName : " + typeof(lastName) + "<br/>");
document.write("typeof firstName : " + typeof(firstName) + "<br/>");

document.write("name : " + lastName + firstName + '<br/>');
document.write('favorite food : ' + favFood + "<br/>");

' 과 " 로 시작한 문자열들을 연결 하려면 + 연산자를 통해서 연결해야한다.

' 과 " 의 구분은 없으며 둘다 string type 이다.

결과 :

" 로 선언한 lastName 과 ' 로 선언한 firstName 둘다 string type 인 것을 확인 할 수 있다.

Github Commit

※ ES2015에 템플릿 문자열 백틱 이 추가 됐다.

템플릿 문자열(backtick)

` (backtick) 이 ES2015 에서 추가 됐다.
` 과 ` 사이에 자유롭게 문자열을 작성하고 변수의 경우 ${ } 안에 작성하면 된다.

차이점 : 문자열 ' , " 에서는 변수를 출력하기위하여 + 연산자로 사용했던 것을 생각하면 매우 편리하다.

예시 :

const lastName = "kim";
let firstName = 'geuntae';

let favFood = "kimchi";

document.write("typeof lastName : " + typeof(lastName) + "<br/>");
document.write("typeof firstName : " + typeof(firstName) + "<br/>");

document.write("name : " + lastName + firstName + '<br/>');
document.write('favorite food : ' + favFood + "<br/>");

document.write("<br/><br/> Lets do backtick! <br/><br/>");

document.write(`name : ${lastName+firstName} <br/>`);
document.write(`favorite food : ${favFood} <br/>`);

` favorite food : ${favFood} ` 이런 식으로 벽틱( ` ) 사이에 ${ } 를 작성하면 된다.

결과 :

Github Commit

결과도 당연히 똑같다. 이제는 매우 유용한 백틱을 사용하자!

논리형(boolean type)

불린 타입은 true(참) 와 false(거짓) 값을 가진다.

1) index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="boolean.js"></script>
</body>
</html>

2) boolean.js

var boolVar = true;

document.write(`what is boolVar type? ${typeof(boolVar)} <br/>`)
document.write(`is he like pizza? ${boolVar} <br/>`)

boolean 의 타입과 데이터를 출력해보자.

결과 :

boolVar 에 true 를 할당 했기에 타입은 boolean 이다.
boolVar 변수의 데이터인 true 가 출력 됐다.

Github Commit

이 글은 개인 공부목적으로 작성되었습니다.

정보가 잘못 되거나 궁금한 사항은 댓글로 부탁드립니다!! 읽어주셔서 감사합니다.

'JavaScript > Basic-Javascript' 카테고리의 다른 글

자바스크립트 정리하며 배우기[06] - 객체 개념 및 프로퍼티 생성, 리터럴 형식, 생성자 함수 (0)	2020.01.03
자바스크립트 정리하며 배우기[05] - Data type[참조 타입(reference) - 객체 , 배열 , 함수] 간단 개념 정리 (0)	2020.01.02
자바스크립트 정리하며 배우기[04] - Data type[기본 타입(primitive) - null 과 undefined 개념 및 차이] (0)	2020.01.02
자바스크립트 정리하며 배우기[02] - 변수 선언 var, let, const 개념 및 차이 (0)	2020.01.01
자바스크립트 정리하며 배우기[01] - Hello JavaScript! (0)	2019.12.30

그렇게 개발자가 된다

자바스크립트 정리하며 배우기[03] - Data type[기본 타입(primitive) - number, string, backtick, boolean]

기본 데이터 타입 - Primitive values

숫자(number)

문자열(string)

템플릿 문자열(backtick)

논리형(boolean type)

'JavaScript > Basic-Javascript' 카테고리의 다른 글

티스토리툴바

자바스크립트 정리하며 배우기[03] - Data type[기본 타입(primitive) - number, string, backtick, boolean]

기본 데이터 타입 - Primitive values

숫자(number)

문자열(string)

템플릿 문자열(backtick)

논리형(boolean type)

'JavaScript > Basic-Javascript' 카테고리의 다른 글

'JavaScript/Basic-Javascript' Related Articles

티스토리툴바