DEVELOPMENT/JavaScript

[JS] 데이터 타입

Watnu 2024. 4. 24. 17:00

 

 

요약

모던 자바스크립트 Deep Deive : 6장 데이터 타입

자바스크립트는 7개의 데이터 타입을 제공한다. 7개의 데이터 타입은 원시타입과 객체타입으로 분류할 수 있다.

기본형(원시 타입, Primitive Type)  / 참조형(Reference Type) : 객체(Object)

 

velog.io/@yujuck

Primitive Type은 값이 담긴 주소값을 바로 복제하는 반면,
Reference Type은 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소값을 복제한다.

 

 

 
 

01. 숫자타입 (Number)

자바스크립트는 독특하게 정수, 실수 모두 하나의 숫자타입으로만 존재한다.

모든 수를 실수로 처리하며, 정수만 표현하기 위한 데이터 타입이 별도로 존재하지 않는다.

var integer = 10; //정수
var double = 10.12; //실수
var negative = -20; //음의 정수
console.log(1 === 1.0); //true

// 숫자 타입은 모두 실수로 처리된다.
console.log(1 === 1.0); // true
console.log(4 / 2);     // 2
console.log(3 / 2);     // 1.5

// 숫자 타입의 세 가지 특별한 값
console.log(10 / 0);       // Infinity : 양의 무한대
console.log(10 / -0);      // -Infinity : 음의 무한대
console.log(1 * 'String'); // NaN : Not a Number
 
 

02. 문자열 타입 (String)

문자열 타입은 텍스트 데이터를 나타내는데 사용한다.
문자열은 작은따옴표(''), 큰따옴표(""), 백틱(``)으로 텍스트를 감싼다.

var string
string = "문자열"; //큰 따옴표
string = '문자열'; //작은 따옴표
string = `문자열`; //백틱

string = '작은따옴표로 감싼 문자열 내의 "큰따옴표"는 문자열로 인식된다.';
string = "큰따옴표로 감싼 문자열 내의 '작은따옴표'는 문자열로 인식된다.";

+ 문자열과 문자열은 + 로 합칠 수 있습니다.

const day = '오늘 미세먼지 ' + '매우 ' + '좋음';
console.log(day); //오늘 미세먼지 매우 좋음

 

+ 숫자와 문자열을 합치면 문자열이 됩니다.

const age = 10 + '살';
console.log(age); //10살
console.log(typeof(age)); //string

 

+ 숫자와 숫자가 합치면 숫자가 됩니다.

const number = 3 + 4;
console.log(number); //7
console.log(typeof(number)); //number
 
 

03. 템플릿 리터럴(Template literals)

ES6 부터 도입되었다. 

백틱(``)으로 사용되고 ${} 을사용해서 문자열과 변수를 같이 사용할 수 있다.

백틱(``)내에서 줄이 바뀌면 알아서 줄 바꿈 출력이 된다.

const num1 = 10;
const num2 = 20;

console.log(`${num1} + ${num2} = ${num1+num2} 입니다.`); // '10 + 20 = 30 입니다.'

console.log(`${num1} + ${num2} 의 값은
${num1+num2} 입니다.`);
/* '10 + 20 의 값은
    30 입니다.'*/
 
 

04. 불리언 타입-논리 (Boolean)

불리언은 true와 false라는 값을 가지는 데이터입니다

* true는 참, false는 거짓

데이터가 true / false는 아니지만 true / false처럼 동작할 수 있다.

일반적으로 0이면 false, 0이아닌 숫자는 true  

if(1){console.log('true로 동작함')};
if(0){console.log('false로 동작안함')};

 

* 불리언 타입사용시 주의할 점 
var o = new Boolean(true); // 이렇게 만들어 사용하면 안됨
var t = true; // 항상 이렇게 사용하기
 
 

05. undefined

undefined라는 데이터 타입은 존재하지 않는 값을 의미하고 자바스크립트에서만 존재합니다.

let result;
console.log(result); // undefined

 

일반적으로 undefined는 변수에 값을 넣지 않았을 때 초기값 자동으로 할당된다.

 

+ 이후에 Typescript에서 체크연산자(?)로 null, undefined 체크를 할 수 있는데 이후 편의성으로 보면 null보다 undefined 사용도 추천한다.

 
 

06. null

null은 undefined와 같이 존재하지 않는 값을 의미한다.

But! undefined 는  어떤 변수를 만들고 그 값을 정의해주지 않았을 때,

         null 은 변수에 의도적으로 값이 없음을 표현하고 싶을 때 대입해주곤 한다.

 

+ null의 typeof값이 object가 나오는 것은 자바스크립트의 설계상의 오류이다. 따라서 null타입을 확인할 때는 typeOf 연산자 대신 일치 연산자(===)를 사용하여야 한다.

var result = null;
console.log(result); //null

