[JS] DeepDive(6) 데이터 타입
FrontEnd/Deep Dive

[JS] DeepDive(6) 데이터 타입

728x90

데이터 타입은 값의 종류를 의미한다. 자바스크립트에서는 아래와 같은 7개의 타입을 제공한다.

 

 

 

 

 

 

숫자 타입

 

C나 자바같은 언어의 언어의 경우 double,float,int 등등 다양한 숫자 자료형을 제공하지만 JS는 독특하게 하나의 숫자타입만 가진다.

 

해당 숫자타입은 64비트 부동소수점 형식을 따른다. 즉, JS는 정수를 표현하는 별도의 데이터타입이 없다.

 

var binary = 0b01000001;//2진수
var octal = 0o101; //8진수
var hex = 0x41; //16진수

// 표기법만 다를 뿐 모두 같은 값이다.
console.log(binary); //65
console.log(octal); //65
console.log(hex); //65
console.log(binary === octal) //true
console.log(octal === hex) // true

 

 

JS의 숫자형은 세가지 특별한 값을 표현할 수 있다.

 

Infinity , -Infinity , NaN

 

//숫자 타입의 세 가지 특별한 값
console.log(10 / 0); //Infinity
console.log(10 / -0); //-Infinity
console.log(1 * 'String'); //NaN

 

 

NaN을 쓸때 JS는 대소문자를 구분하므로 틀리지 않게 조심하자.

 

 

 

 

 

문자열 타입

 

JS에서 문자열을 선언하는 방식은 아래와 같이 3가지가 존재한다.

 

var string;
string = '문자열';
stirng = "문자열";
stirng = `문자열`;//(ES6부터 지원)
string = '작은따옴표로 감싼 문자열 내의 "큰따옴표"는 문자열로 인식된다.'
string = "큰따옴표로 감싼 문자열 내의 '작은따옴표'는 문자열로 인식된다."

 

 

 

조금 주의있게 볼 문법은 ES6부터 도입된 템플릿 리터럴이다.

 

백틱 `` 으로 표현하는게 특징이며 기존 문자열과 다르게 공백 문자 등도 편리하게 적용시켜줄 수 있다.

 

 

 

var template = '<ul>\n\t<li><a href="#">Home</a></li>\n</ul>';
console.log(template);

 

var template = `<ul>
	<li><a href="#">Home</a></li>
</ul>`;
console.log(template);

 

 

 

템플릿 리터럴을 활용하면 아래처럼 변수를 활용해서 문자열들도 쉽게 만들어 낼 수 있다.

var first = 'Ung-mo';
var last = 'Lee';

// ES6: 표현식 삽입
console.log(`My name is ${first} ${last}.`); // My name is Ung-mo Lee.

 

 

 

불리언 타입

 

불리언 타입은 true 혹은  false만 저장할 수 있는 타입이다.

 

 

 

undefined

undefined는 해당 값 하나만 가질 수 있는 타입이다.

 

undefined는 자바스크립트 엔진이 변수를 초기화 할때 사용하는 값이다.. 즉 개발자가 아닌 JS엔진이 넣어주는 값이므로 개발자가 의도적으로 undefined를 넣는것은 본래 취지와 어긋나니 권장하지 않는다.

 

이런 경우에는 null을 넣어주도록 하자

 

 

null

 

null 역시 null타입에는 null만 들어갈 수 있다. 개발자가 변수에 값이 없음을 의도적으로 명시할 때 사용할 수 있다.

 

null을 할당한다면 값에대한 참조를 명시적으로 제거하는것을 의미한다. 즉 JS엔진은 해당 공간에 대해 가비지 콜렉션을 수행할 것이다..

 

 

 

심벌 타입

ES6 에서 7번째로 추가된 타입으로 변경 불가능한 원시 타입의 값이다. 

 

심벌에 대해서는 추후 자세히 알아보자.

 

객체 타입

JS의 타입은 크게 원시형과 객체형으로 분류된다.  이 역시 추후에 자세히 알아보자.

 

중요한건 JS은 객체 기반언어로 JS를 이루는 거의 모든 것이 객체란 것을 알아보자.

 

 

 

 

 

 

 

 

데이터 타입의 필요성

 

JS가 변수에 값을 저장할때 데이터 타입에 따라서 정해진 크기의 메모리 공간을 할당한다. 변수에 할당되는 값의 데이터 값에 따라 메모리 크기가 결정되게 된다.

 

 

이전에 말했듯이 컴퓨터는 모든 값을 변수에 저장할 때 2진수로 저장한다. 따라서 해당 2진수를 어떻게 해석할껀지에 대해서도 알 필요가 있다.

 

정리하면 아래와 같다.

 

1. 메모리 공간의 크기 결정

2. 한번에 읽어야하는 메모리 공간의 크기 결정

3. 읽은 2진수의 해석 방법을 결정

 

 

 

 

 

동적 타입 언어

 

자바스크립트는 자료형을 알아서 추론해주는 동적 타입 언어이다. 이는 굉장히 편리하지만 개발자의 의도와 상관없이 타입이 자동으로 변환되어 때때로 원치않는 결과를 나타내기도 한다.

 

즉 동적타입언어이기 때문에 유연성은 높지만 신뢰성은 낮다.

 

 

따라서 변수를 활용할대 아래 법칙을 지켜보자.

 

1. 변수는 꼭 필요한 경우에만 사용하자

2. 변수의 유효범위(스코프)를 최대한 줄여서 부작용을 억제하자.

3. 전역변수의 사용은 최대한 지양하자.

4. 변수보다 상수를 활용하자.

5. 변수 이름을 의미에 맞게 네이밍하자

 

 

여기까지 책을 읽고 되게 뼈를 주는말이 있었다.

 

 

코드는 오해하지 않도록 작성해야 한다. 오해는 커뮤니케이션을 어렵게 하는 대표적인 원인으로 생산성을 떨어뜨리는것은 물론 팀의 사기까지 저하시킨다. 코드는 동작하는것만이 존재 목적이 아니며 개발자를 위한 문서이기도 하다. 따라서 사람이 이해할 수 있는 코드, 즉 가독성이 좋은 코드가 좋은 코드다.

 

 

... 항상 기억하고 지녀야 겠다.

 

 

 

 

 

 

 

 

 

 

 

728x90

'FrontEnd > Deep Dive' 카테고리의 다른 글

[JS] DeepDive(8) 제어문  (0) 2023.07.22
[JS] DeepDive(7) 연산자  (0) 2023.07.21
[JS] DeepDive(5) 표현식과 문  (0) 2023.07.19
[JS] DeepDive(4) 변수  (0) 2023.07.18
[JS] deepDive(3) 자바스크립트 탄생  (2) 2023.07.17