데이터 타입, 표준 내장 객체(Standard Built-in Object), 타입 변환

데이터 타입

자바스크립트의 데이터 타입은 원시 타입(primitive)과 객체 타입(object)으로 나뉜다.

 

원시 타입

원시 타입의 값은 pass-by-value방식으로 전달되며 변경 불가능한 값이다.

• boolean : 참(true)과 거짓(false)을 나타낸다.

• null : null타입의 값은 'null'이 유일하다. 의도적으로 변수에 값이 없다는 것을 명시할 때나 유효한 값을 반환할 수 없는 경우 사용된다. (자바스크립트는 대소문자를 구별하기 때문에 'Null', 'NULL'과는 다르다.)
  
  
• undefined : undefined 타입의 값은 'undefined'가 유일하다. 선언은 되었지만 값을 할당하지 않은 변수에
  접근하거나 존재하지 않는 객체 프로퍼티에 접근할 경우 반환된다.
  
  
• number : 숫자 데이터를 나타내는 데 사용되며 모든 값을 실수로 처리한다.
  2, 8, 16진수 리터럴은 모두 10진수로 해석된다. 추가적으로 Infinity, -Infinity, NaN값도 표현할 수 있다.
  
  
• string : 텍스트 데이터를 나타내는 데 사용되며 유사 배열의 특성을 갖고 있다.
  
  
• symbol(ES6에서 추가되었다.) : 이름의 충돌 위험이 없는 유일한 객체의 property key를 만들기 위해 사용된다. Symbol 함수를 이용해 생성되며, 생성된 symbol 값은 유일한 symbol 값이다.

객체 타입

원시 타입이 아닌 모든 값들은 객체이며 pass-by-reference방식으로 전달된다.

• object

//number

let integer = 10;        // 정수
let double = 10.12;      // 실수
let negative = -20;      // 음의 정수
let binary = 0b01000001; // 2진수
let octal = 0o101;       // 8진수
let hex = 0x41;          // 16진수

console.log(binary); // 65
console.log(octal);  // 65
console.log(hex);    // 65

let pInf = 10 / 0;  // 양의 무한대
console.log(pInf);  // Infinity

let nInf = 10 / -0; // 음의 무한대
console.log(nInf);  // -Infinity


//string

let nan = 1 * 'string'; // 산술 연산 불가
console.log(nan);       // NaN

let str = 'string';
// 문자열은 유사배열이다.
for (var i = 0; i < str.length; i++) {
  console.log(str[i]);
}
//s
//t
//r
//i
//n
//g

// 문자열을 변경할 수 없다.
str[0] = 'S';
console.log(str); // string


//boolean

let foo = true;
let bar = false;

// typeof 연산자는 타입을 나타내는 문자열을 반환한다.
console.log(typeof foo); // boolean
console.log(typeof bar); //boolean


//undefined

let foo;
console.log(foo); // undefined


//null

let foo = 'Lee';
foo = null;  // 참조 정보가 제거됨

let element = document.querySelector('.myElem');
// HTML 문서에 myElem 클래스를 갖는 요소가 없다면 null을 반환한다.
console.log(element); // null


//symbol

// 심볼 key는 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키
let key = Symbol('key');
console.log(typeof key); // symbol

let obj = {};
obj[key] = 'value';
console.log(obj[key]); // value

 

*typeof 연산자로 null값을 연산해보면 object를 반환하는데 이는 자바스크립트 설계상의 오류이다.

let foo = null;
console.log(typeof foo); // object

let foo = null;
console.log(typeof foo === null); // false
console.log(foo === null);        // true

---

표준 내장 객체(Standard Built-in Object)

표준 내장 객체는 자바스크립트가 기본으로 가지고 있는 객체를 뜻한다.

표준 내장 객체는 Object, String, Number, Function, Array, RegExp, Date, Math와 같은 객체 생성에 관계가 있는 함수

객체와 메서드로 구성된다.

 

표준 내장 객체의 종류

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects

표준 내장 객체 - JavaScript | MDN

*Number, String, Boolean객체는 레퍼(wrapper) 객체로 사용된다.

