자바스크립트의 타입 변환
- 변수는 타입이 고정되어 있지 않음
- 변수에 다른 타입의 값을 대입 가능
let a = 10;
...
a = "자바스크립트";
1. 자동 타입변환
- 타입의 값을 기대하는 곳에 다른 타입의 값이 오면 자동으로 타입을 변환
const a = "20"; // 문자열형
const b = "10"; // 문자열형
let result = a + b; // 2010, 문자열 연결
result = a - b; // 10
result = a * b; // 200
result = a / b; // 2
const c = "자바스크립트";
result = c - a; // NaN
✅ NaN(Not a Number)
- 정의되지 않은 값이나 표현할 수 없는 값
- 숫자로 변환할 수 없는 연산을 시도한 경우
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자동 타입 변환</title>
</head>
<body>
<h2>자동 타입 변환</h2>
<script>
'use strict';
const a = 10 + '문자열';
console.log(a); // 10문자열
const b = "3" * "5";
console.log(b); // 자동 타입변환. 15
const c = 10 - '⭐';
console.log(c); // NaN 숫자형으로 변환할 수 없는 연산을 수행할 경우.
const d = "10" - 5;
console.log(d); // 5
</script>
</body>
</html>
2. 명시적 타입변환
- 자동으로 타입 변환을 지원하지만 명시적으로 변환할 필요가 있을 때 타입변환 함수를 사용
const a = "20";
const b = "10";
console.log(a + b); // 2010
console.log(Number(a) + Number(b)); // 30
Number() : 문자를 숫자로 변환
String() : 숫자나 불린을 문자열형으로 변환
Boolean() : 문자나 숫자등을 불린형으로 변환
Boolean(10) -> true
Boolean('안녕') -> true
Boolean(null) -> false
Boolean(undefined) -> false
Object() : 모든 자료형을 객체형으로 변환
parseInt() : 문자열형을 int(정수)형으로 변환
parseFloat() : 문자열형을 float(소수)형으로 변환
a = "10";
parseInt(a); // 10
parseFloat(a); // 10.0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>명시적 타입 변환</title>
</head>
<body>
<h2>명시적 타입 변환</h2>
<script>
'use strict';
const num1 = "10";
const num2 = "5";
console.log(`현재 num1의 타입 : ${typeof(num1)}`);
console.log(`num1 + num2 = ${num1 + num2}`);
console.log(`Number(num1) + Number(num2) = ${Number(num1) + Number(num2)}`);
</script>
</body>
</html>
문제.
학생성적 프로그램
(단, 콘솔에 출력)
출력
국어점수 : 90
영어점수 : 80
수학점수 : 70
총점 : xxx
평균 : xxx
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>학생 성적 프로그램</title>
</head>
<body>
<h2>학생 성적 프로그램</h2>
<script>
'use strict';
const kor = 90, eng = 80, math = 70;
const total = kor + eng + math;
const avg = total / 3;
console.log(`국어점수 : ${kor}`);
console.log(`영어점수 : ${eng}`);
console.log(`수학점수 : ${math}`);
console.log(`총점 : ${total}`);
console.log(`평균 : ${avg}`);
</script>
</body>
</html>
'JS > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 제어문 (0) | 2022.04.28 |
|---|---|
| [JavaScript] 자바스크립트 연산자 (0) | 2022.04.28 |
| [JavaScript] 자바스크립트 대화 상자 (0) | 2022.04.28 |
| [JavaScript] 자바스크립트(visual Studio Code) (0) | 2022.04.28 |
| [JavaScript] 자바스크립트 역사 (0) | 2022.04.28 |
