현충일 연휴를 공부로 시작해보겠다는 나의 강력한 의지 !!!!
지금 이 시간이 분명 나에게 도움이 될 것이다 ! 바로 티가 나지 않더라도 개념을 차곡차곡 쌓아서 아주 튼튼한 자스 인간이 되어보자고 ~

1. 정의

• 데이터 타입 은 값의 종류를 뜻함

자스의 모든 값은 데이터 타입을 갖는다. ES6에선 총 7개의 데이터 타입을 제공한다. 7개의 데이터 타입은 원시 타입과 객체 타입으로 구분할 수 있다.

1-1. 원시 타입

• 숫자 타입
• 문자열 타입
• 불리언 타입
• undefined 타입
• null 타입
• 심벌 타입

1-2. 객체 타입

• 객체 타입 : 객체, 함수, 배열 등

각각의 데이터 타입은 값을 생성한 목적과 용도가 모두 다르다. 또한 확보해야 할 메모리 공간의 크기, 메모리에 저장되는 2진수도 다르며 해석하는 방식도 다르다. 같은 텍스트인 1과 '1'로 생각하면 쉽다 !

2. 숫자 타입

자바스크립트에선 소수점 이하가 없는 정수와 소수점 이하가 있는 실수를 구분하지 않고 하나의 숫자 타입만이 존재한다. ECMAScript 사양에 따르면 숫자 타입은 배정밀도 64비트 부동소수점 형식(완전 읭이지만 넘어가보자 ~)을 따르는데 즉 모든 수를 실수로 처리한다는 뜻 ! 정수만을 표기하기 위한 데이터 타입이 따로 없다. 완전 실수를 사랑하는 자바스크립트인거야 ~

2-1. 숫자 타입의 저장 및 해석

• 숫자 타입의 저장

정수, 실수, 2진수, 8진수, 16진수 리터럴은 모두 배정밀도 64비트 부동소수점 형식(또 등장~)의 2진수로 저장된다.

• 숫자 타입의 해석

2진수로 저장된 숫자타입은 2진수, 8진수, 16진수를 표현하기 위한 데이터 타입을 제공하지 않기 때문에 이 값을 참조하면 모두 10진수로 해석된다.

2-2. 모든 수를 실수로 처리하는 자바스크립트

자바스크립트에서 숫자 유형의 데이터가 정수로 보여도 사실은 모두 실수다. 따라서 정수로 표시되는 수끼리 나누더라도 실수가 나올 수 있다.

2-3. 숫자 타입의 세 가지 특별한 값

• Infinity
• -Infinity
• NaN

console.log(10 / 0) // Infinity
console.log(10 / -0) // -Infinity
console.log(1 / 'text') // NaN

자바스크립트는 대소문자를 구별하니 유의해서 작성하지 않으면 식별자로 해석하여 오류가 나니까 조심할 것 !

3. 문자열 타입

문자열 타입 은 텍스트 데이터를 나타내는데 사용됨. 당연한 얘기 ~
문자열은 0개 이상의 16비트 유니코드 문자의 집합으로 전 세계 대부분의 문자를 표현할 수 있다.

3-1. 문자열 표기 방법

• 작은 따옴표
• 큰 따옴표
• 백틱 (4. 템플릿 리터럴 참고)

3가지의 표기 방법이 있지만 가장 일반적으로 사용되는 방법은 작은 따옴표이다.

3-2. 문자열을 따옴표로 감싸는 이유

따옴표로 감싸는 이유는 키워드, 식별자와 같은 토큰과 구분하기 위해서이다.
또한 스페이스와 같은 공백문자를 포함하기 위해서도 따옴표가 꼭 필요하다.
자바스크립트의 문자열은 원시타입인데, 이는 변경 불가능한 값을 의미한다. 즉 문자열이 한번 생성되면 그 문자열을 바꿀 수 없다는 뜻. 하지만 ,, 나는 문자열을 바꿔왔던 것 같은데 ... ? 이에 대해선 11장에 나온다고 하니 꾸욱 참아봐야겠다 ~!

