자바스크립트의 데이터 타입과 타입 변환

데이터 타입

자바스크립트는 총 6개의 원시 타입(Number, String, Boolean, null, undefined, Symbol)과 1개의 객체 타입(Object)을 가지고 있는데, 이 중 객체는 여러 가지 형태와 값을 가질 수 있는 데이터 타입을 말합니다.

숫자
문자열
불리언
null
undefined
심볼
객체

자바스크립트는 다음과 같은 내장 객체 타입을 사용할 수 있습니다.

Array
Date
RegExp
Map
Set

숫자

자바스크립트는 10진수, 2진수, 8진수, 16진수의 4가지 숫자형 데이터를 인식할 수 있는데, 소수점이 없는 정수와 소수점이 있는 실수, 지수 표기법을 사용 할 수 있고, 추가적으로 무한대와 음의 무한대, ‘숫자가 아님’을 나타내는 특수한 값을 사용할 수 있습니다.

반면 다른 프로그래밍 언어들의 경우에는 하나의 정수 타입이 아닌 여러 가지의 정수 타입을 가지고 있기 때문에 보다 정밀한 연산을 수행 할 수 있는데, 자바스크립트는 double이라는 숫자형 데이터 타입 하나만을 사용하기 때문에 고성능이 필요한 정수 연산이나 정밀한 소수점 연산을 수행하는 애플리케이션을 만드는 것은 어렵습니다.

let count = 10;           // 10진수
const blue = 0x0000ff;    // 16진수
const umask = 0o0022;     // 8진수
const temperature = 21.5; // 소수점 있는 십진수
const c = 3.0e6;          // 지수
const e = -1.6e-19;       // 지수 계산
const inf = Infinity;     // 무한대
const nInf = -Infinity;   // 음의 무한대
const nan = NaN;          // 숫자 아님

자바스크립트는 숫자를 다양한 형식으로 표현할 수 있지만 모든 숫자형 데이터는 최종적으로 double 형식의 데이터로 저장되기 때문에, 정밀한 연산이 필요한 애플리케이션을 고려하는 경우라면 자바스크립트가 표시할 수 있는 숫자 형식에 제한이 있음을 확실히 인지하고 있을 필요가 있는 것이죠.

Number 객체 프로퍼티

자바스크립트의 Number 객체는 다음과 같이 숫자형 데이터에 해당하는 유용한 프로퍼티를 제공합니다.

const small = Number.EPSILON;           // 1에 더했을 때 1과 구분되는 결과를 만들 수 있는 가장 작은 값
const big = Number.MAX_SAFE_INTEGER;    // 표현할 수 있는 가장 큰 정수
const max = Number.MAX_VALUE;           // 표현할 수 있는 가장 큰 숫자
const min = Number.MIN_SAFE_INTEGER;    // 표현할 수 있는 가장 작은 정수
const minNum = Number.MIN_VALUE;        // 표현할 수 있는 가장 작은 숫자
const nInf = Number.NEGATIVE_INFINITY;  // -Infinity
const nan = Number.NaN;                 // NaN
const inf = Number.POSITIVE_INFINITY;   // Infinity

문자열

문자열은 말 그대로 텍스트 데이터를 말하는데, 자바스크립트의 문자열은 유니코드텍스트로 이모티콘을 포함한 대부분의 글자와 심볼을 사용할 수 있습니다.

자바스크립트에서 문자열은 작은 따옴표‘ ‘나 큰 따옴표” “로 감싸서 표현하는데, ES6 부터는 백틱` `으로 감싸 템플릿 문자열을 사용할 수도 있습니다.

특수 문자와 이스케이프

이스케이프는 문자열 주위에 쓰는 부호가 아님을 나타내는 규칙을 나타내는 문자입니다. 예를 들어 문자열의 내부에 동일한 따옴표를 사용하면 프로그램에 에러가 발생하는데, 이런 경우 다음과 같이 문자열을 감싼 따옴표와 다른 형태의 따옴표로 감싸거나 역슬래시＼로 단순 문자열임을 나타낼 수 있습니다.

