[JavaScript] 타입 체크의 필요성

타입 체크가 왜 필요할까?

개발 중 항상 직면하는 문제는 바로 type error이다. 가장 흔하면서도 중, 대규모 개발에서는 많은 코드가 연동하기 때문에, 초기 단계부터 중, 후반까지 항상 체크하고 정리 해야한다. 

자바스크립트는 동적 타입(dynamic typed) 언어이므로 변수에 어떤 값이 할당될 지 예측이 힘들기 때문에 변수 및 함수에는 주석 기입을 필수로 해야 공동 개발자들이나 나에게 오류를 방지할 수 있게 해준다.

 

function sum(a, b) {
  return a + b;
}

한가지 예로, 해당 sum 함수는 Number 타입의 a, b 인수를 넣어 2개의 인수를 더해 반환하는 것으로 추측된다.

하지만 정확히 어떠한 타입의 인수가 들어가는지 한눈에 확인을 할 수 없기 때문에, 타입을 기입한다면 개발에서나 유지보수에서나 어떠한 개발자가 코드를 확인하여 작업하더라도 수월할 수 있다.

 

function sum(a, b) {
  // a, b - Number 타입의 인수
  
  return a + b;
}

 

타입 체크 방법

타입체크에는 크게 2가지 방법으로 체크가 가능하다.

 

1. typeof

타입 연산자(Type Operator) typeof는 피연산자의 데이터 타입을 문자열로 반환하는 기능을 가지고있다.

console.log(typeof 42);
// expected output: "number"

console.log(typeof 'blubber');
// expected output: "string"

console.log(typeof true);
// expected output: "boolean"

console.log(typeof NaN);
// expected output: "number"

console.log(typeof function () {});
// expected output: function

console.log(typeof undefined);
// expected output:undefined

 

2. Object.prototype.toString

Object.prototype.toString 메소드는 객체를 나타내는 문자열을 반환하고,

Function.prototype.call 메소드를 사용하면 모든 타입의 값의 타입을 알아낼 수 있다.

고로 같이 조합해서 사용하여, 타입을 반환할 수 있다.

var obj = new Object();
console.log(obj.toString());
// "[object Object]"

Object.prototype.toString.call('');		// [object String]
Object.prototype.toString.call(1);			// [object Number]
Object.prototype.toString.call(NaN);		// [object Number]
Object.prototype.toString.call(Infinity);		// [object Number]
Object.prototype.toString.call(true);		// [object Boolean]
Object.prototype.toString.call(undefined);		// [object Undefined]
Object.prototype.toString.call();			// [object Undefined]
Object.prototype.toString.call(null);		// [object Null]
Object.prototype.toString.call([]);		// [object Array]
Object.prototype.toString.call({});		// [object Object]
Object.prototype.toString.call(new Date());	// [object Date]
Object.prototype.toString.call(Math);		// [object Math]
Object.prototype.toString.call(/test/i);		// [object RegExp]

하지만 위와 반환이 된다면 실무에서는 다용도로 사용하기 어려울 것으로 예상되므로 함수를 제작하여 사용하는 것이 좋아 보인다.

 

function getType(tnum) {
    return Object.prototype.toString.call(tnum).slice(8, -1);
}
//[object ^Number^]

getType('');		// String
getType(1);		// Number
getType(true);		// Boolean
getType(undefined);	// Undefined
getType(null);		// Null
getType({});		// Object
getType([]);		// Array

메서드는 문자열로 반환되므로 해당 문자열을 slice 함수를 통해 "[object "를 잘라내고 맨 끝의 "]"를 잘라내어 타입만 반환하도록 한다.

 

중요포인트

실무의 활용

위와 같은 타입 체크 함수를 활용하여 초기 명확하지 타입 기제를 하지 않았던 sum 함수를 통해 만들어보았다.

function sum(a, b) {
	// a, b - Number 타입 인수

    // a와 b가 number 타입 체크
    if (getType(a) !== 'Number' || getType(b) !== 'Number') {
        return 'Type error';
    }
    return a + b;
}

console.log(sum(1, 2));   // 3
console.log(sum('1', 2)); // TypeError

 

 

typeof - JavaScript | MDN

Type Checking | PoiemaWeb