자바스크립트에서는 함수와 연산자에 전달되는 값은 적절한 자료형으로 자동 변환 된다.

❗객체의 형변환은 후에 정리.

문자형으로 변환

let value = true;

console.log(typeof value); // "boolean"

value = String(value); // "true"
console.log(typeof value); // "string"

String 을 이용하면 문자열로 형변환이 가능하다.

숫자형으로 변환

숫자형으로는 수학과 관련된 함수와 표현식에서 자동으로 일어난다.

let value = "6";

console.log(value / "3"); // 2
console.log(value * "2"); // 12
console.log(value - "3"); // 3

// + 의 경우는 다름
console.log(value + 1); // "61"
console.log(value + "1"); // "61"

숫자와 관련된 계산들은 문자열로 계산하더라도 형변환이 일어나서 숫자로 계산된다.

하지만, +의 경우는 문자열이 존재하는 경우 문자열로 형변환이 일어나서 계산된다.

let age = "123";
console.log(typeof age); // "string"

age = Number(age);
console.log(typeof age); // "number"

자바스크립트에서는 브라우저에서 값을 받는 상황이 많은데, 이때 입력되는 값이 만약 문자열로 표현된 숫자라면, Number 함수를 이용해서 명시적으로 형을 변환해서 사용해야합니다.

let age = "숫자가 아님!";

console.log(Number(age)); // NaN

// 주의!
console.log(typeof age); // "number"
console.log(isNaN(age)); // true

Number 함수를 이용해서 숫자가 아닌 문자열을 형 변환 시키면 NaN이라는 값이 나온다.

하지만, typeof 를 이용해서 확인해보면 "number" 로 나오는 것을 볼 수 있다.

이 경우에는, isNaN 이라는 함수를 써서 판별이 가능하다.

숫자형으로 변환 시 적용되는 규칙

console.log(Number(undefined));    // NaN
console.log(Number("   123    ")); // 123
console.log(Number("12a3"));       // 123
console.log(Number(true));         // 1
console.log(Number(false));        // 0
console.log(Number(null));         // 0

❗ undefiend 와 null 은 숫자형 변환 시 결과가 다름!

Boolean형으로 변환

Boolean 형 변환은 논리 연산을 수행할 때 발생합니다.

Boolean 함수로 명시적으로 형변환이 가능합니다.

// 값이 뭔가 비어있는(?) 느낌을 주는 경우에는 모두 false
console.log(Boolean(undefined));    // false
console.log(Boolean(null));         // false
console.log(Boolean(""));           // false

// 그 외의 경우들
console.log(Boolean(true));         // true
console.log(Boolean(1));            // true
console.log(Boolean(false));        // false
console.log(Boolean(0));            // false
console.log(Boolean("hello"));      // true
console.log(Boolean("0"));          // true :: "0"은 비어있지 않으니 true
console.log(Boolean(NaN));          // false

연산자

거듭제곱

** 를 사용하면 거듭제곱을 할 수 있다.

console.log(2 ** 3); // 8
console.log(3 ** 3); // 27
console.log(5 ** 3); // 125

"+" 연산자

• 위에서 소개했던, 문자열이 존재하면 문자열을 합치는 연산이 일어난다.

  console.log(2 + 2 + "3");   // "43"
  console.log("2" + 2 * 2);   // "24"
  console.log("2" + (4 + 7)); // "211"
  

  연산은 왼쪽에서부터, 연산자의 우선 순위에 따라 연산되기 때문에 위와 같은 결과도 나올 수 있다.

• 단항 연산자로 사용될 때 Number 함수와 동일한 결과값 출력.

  console.log(+true);             // 1
  console.log(+false);            // 0
  console.log(+"    123   ");     // 123
  console.log(+"123");            // 123
  console.log(+undefined);        // NaN
  console.log(+null);             // 0
  console.log(+"");               // 0
  

참고

https://ko.javascript.info/object-methods