// 서로 다른 따옴표를 사용
const buffett1 = "'추측'에 의존하는 것은 그의 투자 철학에 정면으로 배치된다.";
const buffett2 = '투자자들은 주식 투자를 "모 아니면 도"식으로 양단 간으로 생각하는 경향이 있다.';
const warning = "Don't stop.";

// 이스케이프 문자(\)를 사용
const buffett1 = '\'추측\'에 의존하는 것은 그의 투자 철학에 정면으로 배치된다.';
const buffett2 = "투자자들은 주식 투자를 \"모 아니면 도\"식으로 양단 간으로 생각하는 경향이 있다.";
const warning = 'Don\'t stop.';
const path = 'c:\\MyFolder\\';

이스케이프 문자는 따옴표를 이스케이프하는 경우 외에도 줄 바꿈이나 탭 혹은 임의의 유니코드 문자를 나타내는 경우에도 사용되는데, 자주 사용되는 특수 문자는 다음과 같습니다.

특수 문자	설명	예
\n	줄 바꿈	“Line1\nLine2”
\r	캐리지 리턴	“Line1\r\nLine1”
\t	탭	“시속:\t60km/h”
\’	작은 따옴표	‘Don\’t’
\”	큰 따옴표	“He said \”Hi\””
\`	백틱(ES6)	`ES6: \` 백틱.`
\$	달러 기호(ES6)	`가격: \$${interpolation}`
\\	역 슬래시	‘c:\\MyFolder\\’
\uXXXX	유니코드 포인트(XXXX는 16진수)	“\u2310, \u21d4”

템플릿 문자열

템플릿 문자열은 ES6부터 지원되는데, 문자열 병합을 통해 변수나 상수를 문자열 안에 쓸 수 있어 매우 유용하게 사용되는 기능입니다.

기존 방식

const word = '추측';
const buffett = word + '에 의존하는 것은 그의 투자 철학에 정면으로 배치된다.';
console.log(buffett);

템플릿 문자열 방식

const word = '추측';
const buffett = `${word}에 의존하는 것은 그의 투자 철학에 정면으로 배치된다.`;
console.log(buffett);

템플릿 문자열에서는 보다 직관적인 방법으로 문자열과 변수를 쉽게 병합 할 수 있게 되었는데, 템플릿 문자열의 내부에서 변수를 사용하는 경우에는 ${변수명}과 같이 사용하면 됩니다.

또 템플릿 문자열은 문자열을 여러줄로 나누어서 표현하는 경우에도 편리하게 이용할 수 있습니다.

기존 방식

const value = '가치투자가 어려워진 이유\n' +
+ '1. 저렴한 주식을 보유하는 추가의 위험에 보상이 있어야 한다.\n'
+ '2. 저렴한 주식은 일반적으로 문제가 있는 기업이다.';
console.log(value);

템플릿 문자열 방식

const value = `가치투자가 어려워진 이유
1. 저렴한 주식을 보유하는 추가의 위험에 보상이 있어야 한다.
2. 저렴한 주식은 일반적으로 문제가 있는 기업이다.`;
console.log(value);

문자열 연산

자바스크립트는 따옴표 안에 들어있는 데이터를 문자열로 인식합니다. 이 말은 따옴표 안에 숫자가 있다면 그 숫자도 문자열로 인식된다는 것이죠. 그런데 만약 숫자와 숫자로 된 문자열을 곱하게 되면 어떻게 될까요? 자바스크립트는 곱하기의 경우 숫자로 이루어진 문자열을 숫자로 변환하여 자동으로 계산을 합니다.

더하기의 경우에는 조금 다른 방식으로 연산이 이루어지는데, 숫자로 이루어진 두 개의 문자열을 더하면 각각의 데이터가 단순 문자열로 인식되어 문자열끼리 병합이 이루어집니다.

자바스크립트는 이렇게 서로 다른 연산 방식 때문에 가끔 오류를 찾기 위해 엉뚱한 곳에서 고민을 하게 되는 경우가 생기는데, 문자열을 사용하는 경우 각각의 연산 방식을 미리 알고 있으면 이런 오류는 쉽게 찾을 수 있겠죠?

