06. 데이터 타입

타입, 원시타입, 객체타입, JS의 7개 타입, BigInt, 템플릿 리터럴, 이스케이프 시퀀스, 데이터 타입 필요성, 동적 타이핑, 동적 타입 언어

데이터 타입

• 줄여서 ‘타입’이라고도 표현
• 값의 종류를 의미
• 자바스크립트(ES6 기준) 7개의 데이터 타입 제공
  • JS의 모든 값은 데이터 타입을 갖는다.
  • ES11에서 추가된 BigInt!

JS의 7가지 데이터 타입

구분	데이터 타입	설명
원시타입	number 타입	숫자 (정수, 실수 구분 X)
	string 타입	문자열
	boolean 타입	논리적 참과 거짓 (true / false)
	undefined 타입	var 키워드로 선언된 변수에 암묵적 할당되는 값
	null 타입	값이 없음을 의도적 명시할 때 사용되는 값
	symbol 타입	ES6에서 추가된 7번째 타입
객체 타입		객체, 함수, 배열 등

6.1 숫자 타입

JS의 Number type의 특징

1. JavaScript는 ECMAScript 사양에 따르면 숫자 타입의 값이 배정밀도 64비트 부동소수점 형식을 따른다.따라서, 정수로 표시되는 수끼리 나누더라도 실수가 나올 수 있다.
2. console.log(1 === 1.0); // true console.log(3 / 2); // 1.5
3. → 모든 수 실수 처리! 정수만 표현하기 위한 데이터 타입 별도 존재 X
4. 진수를 표현하기 위한 데이터 타입 제공 X → 2/8/16 진수 참조 시 모두 10진수로 해석
5. var binary = 0b01000001; var hex = 0x41; console.log(hex); // 65
6. 아래와 같이 추가적인 특별한 세가지 값 표현 가능
   • Infinity: 양의 무한대
   • -Infinity: 음의 무한대
   • NaN: Not a Number, 산술 연산 불가
7. JS는 대소문자를 구별하기에 NaN을 NAN, nan처럼 표현하면 에러 발생!! 식별자로 해석된다.
8. → Not a Number를 나타내고 싶다면 꼭 NaN이라고 올바르게 명시해줄 것

6.2 문자열 타입

• 텍스트 데이터를 나타내는데 사용하는 타입
• 0개 이상의 16비트 유니코드 문자(UTF-16)의 집합 ⇒ 전세계 대부분의 문자 표현 가능
• 작은 따옴표, 큰 따옴표 또는 백틱으로 텍스트를 감싸 표현
  • JS에서 가장 일반적인 문자열 표기법은 작은 따옴표 사용 방식

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

• 키워드나 식별자 같은 토큰 구분을 위해 필요
  • 감싸지 않는 경우 JS 엔진이 문자열이 아닌 식별자나 키워드 같은 토큰으로 인식
• 따옴표로 감싸지 않는다면 스페이스와 같은 공백 문자 포함 불가

JS의 문자열 타입의 특징

1. 원시 타입
2. 변경 불가능한(immutable) 값 → 문자열 생성 후 문자열 변경 불가

6.3 템플릿 리터럴

