[JavaScript] JavaScript의 자료형과 JavaScript만의 특성은 무엇일까 ?

JavaScript의 자료형과 JavaScript만의 특성은 무엇일까 ?

1. null vs undefined 자료형

null 값은 오로지 null 값만 포함하는 별도의 자료형을 만든다. 또한 자바스크립트의 null은 자바스크립트 이외 언어의 null과 성격이 다르다. 다른 언어에선 null을 '존재하지 않는 객체에 대한 참조’나 '널 포인터(null pointer)'를 나타낼 때 사용하지만 자바스크립트에선 null을 ‘존재하지 않는(nothing)’ 값, ‘비어 있는(empty)’ 값, ‘알 수 없는(unknown)’ 값을 나타내는 데 사용합니다.

 

undefined 값도 null 값처럼 자신만의 자료형을 한다. undefined는 '값이 할당되지 않은 상태’를 나타낼 때 사용하며 변수는 선언했지만, 값을 할당하지 않았다면 해당 변수에 undefined가 자동으로 할당된다. 개발자가 변수에 undefined를 명시적으로 할당하는 것도 가능하긴 하지만 undefined를 직접 할당하는 걸 권장하진 않는다고 한다. 변수가 ‘비어있거나’ ‘알 수 없는’ 상태라는 걸 나타내려면 null을 사용하고 undefined는 값이 할당되지 않은 변수의 초기값을 위해 남겨두는 것이 좋다고 한다.

 

2. 느슨한 타입(loosely typed)의 동적(dynamic) 언어

컴파일 시간에 변수의 타입(자료형)이 결정되는 언어인 정적 언어 (Statically Typed Language)와 달리 동적 언어(Dynamically Typed Language)는 런타임에 타입이 결정되는 언어이다.즉, 소스가 빌드될 때 자료형을 결정하는 것이 아니라 실행 시 결정된다.

 

자바스크립트에는 타입이 있지만, 변수에 타입을 필수적으로 지정하지 않아도 되기 때문에 ‘느슨한 타입 (loosely typed) 언어’ 라고 할 수 있습니다. 또한, 변수에 저장되는 값의 타입은 언제든지 바꿀 수 있기 때문에 ‘동적 타입(dynamically typed) 언어' 라고도 부를 수 있다.

 

JavaScript는 느슨한 타입(loosely typed)의 동적(dynamic) 언어이기에 JavaScript의 변수는 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당 (및 재할당) 가능하다.

let foo = 42 // foo가 숫자
foo = 'bar' // foo가 이제 문자열
foo = true // foo가 이제 불리언

JavaScript는 느슨한 타입의 동적 언어이기 때문에 (변수 생성 시)원시 변수의 타입을 미리 선언하지 않아도 된다는 장점이 있지만 많은 기능 명세서와 API가 오고 가는 대형프로젝트(혹은 협업 시)에서 타입이 올바른지 체크하는 것이 굉장히 까다롭기 때문에 배포 시 예상치 못한 문제와 직면할 수 있다.

// 백엔드 개발자가 전달한 명세서 예시
{ 
id: number,
product_name: string, 
price: number
}

// 프런트 개발자가 전달한 데이터 예시
{ 
id: 12345,
product_name: 'water melon', 
price: '12,000'
}

// price의 타입이 다르기 때문에 오류가 발생한다!

이러한 문제의 보완 방법으로는 예상되는 타입 에러를 예외 처리를 하거나 자바스크립트 언어에 타입이 추가된 타입스크립트의 사용하는 것이 있다. 자바스크립트의 단점을 보완하여 정적 타입 체크와 강력한 문법을 추가한 타입스크립트를 사용하여 보완 가능하다. 타입 스크립트를 브라우저에서 실행하려면 파일을 변환하는 컴파일 과정을 거쳐서 사용하게 된다.

 

3. == / ===

== (loose equality)은 두 값이 같은지 비교하는데 값을 공통 형태로 변환한 후에 비교합니다. 변수 선언시 Type을 따로 지정하지 않는 Javacript의 경우 하나 또는 양쪽이 형 변환을 거치고 두 값을 비교합니다. 즉 같은 형으로 바꾸어놓고 비교를 하기때문에 값이 같은지 아닌지만 체크하게 된다. 예를들어, 문자 '1'과 숫자 1은 엄연히 다르지만, A == B의 경우 ToNumber(A) == B로 변환되어 비교되며, 결과는 True로 나타나게 됩니다. 즉, 정확한 비교가 안될 가능성이 매우 높다는 것이다.

 

=== (strict equality)은 강제 형 변환없이 값을 비교하기 때문에 두 값이 서로 다른 형이면, 아니라고 판단합니다. data type이 고려된 보다 정확한 비교라고 할 수 있다.

var num = 0;
var obj = new String("0");
var str = "0";
var b = false;

console.log(num == obj); // true
console.log(num == str); // true
console.log(obj == str); // true
console.log(null == undefined); // true

console.log(num === obj); // false
console.log(num === str); // false
console.log(obj === str); // false
console.log(null === undefined); // false

 

4. 자바스크립트의 형변환

자바스크립트의 형변환은 두가지다