( + ) 11장 공부 후 ! 원시값은 변경이 불가능한 것이 맞다.
새로운 원시 값을 재할당하는 경우 ! 새로운 메모리 공간을 확보하여 재할당된 원시 값을 저장하고 변수는 재할당된 원시 값을 가리킨다.

4. 템플릿 리터럴

템플릿 리터럴 은 ES6부터 도입된 새로운 문자열 표기법이다.
멀티라인 문자열, 표현식 삽입, 태그드 템플릿 등의 편리한 문자열 처리 기능을 제공한다. 템플릿 리터럴은 런타임에 일반 문자열로 전환되어 처리된다.

템플릿 리터럴은 백틱(``)을 사용하여 표현한다.

4-1. 멀티라인 문자열

일반 문자열에선 줄바꿈이 허용되지 않아서 줄바꿈 등의 공백을 표현하기 위한 이스케이프 시퀀스를 사용했다.

줄바꿈(개행) 관련 이스케이프 시퀀스의 종류

• 개행 문자에는 라인피드(LF)와 캐리지 리턴(CR)이 있다. 현대 컴퓨터 운영체제는 서로 다른 체계의 개행 체제를 사용한다. 윈도우는 CR+LF, 유닉스는 LF, macOS는 버전 10부터 LF를 사용한다.
• 서로 다른 운영 체제에서 작성된 텍스트 파일은 서로의 개행 문자를 인식하지 못하지만 대부분의 텍스트 에디터가 이것을 자동 변환하여 문제는 없다. (휴~)

// 일반 문자열
var template = '<ul> \n\t <li>text</li> \n </ul>'

// 템플릿 문자열
var template = `<ul>
	<li>text</li>
</ul>`

4-2. 표현식 삽입

문자열 연산자인 +를 사용해 문자열을 연결할 수 있다.
이때, + 연산자는 피연산자 중 하나 이상이 문자열인 경우에만 문자열 연결 연산자로 동작하고, 그 외의 경우는 덧셈 연산자로 동작한다.

템플릿 리터럴 내에선 가독성이 높고 간편하게 표현식을 삽입할 수 있다.
이때 표현식의 평가 결과(값)이 문자열이 아니더라도 문자열로 타입이 강제 변환되어 삽입된다는 것을 잊지말자 !

var first = 'sozzang';
var last = 'Lee';

// 일반 문자열
console.log('My name is ' + first + ' ' + last + '.');
// 템플릿 문자열
console.log(`My name is ${first} ${last}.`)

5. 불리언 타입

불리언 타입의 값은 true, false 두 가지의 값만이 존재한다.
불리언 타입은 프로그램의 흐름을 제어하는 조건문에서 자주 사용되는데 추후 조건문 파트에서 자세히 다뤄보겠다 !

6. undefined 타입

undefiend 타입의 값은 undefiend가 유일하다.

• var 키워드로 선언된 변수는 암묵적으로 undefiend로 초기화된다.

변수 선언에 의해 확보된 메모리 공간(아직 할당하지 않은)에 쓰레기 값이 들어있지 않도록 자스 엔진이 undefiend로 초기화 하는 것이다. 따라서 변수 선언 이후 값을 할당하지 않은 변수를 참조하면, undefined가 반환된다.

• 의도적으로 비어있는 값을 표기할 땐 null 값을 사용한다.

undefiend 값은 개발자가 의도적으로 할당한 값이 아닌, 자바스크립트 엔진이 변수를 초기화할 때 사용하는 값이다. 개발자가 의도적으로 비어있는 값을 나타내기 위해 undefined를 사용하면 혼란을 줄 수 있다. 아래 7. null을 참고해보시라.

7. null 타입

null 타입의 값은 null이 유일하다.
대소문자를 구별하므로 오타나지 않도록 유의할 것 !

