2022. 12. 28. 14:57ㆍJavascript/TCP school
타입 변환(type conversion)
자바스크립트는 타입 검사가 매우 유연한 언어
자바스크립트의 변수는 타입이 정해져 있지 않음
같은 변수에 다른 타입의 값을 다시 대입할 수도 있음
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript Type Conversion</title>
</head>
<body>
<h1>같은 변수에 다른 타입의 값 대입</h1>
<p id="result"></p>
<script>
var num = 20; // 변수의 선언과 함께 초기화
document.getElementById("result").innerHTML = num + "<br>";
num = "이십"; // 문자열 대입
document.getElementById("result").innerHTML += num + "<br>";
var num; // 한 변수를 여러 번 초기화할 수는 있으나, 재선언은 할 수 없습니다.
document.getElementById("result").innerHTML += num;
</script>
</body>
</html>같은 변수에 다른 타입의 값 대입
묵시적 타입 변환(implicit type conversion)
자바스크립트는 특정 타입의 값을 기대하는 곳에 다른 타입의 값이 오면, 자동으로 타입을 변환하여 사용
즉, 문자열 값이 오길 기대하는 곳에 숫자가 오더라도 자바스크립트는 알아서 숫자를 문자열로 변환하여 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript Type Conversion</title>
</head>
<body>
<h1>묵시적 타입 변환</h1>
<p id="result"></p>
<script>
var result = 10 + "문자열"; // 문자열 연결을 위해 숫자 10이 문자열로 변환됨.
document.getElementById("result").innerHTML = result + "<br>";
result = "3" * "5"; // 곱셈 연산을 위해 두 문자열이 모두 숫자로 변환됨.
document.getElementById("result").innerHTML += result + "<br>";
result = 1 - "문자열"; // NaN
document.getElementById("result").innerHTML += result;
</script>
</body>
</html>묵시적 타입 변환
위의 세 번째 예제에서 뺄셈 연산을 위해 문자열이 숫자로 변환되어야 하나, 해당 문자열은 두 번째 예제의 문자열과는 달리 숫자로 변환될 수 없는 문자열
따라서 의미에 맞게 자동으로 타입을 변환할 수 없으므로, 자바스크립트는 NaN 값을 반환
NaN은 Not a Number의 축약형으로, 정의되지 않은 값이나 표현할 수 없는 값이라는 의미
이러한 NaN은 Number 타입의 값으로 0을 0으로 나누거나, 숫자로 변환할 수 없는 피연산자로 산술 연산을 시도하는 경우에 반환되는 읽기 전용 값
명시적 타입 변환(explicit type conversion)
자바스크립트에서는 묵시적 타입 변환을 많이 사용하지만, 명시적으로 타입을 변환할 방법도 제공
명시적 타입 변환을 위해 자바스크립트가 제공하는 전역 함수는 다음과 같다.
1. Number()
2. String()
3. Boolean()
4. Object()
5. parseInt()
6. parseFloat()
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript Type Conversion</title>
</head>
<body>
<h1>명시적 타입 변환 함수</h1>
<p id="result"></p>
<script>
document.getElementById("result").innerHTML = Number("10") + "<br>"; // 10
document.getElementById("result").innerHTML += String(true) + "<br>"; // "true"
document.getElementById("result").innerHTML += Boolean(0) + "<br>"; // false
document.getElementById("result").innerHTML += Object(3); // new Number(3)
</script>
</body>
</html>명시적 타입 변환 함수
숫자를 문자열로 변환
숫자를 문자열로 변환하는 방법
1. String() 함수를 사용하는 것
2. null과 undefined를 제외한 모든 타입의 값이 가지고 있는 toString() 메소드를 사용
숫자(Number) 객체는 숫자를 문자열로 변환하는 다음과 같은 메소드를 별도로 제공
1. toExponential()
2. toFixed()
3. toPrecision()
| 메소드 | 설명 |
| toExponential() | 정수 부분은 1자리, 소수 부분은 입력받은 수만큼 e 표기법을 사용하여 숫자를 문자열로 변환함. |
| toFixed() | 소수 부분을 입력받은 수만큼 사용하여 숫자를 문자열로 변환함. |
| toPrecision() | 입력받은 수만큼 유효 자릿수를 사용하여 숫자를 문자열로 변환함. |
메소드(method) - 객체의 프로퍼티 값으로 함수를 갖는 프로퍼티
메소드에 대한 더 자세한 사항은 자바스크립트 객체의 개념 수업에서 확인할 수 있음
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
숫자 객체의 메소드에 대한 더 자세한 사항은 자바스크립트 Number 메소드 수업에서 확인할 수 있음
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
불리언 값을 문자열로 변환
String() 함수와 toString() 메소드를 사용
String(true); // 문자열 "true"
false.toString(); // 문자열 "false"
날짜를 문자열이나 숫자로 변환
String() 함수와 toString() 메소드를 사용
자바스크립트에서 날짜(Date) 객체는 문자열과 숫자로 모두 변환할 수 있는 유일한 타입
날짜(Date) 객체는 날짜를 숫자로 변환하는 다음과 같은 메소드를 별도로 제공
| 메소드 | 설명 |
| getDate() | 날짜 중 일자를 숫자로 반환함. (1 ~ 31) |
| getDay() | 날짜 중 요일을 숫자로 반환함. (일요일 : 0 ~ 토요일 : 6) |
| getFullYear() | 날짜 중 연도를 4자리 숫자로 반환함. (yyyy년) |
| getMonth() | 날짜 중 월을 숫자로 반환함. (1월 : 0 ~ 12월 : 11) |
| getTime() | 1970년 1월 1일부터 현재까지의 시간을 밀리초(millisecond) 단위의 숫자로 반환함. |
| getHours() | 시간 중 시를 숫자로 반환함. (0 ~ 23) |
| getMinutes() | 시간 중 분을 숫자로 반환함. (0 ~ 59) |
| getSeconds() | 시간 중 초를 숫자로 반환함. (0 ~ 59) |
| getMilliseconds() | 시간 중 초를 밀리초(millisecond) 단위의 숫자로 반환함. (0 ~ 999) |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript Type Conversion</title>
</head>
<body>
<h1>날짜를 문자열이나 숫자로 변환</h1>
<p id="result"></p>
<script>
var result = String(Date());
document.getElementById("result").innerHTML = result + "<br>";
result = Date().toString();
document.getElementById("result").innerHTML += result + "<br>";
var date = new Date(); // Date 객체 생성
result = date.getFullYear();
document.getElementById("result").innerHTML += result + "<br>";
result = date.getTime(); // 1970년 1월 1일부터 현재까지의 시간을 밀리초 단위의 숫자로 반환함.
document.getElementById("result").innerHTML += result;
</script>
</body>
</html>날짜를 문자열이나 숫자로 변환
날짜 객체의 메소드에 대한 더 자세한 사항은 자바스크립트 Date 메소드 수업에서 확인
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
문자열을 숫자로 변환
Number() 함수를 사용
자바스크립트는 문자열을 숫자로 변환해 주는 두 개의 전역 함수를 별도로 제공
| 함수 | 설명 |
| parseInt() | 문자열을 파싱하여 특정 진법의 정수를 반환함. |
| parseFloat() | 문자열을 파싱하여 부동 소수점 수를 반환함. |
이 두 전역 함수에 대한 더 자세한 사항은 자바스크립트 Number 메소드 수업에서 확인
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
불리언 값을 숫자로 변환
Number() 함수를 사용
Number(true); // 숫자 1
Number(false); // 숫자 0참고
http://www.tcpschool.com/javascript/js_datatype_typeConversion
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
'Javascript > TCP school' 카테고리의 다른 글
| 산술 연산자 (0) | 2022.12.28 |
|---|---|
| 변수 (0) | 2022.12.28 |
| 기본 타입 (0) | 2022.12.27 |
| 자바스크립트 적용 (0) | 2022.12.27 |
| 자바스크립트 출력 (0) | 2022.12.27 |