가장 좋은 방법은 숫자가 필요한 경우에는 숫자만, 문자열이 필요한 경우에는 문자열만 사용해서 불필요한 오류를 방지하는 것입니다.

const multiply = 1 * '100'; // 문자열 '30'이 숫자로 변환되어 연산됨
const plus = 1 + '100';     // 숫자 30이 문자로 변환되어 연산됨
console.log('multiply:', multiply);
console.log('plus:', plus);

multiply: 100
plus: 1100

불리언

불리언은 true와 false의 두 가지 값, 즉 참과 거짓으로 표현되는 데이터 타입입니다. 참과 거짓은 숫자로도 표현될 수 있는데 0은 false이고 다른 숫자들은 모두 true입니다.

하지만 "false"와 같이 문자열로 된 경우에는 참의 값을 갖기 때문에, false와 "false"를 잘 구분할 필요가 있습니다.

let momentum = true;
if( momentum ) {
    console.log("저는 모멘텀 투자자입니다."); // true
} else {
    console.log("저는 가치 투자자입니다.");   // false
}

저는 모멘텀 투자자입니다.

null과 undefined

null과 undefined는 자바스크립트의 특별한 데이터 타입인데, null은 null 값만 가질 수 있고, undefined는 undefined 값만 가질 수 있습니다.

null과 undefined는 모두 존재 하지 않음을 나타내기 때문에 부의 값, 즉 false로 인식되는데, null과 undefined는 어떤 경우에 사용해야 할까요?

사실 null과 undefined는 사용을 구분할 필요가 없습니다. 하지만 일반적으로 null은 프로그래머에게 허용된 데이터 타입이고, undefined는 자바스크립트 자체에서 사용하는 데이터 타입이기 때문에 만약 프로그래머가 직접 변수에 “알 수 없는 데이터”를 할당해야 하는 경우라면 null 값을 할당하는 것을 권장한다고 합니다.

undefined는 시스템에서 할당되지 않은 변수에 할당하는 값으로 굳이 시스템의 동작을 흉내내려는 것이 아니라면 undefined를 사용해야 하는 경우는 사실상 없다고 볼 수 있습니다.

const word;             // 아무것도 할당하지 않은 변수(undefined)
const word = null;      // 어떤 데이터가 들어올지 모를 경우에 할당
const word = undefined; // 권장되지 않음

심볼

심볼은 ES6에서부터 사용할 수 있는 새로운 데이터 타입입니다. 유일한 토큰을 나타내는데, 항상 유일하고 다른 어떤 심볼과도 일치하지 않는 것이 특징입니다.

객체와 유사한 특징을 가지고 있지만 항상 유일하다는 점을 제외하면 원시 값을 특징을 모두 가지고 있기 때문에 확장성 있는 코드를 만들 수 있습니다.

심볼은 Symbol() 생성자로 만들 수 있는데, 필요할 경우에는 생성자에 간단한 설명을 추가할 수 있습니다.

const warrenBuffett = Symbol("value investor");
const charlieMunger = Symbol("value investor");

// 심볼은 모두 유일한 특성을 갖기 때문에 false 출력
console.log(warrenBuffett === charlieMunger);

객체

다른 원시 타입은 모두 단 하나의 값만 나타낼 수 있고 불변의 특성을 가지고 있는데, 객체는 여러 가지의 값이나 복잡한 값을 나타낼 수 있고 변경될 수도 있습니다.

결국 객체는 모든 형태의 데이터 타입을 담을 수 있는 일종의 컨테이너 역할을 한다고 볼 수 있는데, 다음과 같이 중괄호{}를 사용하여 생성할 수 있습니다.

const obj = {};

객체의 콘텐츠는 프로퍼티또는 멤버라고 불리는데, 객체의 프로퍼티는 이름과 값으로 구성되고 프로퍼티의 이름은 반드시 문자열 또는 심볼이어야 합니다.

프로퍼티에는 모든 형태의 데이터 타입이 들어갈 수 있는데, 심지어 다른 객체가 들어갈 수도 있습니다. 객체의 프로퍼티에 접근하거나 데이터를 추가하는 경우에는 멤버 접근 연산자.를 사용하거나 대괄호[]를 사용하면 됩니다.

