자바스크립트 데이터 타입은 뭐가 있지?

종류

---

구분	데이터 타입	설명
원시 타입	Number	숫자를 나타내며, 정수와 실수 구분 없이 하나의 숫자 타입만 존재합니다.
	String	문자열을 나타내며, 문자의 시퀀스로 이루어져 있습니다.
	Boolean	논리적 값(true 또는 false)을 나타냅니다.
	Undefined	변수가 값 없이 선언되었을 때 기본적으로 할당되는 값입니다.
	Null	어떤 값이 의도적으로 비어있음을 나타냅니다.
	Symbol	ES6에서 추가된 타입으로, 고유하고 수정 불가능한 데이터 타입으로 주로 객체 속성의 키로 사용됩니다.
	BigInt	Number 타입으로 표현할 수 있는 범위를 넘어서는 큰 정수를 표현할 때 사용됩니다. ES2020에서 도입되었습니다.
객체 타입	Object	키와 값으로 구성된 속성들의 집합입니다. 배열, 함수, 날짜, 정규 표현식 등 다양한 내장 객체와 사용자 정의 객체를 포함합니다.

숫자타입

---

c언어나 자바의 경우, 정수(소수점 이하가 없는 숫자)와 실수(소수점 이하가 있는 숫자)를 구분해서 int, long float, double 등과 같은 다양한 숫자 타입을 제공한다.

하지만 ECMAscript 사양에 따르면 숫자타입의 값은 배정밀도 64비트부동소수점 형식을 따른다.

💡

부동소수점(floating point)은 실수를 컴퓨터에서 근사적으로 표현하기 위한 방식입니다. 컴퓨터는 이진수를 사용하여 모든 데이터를 표현하며, 정확한 실수 표현은 무한한 이진수가 필요할 수 있어 실용적이지 않습니다. 이에 따라, 부동소수점 방식은 실수를 유한한 수의 비트로 근사하여 표현합니다

//모두 숫자 타입
var integer = 10; // 정수
var double = 10.12; // 실수
var negative = -20; // 음의 정수

모두 숫자 타입으로 구분하여 저장한다.

정수, 실수, 2진수, 8진수, 16진수 리터럴은 모두 메모리에 배정밀도 64비트 부동소수점 형식의 2진수로 저장된다. 자바스크립트는 2진수, 8진수, 16진수를 표현하기 위한 데이터 타입이 존재하지 않기 때문에 값을 참조하면 모두 10진수로 해석된다.

var binary = 0b0100001; // 2진수
var octal = 0o101; // 8진수
var hex = 0x41; // 16진수

console.log(binary === octal === hex) // true 
// 모두 65를 다양한 진수로 해석해도 같은 수로 인식한다.

숫자 타입은 모두 실수로 처리된다.

console.log(1 === 1.0) // true
console.log(4 / 2) // 2
console.log(3 / 2) // 1.5

숫자타입은 추가적으로 특별한 값도 존재

• Infinity: 양의 무한대
• -Infinity : 음의 무한대
• NaN : 산술 연산 불가

💡 추가적으로 자바스크립트는 대소문자를 구별하기 때문에 NaN을 NAN, Nan, nan 으로 표현하면 에러가 발생한다.

문자열 타입(String)

---

문자열 타입은 텍스트 데이터를 나타내는데 사용한다. 문자열은 0개이상의 16비트 유니코드 문자(UTF-16)의 집합으로 전 세계 대부분의 문자를 표현할 수 있다.

• 문자열은 작은 따옴표(’ ’), 큰 따옴표(” ”), 백틱()으로 텍스트를 감싼다,

var string;
string = 'text';
string = "text";
string = `text`; 

• 텍스트를 특정한 규칙으로 감싸지 않으면 식별자로 취급해 참조 에러가 발생한다.

var string = hello // ReferenceError: hello is not define

템플릿 리터럴

---

ES6부터 템플릿 리터럴이라고 하는 새로운 문자열 표기법이 도입되었다.

템플릿 리터럴은 멀티라인 문자열, 표현식 삽입, 태그드 템플릿 등 편리한 문자열 처리 기능을 제공한다.

