🌸06장. 데이터 타입

✅6.1 데이터 타입(data type)

👉 데이터 타입은 값의 종류를 말한다.
👉 자바스크립트의 모든 값은 데이터 타입을 갖는다.

구분

데이터 타입

설명

✅6.2 자바스크립트가 제공하는 타입

숫자 타입

자바스크립트는 하나의 숫자 타입만 존재한다.

ECMAScript에 따르면, 숫자 타입의 값은 배정밀도 64비트 부동소수점 형식을 따른다.
- 즉, 모든 수를 실수로 처리한다.
- 따라서 아래의 상황을 주의해야한다.
```
console.log(0.1 + 0.2); // 0.30000000000000004
console.log(0.1 + 0.2 == 0.3); //false
```

추가적으로 3가지 특별한 값도 표현할 수 있다.

// 숫자 타입의 세 가지 특별한 값
console.log(10 / 0); // Infinity : 양의 무한대
console.log(10 / -0); // -Infinity : 음의 무한대
console.log(1 * "String"); // NaN : 산술 연산 불가 (not a Number)

문자열 타입

자바스크립트에서 문자열은 원시타입이며, 변경 불가능한(immutable) 값이다.

문자열이 한번 생성되면, 그 문자열은 변경할 수 없다. (feat. 변경 불가능한 값(immutable value))
작은따옴표('') , 큰 따옴표(""), 백틱(``) 으로 텍스트를 감싼다.

템플릿 리터럴

멀티 라인 문자열, 표현식 삽입, 태그드 템플릿(tagged template) 등 편리한 문자열 처리 기능을 제공한다.

ES6부터 도입된 새로운 문자열 표기법이다.
템플릿 리터럴은 런타임(runtime) 에 일반 문자열로 변환되어 처리되고 백틱(``)을 사용해 표현한다.
1. 멀티라인 문자열(muti-line string)

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

// #해결1️⃣: 일반 문자열 내에서는 이스케이프 시퀀스(escape sequence)를 사용해야 한다.
var template = '<ul>\n\t<li><a href="#">Home</a></li>\n</ul>';
console.log(template);

// #해결2️⃣: 멀티라인 문자열 사용🧐🧐
var template = `<ul>
	<li><a href="#">Home</a></li>
</ul>;
console.log(template);

2. 표현식 삽입(expression interpolation)

문자열은 + 연산자를 사용해 연결할 수 있지만, 표현식 삽입을 통해 더욱 가독성 좋게 조합할 수 잇다.

var first = "KWAK";
var last = "BOSUN";

// ES5: 문자열 연결
console.log("My name is " + last + "-" + first + "."); // My name is BOSUN-KWAK.

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

불리언 타입

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

undefined 타입

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

변수 선언 시, 자바스크립트 엔진이 암묵적으로 undefined로 초기화한다.
- 즉, 변수 선언에 의해 확보된 메모리 공간을 처음 할당이 이뤄질 때까지 빈 상태(garbage 값)로 두지 않고 undefined로 초기화한다.
만약 아무것도 없는 빈 값을 쓰고싶다면, null을 사용하면 된다.

null 타입

null은 변수에 값이 없다는 것을 의도적으로 명시(의도적 부재, intentional absence)할 때 사용한다.

변수에 null을 할당 == 변수가 이전에 참조하던 값을 더이상 참조하지 않겠다.
- 자바스크립트 엔진은 누구도 참조하지 않는 메모리 공간에 대해 가비지 콜렉션을 수행할 것

함수가 유효한 값을 반환할 수 없는 경우에도 명시적으로 null을 반환한다.

HTML 요소를 검색해 반환하는 document.querySelector메서드가 조합에 부합하는 HTML요소를 검색할 수 없는 경우, 에러 대신 null 반환

<!DOCTYPE html>
<html>
    <body>
        <script>
            var element = document.querySelector(".myClass");

            // HTML 문서에 myClass 클래스를 갖는 요소가 없다면 null을 반환
            console.log(element); // null
        </script>
    </body>
</html>

심벌 타입

ES6에서 추가된 7번째 타입 으로, 변경 불가능한(immutable) 원시 타입 값 , 다른 값과 중복되지 않는 유일무이한 값이다.

주로 이름과 충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용한다.
Symbol함수를 호출해 생성한다.
생성된 심벌 값은 외부에 노출되지 않고 다른 값과 절대 중복되지 않는 유일무이 값이다.

var key = Symbol("key");
console.log(typeof key); // symbol

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

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

객체 타입

자바스크립트는 객체 기반의 언어이며, 자바스크립트를 이루고 있는 거의 모든 것이 객체다.

✅6.3 데이터 타입의 필요성

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

자바스크립트 엔진은 datatype에 따라 정해진 크기의 메모리 공간을 확보한다.
따라서, 변수에 할당되는 값의 datatype에 따라 확보해야 할 메모리 공간의 크기가 결정된다.
"메모리 공간의 크기" = 메모리 셀의 개수(byte 수)

✅6.4 동적 타이핑

동적 타입 언어

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

현재 변수에 할당되어 있는 값에 의해 변수의 타입이 동적으로 결정된다.
var, const, let 키워드를 사용해서 변수를 선언하는 것일 뿐, 실질적인 값의 타입은 런타임(runtime)시 할당되는 값에 의해 결정된다.
반면에, 정적 타입 언어(C, Java 등)는 변수 선언 시점에 타입이 결정되고 변수의 타입을 변경할 수 없다 . 그리고 컴파일 시점에 타입 체크(선언한 데이터 타입에 맞는 값을 할당했는지 검사하는 처리)를 수행한다.

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

foo = 3;
console.log(typeof foo); // numbaer

동적 타입 언어의 단점

동적 타입 언어는 유연성(flexibility) 은 높지만 신뢰성(reliability) 은 떨어진다.

복잡한 프로그램에서는 변화하는 변수 값을 추적하기 어려울 수 있다.
값의 변경에 의해 타입도 언제든지 변경될 수 있다. → 값을 확인하기 전에는 타입을 확신할 수 없다.
개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동으로 변환되기도 한다.

💡변수를 사용할 때 주의할 사항

1️⃣. 변수는 꼭 필요할 경우에 한해 제한적으로 사용할 것.

2️⃣. 변수의 유효범위(스코프, scope)는 최대한 좁게 만들어 변수의 부작용을 억제할 것.

3️⃣. 전역 변수는 최대한 사용을 피할 것.
→ 전역 변수는 프로그램의 복잡성을 증가시키고, 처리 흐름을 추적하기 어렵게 만들고, 오류가 발생할 경우 원인을 특정하기 어렵게 만들기 때문

4️⃣. 변수보다 상수를 사용해 값의 변경을 억제할 것.

5️⃣. 변수 이름은 변수의 목적이나 의미를 파악할 수 있도록 네이밍할 것.
→ 의도가 명확한 네이밍은 코드를 이해하기 쉽게 만들고, 이는 협업과 생산성 향상에 도움을 준다.

Previous🌸05장. 표현식과 문 Next🌸07장. 연산자

Last updated 1 month ago