const obj = {};
obj.warrenBuffett = "investor";
obj["value investor"] = "warren buffett";
console.log(obj["value investor"]);
console.log(obj["warrenBuffett"]);

warren buffett
investor

객체의 프로퍼티에 심볼을 사용한 경우에는 대괄호를 사용하면 되는데, 이 경우 따옴표를 사용하지 않도록 주의해야 합니다.

const obj = {};
const BUFFETT = Symbol();
obj[BUFFETT] = "investor";
console.log(obj[BUFFETT]); // investor

객체의 프로퍼티에 심볼을 사용한 경우에는 객체의 프로퍼티로 나열되지 않는데, 앞의 예제에서 console.log(BUFFETT);를 입력해보면 심볼 프로퍼티가 표시되지 않지만, console.log(obj[BUFFETT]);를 입력해보면 BUFFETT이 obj의 프로퍼티인 것을 확인할 수 있습니다.

이렇게 심볼 프로퍼티는 문자열 프로퍼티와는 다르게 처리되는데, obj.BUFFETT = "value investor"를 입력하고 obj[BUFFETT]과 obj.BUFFETT 또는 obj["BUFFETT"]을 입력해보면 두 개의 데이터가 서로 다른 것을 확인할 수 있습니다.

일반적으로 객체는 생성과 동시에 프로퍼티를 만들어 사용하는데, 생성된 객체에서 각 프로퍼티는 쉼표,로 구분하고 각 프로퍼티의 이름과 값은 콜론:으로 구분합니다.

const BUFFETT = {
    name: 'warren buffett',
    type: 'value investor'
}
const investor = {
    type: 'value investor',
    person: { // 프로퍼티의 값에 객체 할당
        investor1: 'warren buffett',
        investor2: 'charlieMunger'
    }
}

앞의 예제와 같이 객체의 프로퍼티에 또 객체가 담겨있는 경우에도, 객체의 프로퍼티에 접근하는 방법과 같이 멤버 접근 연산자나 대괄호를 사용하여 접근할 수 있습니다.

investor.person.investor1;       // 가장 일반적인 접근 방법
investor.person["investor1"];    // 멤버 접근자와 대괄호를 사용하는 방법
investor["person"].investor1;    // 대괄호와 멤버 접근자를 사용하는 방법
investor["person"]["investor1"]; // 대괄호만을 이용하는 방법

객체 함수 사용하기

객체에는 데이터 타입 뿐만 아니라 함수도 담을 수 있는데, 객체의 내부에 담긴 함수를 호출 할 때는 괄호를 붙여서 사용합니다.

const warrenBuffett = {};
warrenBuffett.say = function(){
    const s = '투자자들은 주식 투자를 "모 아니면 도"식으로 양단 간으로 생각하는 경향이 있다.';
    return s;
};
console.log(warrenBuffett.say());

투자자들은 주식 투자를 "모 아니면 도"식으로 양단 간으로 생각하는 경향이 있다.

객체 프로퍼티 삭제하기

객체의 내부에 담긴 특정 프로퍼티를 동적으로 삭제해야 하는 경우에는 delete를 사용합니다.

delete investor.person;   // investor 객체의 person 객체 전체 삭제
delete warrenBuffett.say; // warrenBuffett 객체의 say라는 함수 삭제

Number, String, Boolean 객체

숫자와 문자열, 불리언데이터 타입에는 Number, String, Boolean과 같이 각각에 대응하는 객체 타입이 있습니다.

이 각각의 객체는 각 데이터 타입에 따른 특별한 값을 저장하거나 함수 형태의 기능을 제공하는데, String 객체의 경우 다음과 같이 문자열 데이터임에도 불구하고 함수 프로퍼티를 내장하고 있는 것처럼 동작하는 것을 확인할 수 있습니다.

const BUFFETT = "investor";
console.log(BUFFETT.toUpperCase()); // "INVESTOR"

변수 BUFFETT은 단순한 문자열 데이터임에도 불구하고 함수 프로퍼티를 내장하고 있는 것처럼 동작하는데, 이는 자바스크립트가 일시적으로 임시 String 객체를 생성하고 이 객체가 가지고 있는 toUpperCase 함수를 호출하기 때문입니다.

