Javascript : 데이터 타입 (Number, String, Boolean)

minjoo kim·2021년 2월 5일

C나 Java와 같은 프로그래밍 언어에는 정수 타입 변수(int), 부동소수점 타입 변수(doubld) 등이 있어서 그 변수의 타입과 일치하는 데이터만 저장이 가능한 정적 타입 언어(static typed language)라고 합니다.

하지만 자바스크립트는 변수에 타입이 없으므로, 모든 타입의 데이터를 저장할 수 있습니다. 변수에 저장된 데이터 타입을 동적으로 바꿀 수 있다는 것이죠. 이와 같은 언어를 동적 타입 언어(dynamic typed language) 라고 합니다.

자바스크립트 데이터 타입은 총 6가지, 기본형과 참조형 두 가지로 나눌 수 있습니다.

✔ Primitive Type	✔ Reference Type
기본형(원시 타입) : 값을 그대로 할당	참조 타입 : 값이 저장된 주소값을 할당
Number	Object
String	- Function
Boolean	- Array
Null	- 정규식(regEXP)
undefined

Array, Function, RegExp 은 object이며 자바스크립트에서 사용되는 대부분의 데이터 타입은 객체로 존재하기 때문에 자바스크립트를 객체기반 언어라고 합니다.

📌 Number

숫자 표현, 산술 연산에 사용되는 데이터 타입.
+, _, *, /의 산술연산이 가능하며 Math라는 내장객체를 이용하여 수학함수를 이용한 결과를 얻을 수도 있습니다.

Number Casting :: parseInt(), parseFloat()

위에서 자바스크립트는 변수선언시 데이터 타입을 명시하지 않는다고 했는데, 그래서 숫자형 데이터가 아닌 문자열 데이터로 숫자를 표현하는 일도 많습니다.
자바스크립트 코딩을 하다보면 데이터형 변환(casting)을 해야하는 경우가 종종 발생하는데, 캐스팅을 이용해서 데이터를 변환할때 자주 사용되는 내장객체인 parseInt()를 이용하면 문자열을 정수로, parseFloat()를 사용하면 실수로 치환할 수 있습니다.

parseInt()

console.log(parseInt("010", 10));
/// 10

parseInt의 두번째 인자는 치환하려는 문자열이 몇진수의 숫자를 표현한 문자열인가를 나타냅니다. 예제는 "010"을 10진수로 표현한 문자열이라는 의미입니다.

console.log(parseInt("010", 10));
// 3
// 010을 2진수로 판단하여 10진수 정수로 변환한 값을 출력했습니다.

재밌는 사실은 위의 예제에서 두번째 인자를 전달하지 않으면 전혀 다른 값이 출력된다는 것입니다.

console.log(parseInt("010"));
//8

이런 결과 값이 나오는 이유는 간단합니다. parseInt()는 두번째 인자인 진법을 지정하지 않을때, 0x(숫자,알파벳) 형식이면 8진수, 0으로 시작하면 8진수로 인식하여 결과를 출력하기 때문에 "010"을 8진수로 인식한 결과값 8을 출력했습니다.

또 한가지 주의해야 할 점은 parseInt()는 소수점을 과감히 버리기 때문에 주의하고, 정확한 결과 값을 원한다면 두 번째 인자를 반드시 전달해주세요.

parseFloat()

parseFloat()는 두번째 인자를 전달하지 않아도 됩니다.

console.log(parseFloat("010"));
//10
//10진수를 반환합니다.

console.log(parseFloat("010.333"));
//10.333
//10진수를 반환합니다.

Not a Number :: NaN 과 isNan()

문자열 -> 숫자형으로 데이터형태 변환시, 문자열이 숫자를 포함하지 않을경우 자바스크립트는 Not a Numver의 약자인 NaN을 리턴합니다.
isNan()이라는 해당 데이터가 NaN인지 여부를 검사해주는 객체입니다.
isNan()은 데이터가 NaN일때 true를 반환합니다.

console.log(isNaN(NaN));
//true

console.log(isNaN("hello"));
//true

📌 String

문자열을 표현하는데 사용되는 데이터 타입이 바로 string입니다.

String property :: length

