1. 형을 변환시켜?
우리가 코딩을 하면 다뤄야할 정보의 범위와 양은 무궁무진하다.
그래서 우린 우리가 필요한 정보를 적절히 불러오고 변환시키는 것이 중요하다.
예를 들어!
만약 우리가 주민등록번호의 뒷자리의 가장 앞 수를 통해 성별을 알려고 한다고 해보자.
주민등록번호의 숫자들은 대부분 문자열로 불러온다.
즉 숫자의 모습이지만 숫자로 인식되지 않는다는 뜻이다.
뒷자리의 가장 앞 수를 불러와선 그 숫자가 짝수인지 홀수인지 알아보겠다고 'n%2==0'을 쓴다면?
문자열이기 때문에 에러가 나버리는 것이다.
이처럼 우리가 필요한 정보를 형태에 맞춰 가공하고 변환시키는 것을 형변환(Type Conversion)이라고 부른다.
2. 어떤 형에서 어떤 형으로 바꿀 수 있지?
1) 다양한 형 변환의 예
우선 아래의 코드를 확인해보자.
document.write(10+20); // 30
document.write("10"+"20"); // 1020
document.write("<hr>");
1열의 코드는 10과 20이 숫자형으로 인식되기 때문에 30이라는 결과가 나온다.
하지만 2열의 코드는 10과 20이 문자형으로 인식되기 때문에 1020이라는 결과가 나온다.
그런데 2열의 코드에서 10과 20을 숫자형으로 인식시켜서 사칙연산의 값을 구하고 싶다면?
이 때 형변환을 해야 한다.
자바 스크립트에서는 여러가지 종류의 형을 서로 변환할 수 있는데
아래의 사이트에서 다양한 예시를 참조하면 좋을 듯 하다.
https://www.w3schools.com/js/js_type_conversion.asp
우리는 다양한 형 변환 중 세 가지 정도를 알아보려 한다.
1) Number()
이 기능은 숫자로 구성된 문자열을 숫자형으로 변환해주는 기능이다.
내가 숫자형으로 표현하고 싶은 문자를 Number() 안에 넣어주면 된다.
아래의 코드를 확인해보자.
document.write(Number("10")); // 10
document.write("<hr>");
document.write(Number("10") + Number("20")); // 30
document.write("<hr>");
document.write(Number("10 ")); // 10
document.write("<hr>");
document.write(Number(" 10")); // 10
document.write("<hr>");
document.write(Number("10.23")); // 10.23
document.write("<hr>");
document.write(Number("KOREA")); // NaN ; Not a Number
document.write("<hr>");
document.write(Number("1 2 3")); // NaN ; Not a Number
document.write("<hr>");
- 1, 3열을 보면 알 수 있듯 10과 20을 숫자형으로 인식하고 있다.
그래서 Number("10") + Number("20") 의 값을 30으로 출력하게 된다.
- 5, 7열처럼 띄어쓰기, 즉 공백 문자열이 있다고 하더라도 숫자형을 인식하고 변환시켜준다.
- 9열처럼 숫자형은 정수형 뿐만이 아니라 실수형도 인식하고 변환시켜준다.
- 11열의 경우 숫자가 아예 없기 때문에 NaN(Not a Number)이란 값이 출력된다.
- 13열은 숫자와 숫자 사이에 띄어쓰기와 같이 문자가 들어가도 NaN이란 값이 출력된다.
2) palseInt()
이 기능은 숫자로 구성된 문자열을 정수형으로 변환해주는 기능이다.
document.write(parseInt("10")); // 10
document.write("<hr>");
document.write(parseInt("-10")); // -10
document.write("<hr>");
document.write(parseInt("10.23")); // 10
document.write("<hr>");
document.write(parseInt("SEUOL")); // NaN
document.write("<hr>");
- 1열과 3열의 문자를 정수형으로 잘 인식해서 출력한다.
- 5열의 문자에서 정수 부분인 10만을 출력한다.
- 7열은 정수부분이 아예 없으므로 NaN 값을 출력한다.
3) palseFloat()
이 기능은 숫자로 구성된 문자열을 실수형으로 변환해주는 기능이다.
아주 아주 많이 쓰이는 형변환 코드이므로 잘 기억해두자.
document.write(parseFloat("10")); // 10
document.write("<hr>");
document.write(parseFloat("10.23")); // 10.23
document.write("<hr>");
document.write(parseFloat("JAVA")); // NaN
document.write("<hr>");
- 1열의 10의 값은 10.0에서 뒤의 .0이 생략된 상태로 출력되었다.
- 3열의 10.23의 문자열도 실수형으로 잘 출력되었다.
- 5열의 문자는 숫자가 아니기 때문에 NaN으로 출력되었다.
4) String()
이 기능은 숫자형을 문자형으로 변환해주는 기능이다.
document.write(String(123)); // "123"
document.write("<hr>");
document.write(String(123) + String(456)); // "123456"
document.write("<hr>");
5) toString()
이 기능도 위와 같이 숫자형을 문자형으로 변환해주는 기능이다.
String()과 문법을 표기하는 방식이 다르다.
document.write((123).toString()); // "123"
document.write("<hr>");
document.write((123).toString() + (456).toString()); // "123456"
document.write("<hr>");
6) boolean값의 형변환
boolean값, 그러니까 논리형 자료의 값도 형변환 할 수 있다.
이때 값의 형태가 숫자형이면 true는 1, false는 0으로 변환되며,
값의 형태가 문자형이면 true는 true, false는 false로 변환이 된다.
document.write(Number(true)); // 1
document.write("<hr>");
document.write(Number(false)); // 0
document.write("<hr>");
document.write(String(true)); // "true"
document.write("<hr>");
document.write(String(false)); // "false"
document.write("<hr>");
'⁂ Java Script > : 기본 익히기' 카테고리의 다른 글
[JS] #2-4 삼항 연산자(ternary operator) (0) | 2022.08.04 |
---|---|
[JS] #2-3 JS로 돈을 세어보자(공사중) (0) | 2022.08.04 |
[JS] #2-1 연산자(Operator) (0) | 2022.08.03 |
[JS] #1-4 객체 (0) | 2022.08.03 |
[JS] #1-3 상수와 변수 (0) | 2022.08.03 |