레퍼(wrapper) 객체 : 원시 데이터 형을 객체처럼 다룰 수 있도록 하기 위한 객체

let str = 'Hello world!';
let res = str.toUpperCase();
console.log(res); // 'HELLO WORLD!'

let num = 1.5;
console.log(num.toFixed()); // 2

래퍼객체의 연산 순서

1. 원시타입을 객체로 감싼 레퍼객체에서 연산을 처리한다.

2. 결과값을 반환하고 레퍼객체를 제거한다.

3. 원시타입 값을 변수에 할당한다.

이러한 연산이 가능한 이유는 표준 내장 객체인 String, Number, Array 객체 등이 가지고 있는 표준 메소드는

프로토타입 객체인 String.prototype, Number.prototype, Array.prototype 등에 정의되어 있기 때문이다.

 

2021/02/02 - [개발/Javascript] - prototype(프로토타입)

prototype(프로토타입)

---

 

타입 변환

자바스크립트의 모든 값은 타입이 있는데, 이러한 값의 타입은 다른 타입으로 변환될 수 있다.

자바스크립트의 타입 변환에는 명시적 타입변환(Explicit coercion)과 암묵적 타입변환(Implicit coercion) 두 종류가 존재한다.

 

*명시적 타입변환은 타입 캐스팅(Type casting) 암묵적 타입 변환은 타입 강제 변환(Type coercion)이라고도 한다.

 

암묵적 타입변환

//stirng 타입으로 변환

0 + ''              // "0"
-1 + ''             // "-1"
NaN + ''            // "NaN"
Infinity + ''       // "Infinity"
// 불리언 타입
true + ''           // "true"
false + ''          // "false"
// null 타입
null + ''           // "null"
// undefined 타입
undefined + ''      // "undefined"
// 심볼 타입
(Symbol()) + ''     // TypeError: Cannot convert a Symbol value to a string
// 객체 타입
({}) + ''           // "[object Object]"
Math + ''           // "[object Math]"
[] + ''             // ""
[10, 20] + ''       // "10,20"
(function(){}) + '' // "function(){}"
Array + ''          // "function Array() { [native code] }"


//number 타입으로 변환

1 - '1'    // 0
1 * '10'   // 10
1 / 'one'  // NaN

//단항연산자를 사용한 숫자 변환

// 문자열 타입
+''             // 0
+'0'            // 0
+'1'            // 1
+'string'       // NaN
// 불리언 타입
+true           // 1
+false          // 0
// null 타입
+null           // 0
// undefined 타입
+undefined      // NaN
// 심볼 타입
+Symbol()       // TypeError: Cannot convert a Symbol value to a number
// 객체 타입
+{}             // NaN
+[]             // 0
+[10, 20]       // NaN
+(function(){}) // NaN


//boolean 타입으로 변환

if ('')    console.log('1'); 
if (true)  console.log('2');
if (0)     console.log('3');
if ('str') console.log('4');
if (null)  console.log('5');
//2
//4

*자바스크립트 엔진은 boolean타입이 아닌 값을 Truthy값과 Falsy값으로 구분한다. 

 

*제어문이나 조건식과 같은 컨텍스트에서 사용시 false와 true로 평가되는 값

Falsy : false, undefined, null, 0, -0, NaN, ""(빈문자열)

Truthy : Falsy값 이외의 값

 

명시적 타입변환

//string 타입으로 변환

// 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"


//number 타입으로 변횐

// 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


//boolean 타입으로 변환

// 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

 

타입변환 참고

• 암묵적 타입 변환은 변수 값을 재할당해서 변경하는 것이 아니라 자바스크립트 엔진이 표현식을 에러없이 평가하기 위해 기존 값을 바탕으로 새로운 타입의 값을 만들어 단 한번 사용하고 버린다.

• 명시적 타입 변환은 타입을 변경하겠다는 개발자의 의지가 코드에 명백히 드러난다. 하지만 암묵적 타입 강제 변환은 자바스크립트 엔진에 의해 암묵적으로, 즉 드러나지 않게 타입이 자동 변환된다.

• 때로는 명시적 타입 변환보다 암묵적 타입 변환이 가독성 면에서 더 좋을 수도 있다.