[우아한 타입 스크립트 with 리액트] 자바스크립트의 한계

1.2 자바스크립트의 한계

1. 동적 타입 언어

자바스크립트의 특징 중 하나가 동적 타입 언어라는 것이다. 이 말은 변수에 타입을 명시적으로 지정하지 않고 코드가 실행되는 런타임에 변숫값이 할당될 때 해당 값의 타입에 따라 변수 타입이 결정된다는 것을 의미한다. 예를 들어, 변수 a의 타입이 number 인지 string 인지는 실제 코드가 동작할 때 a 에 값이 할당되는 순간, 그 값이 숫자 1인지 문자 1 인지에 따라 결정된다.

2. 동적 타이핑 시스템의 한계

// 이 함수는 숫자 a, b의 합을 반환한다.
const sumNumber=(a,b)=>{
	return a + b;
};

sumNumber(1,2); // 3

위 코드를 실행하면 어떤 에러도 발생하지 않고 정상적으로 동작한다. 즉, 정상적인 코드이다.

// 이 함수는 숫자 a,b의 합을 반환한다.
const sumNumber=(a,b)=>{
	return a + b;
};

sumNumber(100); // NaN
sumNumber("a","b"); // ab

첫 번째 예시 코드와 달라진 점은 sumNumber 함수를 실행할 때 인자에 하나의 숫자만 전달하거나 숫자가 아닌 문자를 전달했다는 것이다. 그런데도 어떤 에러도 발생하지 않고 정상적으로 동작한다. 따라서 여전히 정상적인 코드이다. 동의하는가? 아마도 주석과 함수 이름 때문에 고개를 갸웃거리게 될 것이다.

 

코드에 적힌 주석과 함수 이름은 두 수의 합을 구하기 위한 함수로 명시하고 있다. 하지만 해당 함수는 하나의 숫자만 전달했을 때도 오류없이 NaN 값을 반환하거나, 숫자가 아닌 문자열의 합을 구하는 데도 사용될 수 있다. 즉 개발자의 의도와는 다르게 동작할 수 있다. 그런데도 자바스크립트 엔진은 이 코드를 문제없이 실행한다. 왜냐하면 자바스크립트는 동적 타입 언어라는 특성 때문에 sumNumber 함수를 호출할 때 사용되는 인수 값에 따라 a 와 b 의 타입이 결정된다.

 

자바스크립트는 b 가 undefined 이기 때문에 + 연산자의 피연산자가 될 수 없지만 오류를 발생시키지 않고, b를 적절한 타입인 NaN 으로 형변환한 다음 실행을 이어 나간다. 자바스크립트 엔진에서 주석, 함수 이름, 개발자 의도 같은 것은 고려 대상이 아니다. 따라서 이 코드는 기계 입장에서는 정상적이지만 사람 입장에서는 정상적이지 않은 코드이다. 자바스크립트는 이 문제를 어떻게 해결하려 했을까?

3. 한계 극복을 위한 해결 방안

거대한 웹 서비스를 개발하는 데 수많은 개발자의 협업이 필요한 상황에서 위와 같은 동적 타이핑 시스템의 한계는 상당한 어려움을 야기했다. 따라서 개발자들은 자바스크립트 인터페이스의 필요성을 느끼게 되었고 JSDoc, propTypes, Dart 같은 해결 방안이 등장했다.

 

⭐️ JSDoc

모듈, 네임스페이스, 클래스, 메서드, 매개변수 등에 대한 API 문서 생성 도구이다. 주석에 @ts- check를 추가하면 타입 및 에러 확인이 가능하며 자바스크립트 소스코드에 타입 힌트를 제공하는 HTML 문서를 생성할 수 있다. 하지만 어디까지나 주석의 성격을 지니고 있기 때문에 강제성을 부여해 사용하기 어렵다는 단점이 있다.

⭐️ propTypes

리액트에서 컴포넌트 props 의 타입을 검사하기 위해 사용하는 속성이다. prop 에 유효한 값이 전달되었는지 확인할 수 있지만, 전체 애플리케이션의 타입 검사를 하는 데는 사용할 수 없다. 또한 리액트라는 특정 라이브러리에서만 사용할 수 있다는 점에서 한계가 있다.

⭐️ Dart

구글이 자바스크립트를 대체하기 위해 제시한 새로운 언어로 타이핑이 가능하다는 점에서는 앞서 소개한 propTypes 나 JSDoc 같은 보조 수단보다 근본적인 해결책으로 보였다. 그러나 자바스크립트가 이미 자리매김한 상황에 새로운 언어의 등장으로 과거의 브라우저 전쟁처럼 개발의 파편화를 불러올 수 있어 다트를 달갑지 않게 보는 시선이 강했다.

3가지 모두 의미 있는 해결 방안이었으나 자바스크립트가 스스로 인터페이스를 기술할 수 있는 언어로 발전해야 한다는 목소리가 더욱 커졌다.