console.log(undefined == null); // true
console.log(null === undefined); // false

console.log(typeof null); // 'object'
console.log(typeof undefined); // 'undefined'

 

자주 사용되는 특수문자

1. \n 은 줄 바꿈 문자를 의미

console.log('다람쥐\n토끼');
/*다람쥐
  토끼*/

 

2. \t 은 탭(tab) 키를 누르면 생기는 공간을 만듦(일반적으로 탭키는 2칸/4칸 띄어쓰기와 같다)

console.log('사과\t딸기');
//사과	딸기

 

 

이스케이프

이스케이프란 본래의 기능에서 벗어난다는 것을 의미한다. " " 사이에 " "를 사용하고 싶으면 \를 "앞에 붙여주면 된다.

그러면 "는 문자열을 마친다는 의미가 아닌 단순문자 "가 된다.

const today = "오늘의\" \"미세먼지 보통";
console.log(today);
//오늘의" "미세먼지 보통

//특수문자에도 이스케이프 할 수 있다
const day = "평일과\\n 주말사이";
console.log(day);
//평일과\n 주말사이

 

 
 

07. 심벌 타입 (Symbol)

ES6에 새롭게 추가된 7번째 타입으로, 변경 불가능한 원시 타입의 값이다.
심벌 값은 다른 값과 절대 중복되지 않는 유일 무이한 값이다.

이름의 충돌 위험이 없는 유일한 객체의 Property Key를 만들기 위해 사용한다.

// 심볼 key는 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키
var key = Symbol('key');
console.log(typeof key); 	// symbol

var obj = {};
obj[key] = 'value';
console.log(obj[key]);  	// value
 
 

08. 객체 타입 (Object type, Reference type)

객체는 데이터와 그 데이터에 관련한 동작(절차, 방법, 기능)을 모두 포함할 수 있는 개념적 존재이다.

달리 말해, Property와 Method를 포함할 수 있는 독립적 주체이다.

객체는 참조에 의한 전달 (pass-by-reference)방식으로 전달된다.

 
 

09. 데이터 타입의 필요성

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

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

3. 메모리에서 읽어 들인 2진수의 해석 방법을 결정하기 위해서

즉, 우리가 변수에 할당하려는 값의 '데이터 타입'에 따라 확보해야 할 메모리 공간의 크기가 결정된다.

 

var score = 100;   //변수 선언과 데이터 할당

자바스크립트 엔진이 값의 종류(데이터 타입)에  따라 정해진 크기의 메모리 공간을 확보해 준다.

  1. 100을 number(숫자) 타입의 값으로 해석
  2. 숫자 타입의 100이라는 값을 저장하기 위해 8바이트의 메모리 공간을 확보
  3. 8바이트 메모리 공간중 아래의 사진처럼 맨 마지막위치에서 100을 2진수로 저장

이처럼 데이터를 저장하는 과정에서 얼마의 메모리 공간을 확보할 것인지 알기 위해 데이터 타입이 필요하다.

 

* 리터럴

: 프로그래밍에서 자료를 표기하는 방식

: 리터럴을 사용한다는 것은 변수를 선언하면서 동시에 값을 지정해 주는 방식이라는 뜻

 
 

10. 동적 타입 언어

정적타입 언어( C,C++,Java등) 컴파일 시 데이터타입을 정하는 언어이고

동적타입 언어(python, Javascript, Perl)는 런타임시 데이터타입을 정하는 언어다.

 

정적타입 언어는 정적 타입언어로 변수를 선언할 때 변수에 할당할 수 있는 값의 종류, 즉 데이터 타입을 사전에 선언한다.

동적타입 언어는 변수를 선언할 때 타입을 선언하지 않는다. 다만 var, let, const 키워드를 사용해 변수를 선언한다.

미리 선언한 데이터 타입의 값만 할당할 수 있는 것이 아니라  재할당에 의해 데이터 타입의 값은 언제든지 동적으로 변할 수 있다

 

 

왜 동적 타입 언어가 느릴까요?
현재 많이 쓰이고 있는 Javascript엔진(Safari, Chrome, FireFox 등)은 모두 JITC방식을 사용합니다.
C, Java 등 정적 타입 언어에서는 IR ▶ native code로 변환하는 중에 많은 최적화 기법을 추가할 수 있지만 동적타입 언어는 그렇지 않기 때문입니다.

 

 

 

왜 JILT방식이 Interpreter방식보다 느릴까요?

native code로 만드는 과정에서 많은 예외케이스를 만들어야 하는 compile overhead 때문입니다.
자바스크립트는 동적언어라서 JIT Compiler는 모든 예외적인 케이스를 고려하여 코드를 생성해야 하기 때문입니다.

 

해결책

케이스마다 유동적으로 최적화 수준을 다르게 하여 컴파일하는 방식을 택한다.(adaptive JIT Compilation)