안녕하세요. 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/>`);
결과 :
위와 같이 정수(양수, 음수), 실수 전부 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/>`);
<js 전체 코드>
결과 :
10 - 4 는 6 이다.
하지만 10 / 3 의 연산은 3.33333... 이다.
이유는 무엇일까?
- 다시 한번 말하자면, 자바스크립트는 모든 숫자를 실수로 처리하기 때문이다.
정수만 처리하기 위해 마지막 줄에 Math 라이브러리를 사용했다.
문자열(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 인 것을 확인 할 수 있다.
※ 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} ` 이런 식으로 벽틱( ` ) 사이에 ${ } 를 작성하면 된다.
결과 :
결과도 당연히 똑같다. 이제는 매우 유용한 백틱을 사용하자!
논리형(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 가 출력 됐다.
이 글은 개인 공부목적으로 작성되었습니다.
정보가 잘못 되거나 궁금한 사항은 댓글로 부탁드립니다!! 읽어주셔서 감사합니다.
'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 |