자바스크립트 (2) 타입과 변환

타입 data type

 

프로그램에서 다룰 수 있는 값의 종류.

자바스크립트에서 여러 가지 형태의 타입을 기본타입으로 미리 정의하여 제공하며
자바스크립트의 기본 타입은 크게 원시 타입과 객체 타입으로 구분한다. 

 

 

 

 

원시 타입 primitive type : 1~5

 

 

1. 숫자(number) 

 

정수/실수를 구분않고 실수 하나로만 표현.
매우 큰 수나 매우 작은 수를 표현할 경우에는 e 표기법을 사용.

 

var firstNum = 10;     // 소수점을 사용하지 않은 표현
var secondNum = 10.00; // 소수점을 사용한 표현
var thirdNum = 10e6;   // 10000000
var fourthNum = 10e-6; // 0.00001

 

 

 

2. 문자열(string)

 

큰따옴표("")나 작은따옴표('')로 둘러싸인 문자의 집합. 
큰따옴표는 작은따옴표로 둘러싸인 문자열에만 포함될 수 있으며, 작은따옴표는 큰따옴표로 둘러싸인 문자열에만 포함될 수 있다.

 

var num = 10;
var str = "JavaScript";
document.getElementById("result").innerHTML = (num + str); // 10JavaScript

 

자바스크립트에서는 숫자와 문자열을 더할 수도 있는데,
자바스크립트는 숫자를 문자열로 자동 변환하여, 두 문자열을 연결하는 연산을 수행한다.

 

 

 

3. 불리언(boolean)

 

참(true)과 거짓(false)을 표현

 

 

 

 

4. 심볼(symbol) 

 

유일하고 변경할 수 없는 타입으로, 객체의 프로퍼티를 위한 식별자로 사용
ECMAScript 6부터 제공되며 심볼 타입은 익스플로러에서 지원하지 않는다.

 

var sym = Symbol("javascript");  // symbol 타입
var symObj = Object(sym);        // object 타입

 

* 프로퍼티는 object를 위해서 데이터를 저장하며 메소드는 object가 요청 받을 수 있는 액션이다. 

 

 

 

 

5. typeof 연산자

 

피연산자의 타입을 반환하는 피연산자가 단 하나뿐인 연산자

 

typeof 10;        // number 타입

typeof "문자열";  // string 타입

typeof true;      // boolean 타입

typeof undefined; // undefined 타입

typeof null;      // object 타입

 

 

 

 

6. null, undefined

 

null : 객체 타입이며 아직 값이 안정해진 것.
undefined : '타입'이 정해지지 않은 것. => 초기화되지 않은 변수나 존재하지 않는 값에 접근할 때 반환된다.

* null과 undefined는 동등 연산자(==)와 일치 연산자(===)로 비교할 때 그 결과가 다르므로 주의

(타입을 제외하면 같은 의미지만, 타입이 다르므로 일치하지는 않는다.)

 

 

 

 

6. 객체 (object)

 

자바스크립트의 기본 타입은 객체.
객체는 여러 프로퍼티(property)나 메소드(method)를 같은 이름으로 묶어놓은 일종의 집합체

* 자바스크립트 프로퍼티 : 어떤 값이 다른값과 연관을 갖고 있는 것. 보통 데이터 구조와 연관된 속성을 나타내며
종류로는 인스턴트 프로퍼티, static property가 있다.

인스턴트 프로퍼티 : 특정 object 인스턴스의 특정한 데이터
Static Property : 모든 object 인스턴스들에게 공유된 데이터

보통 "프로퍼티가 object를 가지고 있다"라고 말하는 것은 "property가 object reference"를 가지고 있다는 것을 줄여서 말한 것
property의 값이 변한 후에도 object는 그대로 남아있기 때문에 이걸 구분하는 것은 중요합니다.

 

 

 

 

타입 변환(type conversion)

 

 

자바스크립트의 변수는 타입이 정해져 있지 않으며, 같은 변수에 다른 타입의 값을 다시 대입할 수도 있다.

한 변수에 여러 번 대입할 수는 있지만, 변수의 재선언은 할 수 없어서 재선언문은 무시된다.

 

var num = 20; // Number 타입의 20
num = "이십"; // String 타입의 "이십"

var num;     //무시

 

 

 

 

묵시적 타입 변환(implicit type conversion)

 

자바스크립트는 특정 타입의 값을 기대하는 곳에 다른 타입의 값이 오면, 자동으로 타입을 변환하여 사용한다.

+ : 문자열 값이 오길 기대하는 곳에 숫자가 오더라도 자바스크립트는 알아서 숫자를 문자열로 변환하여 사용

