[Javascript] 자바스크립트 타입 - 데이터형, 타입 변환

자바스크립트 데이타 타입(data type)

• 자바스크립트에서는 여러 가지 형태의 타입을 미리 정의하여 제공하고 있는데 이를 기본 타입이라 한다.
• 기본 타입은 크게 숫자(number), 문자열(string), 불리언(boolean), 심볼(symbol), undefined형의 ① 원시 타입(primitive type)과 객체(object)형의 ② 객체 타입(object type)으로 구분할 수 있다.
• 자바스크립트는 C나 Java외는 다르게 변수를 선언할 때 데이터 타입을 미리 지정하지 않는다. 다시 말해, 변수에 할당된 값의 타입에 의해 동적으로 변수의 타입이 결정된다. 이를 동적 타이핑이라 하며 자바스크립트가 다른 프로그래밍 언어와 구별되는 특징 중 하나이다.

var num = 10;           // 숫자
var myName = "홍길동";    // 문자열
var str;                // undefined

 

원시 타입형(primitive type)

숫자(number)

• 자바스크립트는 다른 언어와는 달리 정수와 실수를 따로 구분하지 않고, 모든 수를 실수 하나로만 표현한다.
• 매우 크거나 작은 수를 표현할 경우에는 e 표기법을 사용할 수 있다.

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

문자열(string)

• 자바스크립트에서 문자열은 큰따옴표 " " 나 작은따옴표 ' ' 로 둘러싸인 문자의 집합을 의미한다.
• 큰 따옴표는 작은 따옴표로 둘러싸인 문자열에만 포함될 수 있으며, 작은 따옴표는 큰 따옴표로 둘러싸인 문자열에만 포함될 수 있다.

var firstStr = "문자열입니다";      // 큰따옴표를 사용한 문자열
var secondStr = '문자열입니다';     // 작은따옴표를 사용한 문자열
var thirdStr = "내 이름은 '홍길동'"
var fourthStr = '내 이름은 "홍길동"'

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

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

불리언(boolean)

• 불리언 값은 참(true)과 거짓(false)을 표현한다.

var firstNum = 10;
var secondNum = 11;
document.getElementById("result").innerHTML = (firstNum == secondNum); // false

null과 undefined

• 자바스크립트에서 null이란 아직 값이 정해지지 않은 것을 의미한다.
• 자바스크립트에서 undefined이란 아직 타입이 정해지지 않은 것을 의미하므로, 초기화되지 않은 변수나 존재하지 않는 값에 접근할 때 사용한다.

var num;            // 초기화하지 않았으므로 undefined 값을 반환
var str = null;     // object 타입의 null 값
typeof secondNum;   // 정의되지 않은 변수에 접근하면 undefined 값을 반환

• null 과 undefined 는 같은 의미지만 타입이 다르므로 동등 연산자 == 와 일치 연산자 === 로 비교할 때 결괏값이 다르다.

null ==  undefined;   // true
null === undefined;   // false

심볼(symbol)

• 심볼 타입은 ECMAScript 6부터 새롭게 추가된 타입으로 변경 불가능한 원시 타입의 값이다.
• 심볼은 주로 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키를 만들기 위해 사용한다.
• 심볼은 Symbol 함수를 호출해 생성한다. 이때 생성된 심볼 값은 다른 심볼 값들과 다른 유일한 심볼 값이다.

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

 

객체 타입형(object type)

객체(object)

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

var dog = { name: "해피", age: 3 };      // 객체의 생성

// 객체의 프로퍼티 참조
document.getElementById("result").innerHTML =
    "강아지의 이름은 " + dog.name + "이고, 나이는 " + dog.age + "살 입니다.";

 

타입 변환(type conversion)

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

var num = 20;        // Number 타입의 20
num = "이십";         // String 타입의 이십
var num;             // 한 변수에 여러 번 대입할 수는 있지만
                     // 변수의 재선언은 할 수 없으므로 재선언문은 무시된다

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

• 동적 타입 언어인 자바스크립트는 개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 하는데, 이를 암묵적 타입 변환(Implicit coercion) 또는 타입 강제 변환(Type coercion)이라고 한다.
• 문자열 값을 기대하는 곳에 숫자가 오면 알아서 숫자를 문자열로 변환하듯이, 특정 타입의 값을 기대하는 곳에 다른 타입의 값이 오면 자동으로 타입을 변환한다.

