JS Essential: 값(Value)과 타입

해당 게시물은 도서 <모던 자바스크립트 Deep Dive>와 패스트캠퍼스 강의 "김민태의 프론트엔드 아카데미 : 제 1강 JavaScript & TypeScript Essential"를 참고하여 작성되었습니다.

값이란 무엇인가?

우리가 값이란 무엇인가에 대해 논하기 전에, 자료형이 무엇인지에 대해 제대로 알고 가야 합니다.

자료형이라 함은 자바스크립트 내에서 코드가 아닌 데이터들의 규격을 정의하는 개념이라고 할 수 있습니다.

여기에는 우리가 잘 알고 있는 숫자, 문자, Boolean, null, undefined 등이 있을 것입니다. (ES6에서 symbol이 새롭게 추가되기도 했습니다.)

이러한 자료형들을 우리는 원시 데이터 타입이라고 부르는데, 이러한 원시 타입들을 제외하면 모두 Object, 즉 객체에 해당합니다.

자바스크립트의 값(value)에 대한 논의를 할 때 어려운 부분이 바로 이 부분인데요.

자바스크립트 내에서는 원시 데이터들은 물론이거와 객체, 배열, 함수 등도 모두 값으로 취급합니다. (광의적인 의미에 객체에는 배열, 함수 등도 모두 포함되기 때문이에요.)

개념적인 부분이 어렵다기 보다는, 자바스크립트를 응용하면서 객체 타입도 '값'으로 활용한다는 부분이 실제 코드를 짤 때 어렵게 느껴질 수 있습니다.

결론적으로, 자바스크립트는 '값'이라는 개념을 굉장히 넓게 가져가는 언어라고 정리할 수 있을 것 같아요.

각각의 데이터 타입에 대한 내용은 추후에 상세하게 다룰 예정입니다. (특히 symbol은 ES6에 새롭게 추가된 만큼 독자적인 게시물로 한번 파보도록 하겠습니다.)

자바스크립트 내의 타입

이 단락에서 말하는 타입은 앞서 언급한 데이터 타입을 지칭하는 것이 아니라, 자바스크립트라는 언어가 타입을 다루는 방식을 뜻한다고 생각하시면 될 것 같습니다.

다음 코드 블럭으로 한 번 시작해 볼게요.

function addAge(age) {
  return age+1;
}

let age = addAge(30)
console.log(age)

addAge 함수를 만들고 age라는 변수도 만들어줬습니다. 이 코드들을 실행하면, 마지막 console.log(age)에서는 어떤 값이 출력될까요? 당연히 숫자인 31이 출력되겠죠.

그렇다면 다음 코드 블럭은 어떨까요?

function addAge(age) {
  return age+1;
}

let age = addAge('30')
console.log(age)

이번엔 아까와 다르게 숫자 30이 아니라 문자열 '30'을 인자로 넣어주었습니다. 이번에 age 변수를 console.log로 출력하면 '301'이라는 문자열이 출력되게 됩니다. 이는 '암묵적 형 변환'에 대해 알고 계신 분들이라면 바로 알아채셨을 겁니다.

일반적으로 문자와 숫자 데이터는 서로 합칠 수가 없죠. 하지만 자바스크립트는 데이터를 변수에 넣을 때, 변수의 타입을 매번 자유롭게 바꿀 수 있는 메커니즘을 가지고 있습니다.

그래서 자바스크립트는 데이터 타입을 느슨하게 관리한다고 흔히들 표현합니다. 데이터 타입은 엄연히 존재하지만, 그 변수에 어떤 데이터 타입이 들어갈 지는 그때 그때 갈리게 되는 거에요.

암묵적 형 변환

위에서 언급한 암묵적 형 변환은 아무렇게나 일어나는 것은 아닙니다. 아래에 암묵적 형 변환이 일어나는 대표적인 사례 몇 가지를 적어놓았습니다.

1. 문자열 타입으로의 변환