이는 런타임에서 일반 문자열로 변환되어 처리되어진다.

var template = `Template Litaral`
console.log(template) // Template Litaral

• 멀티라인 문자열

  일반 문자열 내에서는 줄바꿈이 허용되지 않는다.

    var str = 'Hello
    World' // SyntaxError: Invaild or unexpected token

  따라서 일반 문자열 내에서 줄바꿈 등의 공백을 표현하려면 백슬래시로 시작하는 이스케이프 시퀴스를 사용해야한다.

  이스케이프 시퀀스	설명
  \\	백슬래시() 자체를 나타냅니다.
  \'	단일 인용부호(')를 문자열 안에 포함시킵니다.
  \"	이중 인용부호(")를 문자열 안에 포함시킵니다.
  \n	새로운 줄(개행)을 시작합니다.
  \r	캐리지 리턴(Carriage Return)을 나타냅니다.
  \t	수평 탭을 나타냅니다.
  \b	백스페이스를 나타냅니다.
  \f	폼 피드를 나타냅니다. 페이지를 나누는 데 사용됩니다.

  예를 들어

    var template1 = "<ul><li><a href='#'>Home</a></li></ul>";
  
    console.log(template1); // <ul><li><a href='#'>Home</a></li></ul>
  
    var template2 = "<ul>\n\t<li><a href='#'>Home</a></li>\n</ul>";
  
    console.log(template2); 
    <ul>
        <li><a href="#">Home</a><li>
    </ul>

  \n, \t 형식의 이스케이프 시퀸스를 사용하면 멀티라인을 표현할 수 있는데 템플릿을 사용하면

    var template = `<ul>
    <li><a href="#">Home</a></li>
    </ul>`
    // 따로 시퀸스를 사용하지않아도 멀티라인이 표현된다.

• 표현식 삽입

  문자열은 문자열 연산자 + 를 사용해 연결할 수 있다. 여러 문자열을 변수에 담아 한번에 표현하고 싶다면 아래의 예시처럼 사용할 수 있다.

    var firstName = 'Javascript';
    var secondName = 'Template';
    var thirdName = 'Litaral';
  
    console.log(firstName + secondName + thirdName) // JavascriptTemplateLitaral

  템플릿 리터럴을 사용하면 간단하게 나타낼 수 있다.

    var firstName = 'Javascript';
    var secondName = 'Template';
    var thirdName = 'Litaral';
    console.log(`${firstName}${secondName}${thirdName}`) // JavascriptTemplateLitaral

불리언 타입

---

불리언 타입의 값은 논리적 참 , 거짓을 나타내는 true와 false뿐이다.

var foo = true;
console.log(foo) // true
foo = false;
console.log(foo) // false

undefined 타입

---

undefined 값은 undefined가 유일하다.

var 키워드로 변수를 선언하면 런타임이 되기전에 undefined의 값 암묵적으로 할당된다.

이를 초기화라고 하는데, 다시말해 변수 선언에 이해 확보된 메모리상의 빈 공간을 처음 할당할 때 빈 상태 (대부분 비어있지 않고 쓰레기 값이 들어가 있다.)로 내버려두지 않고 자바스크립트 엔진이 undefined를 할당해 초기화한다.

이처럼 undefined는 개발자가 의도적으로 할당하는 값이 아니라 자바스크립트 엔진에서 변수를 초기화 할때 사용하는 값이기 때문에 의도적으로 할당하는 것을 권장하지 않는다.

이유는 취지 어긋날뿐더러 혼란을 줄 수 있으므로 권장하지 않는다.

그러면 변수에 값이 없다는 것을 명시하고 싶을 때는 어떻게 하면 좋을까?

그런 경우에는 undefined대신 null을 할당한다.

