모던 자바스크립트 Deep Dive_데이터 타입

최현호·2022년 7월 4일
JavaScript모던 자바스크립트
0

JavaScript

목록 보기
31/38
post-thumbnail

06_데이터 타입

  • 데이터 타입(data type, 줄여서 타입) 은 값의 종류를 말한다.
  • 자바스크립트의 모든 값은 타입을 갖는다.
  • ES6에서 제공하는 데이터 타입은 7개다.
구분데이터 타입설명
원시타입number숫자, 정수와 실수 구분 없이 하나의 숫자 타입만 존재
boolean논리적 참(true) 과 거짓(false)
undefinedvar 키워드로 선언된 변수에 암묵적으로 할당되는 값
null값이 없다는 것을 의도적으로 명시할 때 사용하는 값
symbolES6에 추가된 7번째 타입
객체 타입객체, 함수, 배열 등
  • 숫자 타입의 값 1 과 문자열 타입의 값 '1' 은 전혀 다른 값이다.
    -> 생성한 목적과 용도가 다르다
    -> 숫자는 주로 산술 연산을 위해 생성
    -> 문자열은 주로 텍스트를 화면에 출력하기 위해 생성
    -> 확보해야하는 메모리공간의 크기도 다르고
    -> 읽어들여 해석하는 방식도 다르다.

6.1 숫자 타입 : number

  • 하나의 숫자 타입만 존재, 모든 수를 실수로 처리
  • 모두 10진수로 해석

자바스크립트는 독특하게 하나의 숫자 타입만 존재

  • C , JAVA 의 경우 정수와 실수를 구분해서 int, long, float, double 등과 같이 다양한 숫자 타입을 사용 한다.
  • 하지만 자바스크립트는 모든 수를 실수로 처리한다.
var integer = 10; // 정수
var double = 10.12; // 실수
var negative = -20; // 음의 정수

자바스크립트는 2진수, 8진수, 16진수 등 표현하기 위한 데이터 타입을
제공하지 않고 모두 10진수로 해석

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

정수로 표시되도 사실 실수를 의미

// 숫자 타입은 모두 실수로 처리
console.log(1 === 1.0); // true

숫자 타입은 아래 세 가지 특별한 값도 표현 할 수 있다.

  • Infinity : 양의 무한대
  • -Infinity : 음의 무한대
  • NaN : 산술 연산 불가(not a number)
console.log(10 / 0); // Infinity
console.log(-10 / 0); // -Infinity
console.log(1 * 'String'); // NaN

6.2 문자열 타입 : string

문자열 타입은 텍스트 데이터를 나타내는 데 사용한다.

  • 0개 이상의 16비트 유니코드 문자(UTF-16)의 집합으로 전 세계 대부분의 문자를 표현할 수 있다.
  • 작은따옴표(''), 큰따옴포(""), 또는 백틱(``) 으로 텍스트를 감싼다.
  • 가장 일반적인 표기법은 작은 따옴표를 사용
  • 원시 타입이며, 변경 불가능한 값이다.( 문자열이 생성되면 그 문자열을 변경할 수 없다는 의미)
var string;
string = '문자열'; // 작은 따옴표
string = "문자열"; // 큰 따옴표
string = `문자열`; // 백틱

문자열을 따옴표로 감싸는 이유

  • 키워드나 식별자 같은 토큰과 구별하기 위해서다.
  • 또한, 스페이스와 같은 공백 문자도 포함시킬 수 없다.

6.3 템플릿 리터럴

ES6부터 템플릿 리터럴이라고 하는 새로운 문자열 표기법이 도입.

  • 멀티라인 문자열
  • 표현식 삽입
  • 태그드 템플릿

위의 세 개 등 편리한 문자열 처리 기능을 제공한다. - 일반적으로 백틱 사용

var template = `Template literal`;
console.log(template); // Template literal

6.3.1 멀티라인 문자열

  • 일반 문자열 내에서는 줄바꿈(개행)이 허용되지 않는다.
var str = 'Hello
world.'; / SyntaxError : Invalid or unexpectied token

따라서 일반 문자열 내에서 줄바꿈 등의 공백을 표현하려면 백슬래시로 시작하는 이스케이프 시퀀스를 사용해야 한다.

이스케이스 시퀀스의미
\0Null
\b백스페이스
\f폼 피드(Form Feed) : 프린터로 출력할 경우 다음 페이지의 시작 지점으로 이동
\n개행(LF,Line Feed) : 다음 행으로 이동
\r개행(CR, Carriage Return) : 커서를 처음으로 이동
\t탭(수평)
\v탭(수직)
\uXXXX유니코드. 예를 들어'\u0041'은 'A', '\uD55c'는 '한',
\'작 따옴표
\"큰 따옴표
\백슬래시