null은 변수에 값이 없다는 것을 의도적으로 명시할 때 사용한다. null을 할당하는 것은 변수가 이전에 참조하던 값을 더 이상 참조하지 않겠다는 의미 ! 이때 자스 엔진은 누구도 참조하지 않는 메모리 공간에 대해 가비지 컬렉션을 수행한다.

함수가 유효한 값을 반환할 수 없는 경우에도 명시적으로 null을 반환한다. document.querySelector 메서드를 통해 부합하는 HTML 요소를 검색할 수 없는 경우에 에러 대신 null을 반환한다.

8. 심벌 타입

심벌 타입은 ES6에서 추가된 타입이다. 변경 불가능한 원시 타입의 값이며 중복되지 않는 유일무이한 값 이다.

8-1. 심벌 생성

심벌 이외의 원시 값은 리터럴을 통해 생성하지만, 심벌은 Symbol 함수를 호출해서 생성한다.

var key = Symbol('key');

9. 객체 타입

위에서 살펴보았던 7가지의 원시 타입과 객체 타입은 근본적으로 다르다. 자세한 내용은 11장에서 다룰 예정이다. 자바스크립트는 객체 기반의 언어이고, 자바스크립트를 이루고 있는 거의 모든 것이 객체라는 것이 아주 중요하다 !

10. 데이터 타입의 필요성

10-1. 데이터 타입의 의한 메모리 공간의 확보

메모리에 값을 저장 하려면 먼저, 확보해야 할 메모리의 공간의 크기를 결정해야한다. 낭비와 손실 없이 값을 저장할 수 있도록 메모리 공간의 크기를 미리 결정하는 것이다.

1. 확보해야 할 메모리 공간의 크기 결정
2. 확보한 메모리 공간에 값 저장

var score = 100;

위의 코드가 실행되면 컴퓨터는 1) 숫자 값 100을 저장하기 위한 메모리 공간을 확보하고 2) 확보된 메모리에 숫자 값 100을 2진수로 저장한다.

데이터의 타입에 따라 얼만큼의 메모리 공간의 크기를 확보해야할지 결정된다. 리터럴 100을 숫자 타입으로 해석, 숫자 타입의 값 100을 저장하기 위해 8 바이트의 메모리 공간을 확보하여 2진수로 저장한다.

ECMAScript 사양에선 문자열과 숫자 타입의 크기만 명시적으로 규정하고 있다. 이때 숫자 타입은 8바이트로 숫자를 표현하므로 숫자 값의 크기를 8 바이트로 설명한다.

이전에 변수 선언 후 값을 할당하지 않은 변수에도 데이터 타입을 명시하라는 말을 들은 적 있었는데, 그 이유가 이것인 것 같다. 앞으로 변수 선언 후 문자열을 추가할 것이라면 ' ' 을 미리 할당해줘야겠다 !
=> 잘못된 정보라면 댓글로 알려주세요 !

10-2. 데이터 타입의 의한 메모리 공간의 참조

값을 참조 할 땐 아래의 순서를 따른다.

1. 식별자를 통해 해당 값이 저장되어 있는 메모리 공간의 주소 탐색
2. 한 번에 읽어들여야 할 메모리 공간의 크기를 계산
3. 저장된 값을 읽음

   2번 과정을 위해서 데이터 타입을 참조함

식별자 score를 통해 값 100이 저장되어 있는 메모리 공간의 주소로 찾아간다. 엄밀히 말하면 숫자 값 100이 저장되어 있는 메모리 공간의 선두 메모리 셀의 주소를 찾는 것이라고 한다. 메모리 주소를 찾아갔으면 이제, 어떤 데이터의 틀을 가지고 해당 데이터를 읽을지 결정해야한다. 이때 100은 숫자 타입이므로 8바이트의 데이터 틀로 값을 참조하는 것 !

값을 참조할 때 한 번에 읽어들여야 할 메모리 공간의 크기(즉, 메모리 셀의 개수 - 바이트 수)를 제대로 설정하지 않으면 값이 훼손된다. 메모리 셀의 개수는 데이터 타입 (숫자 타입은 8 바이트)에 할당되어 있으므로 숫자 데이터인 score 100을 8 바이트 단위로 저장된 값을 읽어들인다.

