데이터 타입

이보아·2024년 7월 9일

데이터 타입

데이터 타입에 따라 확보해야 할 메모리 공간의 크기도 다르고 메모리에 저장되는 2진수도 다르며 해석 방식도 다르다.
개발자는 명확한 의도를 가지고 타입을 구별해서 값을 생성 할것이고,
자바스크립트 엔진은 타입을 구별해서 값을 취급한다.

숫자 타입

자바스크립트는 하나의 숫자 타입만 존재한다.

👉 자바스크립트의 숫자 타입은 정수만을 위한 타입은 없고 모든 수를 실수로 처리한다.

- 예제

// 숫자 타입은 모두 실수로 처리된다.
console.log(1 === 1.0); // true

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

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

그리고 숫자 타입은 추가적으로 세가지 특별한 값도 표현할 수 있다.

⚠ 자바스크립트는 대소문자를 구별함으로 nan 이런식으로 작성 X

예제

// 숫자 타입의 세 가지 특별한 값
console.log(10 / 0); // Infinity : 양의 무한대
console.log(10 / -0); // -Infinity : 음의 무한대
console.log(1 * "String"); // NaN 산술 연산 불가

문자열 타입

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

⚠ 문자열을 감싸지 않는다면 스페이스와 같은 공백 문자도 포함시킬 수 없다.

var string;
string = "문자열"; // 작은 따옴표
string = "문자열"; // 큰따옴표
string = `문자열`; // 백틱(ES6)

string = '작은따옴표로 감싼 문자열 내의 "큰따옴표"는 문자열로 인식된다.';
string = "큰따옴표로 감싼 문자열 내의 '작은따옴표'는 문자열로 인식된다.";

var string = hello; // 따옴표로 감싸지 않은 hello는 식별자로 인식한다 (ReferenceError)

템플릿 리터럴

ES6부터 템플릿 리터럴이 도입됬으며, 새로운 문자열 표기법이다.

템플릿 리터럴 처리 기능

멀티라인 문자열
표현식 삽입
태그드 템플릿

👉 이러한 기능들을 제공하며, 편리한 문자열 처리 기능을 제공하고 런타임에 일반 문자열로 변환되어 처리되다.
예제

var template = `Template literal`;
console.log(template); // Template literal

// 멀티라인 문자열
var dspText = "";
dspText += "알림창입니다.";
dspText += "\n1.";
dspText += "\n2.";

alert(dspText);

// 출력 결과
// 알림창 입니다.
// 1.
// 2.

var template2 = `<ul>
<li><p>Hi</p><li>
</ul>`;

console.log(template2);

//출력 결과

//<ul>
// <li><p>Hi</p><li>
// </ul>

불리언 타입

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

undefined 타입

undefined 타입의 값은 undefined가 유일히다.

👉var 키워드로 선언한 변수는 암묵적으로 undefined로 초기화된다. 확보된 메모리 공간을 처음 할당이 이뤄질 때까지 빈 상태로 내버려두지 않고
undefined로 초기화 한다. 할당되지 않은 변수를 참조하면 undefined가 반환된다.

예제

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

null 타입

null 타입의 값은 null이 유일하다. 자바스크립트는 대소문을 구별하므로 작성할때 null로 작성 해야한다.

👉 null은 변수에 값이 없다는 것을 의도적으로 명시(의도적 부재)할 때 사용한다.

예제

var foo = "Lee";

foo = null;

심벌 타입

변경 불가능한 원시 타입의 값이다. 유일무이한 값이다. 주로 프로퍼티 키를 만들기위해 사용한다.

var key = symbol("key");
console.log(typeof key); // symbol

var obj = {};

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

객체 타입

자바스크립트는 객체 기반의 언어이며, 자바스크립트를 이루고 있는 거의 모든 것이 객체이다.

데이터 타입의 필요성

메모리에 저장하고 참조 할때 메모리 공간의 크기를 결정하기 위해서이며, 낭비와 손실 없이 값을 저장할 수 있는지 알아야 한다.

👉 정리하면

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

동적 타이핑

자바스크립트는 정적 타입 언어와 다르게 변수를 선언할 때 타입을 선언하지 않는다. 어떠한 데이터 타입의 값이라도 자유롭게 할당 할 수 있다.

👉 자바스크립트의 변수는 선언이 아닌 할당에 의해 타입이 결정(타입 추론)된다. 그리고 재할당에 의해 변수의 타입은 언제든지 동적으로 변할 수 있다.

foo = {}; //객체
console.log(typeof foo); // object

foo = []; //배열
console.log(typeof foo); //object

foo = function () {}; // 함수
console.log(typeof foo); //function

⚠ 변수 사용할때 주의할 사항

변수는 꼭 필요한 경우에 한해 제한적으로 사용한다. 변수 개수가 많을수록 오류가 발생할 확률도 높아진다.
변수의 유효 범위(스코프)는 최대한 좁게 만들어 변수의 부작용을 억제해야 한다.
전역 변수는 최대한 사용하지 않도록 한다. 어디서든 참조/변경 가능한 전역 변수는 의도치 않게 값이 변경될 가능성이 높고 다른 코드에 영향을 줄 수 있다.
변수보다는 상수를 사용해 값의 변경을 억제한다.
변수 이름은 변수의 목적이나 의미를 파악할 수 있도록 네이밍한다. 식별자, 함수, 클래스 이름등 모두 적절한 이름으로 지어야 한다.