lessons 13. 타입 체크

2023.02.08

자바스크립트 스터디 4회차

공부 사이트: https://poiemaweb.com/

 

13. 타입 체크

자바스크립트가 타입 체크가 필요한 이유는 동적 타이핑에 의해 의도하지 않은 결과가 나올 수 있기 때문이다.

// 어떤 타입의 값을 반환해야 하는지 명확하지 않다.
function sum(a, b) {
  return a + b;
}

console.log(sum(12,5));
console.log(sum('hello ','javascript'));

 

1) typeof

- typeof는 피연산자의 데이터 타입을 문자열로 반환한다.

- null을 제외한 원시 타입을 체크하는 데는 문제가 없으나, 객체의 종류까지 구분하여 체크할 때는 사용하기 곤란하다.

	피연산자	typeof
	null	object
	배열	object
	Date, RegExp, 사용자 정의 객체...	object
	함수	function

 

 

 

2) Object.prototype.toString

- 여러 종류의 객체를 구분할 수 있는 타입 체크 기능이 필요함. 아래 메소드들을 이용한다.

- Object.prototype.toString: 객체를 나타내는 문자열을 반환하는 메소드이다.

- Object.prototype.call: 다른 객체에서 사용중인 메서드나 함수를  호출하는 데 사용.

var obj = new Object();
console.log('obj.toString(): ' + obj.toString());

console.log('call(\'\'): ' + Object.prototype.toString.call(''));   //문자열이 가지고 있는 toString 메소드를 호출(call)
console.log('call(1): ' + Object.prototype.toString.call(1));
console.log('call(NaN): ' + Object.prototype.toString.call(NaN));
console.log('call(true): ' + Object.prototype.toString.call(true));
console.log('call(undefined): ' + Object.prototype.toString.call(undefined));
console.log('call([]): ' + Object.prototype.toString.call([]));
console.log('call({}): ' + Object.prototype.toString.call({}));
console.log('call(/test/i): ' + Object.prototype.toString.call(/test/i));
console.log('call(new Date()): ' + Object.prototype.toString.call(new Date()));
console.log('call(function () {}): ' + Object.prototype.toString.call(function () {}));

이것을 이용해서 타입을 반환하는 함수를 만든다.

function getType(target){
        // String.prototype.slice 
	// call 메소드가 반환한 문자열에서 '[object'와 마지막 ']'를 슬라이스.
	return Object.prototype.toString.call(target).slice(8,-1);
}

console.log('getType(null): ' + getType(null));
console.log('getType(function() {}): ' + getType(function() {}));

 

[예제에 적용]

function getType(target) {
  return Object.prototype.toString.call(target).slice(8, -1);
}

function sum(a, b) {
	if (getType(a) !== 'Number' || getType(b) !== 'Number'){
		throw new TypeError('파라미터에 number 타입이 아닌 값이 할당되었습니다.');
	}
  return a + b;
}

console.log(sum(12,5));
console.log(sum('hello ','javascript'));    //TypeError 발생

 

 

 

3) instanceof

- Object.prototype.toString 메소드를 사용해서 객체의 종류를 식별할 수 있으나, 객체의 상속 관계까지는 알 수 없다.

- instanceof 연산자는 피연산자인 객체가 우항에 명시한 타입의 인스턴스인지 여부를 알려준다.

function Person() {}
const person = new Person();

console.log(person instanceof Person);   //true 
console.log(person instanceof Object);   //ture

- person 인스턴스는 Person 객체의 인스턴스이다.

- person 인스턴스는 Object 객체의 인스턴스이다.

 

 

 

 

4) 유사 배열 객체(array-like object)

- 배열만이 가질 수 있는 length 프로퍼티를 갖는 객체

- 배열인지 체크하기 위해서는 Array.isArray() 메소드 사용

- 문자열, arguments, HTMLCollection, NodeList 등은 유사 배열 객체이다.

// Array.isArray()
console.log(Array.isArray([]));     //true
console.log(Array.isArray({}));     //false
console.log(Array.isArray('123'));  //false

console.log(undefined == null);

// length 프로퍼티의 값이 정상이면 true. 유사배열 check.
const isArrayLike = function (collection) {
	// js에서 표현가능한 양의 정수 MAX값 2^53-1
    const MAX_ARRAY_INDEX = Math.pow(2, 53) - 1;
    
	// coolection이 null이면 undefined 반환, 아니면 length 반환
    const length = collection == null ? undefined : collection.length;
    return typeof length === 'number' && length >= 0 && length <= MAX_ARRAY_INDEX;
};

console.log('\n[length 프로퍼티 값 정상]');
console.log('isArrayLike([]): ' + isArrayLike([]));
console.log('isArrayLike(\'abc\'): ' + isArrayLike('abc'));
console.log('isArrayLike(\'\'): ' + isArrayLike(''));
console.log('isArrayLike({length:0}): ' + isArrayLike({ length: 0 }));

console.log('\n[length 프로퍼티 값 비정상]');
console.log('isArrayLike(123): ' + isArrayLike(123));
console.log('isArrayLike({foo:1}): ' + isArrayLike({ foo: 1 }));
console.log('isArrayLike(): ' + isArrayLike());
console.log('isArrayLike(null): ' + isArrayLike(null));

{length:0}과 같이 객체생성 시 length 프로퍼티를 만들어주니 true가 출력된다. 신기하군...