• ES6부터 도입된 새로운 문자열 표기법
• 멀티라인 문자열, 표현식 삽입, 태그드 템플릿 등의 문자열 처리 기능 제공
• 기존 문자열 표기법보다 편리한 문자열 처리 기능을 제공하며, 런타임 시 일반 문자열로 변환돼 처리
• 백틱(`)을 사용해 표현

6.3.1 멀티라인 문자열

일반 문자열 내에선 줄바꿈(개행) 허용 X → 템플릿 리터럴에선 사용 가능

var str = 'Hello
world.'; // SyntaxError 발생

var str2 = `Hello
world.`;

일반 문자열에서 줄바꿈 등의 공백 표현 시 이스케이프 시퀀스 사용 필요

이스케이프 시퀀스

이스케이프 시퀀스	의미
\0	Null
\b	백스페이스
\f	Form Feed: 프린터 출력 시 다음 페이지의 시작 지점으로 이동
\n	Line Feed(개행): 다음 행으로 이동
\r	Carriage Return(개행): 커서를 처음으로 이동
\t	탭(수평)
\v	탭(수직)
\uXXXX	유니코드
\’	작은 따옴표
\”	큰 따옴표
\	백슬래시

 

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

console.log(template);
console.log(template2);
// 두 결과는 아래와 동일하다.

<ul>
  <li>
    <a href="#">Home</a>
  </li>
</ul>

6.3.2 표현식 삽입

+ : 문자열 연산자, 피연산자 중 하나 이상이 문자열인 경우 문자열 연산자로 동작 (그 외엔 덧셈 연산자)

${} : 표현식 삽입 문법, 평가 결과가 문자열이 아니더라도 문자열로 타입이 강제 변환돼 삽입 ⇒ 반드시 템플릿 리터럴 내에서만 사용해야 한다. 일반 문자열에서는 문자열로 취급되기 때문!

const first = 'Min-ji';
const last = 'Cho';

// ES5: 문자열 연결
console.log('My name is' + first + ' ' + last + '.');
console.log(`My name is ${first} ${last}.`);
// 두 출력 결과 모두 My name is Min-ji Cho.

6.4 불리언 타입

• 논리적 참, 거짓을 나타내는 true와 false뿐!
• 참과 거짓으로 구분되는 조건에 의해 프로그램 흐름을 제어하는 조건문에서 자주 사용!

6.5 undefined 타입

• 해당 타입에 속하는 값은 undefined가 유일
• var 키워드 변수 선언 시 암묵적으로 undefined 할당
  • 개발자 의도 X JS 엔진이 변수 초기화 시 사용하는 값
• 변수에 값이 없음을 명시하고 싶을 땐 null을 할당하는 것이 바람직하다.

6.6 null 타입

• 해당 타입에 속하는 값은 null이 유일
• 변수에 값이 없음을 의도적 명시(의도적 부재)할 때 사용
• 변수에 null을 할당하는 의미: 이전 참조 값을 더이상 참조하지 않겠다는 뜻 → 이전 할당 값에 대한 참조 명시적 제거 (따라서 JS엔진이 가비지 콜렉션 수행)
• 함수가 유효한 값의 반환이 불가한 경우에도 null을 반환!
  • document.querySelector() : 조건 부합 HTML 요소 X → error 대신 null 반환

6.7 심벌 타입

• ES6에서 추가된 7번째 타입
• 변경 불가능한 원시 타입 값
• 다른 값과 중복되지 않는 유일무이 값
  • 이름 충돌 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 주로 사용
• Symbol()를 호출해 생성
  • 생성된 값은 외부 노출 X, 다른 값과 절대 중복 X
• 예시 코드 추가되면 좋겠당

6.8 객체 타입

11장 “원시 값과 객체의 비교”에서 자세히 다룰 예정!

JS의 데이터 타입은 크게 원시 타입과 객체 타입으로 분류되며, JS는 객체 기반의 언어이기에 JS를 이루고 있는 거의 모든 것이 객체라는 사실이 중요하다!!

앞에 6가지 타입 이외의 값은 모두 객체 타입이다!!

6.9 데이터 타입의 필요성

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

• 값은 메모리에 저장해 참조 가능해야 한다.
  • 메모리에 값 저장 시 먼저 확보해야 할 메모리 공간의 크기 결정 필요 → 몇 바이트의 메모리 공간을 사용해야 낭비와 손실 없이 값을 저장할 수 있는지 알아야 한다.
• JS 엔진은 데이터 타입(값의 종류)에 따라 정해진 크기의 메모리 공간을 확보 → 변수의 할당 값의 데이터 타입에 따라 확보해야 할 메모리 공간의 크기 결정!
• 값 참조 시 식별자를 통해 참조하고자 하는 값이 저장된 메모리 공간의 선두 메모리 셀의 주소를 찾아갈 수 있다.
  • 이때 한 번에 읽어 들여야 할 메모리 공간의 크기(메모리 셀의 개수)를 알아야 한다.
  • 컴퓨터는 메모리 셀의 크기를 어떻게 아는가?
    • 변수에 할당된 값의 데이터 타입으로 식별

심벌 테이블

컴파일러 or 인터프리터가 가진 자료 구조

식별자를 키로 바인딩된 값의 메모리 주소, 데이터 타입, 스코프 등을 관리

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

메모리엔 항상 2진수로 저장되고, 같은 2진수라도 문자열로 해석 될 수도, 숫자로 해석될 수도 있다.

데이터 타입을 통해서 메모리 주소에서 읽어들인 2진수를 해당 데이터 타입으로 해석할 수 있다.

데이터 타입이 필요한 3가지 이유

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

6.10 동적 타이핑

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

정적 타입 언어

• C, Java 등
• 변수 선언 시 데이터 타입 사전 선언 필요 ⇒ 명시적 타입 선언
• 컴파일 시점에 타입 체크 수행 ⇒ 타입 체크 미통과 시 에러 발생 + 프로그램 실행 X
  • 타입 일관성을 강제하여 더욱 안정적인 코드 구현 ⇒ 런타임 시 발생 에러 감소

동적 타입 언어

• JS, Python 등
• 어떤 데이터 타입의 값이라도 자유롭게 할당 가능
• 값을 할당하는 시점에 변수 타입이 동적으로 결정
• 변수 타입을 언제든 자유롭게 변경 가능

자바스크립트의 변수

• 선언이 아닌 할당에 의해 타입 결정(타입 추론)
• 재할당에 의해 변수 타입은 언제든 동적으로 변화 가능 ⇒ 동적 타이핑
• 변수가 타입을 갖는 것이 아닌 변수에 할당된 값이 타입을 갖는 것!

typeof 연산자

• 변수에 할당된 값의 데이터 타입 반환

6.10.2 동적 타입 언어와 변수

단점

1. 동적 타입 언어에서의 변수 값은 언제든 변경 가능하여 복잡한 프로그램에선 변화하는 변수 값 추적의 어려움 발생
2. 값의 변경에 의해 타입이 언제든 변경 가능하기에 값 확인 전엔 타입 확신 불가
3. JS는 JS엔진에 의해 암묵적 타입 자동 변환 발생 → 잘못된 예측으로 오류 발생

⇒ 유연성은 높지만 신뢰성은 떨어지는 언어.

변수 사용 시 주의 사항

변수 사용 이전 데이터 타입 체크가 필요하지만, 이는 번거롭고 코드 양도 증가하게 되기에 아래와 같은 주의 사항을 따르면 좋다!

1. 변수는 꼭 필요한 경우에만 제한적으로 사용할 것
2. 변수의 유효 범위(스코프)는 최대한 좁게 만들 것 → 변수 부작용 억제
3. 변수보다는 상수를 사용할 것 → 값의 변경 억제
4. 변수 이름은 변수 목적,의미 파악 가능하게 네이밍할 것

가독성이 좋은 코드가 좋은 코드다 !!