자바스크립트는 이 때 함수를 호출하는 즉시 생성된 임시 객체를 삭제해 버리기 때문에 임시로 생성된 객체의 프로퍼티에는 값을 직접 할당할 수 없습니다.

const BUFFETT = "investor";
BUFFETT.type = "value investor";
console.log(BUFFETT.type); // undefined

배열

일반적으로 객체는 순서가 보장되지 않지만 배열은 숫자, 즉 인덱스를 키로 가지는 객체이기 때문에 언제나 일정한 순서를 보장하는 특수한 객체입니다.

배열은 유용한 메서드를 많이 포함하고 있어 객체와 함께 자주 사용되는 매우 강력한 데이터 타입인데, 다음과 같은 특징이 있습니다.

크기가 고정되지 않고, 언제라도 새로운 요소를 추가하거나 제거할 수 있다.
배열의 요소는 객체와 같이 데이터 타입을 가리지 않기 때문에, 모든 형태의 데이터 타입이 하나의 배열에 포함될 수 있다.
배열 요소의 인덱스는 0부터 시작한다.

배열은 대괄호[] 안에 각각의 요소를 쉼표로 구분하고 있는 형태로, 배열의 길이는 해당 배열의 요소 숫자를 반환하는 length 프로퍼티로 알아낼 수 있습니다.

const a1 = [1, 2, 3, 4];
const a2 = [1, "two", 3, null];
const a3 = ['warren buffett', 'charlieMunger']
const a4 = [
    {name: 'warren buffett', job: 'investor'},
    {name: 'charlieMunger', job: 'investor'}
];
const a5 = [
    [1, 2, 3],
    [4, 5, 6]
];
console.log(a1.length); // 4

배열의 요소에는 접근하는 방법은 대괄호를 사용하여 객체의 요소에 접근하는 방법과 비슷한데, 다음과 같이 대괄호 안에 해당 요소의 인덱스 숫자를 넣으면 되고, 인덱스는 0부터 시작합니다.

const a1 = [1, 2, 3, 4];
console.log(arr[0]);              // 배열의 첫 번째 요소
console.log(arr[arr.length - 1]); // 배열의 마지막 요소

만약 배열의 특정 요소에 값을 할당하면 해당 요소에 값이 있을 경우 할당된 새로운 값으로 변경되고, 해당 배열에 새로운 요소를 추가하면 배열은 해당 요소만큼 늘어나는데, 대괄호의 인덱스에 기존의 배열 길이보다 큰 값을 사용해도 해당 인덱스만큼 배열의 길이가 늘어나게 됩니다.

const a1 = [1, 'b', 3, 4];
a1[1] = 2;
console.log(a1); // [1, 2, 3, 4]
a1[6] = 7;
console.log(a1); // [1, 2, 3, 4 , , , 7]

(4) [1, 2, 3, 4]
(7) [1, 2, 3, 4, , , 7]

날짜

자바스크립트는 내장된 Date 객체를 통해 날짜와 시간을 표시하는데, 현재 날짜와 시간을 나타내는 객체를 만들 때는 아래와 같이 new Date()를 사용하면 되고, 특정 날짜에 해당하는 객체를 만들고 싶다면 괄호 안에 추가적인 파라미터를 넣어주면 됩니다.

const now = new Date();
console.log(now);

const time = new Date(2020, 5, 2);
console.log(time);

Tue Jun 02 2020 17:10:43 GMT+0900 (대한민국 표준시)
Tue Jun 02 2020 00:00:00 GMT+0900 (대한민국 표준시)

한 가지 주의해야 할 것은 월의 경우에는 인덱스가 0부터 시작하기 때문에, 원하는 달을 표시하기 위해서는 해당 월에 1을 더해줘야 되는데, 다음과 같이 프로그램에서 자주 사용하는 형태로 날짜 옵션을 지정해 줄 수도 있습니다.