예를 들어, 줄바꿈과 들여쓰기가 혀용된 HTML 문자열 아래 코드로 작성한다.

var template = '<ul>\n\t<li><a href="#">Home</a></li>\n</ul>';

// 출력 결과
<ul>
  <li><a href="#">Home</a></li>
</ul>

일반 문자열과 달리 템플릿 리터럴 내에서는 이스케이스 시퀀스를 사용하지 않고도
줄바꿈이 허용되며, 모든 공백도 그대로 적용된다.

var template = `<ul>
	              <li><a href="#">Home</a></li>
                </ul>`;

6.3.2 표현식 삽입

문자열은 문자열 연산자 + 를 사용해 연결 할 수 있다.

  • + 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다.
  • 그 외의 경우는 덧셈 연산자로 동작한다.
문자열 연산자 사용 예
var first = 'Ung-mo';
var last = 'Lee';

// ES5 : 문자열 연결
console.log('My name is' + first + '' + last + '.'); 
// My name is Ung-mo Lee.

템플릿 리터럴을 사용하면

  • 표현식 삽입을 통해 간단히 문자열을 삽입할 수 있다.
  • ${} 을 사용
  • 이를 통해 문자열 연산자보다 가독성 좋고 간편하게 문자열을 조합할 수 있다.
var first = 'Ung-mo';
var last = 'Lee';

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

6.4 불리언 타입

불리언 타입의 값은 논리적 참, 거짓을 나타내는 true 와 false 뿐이다.

var foo = true;
console.log(foo) // true;

foo = false;
console.log(foo) // false;
  • 불리언 타입은 참과 짓으로 구분되는 조건문에서 자주 사용 한다.

6.5 undefined 타입

undefined 타입의 값은 undefined가 유일

var 키워드로 선언한 변수는 암묵적으로 undefined 로 초기화 된다.
다시 말해, 변수 선언에 의해 확보된 메모리 공간을 처음 할당이 이뤄질 때까지 빈 상태로 내버려두지 않고 자바스크립트 엔진이 undefined로 초기화 한다.

var foo;
console.log(foo); // undefined

이처럼 undefined 는 개발자가 의도적으로 할당하기 위한 값이 아니라 자바스크립트 엔진이 변수를 초기화 할 때 사용하는 값이다.

  • 변수를 참조했을 때 undefined 가 반환 된다면 참조한 변수가 선언 이후 값이 할당된 적 없는, 즉 초기화되지 않은 변수라는 것을 간파할 수 있다.
  • 변수에 값이 없다는 것을 명시하고 싶을 때는 undefined를 할당하는 것이 아닌 null을 할당

6.6 null 타입

null 타입의 값은 null이 유일하다.

자바스크립트는 대소문자를 구별하므로 null 은 Null, NULL 등과는 다르다.
프로그래밍 언어에서 null은 -> 변수에 값이 없다는 것을 의도적으로 명시 할 때 사용한다.

  • 변수에 null 을 할당하는 것은 변수가 이전에 참조하던 값을 더 이상 참조하지 않겠다는 의미
  • 이는, 이전에 할당되어 있던 값에 대한 참조를 명시적으로 제거
  • 자바스크립트 엔진은 누구도 참조하지 않는 메모리 공간에 대해 가비지 콜렉션을 수행
var foo = "Lee";
foo = null;
// 이전 참조를 제거, foo는 더 이상 'Lee'를 참조하지 않는다.

6.7 심벌 타입

symbol은 ES6에서 추가된 7번째 타입. 변경 불가능한 원시 타입의 값

  • 다른 값과 중복되지 않는 유일무이한 값
  • 주로 이름이 충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용
// 심벌 값 생성
var key = Symbol('key');
console.log(typeof key); // symbol

// 객체 생성
var obj = {};

// 이름이 충돌할 위험이 없는 유일무이한 값인 심벌을 프로퍼티 키로 사용
obj[key] = 'value';
console.log(obj[key]); // value;

6.8 객체 타입

  • 자바스크립트의 데이터 타입은 원시타입 과 객체타입 으로 분류하는 이유는 원시타입과 객체타입이 근본적으로 다르다는 의미.
  • 자바스크립트는 객체 기반의 언어이며, 자바스크립트를 이루고 있는 거의 모든 것이 객체라는 것.
  • 지금까지의 6가지 데이터 타입 이외의 값은 모두 객체 타입

6.9 데이터 타입의 필요성

데이터 타입이 필요한 이유 ?
1. 데이터 타입에 의한 메모리 공간의 확보와 참조
2. 데이터 타입에 의한 값의 해석


6.9.1 데이터 타입에 의한 메모리 공간의 확보와 참조

  • 값은 메모리에 저장하고 참조 할 수 있어야 한다.
    - 메모리에 값을 저장하려면 먼저 확보해야 할 메모리 공간의 크기를 결정
    - 몇 바이트의 메모리 공간을 사용해야 낭비와 손실 없이 값을 저장할 수 있는 지 알아야 한다.
