[Javascript] 타입 총정리 ① | 원시 타입의 정의 및 특징들

자바스크립트는 ES6(ECMAScript 2015) 이후로 총 일곱가지 타입이 존재하며, 큰 틀에서 '원시타입' 과 '객체 타입'으로 나뉘어집니다.

그 중 원시 타입과 객체 타입의 결정적 차이는 '불변성' 에서 크게 보이는데, 이 장에서는 원시 타입이 무엇인지, 그 종류는 어떤 것들이 있는지를 중점으로 살펴보겠습니다.

우선 원시타입이란 프로그래밍 언어에서 기본적으로 존재하는 데이터의 유형을 의미하며, 더 이상 나눌 수 없는 각각의 최소 단위를 의미하기도 합니다. 특히 자바스크립트에서는 여섯 가지 원시 타입이 존재하며 각각 Number, String, Boolean, undefined, null, Symbol 타입이 존재합니다.

1. Number

자바와 같은 정적 언어에서는 숫자 타입 하나에도 정수형, 실수형 등등 자세히 나뉘지만 자바스크립트에서는 Number 타입으로 존재하며 타입 선언 없이 변수의 값이 Number 타입일 경우 해당 변수는 자동으로 Number형 타입 변수로 정의됩니다.

let krNumber = 82; // 정수 타입

const neverChange = -30 // 음수 타입

let myHeight = 180.5 // 실수 타입

특히 Number 타입의 값의 경우 모든 수를 실수로 처리하기 때문에 정수 1과 실수 1.0을 동일한 타입의 값으로 보게 됩니다.

그래서 자바스크립트에서 서로 다른 두 Number 타입 간의 연산시 두 값의 정수, 실수 여부를 굳이 맞출 필요 없이 결과값이 정수일 경우 정수를, 실수일 경우 실수를 그대로 반환하게 되는데요.

이는 여타 다른 정적인 프로그래밍 언어들과는 다르게 연산 과정에서 굳이 피연산자들의 타입들을 통일해줄 필요가 없음을 의미하기도 하지만 다른 말로는 사용자가 원하는 값의 결과를 기대하기 어렵게 만들 수도 있음을 의미합니다.

console.log(10/5) -> 2 출력

console.log(10/4) -> 2.5 출력

또 한 자바스크립트에서는 계산 성립이 이루어질 수 없는 결과에 대해서는 error를 일으키는 것이 아니라 무한대의 값(Infinity)이나 값이 아님(NaN)을 나타내는 특수한 키워드들을 결과값으로 반환하는데요.

이 키워드들은 특정 상황에서 출력 될 뿐만 아니라 실제로 그 값 자체를 변수나 함수에 선언하거나 사용하는것도 가능합니다.

console.log(100/0) -> error가 아니라 Infinity를 출력하고

let thisIs = Infinity -> 특정 변수에 Infinity를 할당하고
console.log(thisIs) -> Infinity 출력

2. String

문자열(String) 타입 : 다른 프로그래밍 언어들과는 달리 달리 자바스크립트에서는 문자열을 나타내는 기호의 구분을 따로 두지 않습니다.

즉 더블 쿼터(" ")나 싱글 쿼터(' ')의 사용으로 String이나 char형을 따로 구분하지 않고 쿼터 안에 감싼 문자는 하나든 그 이상이든 전부 문자열로 본다는 것이죠.

특히 ES6에서 나온 기술 중 하나인 백틱(``)은 기본적인 문자열 구사 뿐만 아니라 백틱 안에서의 표현식의 호출 및 연산 처리까지 가능하며, 개행 시퀸스(\n)를 사용하지 않아도 자율적으로 줄바꿈이 가능합니다.

참고로 백틱 안에서 특정 표현식을 ${표현식} 처럼 작성 및 사용이 가능한데, 이러한 기법을 통칭 '템플릿 리터럴' 이라고 부르기도 합니다.

let myName = "Re_Go" -> 더블 쿼터 사용 예시

const myChannel = '다시가리' -> 싱글 쿼터 사용 예시

console.log(`저는 ${myName} 이고 유튜브 채널명 ${myChannel}을 운영하고 있습니다!`) -> 백틱 사용 예시

console.log(myName + ' 이 등장 했습니다!') -> 기본적으로는 + 기호로 변수와 문자열을 이어 붙입니다.

★ 템플릿 리터럴이란 런타임 처리시 일반 문자열로 처리되는 표현법을 의미하며 백틱도 그 중 하나이고, 백스페이스 기호()를 활용한 이스케이프 시퀸스도 대표적인 자바스크립트의 템플릿 리터럴이라고 할 수 있는데요.