자바스크립트의 대부분의 데이터 타입은 객체로 존재하고 있다. 문자열의 typeOf는 String이다.
하지만 문자열또한 객체로서 활용가능한 property와 method를 가지고 있는 특이한 형태의 데이터 타입이다.
별도의 내장함수를 사용하지 않고, 문자열이 가지고 있는 property인 length로 그 길이를 알 수 있다.

console.log("hello".length);
//5

String method :replace(), charAt(), toUpperCase(), split()

문자열도 '객체에 의존적이면서 객체의 수행을 담당하는 메서드' 를 가지고 있습니다. 이 메서드들은 문자열을 여러가지 형태로 변환하거나 문자열 정의에서 밝힌 문자 하나하나의 연결중 특정 위치의 값을 가져오는데 활용할 수 있습니다.
(⛏함수와 메서드의 차이는 객체에서 정의해보겠습니다!)

console.log("hello world".charAt(0));
//h
//문자열의 특정 자리에 위치한 문자를 반환하고 있습니다.

console.log("hello world".replace("hello","goodbye"));
//goodbye world
//문자열을 치환하고 있습니다.

console.log("hello world".toUpperCase());
//HELLO WORLD
//문자열을 대문자로 치환하고 있습니다.

console.log("1-2-3-4-5".split("-"))
//["1","2"."3","4","5"]
//"-"를 기준으로 문자열을 나누어 [배열]로 반환합니다.

📌 Null(값 없음)과 undefined

자바스크립트에는 값이 없음을 나타내는 null과, 초기화(선언)되지 않았거나 값이 할당하지 않았음을 나타내는 undefined라는 특별한 데이터 타입이 존재합니다. 이 둘의 차이를 정확하게 모르면 나중에 혼란스러울수도 있습니다.
null은 자바스크립트 개발자가 의도적으로 비어있는 값을 부여한 것이고 undefined는 처음부터 어떠한 값도 할도 할당되지 않은 것입니다. 자바스크립으에서 선언만 하고 초기화 되지 않은 변수는 undefined라는 값을 할당받습니다.

let a; //선언만 되고 초기화 되지 않은 변수
console.log(a);
//undefined
//초기화가 이루어지지 않았음으로 javascript엔진이 강제로 undefined를 할당했다.

이 결과는 undefined이지만 아래의 예제를 보면 null과 undefined가 굉장히 헷갈리기 시작한다.

let a;
console.log(typeof a);
//undefined

console.log(a===undefined);
//true

console.log(a==null)
//true
//하지만 동등연산자(==)가 아닌 일치연산자(===)일때는 값이 false이다

console.log(null==undefined)
//초기화가 이루어지지 않았음으로 javascript엔진이 강제로 undefined를 할당했다.

검증에 따른 결과가 둘다 true이다.
만약 변수 a조차 선언하지 않는다면?

console.log(typeof a);
//undefined

console.log(a==undefined)
//error. a is not defined
//선언조차 되지 않은 변수이기에 undefined의 데이터 타입이지만 사용할 수 없는 문법오류이다.

null과 undefined를 구별하기 위해서는 어떻게 해야할까?
null은 변수가 참조하는 객체가 없음을 나타내고, undefined는 그 변수가 참조하는 객체를 아직 지정하지 않았음을 뜻한다.(not initiallized) 따라서 undefined값을 가지는 변수는 할당을 통해 값을 가지고, 이 값(객체)를 해제할때 null이 된다.

let a;
a = 10;

변수 a를 선언하면 데이터가 담길 공간(임의의 주소)를 확보하고, 확보된 데이터의 주소값을 변수명과 매칭시킵니다.
그리고 매칭된 주소로 이동하여 데이터 10을 저장합니다.

정리하면
: 비어있는 데이터 공간 확보 -> 변수명과 매칭 -> 매칭 주소에 데이터 저장

📌 Boolean

불리언으로 불리는 이 데이터 타입은true와 false값을 가지는 논리 데이터타입이다. 자바스크립트뿐 아니라 대다수의 프로그래밍 언어에서 가장 많이 사용되는 불리언 데이터 타입은 Boolean()함수를 이용해서 검증을 할 수 있다.

할당을 통해 값을 가지고, 이 값(객체)를 해제할때 null이 된다.

console.log(Boolean("hello"));
//true

console.log(Boolean(""));
//false

console.log(Boolean(1));
//true

console.log(Boolean(-1));
//true

console.log(Boolean(0));
//false