-  : 뺄셈 연산을 위해 문자열이 숫자로 변환되어야 하나, 해당 문자열은 두 번째 예제의 문자열과는 달리 숫자로 변환될 수 없는 문자열이며 의미에 맞게 자동으로 타입을 변환할 수 없으므로, 자바스크립트는 NaN 값을 반환한다.

10 + "문자열"; // 문자열 연결을 위해 숫자 10이 문자열로 변환됨.

"3" * "5";     // 곱셈 연산을 위해 두 문자열이 모두 숫자로 변환됨.

1 - "문자열";  // NaN

* NAN :  Not a Number의 축약형으로, 정의되지 않은 값이나 표현할 수 없는 값. 0으로 나누거나 위 같은 경우.

 

 

 

 

 

명시적 타입 변환(explicit type conversion)

 

자바스크립트에서는 묵시적 타입 변환을 많이 사용하지만, 명시적으로 타입을 변환할 방법도 제공한다.

명시적 타입 변환을 위해 자바스크립트가 제공하는 전역 함수 종류를 알아보자.

 

1. Number()

2. String()

3. Boolean()

4. Object()

5. parseInt()

6. parseFloat()

 

Number("10"); // 숫자 10
String(true); // 문자열 "true"
Boolean(0);   // 불리언 false
Object(3);  // 숫자 3

 

 

 

 

 

숫자를 문자열로 변환

 

숫자를 문자열로 변환하는 가장 간단한 방법은 String() 함수를 사용하는 것이다.

null과 undefined를 제외한 모든 타입의 값이 가지고 있는 toString() 메소드를 사용할 수도 있다. 

숫자(Number) 객체는 숫자를 문자열로 변환하는 다음과 같은 메소드를 별도로 제공한다.

 

* 메소드(method) :  객체의 프로퍼티 값으로 함수를 갖는 프로퍼티

 

메소드	설명
toExponential()	정수 부분은 1자리, 소수 부분은 입력받은 수만큼 e 표기법을 사용하여 숫자를 문자열로 변환함.
toFixed()	소수 부분을 입력받은 수만큼 사용하여 숫자를 문자열로 변환함.
toPrecision()	입력받은 수만큼 유효 자릿수를 사용하여 숫자를 문자열로 변환함.

 

 

 

 

불리언 값을 문자열로 변환

 

1) String() 함수를 사용하거나 2) toString() 메소드를 사용하는 방법이 있다

 

String(apple);     // 문자열 "apple"
grape.toString(); // 문자열 "grape"

 

 

 

 

 

날짜를 문자열이나 숫자로 변환

 

날짜를 문자열로 변환하려면 String() 함수와 toString() 메소드를 사용하는 방법이 있다.

자바스크립트에서 날짜(Date) 객체는 문자열과 숫자로 모두 변환할 수 있는 유일한 타입

날짜(Date) 객체는 날짜를 숫자로 변환하는 다음과 같은 메소드를 별도로 제공한다.

 

 

메소드	설명
getDate()	날짜 중 일자를 숫자로 반환함. (1 ~ 31)
getDay()	날짜 중 요일을 숫자로 반환함. (일요일 : 0 ~ 토요일 : 6)
getFullYear()	날짜 중 연도를 4자리 숫자로 반환함. (yyyy년)
getMonth()	날짜 중 월을 숫자로 반환함. (1월 : 0 ~ 12월 : 11)
getTime()	1970년 1월 1일부터 현재까지의 시간을 millisecond 단위의 숫자로 반환함.
getHours()	시간 중 시를 숫자로 반환함. (0 ~ 23)
getMinutes()	시간 중 분을 숫자로 반환함. (0 ~ 59)
getSeconds()	시간 중 초를 숫자로 반환함. (0 ~ 59)
getMilliseconds()	시간 중 초를 밀리초(millisecond) 단위의 숫자로 반환함. (0 ~ 999)

 

 

 

 

문자열을 숫자로 변환

 

문자열을 숫자로 변환하는 가장 간단한 방법은 Number() 함수를 사용하는 것이다.

자바스크립트는 문자열을 숫자로 변환해 주는 두 개의 전역 함수를 별도로 제공한다.

 

 

함수	설명
parseInt()	문자열을 파싱하여 특정 진법의 정수를 반환함.
parseFloat()	문자열을 파싱하여 부동 소수점 수를 반환함.

 

 

 

불리언 값을 숫자로 변환

 

Number() 함수를 사용

 

Number(true);  // 숫자 1

Number(false); // 숫자 0