JSBasis 3. 형변환과 기본 연산자들
안녕하세요 마늘입니다.
네 너무 바빠요 살려주세요. 월요일 과제를 위해 달리는 중입니다.
서론 거두절미하고 들어가겠습니다.
0. 왜 형변환이 필요한가?
const math = confirm("수학 점수가 얼마인가요?");
const science = confirm("과학 점수는 얼마인가요?");
const avg = (math + science) / 2 ;
console.log(avg);우리가 이런 코드를 작성하고, math 값에 100, science 값에 50을 입력했다고 가정해 봅시다.
그렇다면 우리가 기대한 값은 당연히 (100 + 50) / 2 = 75 일겁니다. 당연히 100과 50의 평균이니 75잖아요.
그런데 짜잔! 사실은 5025가 나옵니다!
이는 prompt() 가 기본적으로 문자열 형식으로 받아오기 때문입니다.
즉 prompt() 는 100을 "100" 으로 읽어왔고, "100" + "50" = "10050" 이 되었던 거죠.
근데 생각해보면, 10050은 문자열인데 어떻게 2로 나누어져 5025가 결과값으로 도출된 걸까요?
이는 JS에 자동 형변환 (또는 묵시적 타입 변환) 이 있기 때문입니다 .
특정한 자료형이 와야 하는 위치를 자동으로 형변환시키기 때문에, 이는 양날의 검처럼 작용하는 기능이기도 합니다.
우리의 실수를 스무스하게 처리해주는 좋은 기능이지만, 지금같이 왜 오류가 발생한 것인지 헷갈리게 만들기도 하죠.
아무튼 이 덕에 문자열 "10050" 은 자동으로 숫자 10050으로 치환되어 5025로 나뉘게 되었습니다.
바로 이런 이유 때문에 우리는 변수들의 타입을 잘 관리해주어야 합니다.
그렇다면 어떻게 형변환을 해야할지 지금부터 알아가봅시다.
1. 형변환
1-1. String()
console.log(
String(3),
String(true),
String(false),
String(null),
String(undefined)
);
이런 식으로 코드를 작성하면, 5개 모두 다 성공적으로 형변환이 됩니다.
다른 프로그래밍 언어에서라면 null을 문자열로 형변환시킨다는 해괴한 모습은 찾아보기 힘들지만, 이게 JS인걸요?
Java에서 String.value() 를 사용하는 방식이 가장 비슷할 것 같습니다.
1-2. Number()
console.log(
Number("1234"),
Number("Box"),
Number(true),
Number(false)
);
출력해보면 1, 3, 4번은 정상적으로 출력이 되나, 2번은 NaN이 나오는 모습을 볼 수 있습니다.
참고로 false는 0, true은 그 이외의 모든 수로 프로그래밍에선 인정이 되지만 보통은 저렇게 1을 주로 사용합니다.
1-3. Boolean()
console.log(
Boolean(0),
Boolean(""),
Boolean(null),
Boolean(undefined),
Boolean(NaN)
);
Boolean()은 이 다섯 개를 제외하고는 모두 true로 변환됩니다.
1-4. 예외들
Number(null) // 0
Number(undefined) // NaN
Boolean(0) // false
Boolean('0') // true
Boolean('') // false
Boolean(' ') //true
2. 연산자
연산자는 + (더하기), - (빼기), * (곱하기), / (나누기), % (나머지) 총 다섯 개가 존재합니다.
그 이외로는 2^3 혹은 2³ 을 작성할때는 2 ** 3 처럼 **을 통해서 작성한다는 점만 기억하세요!
오늘은 형변환과 연산자에 대해 알아보았습니다.
글을 마치기 전에, 오늘 배운 것과 관련이 있는 짤 하나를 보여드리고 싶습니다.
결과값이 이해가 가지 않는다면, 링크를 통해서 이 짤을 해석한 영문 블로그를 보는 걸 추천드립니다 :)
다음 시간에는 비교 연산자와 조건문, 논리 연산자에 대해 알아보도록 하겠습니다!