new Date("2020-06-02T13:30:00");   // Tue Jun 26 2020 13:30:00 GMT+0900 (대한민국 표준시)
new Date("2020-06-02UTC13:30:00"); // Tue Jun 26 2020 22:30:00 GMT+0900 (대한민국 표준시)
new Date("2020-06-02GMT13:30:00"); // Tue Jun 26 2020 22:30:00 GMT+0900 (대한민국 표준시)
new Date("2020-06-02");            // 시간이 생략되면 자동으로 09:00:00으로 설정
new Date("2020-06");               // 일이 생략되면 자동으로 1일로 설정
new Date("2020");                  // 월이 생략되면 자동으로 1월로 설정

Date 객체를 사용하면 특정한 날짜와 시간에 해당하는 객체도 만들거나, 날짜 객체를 생성한 후 각각의 Date 객체의 메소드를 사용하여 원하는 날짜와 시간을 가져올 수 있습니다.

const time = new Date(2020, 5, 2, 19, 0); // 19:00은 PM 7:00을 의미
console.log(time);

Tue Jun 02 2020 19:00:00 GMT+0900 (대한민국 표준시)

const time = new Date();
console.log(time.getFullYear());     // 연도를 정수로 반환
console.log(time.getMonth());        // 월을 정수로 반환
console.log(time.getDate());         // 날짜를 정수로 반환
console.log(time.getDay());          // 요일을 정수로 반환
console.log(time.getHours());        // 시간을 정수로 반환
console.log(time.getMinutes());      // 분을 정수로 반환
console.log(time.getSeconds());      // 초를 정수로 반환
console.log(time.getMilliseconds()); // 밀리초를 정수로 반환

정규표현식

정규표현식은 자바스크립트에서 서브 언어에 가까운 강력한 기능을 제공주는데, 다른 많은 프로그래밍 언어에서도 기본 또는 확장의 형태로 제공되어 강력한 문자열 편집, 검색 등의 기능을 제공합니다.

자바스크립트에서는 정규표현식을 위해 RegExp라는 객체를 제공하는데, 다음과 같이 한 쌍의 슬래시//사이에 정규표현식을 위한 심볼을 넣는 리터럴 문법을 사용합니다.