• Tip, 선언과 정의에 대한 내용

  자바스크립트에서 "선언(Declaration)"과 "정의(Definition)"는 변수, 함수, 클래스 등을 프로그램에 소개하는 방법에 관련된 개념입니다. 이 언어의 유연한 특성으로 인해, 선언과 정의 사이의 경계는 다른 프로그래밍 언어보다 덜 명확할 수 있습니다. 하지만 기본적으로, 선언은 식별자의 존재를 알리는 것이며, 정의는 해당 식별자에 구체적인 값이나 구현을 할당하는 것입니다.

  변수 선언과 정의

  자바스크립트에서 변수를 선언할 때는 var, let, const 키워드를 사용합니다. var는 함수 스코프 또는 전역 스코프 변수를 선언하는 데 사용되며, let과 const는 블록 스코프 변수를 선언하는 데 사용됩니다. const는 상수를 선언할 때 사용되므로 선언과 동시에 초기화해야 합니다.

  키워드	사용 예제	설명
  var	var x;	변수 x를 선언합니다. 초기화하지 않으면 undefined가 됩니다.
  let	let y;	블록 스코프 변수 y를 선언합니다. 초기화하지 않으면 undefined가 됩니다.
  const	const z = 10;	상수 z를 선언하고 10으로 초기화합니다. 선언과 동시에 초기화가 필요합니다.

  함수 선언과 정의

  함수 선언은 함수의 이름과 매개변수 리스트, 그리고 구현하는 코드 블록을 포함합니다. 자바스크립트에서는 함수 선언이 그 자체로 함수의 정의를 포함합니다. 함수 표현식을 사용하여 변수에 함수를 할당함으로써도 함수를 정의할 수 있습니다.

  선언 방식	사용 예제	설명
  함수 선언문	function hello() { console.log("Hello!"); }	이름이 hello인 함수를 선언하고 정의합니다.
  함수 표현식	const greet = function() { console.log("Hello!"); };	함수 표현식을 사용해 함수를 변수 greet에 할당합니다.
  화살표 함수 표현식	const greet = () => { console.log("Hello!"); };	화살표 함수를 사용해 함수를 변수 greet에 할당합니다.

  클래스 선언과 정의

  ES6부터 자바스크립트는 class 키워드를 도입하여 객체 지향 프로그래밍을 보다 쉽게 구현할 수 있게 되었습니다. 클래스 선언은 클래스의 이름과 메서드를 포함합니다. 자바스크립트에서 클래스 선언 역시 클래스의 정의를 포함합니다.

  자바스크립트에서 선언은 대부분의 경우 정의를 포함합니다. 변수는 선언 시 undefined로 초기화될 수 있지만, 함수와 클래스는 선언과 동시에 구체적인 구현을 제공해야 합니다.

  사용 예제	설명
  class Rectangle { constructor(height, width) { this.height = height; this.width = width; } }	Rectangle 클래스를 선언하고, 생성자를 정의하여 height와 width 속성을 초기화합니다.

null 타입

---

null 타입은 null이 유일하다.

프로그래밍 언어에서 null은 변수에 값이 없다는 것을 의도적으로 표현하고 싶을때 사용한다.

변수에 null 을 할당하는 것은 변수가 이전에 참조하던 값을 더이상 참조하지 않겠다는 의미다.

이는 할당되어 있던 값에 대한 참조를 명시적으로 제거하는 것이며, 자바스크립트 엔진은 누구도 참조하지 않는 메모리공간에 가비지 콜렉션을 수행할 것이다.

var foo = 'Lee';

foo = null;

함수가 유효한 값을 반환할 수 없을 경우 명시적으로 null을 반환하기도 한다.

심벌 타입(Symbol)

---

심벌은 ES6에 추가된 7번째 타입으로, 변경이 불가능한 원시 타입이다.

변경이 불가능한 원시 타입의 값이다.

심벌은 고유하고 변경 불가능한 원시 값으로 주로 객체 속성의 키로 사용

심벌의 주요 목적은 이름 충돌의 위험 없이 객체 속성에 대한 유일한 식별자를 생성하는 것이다.

이는 특히 다양한 라이브러리와 API가 함께 작동할 때 중요한데, 이로 인해 다른 개발자나 라이브러리에 의해 덮어쓰여질 위험이 있는 문자열 키 대신, 심벌을 사용하여 객체 속성을 안전하게 보호할 수 있습니다.