var score = 100;

만약 위의 코드가 실행되면, 컴퓨터는 숫자 값 100을 저장하기 위해 메모리 공간을 확보한 다음,
확보된 메모리에 숫자 값 100을 2진수로 저장한다.
-> 이러한 처리를 하려면 숫자 값을 저장할 때 확보해야 할 메모리 공간의 크기를 알아야 한다.

자바스크립트 엔진은 데이터 타입. 즉, 값의 종류에 따라 정해진 크기의 메모리 공간을 확보 한다.
-> 즉, 변수에 할당되는 값의 데이터 타입에 따라 확보해야 할 공간의 크기가 결정된다.


6.9.2 데이터 타입에 의한 값의 해석

  • 모든 값은 데이터 타입을 가지며, 메모리에 2진수 즉, 비트의 나열로 저장.
  • 메모리에서 읽어 들인 2진수를 어떻게 해석하느냐?
    -> 메모리에 2진수의 01000001을 숫자로 해석하면 65, 문자열로 해석하면 'A'
    -> 따라서, 앞서 들어온 변수의 타입을 보고 해석한다.

정리

  • 값을 저장할 때 확보해야 하는 메모리 공간의 크기 를 결정하기 위해
  • 값을 참조할 때 한 번에 읽어 들어야 할 메모리 공간의 크기 를 결정하기 위해
  • 메모리에서 읽어 들인 2진수를 어떻게 해석할지 결정하기 위해

6.10 동적 타이핑

6.10.1 동적 타입 언어와 정적 타입 언어

  • C나 JAVA 같은 정적 타입 언어 는 변수를 선언할 때 변수에 할당할 수 있는 값의 종류
    -> 데이터 타입을 사전에 선언해야 한다.
    -> 이를 명시적 타입 선언 이라 한다.
// c 변수에는 1바이트 정수 타입의 값(-128 ~ 127)만 할당 할 수 있다.
char c;

  • 정적 타입 언어는 컴파일 시점에 타입 체크(선언한 데이터 타입에 맞는 값을 할당했는지 검사하는 처리)를 수행
    -> 만약 타입 체크를 통과하지 못했다면 에러를 발생시키고 프로그램의 실행 자체를 막는다.
    -> 타입의 일관성을 강제함으로써 더욱 안정적인 코드의 구현을 통해 런타임에 발생하는 에러를 줄인다.

  • JavaScript 는 정적 타입 언어와 다르게 변수를 선언 할 때 타입을 선언하지 않는다.
    -> 다만 var, let, const 키워드를 사용해 변수를 선언할 뿐이다.
    -> 정적 언어와 같이 미리 선언한 데이터 타입의 값만 할당할 수 있는 것이 아닌, 어떠한 데이터 타입의 값이라도 자유롭게 할당이 가능
    -> 변수에 값을 할당하는 시점에 변수의 타입이 동적으로 결정
    -> 변수의 타입은 언제든지 자유롭게 변경 가능
    -> 동적 타입 언어

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


6.10.2 동적 타입 언어와 변수

동적 타입 언어는 변수에 어떤 데이터 타입의 값이라도 자유롭게 할당할 수 있다.
하지만, 편리함의 이면에는 위험이 따른다.

모든 소프트웨어 아키텍처는 트레이드오프(trade-off) 가 존재하며,
모든 애플리케이션에 적합한 은 탄환(silver bullet)은 없듯이 동적 타입 언어 또한 구조적인 단점이 있다

트레이드오프(trade-off): 두 개의 정책이나 목표 중 하나를 달성하려고 하면 다른 목표의 달성이 늦어지고나 희생되는 모순적 관계를 의미.
ex )실업률을 줄이면 물가가 상승하고, 물가를 안정시키면 실업률이 높아진다.

  • 자바스크립트는 개발자의 의도와 관계없이 엔진에 의해 암묵적으로 타입이 자동으로 변환 되기도 한다.
  • 결국, 동적 타입 언어는 유연성은 높지만 신뢰성은 떨어진다.

좋은 코드는 ?

  • 오해의 여지가 없는 코드
  • 오해는 커뮤니케이션을 어렵게 하는 대표적인 원인
    -> 생산성을 떨어뜨리고, 팀의 사기까지 저하 시킨다.
  • 따라서, 사람이 이해할 수 있는 코드, 가독성이 좋은 코드가 좋은 코드다.
profile
최현호
현재 블로그 : https://choi-hyunho.com/
이전 포스트

모던 자바스크립트 Deep Dive_표현식과 문

다음 포스트

모던 자바스크립트 Deep Dive_연산자

0개의 댓글