JS 자바스크립트 기초 - 04. 형변환

 

 

 

 

---

 

 

 

 

자동 형변환

 

const mathScore = prompt("수학 몇 점?");
const engScore = prompt("영어 몇 점?");
const result = (mathScore + engScore) / 2;
console.log(result);

 

 

 

 

코드를 실행시켜 보면

 

 

 

 

결과값은

4540

 

4540이 나오게 된다.

 

 

 

그 이유는

prompt는 기본적으로 "문자형"이기 때문이다.

 

결국, 코드를 해석해보자면

숫자 90, 80이 아닌

수학 = "90"

영어 = "80"

"90" + "80" = "9080"이 되는 것이고,

 

"9080" / 2 = 4540이 나오게 되는 것이다.

=> 숫자형이 아니더라도 나누기같은 표현식은 숫자형으로 자동으로 변환되서 표현된다.

이를, 자동 형변환이라고 한다.

 

 

 

자동 형변환은

원인을 찾기 힘든 에러를 발생시킬 수 있기 때문에

항상 의도를 가지고 원하는 타입으로 변환시키는 게 좋다.

이를, 명시적 형변환이라고 한다.

 

 

 

 

명시적 형변환

String()

 

 

console.log(
    String(3),
    String(true),
    String(false),
    String(null),
    String(undefined)
);

 

 

 

 

결과값은 이렇다.

"3" "true" "false" "null" "undefined"

 

숫자 3은 문자열 3으로

불린 true, false도 문자열로

null, defined도 문자열로 형변환이 되었다.

 

 

 

 

 

Number()

보통 사용자한테 입력받은 값이 문자열인 경우 자주 쓰인다.

 

 

console.log(
  Number("1234")
);

 

 

result

1234

 

 

 

 

Number() 안에 숫자가 들어가면 숫자형으로 잘 출력이 되지만,

문자열이 들어갈 경우에는

 

 

 

console.log(
  Number("1234abdgadsb")
);

 

 

result

NaN

 

 

NaN이 출력되니 주의해야 한다.

 

 

 

 

 

console.log(
    Number(true),
    Number(false)
);

 

 

 

boolean형은 true는 1로, false는 0의 값을 가진다. 

1 0

 

 

 

 

 

Boolean()

false 인 경우만 기억하면 된다. 리스트 외에는 모두 true로 반환된다.

• 숫자 0
• 빈 문자열 ''
• null
• undefinde
• NaN

 

true인 경우 - 비어 있지 않고 유효한 값으로 간주되는 모든 값

• 0이 아닌 숫자
• 비어 있지 않은 문자열 ("hello", "123", "javascript")
• 배열, 객체, 함수 등

 

 

true인 경우

console.log(
  Boolean(1),
  Boolean(123),
  Boolean("javascript")
);

 

 

 

result

true true true

 

 

 

 

false인 경우

console.log(
  Boolean(0),
  Boolean(''),
  Boolean(null),
  Boolean(undefined),
  Boolean(NaN)
);

 

 

 

result

false false false false false

 

 

 

 

정리

String() → 문자형으로 변환

Number() → 숫자형으로 변환

※ Number("문자") // NaN

Boolean() → 불린형으로 변환

※ 0, '', null, undefined, NaN → false

 

 

 

 

 

주의사항

Number(null) // 0

Number(undefined) // NaN

 

 

Number(0) // false

Number('0') // true

 

Number('') // false

Number(' ') // true

 

 

 

 

 

 

 

 

 

정리되어있는 내용은 코딩앙마 자바스크립트기초강좌를 듣고

정리한 내용입니다.