[JS] 데이터 타입, 타입 변환, 단축 평가 etc.

1. 데이터 타입 

1) 데이터 타입 종류

구분	데이터 타입	설명
원시 타입	숫자(number) 타입	숫자, 정수와 실수 구분 없이 하나의 숫자 타입만 존재
원시 타입	문자열(string) 타입	문자열
원시 타입	불리언(boolean) 타입	논리적 참(true)와 거짓(false)
원시 타입	undefined 타입	var 키워드로 선언되는 변수에 암묵적으로 할당되는 값
원시 타입	null 타입	값이 없다는 것을 의도적으로 명시할 때 사용하는 값
원시 타입	심벌(symbol) 타입	ES6에서 추가된 7번째 타입
원시 타입	BigInt 타입	길이의 제약 없이 정수를 다룰 수 있게 해주는 숫자형
객체 타입		객체, 함수, 배열 등

* 원시 값(타입)

2) 심벌 타입이란

• ES6에서 추가된 7번째 타입으로, 변경 불가능한 원시 타입의 값
• 심벌 값은 다른 값과 중복되지 않는 유일무이한 값임. 따라서 주로 아름이 충돌한 위험이 없는 객테의 유일한 프로퍼티 키를 만들기 위해 사용함

// 위, 아래, 왼쪽, 오른쪽을 나타내는 상수를 정의한다.
// 중복될 가능성이 없는 심벌 값으로 상수 값을 생성한다.
const Direction = {
  UP: Symbol('up'),
  DOWN: Symbol('down'),
  LEFT: Symbol('left'),
  RIGHT: Symbol('right'),
};

const myDirection = Direction.UP;

if (myDirection === Direction.UP) {
  console.log('You are going UP.');
}

3) 데이터 타입이 필요한 이유

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

 

2. 정적 타이핑 vs. 동적 타이핑

1) 정적 타이핑이란

• C나 자바 같은 정적 타입 언어는 변수를 선언할 때 변수에 할당할 수 있는 값의 종류, 즉 데이터 타입을 사전에 선언해야 함.(이를 명시적 타입 선언이라고 함)
• 다음은 C에서 정수 타입의 변수를 선언하는 예시임 ↓

// c 변수에는 1바이트 정수 타입의 값(-128 ~ 127)만을 할당할 수 있다.
char c;

// num 변수에는 4바이트 정수 타입의 값(-2,124,483,648 ~ 2,124,483,647)만을 할당할 수 있다.
int num;

• 정적 타입 언어는 변수의 타입을 변경할 수 없으며, 변수에 선언한 타입에 맞는 값만 할당할 수 있음.
• 정적 타입 언어는 컴파일 시점에서 타입 체크를 수행함 (만약, 타입 체크를 통과하지 못했다면 에러를 발생시키고 프로그램의 실행 자체를 막음)
• 대표적인 정적 타입 언어로는 C, C++, 자바, 코틀린, 고, 러스트 등이 있음
  
  

2) 동적 타이핑이란

• 자바 스크립트는 정적 타입 언어와 다르게 변수를선언할 때 타입을 선언하지 않고 var, let, const 키워드를 사용해 변수를 선언함

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

foo = 3;
console.log(typeof foo); // number

foo = null;
console.log(typeof foo); // object

foo = Symbol(); // 심벌
console.log(typeof foo); // symbol

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

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

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

• 자바스크립트의 변수는 선언이 아닌 할당에 의해 타입이 결정(타입 추론)됨
• 또한 재할당에 의해 변수의 타입은 언제든지 동적으로 변할 수 있음(=동적 타이핑)
• 대표적인 동적 타입 언어로는 자바스크립트, 파이썬, PHP 등이 있음

 

3. 타입 변환

1) 명시적 타입 변환

• 자바스크립트의 모든 값은 타입이 있음. 값의 타입은 개발자의 의도에 따라 다른 타입으로 변환할 수 있는데
• 개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환 또는 타입 캐스팅이라고 함

var x = 10;

// 숫자를 문자열로 타입 캐스팅한다.
var str = x.toString();
console.log(typeof str, str); // string 10