가장 많이 쓰이는 시퀸스는 개행(\n | 다음 줄로 이동), 탭(\t | 연속 공백 삽입)가 있으며, 자바스크립트에서는 사용자의 눈에는 보이지 않더라도 해당 개행들이 사용된 흔적이 남을 수 있기 때문에

특정 상황에서의 해당 문자열 값을 처리할 때 해당 개행들의 존재 여부 또한 알아둘 필요가 있습니다.

3. Boolean

참(True)과 거짓(False)을 나타내는 타입입니다.

let iAmYoung = true;
let iAmStrong = false;

특이하게도 자바스크립트는 Boolean타입 이외의 다른 타입의 값들을 True와 False와 같이 취급하는 ①Truthy와 ②Falsy의 개념이 존재합니다.

이 값들은 조건문에서 특정 타입의 값이 true, 또는 false로 취급되는 값들을 의미하며, 종류가 많은 Truthy에 반해 Falsy는 다섯개로 축약이 가능하기 때문에 Falsy 타입으로 취급되는 값들을 외우는게 보다 효율적입니다.

// ① Falsy 예시) 0, ""(빈 문자열), null, undefined, NaN, false가 Falsy로 취급됩니다.
if(0){
  console.log("falsy")
}
if(""){
  console.log("falsy")
}
if(null){
  console.log("falsy")
}
if(undefined){
  console.log("falsy")
}
if(NaN){
  console.log("falsy")
}
if(false){
  console.log("falsy")
}
// 위의 값들은 false값으로 취급 되는 대표적인 값입니다.

4. Undefined

변수가 선언 될 때 아직 값의 타입이 정해지지 않은 상태를 의미하는 키워드이며, ① 변수의 선언 시에 따로 값을 할당하지 않을 경우 default 값으로 할당 됩니다.

이러한 undefined의 경우 런타임 과정 중에 후순위에 존재하는 변수를 전순위에 호출할 경우 앞으로 살펴볼 호이스팅 처리에 의해 변수가 호출이 되는데, 이때에도 undefined 값이 할당 됩니다.

① let myName; // 변수 선언만 하고 값을 초기화하지 않을 경우 undefined 값으로 초기화 되며
let myAge = 30; // 값이 들어있는 변수에도
myAge = undefined; // undefined로 재할당이 가능합니다.

② console.log(x); // 런타임 과정 중에 해당 구간에서는 x가 없는 상태로 보이지만, 런타임 이전에 각각의 변수에 대한 정의는 이미 정해진 상태이므로 undefined 값이 x에 들어있는 상태입니다. (물론 호출도 가능합니다.)
let x = 10; // 후순위에 선언 및 초기화 되어 있는 변수를 전 순위에서 사용이 가능합니다.

5. Null

사용자가 해당 변수에 의도적으로 값이 없음을 나타낼 때 사용되는 키워드입니다.

여기서 undefined와 차별점을 보이는 것은, 아직 타입을 정의하지 않았다는 의미로서 사용되는 undefined에 반해 null 키워드는 사용자가 특정 변수나 함수를 특별한 경우를 제외하고는 더 이상 사용하지 않을 의미임을 나타낼때에 해당 식별자에 할당하는 키워드로 사용됩니다.

let variable1 = null; 

let variable2 = undefined;
// variable1과 variable2에는 각각 null과 undefined가 할당되어 있으므로 각각의 식별자들이 향후 사용될 수 있을 여지에 대한 표시를 명확히 하는 것도 가능합니다.

6. Symbol

ES6에서 추가된 타입으로 html의 id 속성과 비슷하게 특정 식별자나 객체의 특정 프로퍼티를 하나의 unique한 고유 토큰으로 지정하는 타입을 의미합니다.

주로 객체의 특정 프로퍼티에 대한 유일성을 확보하거나 은닉성을 부여하여 루프문에 대한 검색이 불가능하도록 하는 역할에 주로 사용되는데요.

한마디로 상세한 프로퍼티에 대한 노출을 최소한으로 줄여 특정 API나 서비스에 대한 주요 정보 노출을 차단하는 효과를 확보하는 것이 Symbol 타입의 주요 목적인 것이죠.

const thisVariable = Symbol('the unique item'); // thisVariable 상수에 심볼과 그에 대한 설명을 할당합니다.
const obj = {}; // 빈 객체 생성 후
obj[thisVariable] = "this is the Value of Symbole" // 객체의 브라켓 노테이션을 활용해 thisVariable의 값을 obj 객체의 프로퍼티 키 값으로 지정한 후 값으로 "this is -" 값을 할당하면
console.log(obj); // { [Symbol(the unique item)]: 'this is the Value of Symbole' }와 같이 thisVariable에서 지정한 심볼과 그에 대한 설명이 프로퍼티의 키로 지정되게 됩니다.