[JavaScript공부 - 7] Type Conversions(타입 변환)

대부분, 연산자와 함수들은 자동으로 파라미터를 받을 때 적절한 타입으로 변환해 줌. 이런걸 "Type Conversions(타입 변환)"이라고 부름.

예를 들어, alert는 자동으로 값을 메세지로 보여주기 위해서 string으로 자동 변환 하여 보여줌. 수학 연산자 같은 경우에는 값들을 number 타입으로 변환함.

물론, 원하는 타입으로 값을 명시적으로 바꿔주는 경우도 있음.

ToString

---

String 변환은 값을 String 타입으로 바꾸어야 할 때, 일어남. 

예를 들어, alert(value)는 값을 String으로 바꾸고 그 값을 메세지로 보여줌.

그러나 특정 값을 String으로 바꾸는 함수가 있는데, String(value) 함수임.

let value = true;
alert(typeof value); //boolean
 
value = String(value); 
alert(typeof value); // string

String 변환은 대부분 간단하고 쉬움. false는 "false"가 되고, null은 "null"이 되기 떄문!

ToNumber

---

숫자로의 변환은 수학 연산이 포함되어 있는 함수나 구문에서 자동으로 일어남.

예를 들어, 나누기(/)를 숫자가 아닌 타입으로 나누어 보자.

alert("6" / "2"); // 3, string are converted to numbers automatically

이렇게 자동으로 변환이 되지만 명시적으로 Number(value)함수를 사용하여 Number 타입으로 변환할 수 있음.

let str = "123";
alert(typeof str); //string
 
let num = Number(str);
alert(typeof num); //number

명시적인 형변환은 보통 텍스트 형태와 같은 string 타입의 값을 읽는 데, 사실 읽을 때 number타입으로 기대하기 때문에 필요함.

string이 숫자 형태가 아니라면, number 타입으로의 형변환의 결과는 NaN으로 나타남.

let age = Number("an arbitrary string instead of a number");
 
alert(age); // NaN

number 타입으로의 형변환의 규칙은 아래와 같음

Value	Becomes…
undefined	NaN
null	0
true and false	1 and 0
string	Whitespaces from the start and end are removed. If the remaining string is empty, the result is 0. Otherwise, the number is “read” from the string. An error gives NaN.

위의 규칙을 보고 예를 들어 보자.

alert(Number("     123     ")); // 123
 
alert(Number("123z")); //NaN
 
alert(Number(true)); // 1
 
alert(Number(false)); // 0

기억해야할 것은, null과 undefied는 형변환에서 다르게 동작됨. null은 0이 되고 undefined는 NaN이 됨.

# 연산자 '+'의 사용 주의!

대부분 모든 수학 연산자들은 값을 number 타입으로 바꿈. 주의해야할 사항은 '+' 연산자임! 만약 더하려는 값 중 하나가 string이면 또 다른 값들은 타입과 관계없이 string이 됨. 

그래서 이 연산은 이어붙이는(concatenate) 현상이 나타남. 따라서 주의할 것!

alert(1 + '2'); //12
alert('1' + 2); //12

이런 현상은 최소한 하나 이상의 값이 string 타입일 경우 나타남. 그렇지 않은 경우에는 값들은 숫자 타입으로 자연스럽게 형변환이 됨.

ToBoolean

---

Boolean 형변환은 가장 쉬움!

Boolean 형변환은 논리 연산에서 일어나지만 Boolean(value)로도 값을 뽑을 수 있음.

형변환의 규칙은 다음과 같음

# 직관적으로 봤을 때 "비어 있는" 값 (0 이나 empty string("")이나 null, undefined, NaN 등)은 false가 됨.

# 그 외의 값들은  true임.

alert(Boolean(1)); //true
alert(Boolean(0)); //false
 
alert(Boolean("hello")); //true
alert(Boolean("")); //false --- empty string

# String 타입의 "0"은 true라는 걸 기억하자!

PHP와 같은 언어들은 "0"을 boolean타입에서 false로 간주함. 그러나 자바스크립트에서는 string이 empty string이 아니면 모두 true임!!!

alert(Boolean("0")); // true
alert(Boolean(" ")); //true