자바스크립트의 자료형 (data type)

👾 타입(data type, 자료형) 이란?

 C나 Java와 같은 언어는 정적 타입(static type) 언어로 변수 선언 시 변수에 저장할 값의 종류를 사전에 타입 지정(Type annotation)하여야 한다. 반면 자바스크립트는 변수의 타입 지정 없이 값이 할당되는 과정에서 자동으로 타입이 결정되는 ‘동적 타입(dynamic type)’ 언어이다.

 변수 선언시 메모리에 값을 저장하기 위해서는 먼저 메모리 공간을 확보해야 할 메모리의 크기(byte)를 알아야한다. 이는 값의 종류에 따라 확보해야 할 메모리의 크기가 다르기 때문이다. 이때 값의 종류, 즉 데이터의 종류를 데이터 타입(data type)이라 한다.

 

 → 기본 타입은 크게 원시 타입과 객체 타임으로 구분할 수 있다.

 → 각 타입은 고유한 속성과 메서드를 가진다.

 

📌 원시 타입(primitive type)

stringnumberbigintbooleanundefinedsymbolnull

 

📌 객체 타입(object/reference type)

원시 타입이 아닌 모든 자료형은 객체타입으로 reference type 이라고도 하고, array, object, function을 포함한다.

object

 

 

👾 원시타입 (primitive type)

number (숫자형)

 숫자를 표현하기 위한 데이터 타입으로 정수(integer)와 실수(float)를 모두 표현할 수 있다.

let num = 123;

 

 숫자형엔 일반적인 숫자 외에 Infinity-InfinityNaN같은 '특수 숫자 값(special numeric value)'이 포함된다.

console.log(10 / 0) // Infinity 
console.log(10 / -0); // -Infinity
console.log("not a number" / 2); // NaN

 • Infinity는 어떤 숫자보다 더 큰 특수 값, 무한대(∞)를 나타낸다.

 • NaN(Not A Number)은 계산 중에 에러가 발생했다는 것을 나타내주는 값이다. 부정확하거나 정의되지 않은 수학 연산을 사용하면 계산 중에 에러가 발생하는데, 이때 NaN이 반환된다. 연산 과정 어딘가에서 NaN이 반환되었다면, 이는 모든 결과에 영향을 미친다.

 

BigInt

 내부 표현 방식 때문에 자바스크립트에선  2⁵³ - 1(9007199254740991) 보다 큰 값 혹은 -(2⁵³ - 1) 보다 작은 정수는 '숫자형’을 사용해 나타낼 수 없으며, 아주 큰 숫자가 필요한 상황이거나 아주 높은 정밀도로 작업을 해야 할 때 BigInt를 사용한다.

 BigInt형은 표준으로 채택된 지 얼마 안 된 자료형으로, 길이에 상관없이 정수를 나타낼 수 있다.

 

 BigInt형 값은 정수 리터럴 끝에 n을 붙여 만든다.

const bigInt = 1234567890123456789012345678901234567890n;

 

