[JavaScript] 데이터 타입과 타입 변환

 

데이터 타입과 타입 변환

 

---

 

# 데이터 타입

 

구분	데이터 타입	설명
원시 타입	숫자	숫자
	문자열	문자열
	boolean	true / false
	undefined	변수가 선언되었을 때 암묵적으로 할당되는 값
	null	값이 없다는 것을 의도적으로 명시할 때 사용하는 값
	symbol	ES6에서 추가된 타입
객체 타입		객체, 함수, 배열 등

 

1. 숫자

 

 자바스크립트에는 하나의 숫자 타입만 존재한다. 모든 수를 실수로 처리한다.

 

console.log(1 === 1.0); // true

 

 1과 1.0은 같은 숫자로 처리한다. 정수로 표시되는 숫자라도 사실은 실수로 처리하기 때문이다.

 

console.log(10 / 0); // Infinity
console.log(- 10 / 0); // -Infinity
console.log(1 * "hello"); // NaN

 

양의 무한대는 Infinity, 음의 무한대는 -Infinity, 산술 연산 불가는 NaN(not a number)로 표현된다.

 

 

2. 문자열

 

let string;
string = 'hello';
string = "hello";
string = `hello`;

 

작은 따옴표, 큰 따옴표, 백틱으로 표현할 수 있다.

 

const month = 10;
const date = 23;

console.log(`오늘은 ${month}월 ${date}일 이다.`); // 오늘은 10월 23일이다.

 

백틱을 사용하여 문자열과 변수를 같이 출력할 수 있다.

 

 

3. boolean

 

const name = "kim";

console.log(name === "kim"); // true
console.log(name === "park"); // false

 

참, 거짓을 나타낸다. 조건문에서 자주 사용한다.

 

 

4. undefined

 

let name;
console.log(name); // undefined

 

 변수가 선언되고 값이 할당되기 전까지 변수의 초기값에 암묵적으로 undefined가 할당된다. 즉, 개발자가 의도적으로 넣는 값이 아니라 자바스크립트 엔진이 변수를 초기화할 때 사용하는 값이라서 변수값이 undefined라면 값을 할당하지 않은 변수라는 것을 알 수 있다. 그러니 의도적으로 값이 없는 상태를 만들고 싶다면, undefined보다는 null을 할당하는 것이 더 좋다.

 

 

5. null

 

let name = "kim";
name = null;

 

의도적으로 변수에 값이 없다는 것을 나타내기 위해 사용한다. 

 

 

6. Symbol

 

 ES6에서 추가된 타입으로, 변경 불가능하고 다른 값과 중복될 수 없는 유일한 값이다. 주로 객체의 프로퍼티 키를 만들기 위해 사용한다.

 

const key = Symbol("key");
const obj = {};

obj[key] = "hello";
console.log(obj[key]); // "hello"

 

const name1 = Symbol('id');
const name2 = Symbol('id');
console.log(name1 === name2); // false

const text1 = Symbol.for('id');
const text2 = Symbol.for('id');
console.log(text1 === text2); // true

 

 동일한 string으로 Symbol을 만들어도 다른 식별자로 간주된다. string이 똑같을 때 Symbol도 동일하도록 만들고 싶다면 Symbol.for이라고 작성한다.

 

 

# 객체와 프로퍼티

 

 원시 값들을 박스처럼 묶어서 사용하는 것을 객체라고 한다. 즉, 자바스크립트에서는 원시 값을 제외한 나머지 값들은 모두 객체(배열, 함수, 정규 표현식 등)이다. 객체는 0개 이상의 프로퍼티로 구성되어 있다.

 

const user = {
   name: "kim",
   age: 20
}

 

name: "kim"과 age: 20은 각각 프로퍼티이다. name과 age는 프로퍼티 키, "kim"과 20은 프로퍼티 값에 해당한다.

 

const counter = {
   num: 0,
   plus: function (){
      num = num + 1;
   }
};

 

 함수도 프로퍼티 값이 될 수 있다. 프로퍼티 값으로 들어간 함수를 메소드(method)라고 한다.

 

 

# 정적 타입 언어 vs 동적 타입 언어

 

C, C++, 자바 등 정적 타입 언어는 변수의 타입을 변경할 수 없고, 변수의 타입에 맞는 값만 할당할 수 있다.

 

// C++

int a = 10; // a에는 4바이트 정수만 할당할 수 있다.
float b = 0.1; // b에는 4바이트 실수만 할당할 수 있다.

 

 즉, 정수 값을 사용하고 싶다면 정수를 할당할 수 있는 변수를, 실수를 사용하고 싶다면 실수에 해당하는 변수를 사용해야 한다. 타입에 맞지 않는 값을 할당하면 에러가 발생한다.

 

 그러나, 자바스크립트는 변수 선언 시에 타입을 선언하지 않는다. var, const, let 모두 타입에 상관없이 자유롭게 값을 할당할 수 있다.

 

// JavaScript

const a = 10;
const b = 0.5;

// a는 정수, b는 실수이지만 둘 다 const라는 변수로 선언될 수 있다.

 

 자바스크립트와 같은 동적 타입 언어는 변수 자체에는 타입이 없다. 변수에 값이 할당될 때 타입이 결정된다. 이를 타입 추론이라고 한다. 또한, 값이 재할당된다면 변수의 타입 또한 동적으로 변할 수 있다.

 

 

# 타입 변환

 

 자바스크립트의 모든 값은 타입이 있고, 타입이 바뀔 수 있다. 개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 타입이 자동으로 변환되는 것을 암묵적 타입 변환 혹은 타입 강제 변환이라고 하며, 개발자가 의도적으로 타입을 변환하는 것을 명시적 타입 변환 혹은 타입 캐스팅이라고 한다.

 

1. 암묵적 타입 변환

 

console.log("1" + 1); // "2"
console.log(1 * "10"); // 10

 

 "1" + 1에서 +는 연결 연산자로 동작한다. 따라서 모든 피연산자를 문자열로 변환한다. 1 * "10"에서 *는 산술 연산자이다. 따라서 피연산자의 타입이 숫자로 변환되었다. 이렇게 자바스크립트 엔진에 의해 타입이 바뀌어버리는 것을 암묵적 타입 변환이라 한다.

 

 

2. 명시적 타입 변환

 

String(10); // "10"
Number("5"); // 5

 

 String(), Number()와 같이 개발자가 의도적으로 값의 타입을 변환할 수 있다. 이를 명시적 타입 변환이라 한다.

 

 

# 옵셔널 체이닝 연산자

 

 ES11에서 도입된 것으로, 값이 undefined 혹은 null 인 경우에 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티를 참조하는 것이다.

 

let arr;
console.log(arr.length); //Uncaught TypeError: Cannot read properties of undefined (reading 'length')

 

let arr;
console.log(arr?.length); // undefined

 

 값이 할당되지 않은 배열을 선언한 뒤, 배열의 길이를 console.log하면 타입 에러가 뜬다. 그러나 옵셔널 체이닝 연산자를 사용하면 에러가 아니라 undefined가 반환된다. 이렇게 옵셔널 체이닝 연산자를 이용하면 개발 과정에서의 타입 에러를 방지할 수 있다.

 

---

 

Symbol이 뭔지 아직 잘 모르겠다... 대강은 이해했는데 구체적으로 어떻게 사용하는 건지 감이 잘 안 옴

 

 

참고 자료 : 모던 자바스크립트 Deep Dive 6장, 9장, 10장