// 이메일
const emailExp = /^<[0-9a-zA-Z>0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
// 핸드폰번호
const phoneExp = /^\d{3}-\d{3,4}-\d{4}$/;

Map과 Set

Map과 Set은 ES6에서부터 제공되는 새로운 데이터 타입으로 Map과 Set을 사용하거나 ‘성능을 위해 일부 기능을 제거한’ WeakMap, WeakSet을 사용할 수 있습니다.

Map은 객체와 마찬가지로 키와 값을 연결하지만, 특정한 상황에서는 객체보다 유리하게 사용될 수 있고, Set은 배열과 비슷하지만 배열과는 달리 중복이 허용되지 않습니다.

WeakMap과 WeakSet은 Map, Set과 같지만 특정한 상황에서 더 높은 성능을 낼 수 있도록 일부 기능을 제거한 버전입니다.

데이터 타입 변환

데이터의 타입 변환은 프로그래밍에서 매우 자주하는 작업 중에 하나인데, 그 이유는 사용자의 입력이나 다른 시스템에서 가져온 데이터를 그대로 사용할 수 없는 경우가 많기 때문입니다. 그래서 이런 경우에 프로그래머는 외부에서 받아온 데이터를 적합한 형태의 데이터로 변환하여 사용하게 됩니다.

숫자 변환

사용자에게 입력을 받는 경우에는 보통 문자열로 저장되는데, 숫자를 입력받는 경우에도 문자열로 저장이 되기 때문에 프로그래머는 문자열을 숫자 데이터로 바꿔서 사용해야 하는 경우가 많습니다.

문자열을 숫자 데이터로 바꿔야 하는 경우에는 Number 객체 생성자를 사용하여 문자열 데이터를 숫자 데이터로 쉽게 변환할 수 있습니다.

const num = "123";
const num = Number(num); // 문자열을 숫자 데이터로 변환

만약 숫자로 바꿀 수 없는 문자열이라면 숫자가 아님을 뜻하는 NaN이 반환되는데, Number 객체 생성자를 사용하는 방법 이외에 다른 방법으로 자바스크립트의 내장 함수인 parseInt나 parseFloat함수를 사용하면 됩니다.

parseInt는 파라미터를 넘겨 변환할 문자열이 몇 진수로 표현될 것인지를 지정할 수 있는데, 예를 들어 기본 값은 10으로 파라미터를 넘기지 않으면 10진수로 변환이 되지만, 16진수를 의미하는 16을 파라미터로 넘기면 16진수로 변환된 값을 반환합니다.

자바스크립트의 내장함수인 parseInt와 parseFloat은 모두 숫자로 판단할 수 있는 부분까지만 변환하고, 그 나머지 문자열은 무시하는 특징이 있습니다.

const num1 = parseInt('16Hz', 10);    // 16
const num2 = parseInt('3a', 16);      // 58. 16진수인 3a를 10진수로 변환하여 반환
const num3 = parseFloat('15.5 Km/h'); // 15.5

Date 객체의 경우 valueof()메서드를 사용하여 숫자로 변환할 수 있는데, 변환된 숫자는 UTC 1970년 1월 1일 자정을 기준으로 몇 밀리초가 지났는지를 나타내는 숫자입니다.

const d = new Date();
const ms = d.valueOf(); // 해당 기준 날짜로부터 몇 밀리초가 지났는지를 나타내는 숫자 반환
console.log(ms);

1591086790903

문자열 변환

숫자를 문자열로 표현하는 경우에는 toString() 메서드를 사용하면 되는데, 자바스크립트의 모든 객체에는 문자열을 반환하는 toString() 메서드가 있습니다.

하지만 문자열과 숫자를 연산하는 경우에는 자동으로 숫자를 문자열로 변환하거나 문자열을 숫자로 변환하여 연산을 수행하기 때문에 toSting() 메서드를 사용할 일은 생각보다 많지는 않습니다.

const num = 123;
console.log(typeof(num)); // number
const s = num.toString();
console.log(typeof(s));   // string

number
string

toString() 메서드를 객체에 사용하면 [object Object]라는 문자열을 반환하는데, 이런 형태의 데이터는 아무 소용이 없는 데이터이기 때문에, 객체의 경우에는 obj.property와 같이 내부 프로퍼티의 값을 직접 반환받아야 합니다.

배열의 경우 toString() 메서드는 각 요소를 문자열로 바꾸고 쉼표로 연결한 문자열을 반환해 주는데, 문자열 자체를 조작해서 사용하는 경우에는 유용하게 사용할 수 있습니다.

const a1 = [1, true, 'invest'];
console.log(a1.toString()); // "1, true, invest"

불리언 변환

데이터를 불리언 타입으로 변환하는 것은 매우 간단한데, 모든 값에 부정 연산자인 !를 붙여주면 됩니다. 데이터에 부정 연산자를 사용하면 ‘참’과 같은 값은 false가 되고, ‘거짓’과 같은 값은 true가 됩니다.

Boolean 생성자를 사용하는 방법도 있는데, Boolean 생성자를 사용하는 경우 ‘참’같은 값은 true를 반환하고 ‘거짓’같은 값은 false를 반환합니다.

const num = 0;                // 숫자 0은 '거짓'같은 값
const bool1 = !num;           // true
const bool2 = !!num;          // false
const bool3 = Boolean(num);   // false
const bool4 = Boolean(!num);  // true

데이터 타입

숫자

Number 객체 프로퍼티

문자열

특수 문자와 이스케이프

템플릿 문자열

문자열 연산

불리언

null과 undefined

심볼

객체

객체 함수 사용하기

객체 프로퍼티 삭제하기

Number, String, Boolean 객체

배열

날짜

정규표현식

Map과 Set

데이터 타입 변환

숫자 변환

문자열 변환

불리언 변환

이 클래스 공유하기:

테크어답터님을 후원해주세요.아래 2가지 방법으로 후원할 수 있어요!

테크어답터님의 글 프리미엄 보기

테크어답터님의 글 프리미엄 보기(30일)

mindset명언

investment명언

business명언

essay에세이

philosophy철학