//숫자 타입
0 + ''  // "0"
-1 + ''  // "-1"
NaN + ''  // "NaN"

//불리언 타입
true + ''  //"true"
false + ''  //"false"

//null과 undefined
null + ''  //"null"
undefined + ''  //"undefined"

//객체 타입
({}) + ''  //"[object Object]"
Math + ''  //"[object Math]"
[10, 20] + ''  //"10, 20"

2. 숫자 타입으로의 변환

//문자열 타입
+'0'  //0
+'string'  //NaN (단항 연산자 +를 사용해도 문자열을 숫자로 바꿀 수 없는 형태라면 바꾸지 못함)

//불리언 타입
+true  //1
+false  //0

//null과 undefined
+null  //0
+undefined  //NaN

//객체 타입
+{}  //NaN
+[]  //0
+[10, 20]  //NaN

코드 블럭에는 + 만의 케이스를 다루었지만, 사칙연산에 포함되는 "-", "*", "/" 모두 위와 같은 암묵적 형 변환을 일으킵니다. 다만 한 가지 주의할 점은 예시로 작성된 코드 블럭과 같이 단항 연산자의 경우에만 해당되는 변환을 불러일으킨다는 것입니다.

3. Boolean 타입으로의 변환

false, undefined, null, 0, -0, NaN, '' (빈 문자열)

자바스크립트 엔진은 Boolean 타입이 아닌 데이터를 truthy 값(참으로 평가되는 값)과 falsy 값(거짓으로 평가되는 값)으로 구분하여 인식합니다.

몇 가지 케이스를 제외하고는 모두 truthy값으로 인식하므로, 위 쪽 박스에서 볼 수 있듯이 falsy에 해당되는 값들을 숙지하는 것이 중요하겠습니다.

타입과 타입스크립트

자바스크립트가 타입을 다루는 방식과 연관지어서, 타입스크립트가 어떤 식으로 타입을 다루는 지 간략하게 짚어보고 가기로 했습니다. 아직 타입스크립트를 제대로 시작하지 않았지만, 오늘 다룬 데이터 타입 변환과 관련된 부분은 자바스크립트와 타입스크립트를 구분짓는 매우 중요한 부분입니다.

아까 addAge 함수 기억하시나요? 해당 코드를 타입스크립트 버전으로 다시 적어보겠습니다.

function addAge(age: number):number {
  return age+1;
}

let age = addAge('30')
console.log(age)

코드 블럭을 유심히 보시다 보면, 차이점이 보이실 겁니다. 어디가 바뀌었을까요?

일단 첫번째로는 addAge 함수의 인자 뒤에 :number가 붙었습니다. 타입스크립트에서는 함수에 넣을 인자의 데이터 타입을 미리 고정시켜줄 수 있습니다. 따라서 addAge 함수에 숫자가 아닌 데이터를 인자로 넣으면 아마 에러를 띄울거에요.

두번째도 비슷한데, 함수 바로 뒤쪽 블록 바깥에 :number가 추가되었습니다. 이는 함수가 반환할 결과 값 역시도 숫자만 나올 수 있게끔 사전에 미리 정하고 가겠다는 뜻입니다.

결국 코드 블럭 내에 있는 console.log(age)는 어떤 값을 내놓게 될까요? 자바스크립트에서는 암묵적 형 변환이 일어나서 '301'을 출력했었잖아요.

타입스크립트에서는 당연히 에러가 뜹니다. 왜냐하면 우리가 함수에 넣을 인자를 숫자로 정해놓았는데, 거기에다가 '30'이라는 문자를 넣었기 때문이에요.

물론 이것 말고도 타입스크립트를 쓰는 이유는 매우 다양합니다. 하지만 방금 저희가 목격한 것 처럼, 코드 내의 여러가지 변수의 타입을 미리 정해둠으로써, 코드의 안정성과 잠재적 오류 사항들을 미리 방지할 수 있습니다. 이것에 대해서는 타입스크립트와 관련된 시리즈를 하나 만들어서 다뤄보도록 할게요.