10-3. 데이터 타입에 의한 값의 해석

데이터 타입을 가지는 모든 값은 메모리에 2진수, 즉 비트의 나열로 저장된다. 저장된 2진수의 값들은 데이터 타입에 따라 다르게 해석된다.

0100 0001
// 숫자로 해석 : 65
// 문자열로 해석 : 'A'

즉, 모든 데이터 타입은 2진수로 저장되며, 올바른 값으로 해석하기 위해선 데이터 타입이 참고된다.

10-4. 데이터 타입이 필요한 이유

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

11. 동적 타이핑

자바스크립트의 모든 값은 데이터 값을 갖는데, 변수도 데이터 값을 가질까?

11-1. 동적 타입 언어와 정적 타입 언어

• 정적 타입 언어

정적 타입 언어는 변수를 선언할 때 변수에 할당할 수 있는 값의 종류를 사전에 선언해야한다. 이것을 명시적 타입 선언이라고 한다. 정적 타입 언어에서는 변수의 타입을 변경할 수 없고, 선언한 타입에 맞는 값만 할당할 수 있다.

컴파일 시점에 데이터 타입에 맞는 값을 할당했는지 검사하는 타입 체크를 통해 에러를 발생시키고 프로그램 실행 자체를 막으며 안정적인 코드를 구현한다.

• 동적 타입 언어

정적 타입 언어와 다르게 동적 타입 언어는 변수를 선언할 때 데이터 타입을 선언하지 않는다. 오직 var, let, const를 통해 변수를 선언할 뿐이다.
자스 변수는 어떤 데이터 타입의 값이라도 자유롭게 할당할 수 있다.

자바스크립트에서는 값을 할당하는 시점에 변수의 타입이 동적으로 결정되고 변수의 타입을 언제든지 자유롭게 변경할 수 있다. 즉, 자스의 변수는 선언이 아닌 할당에 의해 타입이 결정(타입 추론)되고 재할당에 의해 언제든 변수의 타입이 동적으로 변할 수 있다.이런 특징을 동적 타이핑이라고 한다.

11-2. 동적 타입 언어와 변수

언제든, 어떤 데이터의 타입이든 변수에 재할당이 가능한데 이 점은 단점이 될 수 있다.

1. 변수 값이 언제든 변경될 수 있기 때문에, 복잡한 프로그램에서 변화하는 변수 값을 추적하기 어려울 수 있음
2. 변수는 값의 변경에 의해 타입도 언제든지 변경될 수 있음
3. 개발자 의도와 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동으로 변환될 수 있음

안정적인 프로그램을 만들기 위한 변수 사용 주의 사항

• 변수는 꼭 필요한 경우에 한해 제한적으로 사용할 것
• 변수의 유효 범위(스코프)를 최대한 좁게 만들 것
• 전역 변수는 최대한 사용하지 말 것
• 변수보다 상수를 사용하여 변경을 억제할 것
• 변수 이름은 목적이나 의미를 파악할 수 있도록 네이밍 할 것

---

드디어 하루에 한 챕터를 모두 끝냈다 ! 그동안 자스 공부를 시작하면 무조건 데이터 타입을 항상 다루고 넘어갔기 때문에, 잘 안다고 생각했었다. 하지만 오늘 공부를 통해서 변수가 저장되고 참조, 해석될 때 데이터 타입을 참고하는 것이 중요한 것을 알게되었다.

또한 항상 그냥 넘어갔던 데이터 타입의 구분 (원시 타입 - 객체 타입)을 조금 더 기억할 수 있었다. 자스는 객체 기반 언어라 객체가 매우 중요하다는 책의 문장은 마블 예고편 같았다 ,,,

아무튼 오늘 공부 열심히 했다 !!!!!!!!!!!! 상당히 뿌듯 ~