[TIL] 자바스크립트 기초문법 - 형변환(자동 형변환, 명시적 형변환)

 

자바스크립트에서의 형변환은 두가지로 나뉠 수 있다고 한다. 자동 형변환과 명시적 형변환이 있는데 자동 형변환의 경우 자바스크립트 엔진이 자동으로 데이터 타입을 변환시키는 것이고, 명시적 형변환은 개발자가 의도를 가지고 데이터타입을 변환시키는 것이라고 할 수 있다. 그래서 이를 좀 더 자세히 살펴보고자 한다.

자동 형변환(암시적 형변환)

자바스크립트 엔진이 자동으로 데이터 타입을 변환시키는 것. 즉, 필요에 따라 알아서 변환되는 것을 의미한다. 예시를 하나 살펴보면 앞서 공부한 prompt를 통해 수학점수와 영어점수를 입력받아 합산한 결과에서 /2를 해줄 것이다.

const mathScore = prompt('수학 점수를 입력해주세요'); // 100
const englishScore = prompt('영어 점수를 입력해주세요'); // 92
const result = (mathScore + englishScore) / 2; // ('100' + '92') / 2 = '10092' / 2 = 5046

console.log(result) // 5046

수학 점수에는 100을 영어 점수에는 92를 입력한 후 콘솔창을 확인했더니 result 값이 5046이 나왔다. 원래대로라면 100 + 92 / 2 를 실행한 결과값이 192 / 2 = 96이 나와야하는데 5046이 나온 것이다.

기본적으로 prompt를 통해서 입력받은 입력값은 무조건 문자열이기 때문에 문자열과 문자열을 더해 10092라는 값이 나왔고 이 숫자에서 / 2를 했을 때 5046이라는 결과값을 얻게된 것이다. 여기서 한가지 의아한 점은 덧셈에서는 문자열과 문자열이 그대로 더해져 10092라는 값을 받는데 나눗셈은 문자열을 그대로 나누어버린 것이다.

여기서 알 수 있는 것은 자바스크립트 엔진이 자동으로 10092를 숫자로 변환했다는 것인데 나눗셈의 경우 문자열을 자동으로 숫자로 변환하여 계산하도록 되어있다고 한다. 이렇게 자바스크립트 엔진이 필요에 따라 자동으로 형변환 하는 것을 자동 형변환이라고 한다.

* 자동 형변환의 경우에는 추후 원치않는 에러를 반환할 수 있으며, 원인을 찾기 어렵게 하기 때문에 조심해야한다.

명시적 형변환

그렇다면 명시적 형변환은 뭘까? 명시적 형변환이라는 것은 개발자가 필요에 따라 내가 원하는 값을 얻기 위해 직접 형변환시키는 것을 의미한다. 

String() 문자열로 변환

console.log(
  String(5),
  String(true),
  String(false),
  String(null),
  String(undefined)
)

// 5 true false null undefined

Number() 숫자로 변환

Number 안에 숫자가 아닌 다른 문자를 집어넣었을 때는 NaN을 반환하며 undefined 역시 NaN을 반환한다. 또한 true, false 값의 경우에는 각각 1과 0으로 반환한다.

console.log(
  Number('5'),
  Number('5hello'),
  Number(true),
  Number(false),
  Number(null),
  Number(undefined),
)

// 5 NaN 1 0 0 NaN

 

Boolean() 불린값으로 변환

불린값의 경우에는 false의 케이스만 잘 기억하고 있으면 될 것 같았는데 아래의 예를 제외하고는 모두 true를 반환한다.

console.log(
  Boolean(0),
  Boolean(""),
  Boolean(null),
  Boolean(undefined),
  Boolean(NaN),
)

// false false false false false


Boolean(""), // 공백이 없으면 false
Boolean(" "), // 공백이 들어가 있으면 true

---

 

자바스크립트 기초문법 - alert, prompt, confirm