Front-end/JavaScript

JS Type 4편 - 동적 타입(static&dynamic type)

파리외 개발자 2022. 12. 31. 00:13

동적 타입 결정 방식 Dynamic type

언어마다 변수 타입을 결정함에 있어 동적인지 정적인지가 나뉜다.

//dynamically type lang
var a = 100;

var b = 'hihi';

JS는 동적으로 변수의 타입을 결정한다.

a는 100이 할당된 순간 숫자로 인식하고 number타입이 부여된다.

b는 'hihi'가 할당된 순간 문자열로 인식하고 string타입이 부여된다.

static type

추가로 정적 타입 언어는 변수의 타입을 명시해 준다.

//statically type lang ex) c
int a;
a = 100;

string b;
b = 'hihi';

위와 같이 변수 선언 시에 타입을 명시하고

값을 할당할 때엔 변수의 타입에 맞는 값을 할당해야 된다.

strong & weak

//strong & weak type
var a = "abc";
a + 123;

//throw err
var d = "dd";
d + 11;

잠깐 그래프에서 strong과 weak의 기준에 대해 설명하자면

같은 변수 타입끼리의 연산을 얼마나 엄격하게 통제하는지에 대한 기준이다.

예를 들어 JS는 다른 타입의 변수끼리의 연산에서 암묵적인 coercion이 지원이 많이 되므로

통제가 약하기 때문에 그래프의 weak쪽에 속한다.

TS

동적타입과 정적타입의 방식에는 뭐가 더 좋다는 의견이 분분하다. 
다만 동적타입에는 변수의 타입으로 인해 예기치 못한 동작이 일어날 수 있으므로
동적타입인 JS를 정적타입처럼 사용하기 위한 방식 또한 존재하며
그중 가장 많이 사용되는 type script를 잠깐 소개한다.
//JS
function add(a, b) {
  return a + b;
}

add("hello", 123);

만약 add함수가 숫자를 더하는 용도로 개발자가 만들었다고 했을 때,

실수로 숫자 대신 문자열을 전달한다 하더라도 JS는 오류를 내지 않는다.

다만, 타입을 강제변환시켜 어떻게든 동작하게 만든다.

문맥상 js가 판단하여 문자열을 이어 붙이는 행위라 이해하고 123을 문자열로 변환시킨 뒤 함수가 동작된다.

어쩌면 이런 동작은 좀 더 자유로움을 느낄 수도 있다.

하지만 큰 서비스에서 더 복잡한 코드에서 이러한 현상이 발생한다면

원래의 의도인 '숫자를 더한다'의 함수가 갑자기 문자를 이어붙이는 

본래의 의도와 다르게 동작하더라도 개발자는 어디서 오류가 발생했는지 파악하기 어려울 수가 있다.

//TS
function sum(a: number, b: number) {
  return a + b;
}

sum("hello", null);

타입스크립트는 JS언어이지만 타입을 static으로 명시해주는 기능만이 추가된 언어다.

위와 같이 인자를 number로 명시해둔 상황에서 

다른 타입의 변수가 들어온다면 에러를 발생시킨다.