[javascript] 04 - (동적)타입에 대하여

안녕하세요. 이번 포스팅은 자바스크립트의 타입에 대한 글을 포스팅하겠습니다.

 

동적 타입을 설명하기에 앞서 자바스크립트의 타입에 대해 설명하고 

동적 타입으로 인한 오류를 제어하기 위하여 직접 구현한 타입 체크를 하는 모듈에 대한 설명도 있습니다.

( 추후 github에 업로드 하겠습니다 :D )

 

자바스크립트 타입

자바스크립트의 타입은 ES6는 7가지 데이터 타입이 있으며 '원시 타입'과 '객체 타입'으로 분류할 수 있습니다.

 

원시 타입	Number (숫자)	정수와 실수 구분 없이 하나의 숫자 타입만 존재
	String (문자열)	문자열
	Boolean (참/거짓)	논리적 참과 거짓을 표현 (true/false)
	undefined	선언된 변수에 암묵적으로 할당되는 값
	null	값이 없다는 것을 의도적으로 명시할 때 사용
	symbol (ES6)	다른 값과 중복이 되지 않는 유일무이한 값  (주로 이름이 충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만들기위해 사용함)
객체 타입		객체, 함수, 배열 등

원시 타입

- 단 하나의 값을 나타냄

- 변경 불가능 한 값 

- 원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 할당됨

- 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사된다.

객체 타입

- 다양한 타입의 값 (원시 값 또는 다른 객체)

- 변경 가능한 값
- 객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값이 저장된다.

- 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달된다.

데이터 타입이 필요한 이유는 뭘까?

- 값을 저장할 때 확보해야 하는 메모리 공간의 크기를 결정하기 위해서

- 값을 참조할 때 한 번에 읽어야 할 메모리 공간의 크기를 결정하기 위해서

- 메모리에서 읽어 드린 2진수를 어떻게 해석할지 결정하기 위해서 
( ex) 메모리의 저장된 이진수 값을 따라 숫자로 해석해야 할지 문자로 해석해야 할지 )

 

 

---

동적 타입

자바스크립트의 변수는 선언이 아닌 할당에 의해 타입이 결정됩니다. 

var data; // var키워드를 이용하여 변수 선언
console.log(type of data); // 타입 : undefined 

data = 'hello, javascript'; // 문자열 할당
console.log(type of data); // 타입 : string 

data = 999; // 숫자 할당
console.log(type of data); // 타입 : numver 

data = true
console.log(type of data); // 타입 : boolean 

위의 코드처럼 data라는 변수를 선언했지만 다양한 타입으로 변경할 수 있습니다.

즉, 자바스크립트의 변수는 선언이 아닌 할당에 의해 타입이 결정(타입 추론)이 되며, 재할당에 의해 변수의 타입은 언제든지 동적으로 변할 수 있습니다.

 

동적 타입은 마냥 좋을까?

변수에 어떤 데이터 타입의 값이라도 자유롭게 (재)할당할 수 있어 편리하다는 장점이 있지만 단점도 존재합니다.

자바스크립트는 개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동으로 변환이 됩니다.

예를 들어
'숫자 타입'으로 예측했지만 실제로 '문자열 타입'의 변수로 되거나 예상치 못한 타입이 들어와 프로그램의 오류가 발생할 수 있습니다. 

 

동적 타입의 주의할 점 

변수는 꼭 필요한 경우에 한해 제한적으로 사용합니다.

  => 변수 값은 재할당에 의해 언제든 변경될 수 있습니다. 자바스크립트는 타입을 잘못 예측해 오류가 발생할 가능성이 큽니다.

       즉, 변수의 개수가 많을수록 오류가 발생할 확률도 높아집니다.

 

변수의 유효 범위(스코프)는 최대한 좁게 만들어 변수의 부작용을 억제해야 합니다.

   => 변수의 유효 범위가 넓으면 넓을수록 변수로 인해 오류가 발생할 확률이 높아집니다. 

 

전역변수는 최대한 사용하지 않도록 합니다.

   => 전역변수는 의도치 않게 값이 변경될 가능성이 높고 다른 코드에 영향을 줄 가능성이 높다. 또한 복잡성을 증가시키고 처리 흐름을 추적하기 어렵고 오류가 발생할 경우 오류의 원인을 특정하기 어렵습니다. 따라서 변수보다는 상수를 사용해 값의 변경을 억제한다.

 

변수 이름은 변수의 목적이나 의미를 파악할 수 있도록 네이밍 합니다.

   => 변수 이름뿐 아니라 식별자는 존재 이유를 파악할 수 있는 적절한 이름으로 지어야 합니다. 
        변수의 유효범위가 넓을수록 명확한 이름을 명명하도록 노력하여 개발자들의 협업과 생산성 향상에 도움을 주도록 합니다.

 

변수의 동적 타입 특성과 유효 범위(스코프)로 인하여 프로그램이 의도치 않게 오류가 날 수 있습니다.

따라서 var보다는 let을 사용하고 let보다 const를 사용하는 것을 선호하는 이유도 사이드 이펙트를 최소화하기 위한 이유이기도 합니다.

 

참고

Q.1) var보다 let을 선호하는 이유는 뭘까?

let이 var보다 더 엄격하고 명확한 규칙이 있기 때문입니다.

(똑같은 변수명으로 선언이 불가, 전역객체의 속성을 생성X, 호이스팅이 없음 (정확히는 호스팅이 발생하지 않는 것 처럼), 범위 규칙이 명확)

 

Q.2) let보다 const를 선호하는 이유

위의 동적 타입 주의할 점에서 유추할 수 있듯이 값의'재할당'으로 인하여 프로그램 오류가 발생하는 것을 막을 수 있습니다.

 

Q.3) 함수형 프로그래밍이란?

데이터의 흐름과 값의 변경에 따라 프로그래밍하지 말고 필요한 로직을 함수로 만들어서 함수들의 흐름에 따라 프로그래밍하자는 개념으로 사이드 이펙트를 발생하지 않도록 프로그래밍하는 방식

 

 

어떻게 동적타입으로 인하여 의도치않은 장애를 예방했을까?

저 또한 실제 프로젝트에서 작업을 하다 보면 예기치 않게 변수의 값이 재할당되거나 특히, 숫자/스트링의 타입 부분에서 문제가 발생되었습니다. 주로 let 과 const를 이용하고 함수형 프로그래밍으로 개발하였지만 Typescript와는 다르게 동적으로 타입이 변하는 자바스크립트의 특성상, 강제로 캐스팅을 하거나 그 부분을 해결하고자 타입 체크를 하는 모듈을 만들었습니다.

api 생성 시 의도치 않게 값이 재할당이 되거나 클라이언트 측의 요청에 대한 데이터들을 타입 체크를 하는 기능을 하는 모듈을 만들고 해당 모듈을 가지고 외부의 요청 및 DB에 데이터를 넣기 전 타입을 확인하는 용도로 만들었습니다. 

 

2개의 캡쳐본을 합쳐놓아 정렬이 안된 것처럼 보이는 점 양해 부탁드립니다  (_ _ ) 

 

 

 

정리하자면...

자바스크립트의 동적 타입 언어이다. 동적 타입만의 편리한 점도 있지만
재할당으로 인하여 프로그램이 의도치 않게 오류를 범할 수 있으니

1. 변수를 무분별하게 사용하지 말고

2. 변수의 유효범위를 최대한 좁게 만들고 

3. 변수의 네이밍을 정확히 하자

 

 

 

감사합니다.

 

제가 좋아하는 노래입니다.

한 곡들으면서 좋은 사람 만들어요.

 

Wonderful Tonight

- Eric Clapton -