Javascript 타입 종류

기본타입

• 타입(data type) : 프로그램에서 다룰 수 있는 값의 종류
• 타입의 종류 : 원시 타입, 객체 타입
• 원시 타입(primitive type)
  • 원시 타입은 변경이 불가능한(immutable) 값
  • 원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장
  • call by value(= pass by value) : 원시 값을 가진 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달
• 객체 타입(object type)
  • 객체(참조) 타입은 변경 가능한(mutable) 값
  • 객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값이 저장
  • call by reference(= pass by reference) : 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달

숫자(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)을 표현
• 예약어 true와 false를 사용하여 나타냄

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

심볼(Symbol)

• ECMAScript 6부터 새롭게 추가된 타입
• 심볼은 유일하고 변경할 수 없는 타입으로, 객체의 프로퍼티를 위한 식별자로 사용 가능

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

typeof 연산자

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

typeof 10;        // number타입 반환
typeof "문자열";    // string타입 반환
typeof true;      // boolean타입 반환
typeof undefined; // undefined타입 반환
typeof null;      // object타입 반환

null과 undefined

• 자바스크립트에서 null이란 object 타입이며, 아직 '값'이 정해지지 않은 것
• 또한, undefined란 null과는 달리 '타입'이 정해지지 않은 것
• 따라서 undefined는 초기화되지 않은 변수나 존재하지 않는 값에 접근할 때 반환
• null과 undefined는 동등 연산자(==)와 일치 연산자(===)로 비교할 때 그 결괏값이 다르므로 주의
• null과 undefined는 타입을 제외하면 같은 의미지만, 타입이 다르므로 일치 X

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

객체(object)

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

// 객체의 생성
var cat = {
    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)

• 자바스크립트는 특정 타입의 값을 기대하는 곳에 다른 타입의 값이 오면, 자동으로 타입을 변환하여 사용
• 즉, 문자열 값이 오길 기대하는 곳에 숫자가 오더라도 자바스크립트는 알아서 숫자를 문자열로 변환하여 사용
• NaN은 Not a Number의 축약형으로, 정의되지 않은 값이나 표현할 수 없는 값이
• NaN은 Number 타입의 값으로 0을 0으로 나누거나, 숫자로 변환할 수 없는 피연산자로 산술 연산을 시도하는 경우에 반환되는 읽기 전용 값

10 + "문자열";     // 문자열 연결을 위해 숫자 10이 문자열로 변환됨.
"3" * "5";       // 곱셈 연산을 위해 두 문자열이 모두 숫자로 변환됨.
1 - "문자열";      // NaN : 의미에 맞게 자동으로 타입을 변환할 수 없으므로 NaN 값을 반환

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

• 자바스크립트에서는 묵시적 타입 변환을 많이 사용하지만, 명시적으로 타입을 변환할 방법도 제공
• 자바스크립트가 제공하는 전역 함수

Number("10"); // 숫자 10
String(true); // 문자열 "true"
Boolean(0);   // 불리언 false
Object(3);    // new Number(3)와 동일한 결과로 숫자 3

숫자를 문자열로 변환

• String() : 숫자를 문자열로 변환하는 가장 간단한 방법
• toString() : null과 undefined를 제외한 모든 타입의 값이 보유
• toExponential() : 정수 부분은 1자리, 소수 부분은 입력받은 수만큼 e 표기법을 사용하여 숫자를 문자열로 변환함.
• toFixed() : 소수 부분을 입력받은 수만큼 사용하여 숫자를 문자열로 변환함.
• toPrecision() : 입력받은 수만큼 유효 자릿수를 사용하여 숫자를 문자열로 변환함.

String(true);     // 문자열 "true"
false.toString(); // 문자열 "false"

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

• 날짜를 문자열로 변환하는 방법에는 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)

String(Date());        // 'Wed Mar 22 2023 16:11:36 GMT+0900 (한국 표준시)'
Date().toString();     // 'Wed Mar 22 2023 16:11:36 GMT+0900 (한국 표준시)'
var date = new Date(); // Date 객체 생성
date.getFullYear();    // 2023
date.getTime();        // 1679469061703, 1970년 1월 1일부터 현재까지의 시간을 밀리초 단위의 숫자로 반환

문자열을 숫자로 변환

• 문자열을 숫자로 변환하는 가장 간단한 방법은 Number() 함수를 사용
• 자바스크립트는 문자열을 숫자로 변환해 주는 두 개의 전역 함수를 별도로 제공
  • parseInt(): 문자열을 파싱 하여 특정 진법의 정수를 반환
  • parseFloat() : 문자열을 파싱하여 부동 소수점 수를 반환

불리언 값을 숫자로 변환

불리언 값을 숫자로 변환하는 방법에는 Number() 함수를 사용

Reference

https://www.tcpschool.com/javascript/js_datatype_basic

코딩교육 티씨피스쿨