[JS Deep Dive] 6장. 데이터 타입

lyshine·2023년 3월 22일
0

JS Deep Dive 정리

목록 보기
3/18
  • 데이터 타입은 값의 종류를 말한다.
  • 자바스크립트는 7개의 데이터 타입을 제공한다.
    • 원시타입(Primitive Type)과 객체타입(Reference Type)으로 분류

  • 데이터 타입에 따라 확보해야 할 메모리 공간의 크기도 다르고 저장되는 2진수도 다르며 읽어 들여 해석하는 방식도 다르다.

1. 숫자 타입

  • 자바스크립트에는 하나의 숫자 타입만 존재한다. (배정밀도 64비트 부동소수점 형식 2진수)
  • 모든 수를 실수로 처리하며 정수만으로 표현하는 데이터 타입은 존재하지 않는다.
  • 2진수, 8진수, 16진수를 표현하기 위한 데이터 타입을 제공하지 않기 때문에 이들 값을 참조하면 모두 10진수로 해석된다.
var integer = 10;        // 정수
var double = 10.12;      // 실수
var negative = -20;      // 음의 정수
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

var pInf = 10 / 0;  // 양의 무한대
console.log(pInf);  // Infinity

var nInf = 10 / -0; // 음의 무한대
console.log(nInf);  // -Infinity

var nan = 1 * 'string'; // 산술 연산 불가
console.log(nan);       // NaN

2. 문자열 타입

  • 문자열 타입은 텍스트 데이터를 나타내는데 사용한다.
  • 문자열은 0개 이상의 16bit 유니코드 문자(UTF-16) 들의 집합으로 대부분의 전세계의 문자를 표현할 수 있다.
  • 작은 따옴표(‘’), 큰따옴표(””), 백틱(``) 으로 텍스트를 감싼다.
var string = "string"; // 큰 따옴표
string = 'string';     // 작은 따옴표
string = `string`;     // 백틱(ES6 템플릿 리터럴)

string = "큰 따옴표로 감싼 문자열 내의 '작은 따옴표'는 문자열로 인식된다.";
string = '작은 따옴표로 감싼 문자열 내의 "큰 따옴표"는 문자열로 인식된다.';
  • 자바스크립트의 문자열은 원시 타입으로, 변경 불가능한 값(immutable value)이다. 즉, 문자열이 생성되면 그 문자열을 변경할 수 없다.

3. 템플릿 리터럴

  • ES6부터 템플릿 리터럴이라고 하는 새로운 문자열 표기법이 도입되었다.
  • 멀티라인 문자열, 표현식 삽입, 태그드 템플릿 등 편리한 문자열 처리 기능 제공
  • 백틱 사용
    • 멀티라인 문자열 : 일반 문자열 내에서 줄바꿈 등의 공백을 표현하려면 백슬래시()로 시작하는 이스케이프 시퀀스를 사용해야한다. (\0, \b, \n, \r, \t, \…)

    • 하지만 일반문자열과 달리 템플릿 리터럴 내(백틱사용) 에서는 모든 공백도 있는 그대로 적용된다.

      var template = '<ul>\n\t<li><a href="#">Home</a></li>\n</ul>';
      
      var template = `<ul>
      	<li><a href="#">Home</a></li>
      </ul>`;
    • 표현식 삽입 : 문자열은 문자열 연산자 ‘+’를 사용해 연산할 수 있다.

    • 템플릿 리터럴 내에서는 표현식 삽입을 통해 간단히 문자열 삽입할 수 있다. (${ })

      console.log('My name is ' +first + ' '+ last +'.');
      console.log(`My name is ${first} ${last}.`);

4. 불리언 타입

  • 논리적 참, 거짓을 나타내는 true와 false

5. undefined 타입

  • undefined는 개발자가 의도적으로 할당하기 위한 값이 아닌 자바스크립트 엔진이 변수를 초기화 할 때 사용하는 값이다.
  • 변수에 값이 없다는 것을 명시하고 싶을때는 undefined 가 아닌 null을 사용한다.

6. null 타입

  • null 타입의 값은 null이 유일하다. 자바스크립트는 대소문자를 구별(case-sensitive)하므로 null은 Null, NULL등과 다르다.
  • 변수에 값이 없다는 것을 의도적으로 명시할 때 사용한다. 이는 이전에 할당되어 있던 값에 대한 참조를 명시적으로 제거하는 것을 의미하며, 가비지 콜렉션을 수행할 것이다.
var foo = 'Lee';
foo = null;
  • 함수가 유효한 값을 반환할 수 없는 경우에도 null을 반환하기도 한다.
var element = document.querySelector('.myElem');
// HTML 문서에 myElem 클래스를 갖는 요소가 없다면 null을 반환한다.
console.log(element); // null

7. 심벌 타입

  • ES6에서 추가된 7번째 타입으로 변경 불가능한 원시 타입의 값이다.
  • 심볼은 주로 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키를 만들기 위해 사용한다.
  • Symbol 함수를 호출해 생성
var key = Symbol('key');
console.log(typeof key); // symbol

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

8. 객체 타입

  • 자바스크립트는 객체기반 언어이며, 자바스크립트를 이루고 있는 거의 모든 것이 객체이다!
  • 앞서 살펴본 데이터 타입 이외의 값은 모두 객체 타입이다.

9. 객체 타입의 필요성

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

    메모리에 값을 저장하려면 확보해야 할 메모리 공간의 크기를 결정해야 한다.

    데이터 타입 종류에 따라 정해진 크기의 메모리 공간을 확보한다.

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

  2. 데이터 타입에 의한 값의 해석

    메모리에서 읽어들인 2진수를 어떻게 해석할지 결정하기 위해 객체 타입이 필요하다.

10. 동적 타이핑

  • 자바스크립트는 정적 타입 언어와 다르게 변수를 선언할 때 타입을 선언하지 않는다.
  • 어떠한 데이터 타입의 값이라도 자유롭게 할당할 수 있다.
  • 하지만, 변수 값은 언제든지 변경될 수 있기 때문에 복잡한 프로그램에서는 변화하는 변수 값을 추적하기 어려울 수 있다.

결국 동적 타입 언어는 유연성은 높지만 신뢰성은 떨어진다.

  • 변수는 꼭 필요한 경우에 한해 제한적으로 사용하기
  • 변수의 유효 범위(스코프)는 최대한 좁게 만들기
  • 전역 변수는 최대한 사용하지 않도록 하기. (전역변수는 어디서든 참조/변경이 가능하기 때문에 의도치 않게 값이 변경될 가능성이 높고 흐름을 추적하기 어렵다.)
  • 변수보다는 상수를 사용해 값의 변경을 억제하기 (const 사용)
  • 변수 이름은 변수의 목적이나 의미를 잘 파악할 수 있도록 짓기

0개의 댓글