특징	설명
고유성	Symbol() 함수를 호출할 때마다 고유한 심벌 값을 생성합니다. 동일한 설명으로 심벌을 생성하더라도 각 심벌 값은 서로 다릅니다.
변경 불가능성	한 번 생성된 심벌 값은 변경할 수 없습니다.
익명성	심벌은 디버깅을 제외하고는 대부분의 경우에 "익명"입니다. Symbol('description') 형태로 설명을 추가할 수 있지만, 이는 오로지 디버깅 목적입니다.
객체 속성의 키	심벌은 객체의 속성 키로 사용될 수 있습니다. 이 때, 심벌로 만들어진 키는 for...in, Object.keys() 등 일반적인 방법으로는 열거할 수 없어 객체 내부를 숨기는 용도로 사용될 수 있습니다.

예시)

// ex1)
var key = Symbol('key');
console.log(typeof key)// symbol

// 객체 생성
var obj = {};

// 이름이 충돌할 위험이 없는 유일무이한 값인 심벌을 프로퍼티 키로 사용
obj[key] = 'value';
console.log(obj[key]); // value

//ex2) 
let symbol2 = Symbol('description');
let symbol3 = Symbol('description');

// 심벌은 모두 고유합니다.
console.log(symbol2 === symbol3); // false

// 객체 속성의 키로 사용
let myObj = {
    [symbol1]: 'value1',
    [symbol2]: 'value2'
};

console.log(myObj[symbol1]); // 'value1'
console.log(myObj[symbol2]); // 'value2'

💡 다시한번 정리할 필요가 있어서 다른 장에서 자세히 살펴보자

객체 타입

---

자바스크립트의 데이터 타입은 원시타입과 객체 타입으로 나뉘는데 이유는 근본적으로 다르기 때문이다.

자바스크립트를 이루고 있는 거의 모든 것이 객체 이기 때문에 중요한 것이다.

💡 이는 중요하기 때문에 다른 장에서 자세하게 알아볼 것이다.

데이터 타입의 필요성

---

• 데이터 타입에 의한 메모리 공간의 확보와 참조

  값은 메모리에 저장하고 참조할 수 있어야 한다.

  메모리에 값을 저장하려면 먼저 확보해야 할 공간과 크기를 결정해야한다. 다시말해, 몇 바이트의 메모리 공간을 사용해야 낭비와 손실 없이 값을 저장할 수 있는지 알아야한다.

    var score = 100;

  위 코드가 실행되면

  메모리 공간 확보 → 확보된 메모리에 숫자 100을 2진수로 저장

  하도록 동작한다.

  이러한 처리를 하려면 숫자 값을 저장할 때 확보해야 할 메모리 공간의 크기를 알아야 한다.

  자바스크립트 엔진은 데이터 타입, 즉 값의 종류에 따라 정해진 크기의 메모리 공간을 확보한다.

  즉, 변수에 할당되는 값의 데이터 타입에 따라 확보해야 할 메모리 공간과 크기가 결정된다.

  💡 자바스크립트는 값의 타입을 생성할 때 배정밀도 64비트 부동소수점 형식을 사용한다.

  • 배정밀도 64비트 부동소수점이란?

    배정밀도 64비트 부동소수점(double-precision 64-bit floating-point)은 컴퓨터에서 실수를 표현하는 데 사용되는 데이터 형식 중 하나입니다. IEEE 754 표준에 따라 설계된 이 형식은 부동소수점 수를 표현하는 데 64비트(8바이트)를 사용합니다. 배정밀도 부동소수점 형식은 단정밀도 32비트 부동소수점보다 더 넓은 범위의 수를 더 높은 정밀도로 표현할 수 있게 해줍니다.

    구성 요소	비트 수	용도
    부호 (Sign)	1	수의 부호를 나타냅니다. 0은 양수, 1은 음수입니다.
    지수 (Exponent)	11	수의 크기를 결정합니다. 실제 값은 이 값을 특정 값(바이어스)으로 조정하여 계산합니다.
    가수 (Mantissa)	52	수의 정밀도를 나타내며, 실제 숫자 값의 유효 숫자를 표현합니다.

    부호(Sign)

    • 0 또는 1의 값으로, 부동소수점 수의 양수 또는 음수를 나타냅니다.

      지수(Exponent)

    • 11비트로 표현되며, 2의 거듭제곱 형태로 수의 범위를 조절합니다. 지수 부분은 바이어스(bias) 라는 값(1023)을 더하거나 빼서 실제 값을 얻습니다. 이를 통해 양수와 음수의 지수를 표현할 수 있습니다.

      가수(Mantissa 또는 Significand)

    • 52비트로, 수의 정밀한 값을 표현합니다. 가수는 보통 1.xxxx... 형태의 값을 가지며, 이 때 1은 일반적으로 생략되고, xxx... 부분만 저장됩니다(정규화된 형태).

      배정밀도 부동소수점은 매우 크거나 매우 작은 실수를 표현할 수 있어 과학적 계산이나 금융 분야에서 정밀한 계산이 필요할 때 널리 사용됩니다. 예를 들어, 이 데이터 형식은 대략 ±10^(-308)부터 ±10^(308) 사이의 수를 표현할 수 있으며, 최대 15~17자리의 정밀도를 제공합니다.

      IEEE 754 표준은 부동소수점 수의 표현 방식을 규정함으로써, 다양한 컴퓨터와 시스템에서 실수의 계산과 교환을 일관되게 할 수 있게 합니다. 그러나 부동소수점 연산은 무한 소수를 유한한 비트로 근사하여 표현해야 하기 때문에, 때때로 정밀도 손실이 발생할 수 있음을 이해하는 것이 중요합니다.