// x 변수의 값이 변경된 것은 아니다.
console.log(typeof x, x); // number 10

 

2) 명시적 타입 변환의 예

① 문자열이 아닌 값 → 문자열
- String 생성자 함수를 new 연산자 없이 호출하는 법
- Object.prototype.toString 메서드를 사용하는 법
- 문자열 연결 연산자를 이용하는 법

// 1. String 생성자 함수를 new 연산자 없이 호출하는 방법
String(1); // -> "1"

// 2. Object.prototype.toString 메서드를 사용하는 방법
(1).toString(); // -> "1"

// 3. 문자열 연결 연산자를 이용하는 방법
1 + ''; // -> "1"

② 숫자 아닌 값 → 숫자
- Number 생성자 함수를 new 연산자 없이 호출하는 방법
- parseInt, parseFloat 함수를 사용하는 방법(문자열만 변환 가능)
- `+` 단항 산술 연산자를 이용하는 방법
- `*` 산술 연산자를 이용하는 방법

// 1. Number 생성자 함수를 new 연산자 없이 호출하는 방법
Number('0'); // -> 0

// 2. parseInt, parseFloat 함수를 사용하는 방법(문자열만 변환 가능)
parseInt('0'); // -> 0

// 3. + 단항 산술 연산자를 이용하는 방법
+'0'; // -> 0

// 4. * 산술 연산자를 이용하는 방법
'0' * 1; // -> 0

③ 불리언 타입 아닌 값 → 불리언 타입
- Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
- ! 부정 논리 연산자를 두 번 사용하는 방법

// 1. Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
// 문자열 타입 => 불리언 타입
Boolean('x'); // -> true
Boolean(''); // -> false
Boolean('false'); // -> true
// 숫자 타입 => 불리언 타입
Boolean(0); // -> false
Boolean(1); // -> true
Boolean(NaN); // -> false
Boolean(Infinity); // -> true
// null 타입 => 불리언 타입
Boolean(null); // -> false
// undefined 타입 => 불리언 타입
Boolean(undefined); // -> false
// 객체 타입 => 불리언 타입
Boolean({}); // -> true
Boolean([]); // -> true

// 2. ! 부정 논리 연산자를 두번 사용하는 방법
// 문자열 타입 => 불리언 타입
!!'x'; // -> true
!!''; // -> false
!!'false'; // -> true
// 숫자 타입 => 불리언 타입
!!0; // -> false
!!1; // -> true
!!NaN; // -> false
!!Infinity; // -> true
// null 타입 => 불리언 타입
!!null; // -> false
// undefined 타입 => 불리언 타입
!!undefined; // -> false
// 객체 타입 => 불리언 타입
!!{}; // -> true
!![]; // -> true

 

3) 암묵적 타입 변환

• 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되는 것

var x = 10;

// 문자열 연결 연산자 ( + )는 숫자 타입 x의 값을 바탕으로 새로운 문자열을 생성한다.
var str = x + '';
console.log(typeof str, str); // string 10

// x 변수의 값이 변경된 것은 아니다.
console.log(typeof x, x); // number 10

 

Tips. truthy / falsy 한 값

• 자바스크립트 엔진은 불리언 타입이 아닌 값을 Truthy 값(참으로 평가되는 값) 또는 Falsy 값(거직으로 평가되는 값)으로 구분함
• 즉, 제어문의 조건식과 같이 불리언 값으로 평가되어야 할 문맥에서 Truthy 값은 true로, Falsy 값은 false로 암묵적 타입 변환됨

// false로 평가되는 Falsy 값
false
undefined
null
0, -0
NaN
' '(빈 문자열)

// Falsy 값에 ! 연산자를 붙이면, 모두 Truthy 값으로 평가되어 실행 가능함
// 아래의 조건문은 모두 코드 블록을 실행한
if (!false) console.log(false + ' is falsy value');
if (!undefined) console.log(undefined + ' is falsy value');
if (!null) console.log(null + ' is falsy value');
if (!0) console.log(0 + ' is falsy value');
if (!NaN) console.log(NaN + ' is falsy value');
if (!'') console.log('' + ' is falsy value');