자바스크립트 언어의 주요 특징 중 하나는 바로 다른 프로그래밍 언어에 비해 데이터 타입 활용이 유연하다는 점입니다.
이 점은 프로그래밍 언어에 있어서 양날의 검이라고 할 수 있습니다.
타입 체크에 관대하기 때문에 다른 언어보다 로직을 작성하기는 편하지만, 그만큼 자칫하면 오류가 발생하기 쉽기 때문입니다.
다음 코드 예시를 바탕으로 자바스크립트에서 이상할 것이 없는 내용이 다른 프로그래밍 언어에서는 어떻게 받아들여지는지 확인해보겠습니다. 아래의 코드는 오류없이 정상으로 console.log가 출력되는 코드 입니다.
let a = 10; // Number
a = "나는 String인데.."; // String
console.log(a); // 나는 String인데..프로그래밍 언어를 JavaScript로 처음 접하신 분들에게는 이 코드 흐름이 이상하지 않을 수 있습니다.
하지만 Java나 C언어 등, 데이터 타입 관리가 엄격하게 이루어지는 환경에서는 오류로 취급됩니다.
다른 언어에서는 변수에 어떤 값을 할당해서 변수의 type이 확정되면, 그 후에 다른 type의 값을 할당할 수가 없습니다.
딱히 오류가 날 상황이 있을지 모르겠는데, 어떤 경우 문제가 발생할까요?
let a = '5'; // String
a = 5; // Number
console.log(a); // 5'5'는 홑따옴표로 감싸져 있으므로 String형 입니다.
두 번째 줄에서 숫자 5를 할당 했기 때문에 변수 a 는 Number형이 되었습니다.
혹시 헷갈린다면 typeof 라는 연산자로 해당 변수가 무슨 type인지 알 수 있습니다.
const a = '900';
const b = 350;
const c = Math.random();
const d = '5' + 5;
console.log(typeof a); // string
console.log(typeof b); // number
console.log(typeof c); // number
console.log(typeof a); // string프로그램을 잘못 짜면 발생할 수 있는 상황을 더 살펴볼까요?
console.log('200' + '10');
console.log('200' - '10');
console.log(200 + '11');
console.log('200' + 11);
console.log('200' - '안녕');각 console.log의 결과를 확인하기 전에 어떤 결과가 출력될지 예상해봅시다.
예상한 결과가 출력 됐나요?
참고로 NaN 은 Not a Number 라는 뜻입니다.
산술 연산자를 사용했기 때문에 컴퓨터가 숫자인줄 알고 계산하려고 했더니 도대체 계산이 불가능하고 이상한 답이 나왔다는 뜻입니다.
"+"의 특징을 한 번 보겠습니다.
alert("김개발" + "님 안녕하세요.");
const place = "위코드";
alert(place + "에 오신 것을 환영합니다");숫자끼리의 더하기는 물론이고, String끼리 문자를 연결할 수가 있었습니다.
console.log("200" - "안녕");하지만 "-"는 오로지 숫자에만 사용 되는 연산이죠.
"안녕하세요" - "안녕" = ??
String의 경우,
왠지 같은 "안녕"을 빼니까 "하세요"만 남으면 좋겠지만, 전 세계 공통적으로 약속된 연산이 아니기 때문에 존재하지 않는 연산입니다.
그렇기 때문에 NaN 이라는 결과가 반환됩니다.
14세 미만의 사람이 가입했는지 확인하려면 아래의 코드가 필요합니다.
const birthYear = "2000";
const currentYear = 2019;
if (currentYear - birthYear < 14) {
alert("가입할 수 없습니다.");
}하나는 String, 하나는 Number의 수학계산인데, 이번에는 오류가 없는 코드입니다.
각각 어떤 결과가 나왔는지 꼭 확인해주세요!
console.log(2019 + "2000");
console.log(2019 - "2000");컴퓨터가 +의 양쪽을 보고, 하나라도 String이 있으면 문자열로서 합쳐줍니다.
그런데 -를 활용하는 경우 String의 마이너스는 존재 하지 않으므로, 양쪽의 값을 모두 숫자로 변환해서 계산해 줍니다.
물론 위의 코드가 잘 동작 되긴 하지만, 함께 코드를 보는 동료가 충분히 오해할 수 있는 코드입니다.
그렇기 때문에, 텍스트로 표현된 숫자는 반드시 숫자로 바꿔서 계산을 해주셔야 합니다.
다음과 같이 Number() 함수를 사용해서 String형에서 Number형으로 전환할 수 있습니다.
const birthYearInput = "2000";
console.log(typeof birthYearInput);
const numberBirthYear = Number(birthYearInput);
console.log(typeof numberBirthYear);Number 함수 외에도 parseInt(), parseFloat() 등이 있습니다.
parseInt("1.901");
parseFloat("1.901");
Number("1.901");
parseInt("200") + 1;Number형에서 String형으로 변환하고 싶을 수도 있습니다.
그럴 때에는 어떻게 하면 될까요?
const numberAsNumber = 1234;
const numberAsString = numberAsNumber.toString();
console.log(numberAsNumber, typeof numberAsNumber); // 1234 number
console.log(numberAsString, typeof numberAsString);
// 1234 string- 연산의 특성을 활용하여 아래와 같이도 변환할 수 있습니다.
const numberAsNumber = 1234;
const numberAsString = 1234 + "";
console.log(numberAsNumber, typeof numberAsNumber); // 1234 number
console.log(numberAsString, typeof numberAsString); // 1234 string- 연산의 특성을 활용해서 String형을 Number형으로 변환할 수도 있습니다.
const numberAsNumber = "1234";
const numberAsString = numberAsNumber - 0;
console.log(numberAsNumber, typeof numberAsNumber); // 1234 string
console.log(numberAsString, typeof numberAsString); // 1234 number위의 예제 모두 하나하나 직접 코드로 확인해보세요.
출처 : wecode