• 값을 참조하는 경우

식별자 score를 통해 숫자 타입의 값 100이 저장되어 있는 메모리 공간의 주소를 찾아갈 수 있다.

정확히 말하자면, 숫자 값 100이 저장된 메모리 공간의 선두 셀 주소에 찾아갈 수 있다.

이때 값을 참조하려면 한번에 읽어 들여야 할 메모리 공간의 크기, 즉 메모리 셀의 개수(바이트 수)를 알아야한다.

컴퓨터는 어떻게 한번에 읽어 들여야 할 메모리 셀의 크기를 알 수 있을까??

이는 자바스크립트 엔진에서 값이 할당되는 데이터 타입에 따라서  타입을 저장해 메모리 공간에 저장된 값을 읽어 들인다. 

• 참조와 메모리 할당 과정

자바스크립트에서 값의 참조와 메모리 할당 과정을 이해하기 위해서는 자바스크립트가 원시 타입(Primitive types)과 참조 타입(Reference types)을 어떻게 다루는지 알아야 한다.

자바스크립트 엔진은 이 두 종류의 데이터를 저장하고 처리하는 방식이 다르다.

원시 타입 (Primitive Types)

원시 타입에는 Number, String, Boolean, Symbol, null, undefined, 그리고 BigInt가 포함됩니다. 이들은 변경 불가능한 값(immutable values)이며, 변수에 원시 데이터를 할당할 때 메모리에 직접적으로 그 값이 저장됩니다. 원시 타입의 크기는 자바스크립트 엔진에 따라 다르지만 일반적으로 고정된 크기를 가집니다.

원시 타입의 값은 변수에 할당될 때, 메모리 상에 해당 값을 복사하여 저장합니다. 따라서, 하나의 변수에서 다른 변수로 원시 타입의 값을 할당하면, 실제 값이 복사되어 두 변수는 서로 독립적인 값을 가지게 됩니다.

let a = 10;
let b = a; // 'a'의 값을 'b'에 복사합니다.
a = 20; // 'a'의 값을 변경해도 'b'에는 영향을 주지 않습니다.

참조 타입 (Reference Types)

참조 타입에는 객체(Object), 배열(Array), 함수(Function), 그리고 날짜(Date) 등이 포함됩니다. 참조 타입의 데이터는 변수에 직접 저장되는 것이 아니라, 메모리 상에 객체가 생성되고, 변수는 그 객체를 참조하는 포인터(또는 참조)를 저장합니다. 참조 타입의 크기는 동적으로 변할 수 있으며, 메모리의 힙(Heap) 영역에 할당됩니다.

