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

JavaScript의 자료형

자료형

자바스크립트에서 값은 항상 문자열이나 숫자형 같은 특정한 자료형에 속해있다.

자바스크립트에는 크게 8가지의 기본 자료형이 있다.

• 숫자형
• bigint
• 문자형
• 불린형
• null
• undefined
• 객체형
• 심볼형

추가정보들

undefined와 null의 차이

==,===의 차이

 

자바스크립트의 변수는 자료형에 관계없이 모든 데이터 일수 있다.

어떤 순간에는 문자열일수도 있고, 다른 순간에는 숫자가 될 수도 있다.

 

// no error
let message = "hello"; //문자열
message = 123456;//숫자열

 

위 코드와 같이 자료의 타입은 있지만 변수에 저장되는 값이 언제든 바뀔수 있는 언어를 

동적타입언어라고한다.

 

그리고 자바스크립트가 동적타입언어라고 불리는 이유이다.

---

JavaScript만의 특성??

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

느슨한 타입(loosely typed)이란??

아래의 예제를 보고 추가 설명을 하겠다.

(아래 예시는 자바스크립트와 자바를 비교한 코드예시이다.)

/* JavaScript Example (loose typing) */
var a = 13; // Number 선언
var b = "thirteen"; // String 선언

/* Java Example (strong typing) */
int a = 13; // int 선언
String b = "thirteen"; // String 선언

느슨한 타입(JavaScript)은 타입 없이 변수를 선언하는 것이다.

반면에 강력한 타입(strong typing/Java...)을 사용하는 언어는 타입과 함께 변수를 선언해야만 한다.

 

여기서 느슨한 타입에 대해 좀더 설명을 하자면

타입변환에 대해 이해 하면 좀 더 도움이 된다.

---

2)JavaScript 형변환

형변환에는 암시적 변환/ 명시적 변환이 있다.

 

1)암시적 변환

자바스크립트 엔진이 필요에 따라 자동으로 데이터 타입을 변환시키는 것이다.

 

2)명시적 변환

명시적변환이란 개발자가 의도를 가지고 데이터타입을 변환시키는 것이다.

암시적변환

1)더하기(+) 

연산자는 숫자보다 문자열이 우선시 되기때문에,

숫자형이 문자형을 만나면 문자형으로 변환하여 연산된다. (문자 > 숫자)

// 더하기(+)number + number // number
number + string // string
string + string // string
string + boolean // string
number + boolean // number
50 + 50; //100
100 + “점”; //”100점”
“100” + “점”; //”100점”
“10” + false; //”100"
99 + true; //100

2)다른 연산자(-,*,/,%)

다른 연산자(-,*,/,%)는 숫자형이 문자형보다 우선시되기 때문에

더하기와 같은 문자형으로의 변환이 일어나지 않는다. (문자 < 숫자)

//다른 연산자(-,*,/,%)string * number // number
string * string // number
number * number // number
string * boolean //number
number * boolean //number
“2” * false; //0
2 * true; //2

3)동치 비교

아래의 예제는 엄격하지 않은 동치(==) 비교이며, 아래의 결과값은 좌우항 변환 할 경우 모두 ‘0 == 0 이기때문에’ `true` 이다.

여기서 유의해야 할 점은 위의 비교는 엄격하지 않은 동치 비교일 경우이기 때문에,

두 값을 비교할 때 데이터타입을 변환하지 않는 엄격한 동치(===) 비교와 혼동되지 않도록 한다.

null == undefined
“0” == 0
0 == false
“0” == false

명시적변환

명시적변환이란 개발자가 의도를 가지고 데이터타입을 변환시키는 것이다.

타입을 변경하는 기본적인 방법은 `Object(), Number(), String(), Boolean()`

와 같은 함수를 이용하는데 new 연산자가 없다면 사용한 함수는 타입을 변환하는 함수로써 사용된다.

var trans = 100; //NumberObject(trans); //100
console.log(typeof trans); //NumberString(trans); //”100"
console.log(typeof trans); //StringBoolean(trans); //true
console.log(typeof trans); //Bolean

A Type → Number Type

다른 자료형을 숫자타입으로 변형하는 방법은 아래와 같다.

Number()

Number()는 정수형과 실수형의 숫자로 변환한다.

Number(“12345”); //12345
Number(“2”*2); //4

 

명시적변환에 대한 좀 더 자세한 부분은 레퍼런스를 참고하시면 도움이 될 것입니다.

결과적으로 

자바스크립트의 변수는 어떤 특정한 타입과 연결되지 않으며, 모든 타입으로 할당 및 재할당이 가능하다

 

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

 

위와 같은 이유 때문에 느슨한 타입의 동적언어인 JavaScript는 문제가 발생한다.

---

3)느슨한 타입(loosely typed)의 동적(dynamic) 언어의 문제점과 보완할 수 있는 방법

문제점

문제점은 아래 코드 예시를 보면 이해가 빠를것이다.

 

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

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

 

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

 

보완방법 (타입스크립트를 사용하여 암시적 변환을 줄여나가는 것이다)

JavaScript의 단점을 보완하여 정적 타입 체크와 강력한 문법을 추가한
TypeScript를 사용하여 보완 가능

 

타입 스크립트란?

 

언어는 크게 정적 타입과 동적 타입 언어로 구분할 수 있습니다.

타입 스크립트는 자바스크립트에 타입을 부여한 정적 타입 언어입니다.

만약 타입 스크립트를 브라우저에서 실행하려면 파일을 변환하는 트랜스 파일 과정을 거쳐서 사용합니다.

공식적으로는 트랜스 파일이 아닌 컴파일된다고 표현합니다.

 

컴파일의 경우 한 언어로 작성된 소스 코드를 다른 언어로 변환하는 것을 뜻하는 반면,

트랜스 파일의 경우 한 언어로 작성된 소스 코드를 비슷한 수준의 다른 언어로 변환한다는 차이가 있습니다.

 

예를 들어 Java를 컴파일하면 bytecode 코드가 출력되지만,

C++를 트랜스 파일 하면 C가 출력되며 Typescript를 트랜스 파일 하면 Javascript가 출력됩니다.

하지만 공식적으로 컴파일된다고 표현하기 때문에 컴파일이란 용어를 사용하겠습니다.

 

이런 정적 타입 언어는 런타임 이전에 타입이 올바른지에 대한 검사를 시행하며,

동적 타입 언어는 런타임에 프로그램의 타입이 올바른지에 대한 검사를 실행합니다.

만약 래퍼런스 오류를 유발하는 코드가 존재한다면 정적 언어는 컴파일하는 과정에서 오류를 출력하는 반면,

동적 언어는 해당 구문이 실행되는 시점에서 오류를 출력합니다.

 

---

레퍼런스

JavaScript의 타입과 자료구조 - JavaScript | MDN

 

자료형

 

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