String (문자형)

 빈 문자열이나 글자들로 이루어진 텍스트 데이터를 나타내는 데이터 타입으로 작은 따옴표(’), 큰 따옴표(”), 백틱(`)으로 감싸서 나타낸다.

let str = "Hello"; // 큰 따옴표
str = 'Hello'; // 작은 따옴표
str = `Hello`; // 백틱

 

 • 백틱(backtick)으로 변수나 표현식을 감싼 후 ${...} 안에 넣어주면, 원하는 변수나 표현식을 문자열 중간에 넣을 수 있다.

let name = "Helen";

// 변수를 문자열 중간에 삽입
console.log(`Hello, ${name}`); // Hello, Helen

// 표현식을 문자열 중간에 삽입
console.log(`the reselt is ${1 + 2}`); // the reselt is 3

 

Boolean (불리언)

 논리적 참, 거짓을 나타내는 true와 false로 나타낼 수 있으며, 불리언 타입의 값은 참과 거짓으로 구분되는 조건에 의해 프로그램의 흐름을 제어하는 조건문에서 자주 사용한다.

let isChecked = true;
let isAdult = false;

let passed = 7 > 1;
console.log(passed) // true;

 → 불린값은 비교 결과를 저장할 때도 사용된다.

 

 • Boolean이 false인 경우 : 0nullundefiend빈 문자열(’’)NaN

Boolean(0)    // false
Boolean('0')  // true

Boolean('')   // false
Boolean(' ')  // true

 

Symbol (심볼)

 심볼은 ES6에서 새롭게 추가된 타입으로 변경 불가능한 원시 타입의 값이다. 심볼은 주로 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키(property key)를 만들기 위해 사용한다. 심볼은 Symbol 함수를 호출해 생성한다. 이때 생성된 심볼 값은 다른 심볼 값들과 다른 유일한 심볼 값이다.

let sym = Symbol("key");

console.log(sym) // Symbol(key)
console.log(typeof sym) // symbol

 

null

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

 이는 변수가 기억하는 메모리 어드레스의 참조 정보를 제거하는 것을 의미하며 자바스크립트 엔진은 누구도 참조하지 않는 메모리 영역에 대해 가비지 콜렉션을 수행할 것이다.

let result = null;

 → result를 알 수 없거나, 그 값이 비어있음을 나타낸다.

 

 • 함수가 호출되었으나 유효한 값을 반환할 수 없는 경우, 명시적으로 null을 반환하기도 한다.

let element = document.querySelector('.myElem');
console.log(element); // null

 → HTML 문서에 myElem 클래스를 갖는 요소가 없다면 null을 반환한다.

 

 • null 값의 자료형은 object로 이는 자바스크립트 설계상의 오류이며, null 타입을 확인할 때는 typeof 연산자가 아닌 일치 연산자(===)를 사용해야 한다.

typeof null // object

let age = null;
console.log(age === null); // true

 

undefined

 undefined는 값이 할당되지 않은 상태를 나타낼 때 사용하며, 변수는 선언했지만 값을 할당하지 않았다면 해당 변수에 undefined가 자동으로 할당된다. 즉, 선언은 되었지만 값을 할당하지 않은 변수에 접근하거나 존재하지 않는 객체 프로퍼티에 접근할 경우 undefined가 반환된다.

let storage;

console.log(storage); // undefined

 

 • 개발자가 변수에 undefined를 명시적으로 할당하는 것도 가능하긴 하다.

let age = 100;
age = undefined;

 → 하지만 이렇게 undefined를 직접 할당하는 걸 권장하진 않는다. undefined는 값이 할당되지 않은 변수의 초기화에 사용하는 값이므로, 변수가 ‘비어있거나’ ‘알 수 없는’ 상태라는 걸 나타내려면 null을 할당하는 것을 권장한다.

 

 • null과 undefined는 동등 연산자(==)와 일치 연산자(===)로 비교할 때 그 결과값이 다르다.

null == undefined;   // true
null === undefined;  // false

 

👀❗️참고 자바스크립트에서 자주 보는 결과들로 undefined와 null이 있다. undefined는 '값을 할당하지 않은 결과'이고, null은 '무언가를 찾지만 아무것도 없음을 전달한 값'이다. 따라서 만약 console.log를 사용해 변수를 확인했는데, undefined가 뜬다면 값이 할당되지 않은 상태 (let x;) 라는 의미이고, null은 해당 결과가 없음(let x = null;) 을 의미한다.

 

 

👾 객체 타입 (object/reference type)

 객체는 데이터와 그 데이터에 관련한 동작(절차, 방법, 기능)을 모두 포함할 수 있는 개념적 존재이다. 달리 말해, 이름과 값을 가지는 데이터를 의미하는 프로퍼티(property)와 동작을 의미하는 메소드(method)를 포함할 수 있는 독립적 주체이다.

 자바스크립트는 객체(object) 기반의 스크립트 언어로서 자바스크립트를 이루고 있는 거의 “모든 것”이 객체이다. 원시 타입(Primitives)을 제외한 나머지 값들(배열, 함수, 정규표현식 등)은 모두 객체이다. 또한 객체는 pass-by-reference(참조에 의한 전달) 방식으로 전달된다.

 

 

👾 typeof 연산자

 피연산자의 자료형을 반환하며, 자료형에 따라 처리 방식을 다르게 하고 싶거나 변수의 자료형을 알아내고자 할 때 사용한다.

typeof 1  // number
typeof NaN  // number
typeof 10n  // bigint
typeof "stirng"  // string
typeof true  // boolean

typeof undefined  // undefined
typeof null  // object

typeof Symbol("id")  // symbol

typeof Math // object
typeof new Date()  // object
typeof console.log  // function

→ null null은 별도의 고유한 자료형을 가지는 특수 값으로 객체는 아니지만, 하위 호환성을 유지하기 위해 이런 오류를 수정하지 않고 남겨두었다. (언어 자체의 오류로 null은 객체가 아님)

→ Math 수학 연산을 제공하는 내장 객체. 내장 객체는 객체형이다.

→ console.log 함수는 function을 반환한다. 함수는 객체형에 속하며, 함수가 아닌 객체형은 모두 object를 반환한다.

 

---

자료출처: JAVASCRIPT.INFO

✏️ 공부하며 정리한 내용입니다. 잘못된 정보나 더 공유할 내용이 있으면 댓글로 알려주세요!

읽어주셔서 감사합니다 😊