참조 타입의 경우, 변수에 객체를 할당하면 실제 데이터가 저장된 메모리 주소(참조)가 복사되어 변수에 저장됩니다. 따라서, 두 변수가 같은 객체를 참조하게 될 경우, 한 변수를 통해 객체를 변경하면 다른 변수를 통해서도 그 변경 사항을 볼 수 있습니다.

let obj1 = { value: 10 };
let obj2 = obj1; // 'obj1'이 참조하는 객체의 메모리 주소를 'obj2'에 복사합니다.
obj1.value = 20; // 'obj1'을 통해 객체를 변경하면,
console.log(obj2.value); // 'obj2'를 통해서도 변경된 값을 볼 수 있습니다. (20 출력)

그럼 결국 데이터 타입이 필요한 이유는 3가지로 말할 수 있다.

• 값을 저장할 때 확보해야하는 메모리 공간의 크기를 결정하기 위해
• 값을 참조할 때 한번에 읽어 들여야 할 메모리 공간의 크기를 결정하기 위해
• 메모리에서 읽어 들인 2진수를 어떻게 해석할지 결정하기 위해

동적 타이핑

---

• 동적 타입 언어와 정적 타입 언어

  동적 타입 언어와 정적 타입 언어는 변수의 타입이 결정되는 시점과 방식에서 주요 차이를 보인다. 이 차이는 언어의 사용성, 성능, 안정성 등에 영향을 미치며, 각각의 장단점이 있다.

  특징	동적 타입 언어	정적 타입 언어
  타입 결정 시점	실행 시간(Runtime)	컴파일 시간(Compile time)
  예시	Python, JavaScript, Ruby	C, C++, Java, TypeScript
  타입 검사	프로그램 실행 중에 이루어짐	컴파일 시에 이루어짐
  유연성	높음. 변수의 타입을 실행 시간에 변경할 수 있음	낮음. 변수의 타입이 선언 시 결정되며 변경할 수 없음
  타입 안정성	낮음. 타입 오류가 실행 시간까지 발견되지 않을 수 있음	높음. 대부분의 타입 오류가 컴파일 시간에 발견됨
  성능	일반적으로 낮음. 타입 확인과 변환에 실행 시간이 소요될 수 있음	일반적으로 높음. 타입이 고정되어 최적화가 용이함
  개발 속도	일반적으로 빠름. 타입 선언이 필요 없어 빠르게 코드 작성 가능	일반적으로 느림. 타입 선언과 검사로 인해 개발 과정이 길어질 수 있음
  적합한 사용 사례	프로토타입 개발, 작고 유연한 애플리케이션 개발	대규모 시스템, 안정성과 성능이 중요한 애플리케이션 개발

  자바스크립트는 var, let, const 키워드를 사용해 변수를 선언할 뿐이다.

  동적 타입 언어는 변수의 데이터 타입을 반환하는 것이 아니라 변수에 할당된 값의 데이터 타입을 반환하는 것이다. 즉, 기본적으로 변수는 타입을 갖지 않는다. 하지만 값은 타입을 갖는다. 따라서 현재 변수에 할당되어 있는 값에 의해 변수의 타입이 동적으로 결정된다고 표현하는 것이 적절하다.

• 동적 타입 언어와 변수

  동적 타입 언어 변수에는 어떤 데이터 타입의 값이라도 자유롭게 할당 할 수 있다.

  그러나 모든 소프트웨어 아키택처에는 트레이드 오프가 존재하기때문에 구조적인 단점이 있다.

  • 변수는 꼭 필요한 경우에 한해 제한적으로 사용해야 한다. 값의 재할당에 의해 언제든 변경될 수 있다. 동적 타입 언어인 자바스크립트는 타입을 잘못 예측해 오류가 발생할 가능성이 크다.
  • 변수의 유효 범위(스코프)를 좁게 만들어서 억제해야함
  • 전역 변수는 최대한 사용하지 않도록 해야한다.
  • 변수보다 상수를 사용해 값을 변경한다.
  • 변수 이름은 목적이나 의미를 파악할 수 있도록 네이밍한다.