[딥다이브] 003. 데이터 타입

1. 개요

• 자바스크립트는 7개의 데이터타입을 제공
• 7개의 데이터 타입은 원시타입과 객체 타입으로 분류
• 개발자는 명확한 의도를 가지고 타입을 구별해서 값을 생성하고
  엔진은 타입을 구별해서 값을 취급한다

2. 숫자 타입

• 정수, 실수, 음의 정수 모두 실수로 처리

console.log(1===1.0); //true
cossole.log(3/2); // 1.5 ... 정수로 나눠도 실수가 나올 수 있음

• 숫자타입의 3가지 특별한 값

console.log(10 / 0); // Infinity
console.log(10/ -0); // -Infinity
console.log(1 * "String"); // NaN ...대소문자 주의

3. 문자열 타입(string)

• 텍스트 데이터를 나타는 데 사용
• 작은 따옴표(''), 큰따옴표(""), 백틱(``)으로 텍스트를 감쌈
  따옴표로 감싸지 않으면 엔진이 키워드나 식별자 토큰으로 인식

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

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

• 따옴표를 통해 스페이스나 공백문자도 포함 가능
• 원시타입이며 변경 불가능한 값

4. 템플릿 리터럴

• 런타임에 일반 문자열로 변환되어 처리
• 따옴표 대신 백틱(``)으로 표현
• 줄바꿈과 모든 공백이 있는 그대로 적용

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

console.log(template);

//문자열
<ul>
	<li><a href="#">Home</a><li>
</ul>

5. 표현식 삽입

• +연산자 : 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작

var first = "멋쟁이";
var second =  "사자차럼";
console.log(first+second);

//멋쟁이사자처럼

• ${ }으로 표현식을 감싸면 문자열로 타입이 강제변환되어 삽입

console.log(`1 + 2= ${1 + 2}`); // 1 + 2 = 3

6. 불리언 타입

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

7. undefined 타입

• 개발자가 의도적으로 할당하기 위한 값이 아니라 엔진이 변수를 초기화할 때 사용하는 값
• 값을 할당하지 않은 변수를 참조하면 undefined가 반환되며,
  초기화되지 않은 변수라는 것을 파악가능
• 개발자가 의도적으로 undefined를 변수에 할당하면 본래 취지에 어긋남

8. null 타입

• 변수에 값이 없다는 것을 의도적으로 명시하기 위해 사용
• 이전에 할당되어 있던 값에 대한 참조를 명시적으로 제거
• 함수가 유효한 값을 반환할 수 없는 경우 명시적으로 null 반환

var element = document.quertySelectior('.myClass');
console.log(element); // null ... HTM문서에 myClass 클래스를 갖는 요소가 없는 경우

9. 심벌 타입 (33장 공부 후 다시 정리)

• 다른 값과 중복되지 않는 유일무이한 값이며 변경 불가능한 원시 타입의 값
• 이름이 충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용
• 심벌 이외의 원시 값은 리터럴을 통해 생성하지만, 심벌은 Symbol함수를 호출해 생성

//symbol은 동일한 string으로 작성했어도 다른 심볼로 만들어짐

const symbol1 = Symbol('id');
const symbol2 = Symbol('id');
console.log(symbol1 === symbol2); // false

//string이 똑같다면 동일한 symbol을 만들고 싶은 경우
const gSymbol1 = Symbol.for('id');
const gSymbol2 = Symbol.for('id');
console.log(gSymbol1 === gSymbol2); //true

// symbol은 바로 출력하면 에러가 발생, .description을 추가해 string으로 변환해야 함.
console.log(`value: ${symbol1.description}, type: ${typeof symbol1}`);

10. 객체 타입 (11장 "원시 값과 객체의 비교)

11. 데이터 타입의 필요성

• 값을 저장할 때 확보해야하는 메모리 공간의 크기를 결정하기 위해
• 값을 참조할 때 한 번에 읽어 들여야 할 메모리 공간의 크기를 결정하기 위해
  • 값을 참조하는 과정
    • 식별자를 통해 숫자 값이 저장되어 있는 메모리공간의 선두 메모리 셀의 주소를 찾아감
    • 데이터타입을 통해 한 번에 읽어 들여야 할 메모리 셀의 개수 파악하고 값을 참조
• 메모리에서 읽어들인 2진수를 어떻게 해석할지 결정하기 위해
  • 0100 0001을 숫자로 해석하면 65, 문자열로 해석하면 "A"

12. 동적 타이핑

• 정적타입언어(C, 자바)와 동적타입언어(자바스크립트)의 차이
  • 정적타입언어
    • 변수 선언 시점에 타입 결정
    • 변수의 타입을 변경할 수 없음
    • 변수에 선언한 타입에 맞는 값만 할당 가능
    • 컴파일 시점에 타입체크(타입에 맞는 값을 할당했는 지 검사)를 통과하지 못하면
      에러를 발생 시키고 프로그램 실행을 막음
  • 동적 타입 언어
    • 값을 할당하는 시점에 변수의 타입이 동적으로 결정
    • 변수를 선언할 때 타입을 선언하지 않음
    • 어떠한 데이터 타입의 값이라도 자유롭게 할당 가능
    • typeof 연산자: 변수에 할당된 값의 데이터 타입을 반환
• 동적 타입 언어의 문제점
  • 변수 값이 언제든지 변경될 수 있어 값을 추적하기 어려울 수 있음
  • 값을 확인하기 전에 타입을 확신할 수 없음
  • 엔진에 의해 암묵적으로 타입이 자동변환되기도 함
• 변수 사용 시 주의사항
  • 꼭 필요한 경우에 한해 제한적으로 사용 (const > let)
  • 변수의 유효 범위(스코프) 최대한 좁게 만듬
  • 변수의 목적이나 의미를 파악할 수 있도록 네이밍