10 + "문자열";    // 문자열 연결을 위해 숫자 10이 문자열로 변환
"3" * "5";      // 곱셈 연산을 위해 두 문자열이 모두 숫자로 변환
1 - "문자열";     // 의미에 맞게 자동으로 타입을 변환할 수 없으므로 NaN 값 반환
                // NaN(Not a Number) 정의되지 않은 값이나 표현할 수 없는 값 의미

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

• 개발자에 의해 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환(Explicit coercion) 또는 타입 캐스팅(Type casting)이라 한다.

문자열 타입으로 변환

// 1. String 생성자 함수를 new 연산자 없이 호출하는 방법
// 숫자 타입 => 문자열 타입
console.log(String(1));        // "1"
console.log(String(NaN));      // "NaN"
console.log(String(Infinity)); // "Infinity"
// 불리언 타입 => 문자열 타입
console.log(String(true));     // "true"
console.log(String(false));    // "false"

// 2. Object.prototype.toString 메소드를 사용하는 방법
// 숫자 타입 => 문자열 타입
console.log((1).toString());        // "1"
console.log((NaN).toString());      // "NaN"
console.log((Infinity).toString()); // "Infinity"
// 불리언 타입 => 문자열 타입
console.log((true).toString());     // "true"
console.log((false).toString());    // "false"

// 3. 문자열 연결 연산자를 이용하는 방법
// 숫자 타입 => 문자열 타입
console.log(1 + '');        // "1"
console.log(NaN + '');      // "NaN"
console.log(Infinity + ''); // "Infinity"
// 불리언 타입 => 문자열 타입
console.log(true + '');     // "true"
console.log(false + '');    // "false"

숫자 타입으로 변환

// 1. Number 생성자 함수를 new 연산자 없이 호출하는 방법
// 문자열 타입 => 숫자 타입
console.log(Number('0'));     // 0
console.log(Number('-1'));    // -1
console.log(Number('10.53')); // 10.53
// 불리언 타입 => 숫자 타입
console.log(Number(true));    // 1
console.log(Number(false));   // 0

// 2. parseInt, parseFloat 함수를 사용하는 방법(문자열만 변환 가능)
// 문자열 타입 => 숫자 타입
console.log(parseInt('0'));       // 0
console.log(parseInt('-1'));      // -1
console.log(parseFloat('10.53')); // 10.53

// 3. + 단항 연결 연산자를 이용하는 방법
// 문자열 타입 => 숫자 타입
console.log(+'0');     // 0
console.log(+'-1');    // -1
console.log(+'10.53'); // 10.53
// 불리언 타입 => 숫자 타입
console.log(+true);    // 1
console.log(+false);   // 0

// 4. * 산술 연산자를 이용하는 방법
// 문자열 타입 => 숫자 타입
console.log('0' * 1);     // 0
console.log('-1' * 1);    // -1
console.log('10.53' * 1); // 10.53
// 불리언 타입 => 숫자 타입
console.log(true * 1);    // 1
console.log(false * 1);   // 0

불리언 타입으로 변환

// 1. Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
// 문자열 타입 => 불리언 타입
console.log(Boolean('x'));       // true
console.log(Boolean(''));        // false
console.log(Boolean('false'));   // true
// 숫자 타입 => 불리언 타입
console.log(Boolean(0));         // false
console.log(Boolean(1));         // true
console.log(Boolean(NaN));       // false
console.log(Boolean(Infinity));  // true
// null 타입 => 불리언 타입
console.log(Boolean(null));      // false
// undefined 타입 => 불리언 타 입
console.log(Boolean(undefined)); // false
// 객체 타입 => 불리언 타입
console.log(Boolean({}));        // true
console.log(Boolean([]));        // true

// 2. ! 부정 논리 연산자를 두번 사용하는 방법
// 문자열 타입 => 불리언 타입
console.log(!!'x');       // true
console.log(!!'');        // false
console.log(!!'false');   // true
// 숫자 타입 => 불리언 타입
console.log(!!0);         // false
console.log(!!1);         // true
console.log(!!NaN);       // false
console.log(!!Infinity);  // true
// null 타입 => 불리언 타입
console.log(!!null);      // false
// undefined 타입 => 불리언 타입
console.log(!!undefined); // false
// 객체 타입 => 불리언 타입
console.log(!!{});        // true
console.log(!![]);        // true

 

Reference

• http://www.tcpschool.com/
• https://poiemaweb.com/