안녕하세요.
이번에는 JavaScript 형변환에 대하여 알아보겠습니다.
1. 형변환
JavaScript 코딩을 하다 타입 형까지 체크를 해야 하는 경우가 있고, 필요에 따라서는 결과 값을 원하는 타입으로 바꿔야 하는 경우도 있습니다. 결과 값도 지정해준 타입으로 나오면 좋겠지만, 어려운 경우에는 형 변환을 이용하는 방법이 있습니다.
먼저 console.log() 함수를 통해서 간단한 계산을 해봅니다.
<!DOCTYPE html>
<html lang="en, ko">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script>
var a = 1;
var b = 2;
console.log('a : ', a);
console.log('b : ', b);
console.log(a + b);
</script>
</head>
<body>
</body>
</html>
a = 1, b = 2라는 값을 설정하고 a+b를 실행해 봅니다.
그러면 제일 마지막의 a+b = 3 이 출력되는 것을 볼 수 있습니다.
이번에는 a를 문자로 설정한 후에 다시 계산을 해봅니다.
<!DOCTYPE html>
<html lang="en, ko">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script>
var a = 1;
var b = 2;
a = "3";
console.log( a + b);
</script>
</head>
<body>
</body>
</html>
원래의 결과라면 위 그림과 동일하게 3의 값을 출력해야 합니다.
그러나 결과는 32라는 값이 출력이 되었습니다.
이거는 a가 문자로 설정이 되어있는 상태에서
문자 + 숫자 계산을 진행했기 때문에 다음과 같은 결과가 출력되는 현상입니다.
여기서 console.log(typeof(a+b)); 를 이용하여 타입을 확인해보면 Number(숫자)가 아닌 string(문자)가 출력되는 것을 볼 수 있습니다.
console.log(typeof(a+b));
계산하는 타입에 따라서 결과 값이 전혀 다르게 나올 수 있다는 주의 점이 필요합니다.
다른 언어의 경우에는 타입에 문제가 있으면 Error 메시지를 출력하지만
JavaScript는 이런 부분에서는 약한 편이라서 Error 메시지를 출력하지 않고 그대로 받아들이는 특징이 있습니다.
ex1) 문자 + 숫자 ⇒ 문자
ex2) 숫자 + 문자 ⇒ 문자
2. 형변환 함수
이번에는 형 변환을 해주는 함수에 대해서 알아보겠습니다.
2-1. 숫자
Number( object)
- object : 문자열 또는 문자열을 값으로 하는 변수 등을 입력합니다.
- 문자열을 숫자로 변환하는 함수입니다. 숫자로 변환할 수 없는 값인 경우 NaN을 반환합니다.
parseInt( string, n )
- 문자열을 정수로 바꾸는 함수입니다. string을 n진법일 때의 값으로 바꿉니다.
- n은 옵션으로 2부터 36까지 입력할 수 있습니다.
- 입력하지 않으면 10으로 처리합니다.
- string의 처리는 parseFloat()와 거의 같습니다.
- 소수 부분은 버립니다. 0x로 시작하면 16진법으로 처리합니다.
parseFloat( string )
- 문자열을 실수로 바꾸는 함수입니다.
- 수로 시작할 때 그 수를 실수로 바꿉니다.
- 띄어쓰기로 여러 개의 수가 있으면 첫 번째 수만 바꿉니다.
- 공백으로 시작하면 공백은 무시합니다.
- 수가 아닌 문자로 시작하면 NaN을 반환합니다.
예시)
<!DOCTYPE html>
<html lang="en, ko">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script>
var a = 1;
var b = 2;
console.log('숫자 + 숫자 : ', a + b);
a = "3";
console.log('문자 + 숫자 : ', a + b);
console.log('parseInt 함수 : ', parseInt(a) + b);
console.log('Number 함수 : ', Number(a) + b);
</script>
</head>
<body>
</body>
</html>
2-2. 문자
String( object )
- String()은 숫자를 문자열로 변환하는 함수입니다.
- object : 숫자 또는 숫자를 값으로 하는 변수 등을 입력합니다.
.tostring()
- 문자열을 반환하는 object의 대표적인 방법이다
예시)
<!DOCTYPE html>
<html lang="en, ko">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script>
var a = 1;
var b = 2;
a = "3";
console.log('toString 함수 : ', a + b.toString());
console.log('String 함수 : ', a + String(b));
</script>
</head>
<body>
</body>
</html>
이상으로 JavaScript 형변환에 대하여 알아보았습니다.
감사합니다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] 조건문에 대해서 알아보기 (0) | 2023.01.11 |
|---|---|
| [JavaScript] 함수에 대해서 알아보기 (0) | 2023.01.09 |
| [JavaScript] 연산자에 대해서 알아보기 (0) | 2023.01.07 |
| [JavaScript] 자료형에 대해서 알아보기 (0) | 2023.01.05 |
| [JavaScript] JavaScript에 대해서 알아보기 (0) | 2023.01.04 |