[딥 다이브] 데이터 타입

 

 

---

 

데이터 타입 🐰

 

데이터 타입은 값의 종류를 말한다.

자바스크립트의 모든 값은 데이터 타입을 갖는다.

자바스크립트 ES6는 7개의 데이터 타입을 갖으며, 원시 타입과 객체 타입으로 나뉜다.

* 원시 타입은 변경 불가능한 값이며 값에 의한 전달이다.

 

• 원시 타입 (primitive data type) 
  • boolean
  • null
  • undefined
  • number
  • string
  • symbol (ES6에서 추가)
• 객체 타입 (object/reference type)
  • object

 

예를 들어 숫자(number) 타입 1과 문자열(string) 타입 ‘1’은 비슷하게 보이지만 다른 타입의 값이다.

숫자 타입의 값은 주로 산술 연산을 위해 만들지만 문자열 타입의 값은 주로 텍스트로 출력하기 위해 만든다.

이처럼 개발자는 명확한 의도를 가지고 타입을 구별하여 값을 만들 것이고

자바스크립트 엔진은 타입을 구별하여 값을 취급할 것이다.

자바스크립트에서 제공하는 7개의 데이터 타입은 크게 원시 타입과 객체 타입으로 구분할 수 있다.

---

 

숫자 타입 🐰

 

C나 자바의 경우, 정수와 실수를 구분해서 int, long, float, double 등과 같은

다양한 숫자 타입을 제공한다.

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

 

ECMAScript 사양에 따르면 숫자 타입의 값은

배정밀도 64비트 부동소수점 형식을 따른다.

즉, 모든 수를 실수로 처리하며, 정수만 표현하기 위한

데이터 타입이 별도로 존재하지 않는다.

// 모두 숫자 타입이다.
var integer = 10;    // 정수
var double = 10.12;  // 실수
var negative = -20;  // 음의 정수

 

 

정수, 실수, 2진수, 8진수, 16진수 리터럴은 모두 메모리에 배정밀도 64비트

부동소수점 형식의 2진수로 저장된다.

 

자바스크립트는 이것들을 표현하기 위한 데이터 타입을 제공하지 않기 때문에

이들 값을 참조하면 모두 10진수로 해석된다.

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
console.log(4 / 2);     // 2
console.log(3 / 2);     // 1.5

 

 

숫자 타입은 추가적으로 세 가지 특별한 값도 표현할 수 있다.

• Infinity : 양의 무한대
• -Infinity : 음의 무한대
• NaN : 산술 연산 불가 (not - a - number)

// 숫자 타입의 세 가지 특별한 값
console.log(10 / 0);       // Infinity
console.log(10 / -0);      // -Infinity
console.log(1 * 'String'); // NaN

 

자바스크립트는 대소문자를 구별하므로 Nan, Nan, non 모두 에러이다.

// 자바스크립트는 대소문자를 구별한다.
var x = nan; // ReferenceError: nan is not defined

---

 

문자열 타입 🐰

 

문자열 타입은 텍스트 데이터를 나타내는 데 사용한다.

문자열은 0개 이상의 16비트 유니코드 문자의 집합으로

전 세계 대부분의 문자를 표현할 수 있다.

 

문자열은 작은따옴표(' '), 큰따옴표(" ") 또는 백틱(` `)으로 텍스트를 감싼다.

자바스크립트에서는 작은따옴표를 일반적으로 사용한다.

// 문자열 타입
var string;
string = '문자열'; // 작은따옴표
string = "문자열"; // 큰따옴표
string = `문자열`; // 백틱 (ES6)

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

 

문자열을 따옴표로 감싸는 이유는 키워드나 식별자 같은 토근과 구분하기 위해서다.

만약 문자열을 따옴표로 감싸지 않으면 자바스크립트 엔진은

키워드나 식별자 같은 토큰으로 인식한다.

// 따옴표로 감싸지 않은 hello를 식별자로 인식한다.
var string = hello; // ReferenceError: hello is not defined

 

그리고 따옴표로 문자열을 감싸지 않으면 공백 문자도 포함시킬 수 없다.

 

C => 문자열 타입을 제공하지 않음 문자의 배열로 문자열을 표현

자바 => 문자열을 객체로 표현

자바스크립트 => 문자열은 원시타입이며, 변경 불가능한 값, 이것은 문자열이 생성되면
그 문자열을 변경할 수 없다는것을 의미한다.

 

---

 

템플릿 리터럴 🐰

 

ES6부터 템플릿 리터럴 이라고 하는 새로운 문자열 표기법이 도입되었다.

템플릿 리터럴은 멀티라인 문자열, 표현식 삽입, 태그드 템플릿 등

편리한 문자열 처리 기능을 제공한다.

---

멀티라인 문자열 : 일반 문자열 내에서는 줄바꿈이 허용되지 않지만

템플릿 리터럴을 사용하면 가능하다.

var multilineString = `
이것은
멀티라인
문자열입니다.
`; //백틱(``) 사용

console.log(multilineString);
/*이것은
멀티라인
문자열입니다.*/

 

혹은 이스케이프 시퀀스 \n을 사용해서도 문자열 줄바꿈이 가능하다

var multilineString = '이것은\n멀티라인\n문자열입니다.'; //이스퀘이프 사용

console.log(multilineString);
/*이것은
멀티라인
문자열입니다.*/

---

표현식 삽입 : 표현식 삽입은 문자열 안에 변수나 표현식을 삽입하는 기법,
${} 안에 있는 부분은 변수나 표현식의 값으로 대체되어 문자열이 만들어집니다.

이때 표현식의 평가 결과가 문자열이 아니더라도 문자열로 타입이 강제 변환되어 삽입된다.

var first = 'Ung-mo';
var last = 'Lee';

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

 

혹은 문자열은 문자열 연사지를 +를 사용해 연결할 수 있기 때문에

+연산자를 사용해 문자열을 만들 수 있다.

var first = 'Ung-mo';
var last = 'Lee';

// ES5: 문자열 연결
console.log('My name is ' + first + ' ' + last + '.'); // My name is Ung-mo Lee.

 

하지만 +연산자를 사용하는것보다 템플릿 리터럴이 가독성이 좋고 간편하게 문자열을 조합할 수 있다.

---

 

불리언 타입 🐰 -발표

 

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

var foo = true;
var bar = false;

// typeof 연산자는 타입을 나타내는 문자열을 반환한다.
console.log(typeof foo); // boolean
console.log(typeof bar); // boolean

 

불리언 타입의 값은 참과 거짓으로 구분되는 조건에 의해 프로그램의

흐름을 제어하는 조건문에서 자주 사용한다.

비어있는 문자열과 null, undefined, 숫자 0은 false로 간주된다.

 

1. 빈 문자열 (''): 길이가 0인 빈 문자열은 falsy로 간주됩니다.

if ('') {
  console.log('이 코드는 실행되지 않습니다.');
}

 

2. null: null은 falsy로 간주됩니다.

if (null) {
  console.log('이 코드는 실행되지 않습니다.');
}

 

3. undefined: undefined는 falsy로 간주됩니다.

if (undefined) {
  console.log('이 코드는 실행되지 않습니다.');
}

 

4. 숫자 0 (0): 숫자 0은 falsy로 간주됩니다.

if (0) {
  console.log('이 코드는 실행되지 않습니다.');
}

---

그렇다면 true를 나타내는건?!

숫자 0을 제외한 모든 숫자와 비어있지 않은 문자열은 조건문에서 true로 평가된다.

if (1) {//숫자1
  console.log("참입니다.");
}

if ("Hello") {//문자 Hello
  console.log("참입니다.");
}

---

 

undefined 타입 🐰 -발표

 

undefined 타입의 값은 undefinde가 유일하다.

선언 이후 값을 할당하지 않은 변수는 undefined 값을 가진다.

즉, 선언은 되었지만 값을 할당하지 않은 변수에 접근하거나 존재하지 않는 객체 프로퍼티에
접근할 경우 undefined가 반환된다.

이는 변수 선언에 의해 확보된 메모리 공간을 처음 할당이 이루어질 때까지
빈 상태(대부분 비어있지 않고 쓰레기 값이 들어있다)로 내버려두지 않고
자바스크립트 엔진이 undefined로 초기화하기 때문이다.

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

let foo;
console.log(foo); // undefined

 

이처럼 undefined는 개발자가 의도적으로 할당한 값이 아니라

자바스크립트 엔진에 의해 초기화된 값이다.

변수를 참조했을 때 undefined가 반환된다면 참조한 변수가

선언 이후 값이 할당된 적이 없는 변수라는 것을  알 수 있다. 

 

자바스크립트 엔진이 변수를 초기화하는 데 사용하는데

undefined를 의도적으로 변수에 할당한다면
undefined의 본래 취지와 어긋날뿐더라 혼란을 줄 수 있으므로 권장하지 않는다.

 

하지만 변수에 값이 없다고 쓰고 싶은 상황도 있을것이다! 그럼 이경우는 어떻게 해야할까?

-> null을 할당하면 된다.

---

 

null 타입 🐰 -발표

 

null 타입의 값은 null이 유일하다.

자바스크립트는 대소문자를 구별하므로 null은 Null, NULL 등과 다르다.

프로그래밍 언어에서 null은 변수에 값이 없다는 것을 의도적으로 명시 할 때 사용 한다.

변수에 null을 할당하는 것은 변수가 이전에 참조하던 값을 더 이상 참조하지 않겠다는 의미이다.

이는 이전에 할당되어 있던 값에 대한 참조를 명시적으로 제거하는 것을 의미한다.

자바스크립트 엔진은 누구도 참조하지 않는 메모리 공간에 대해 가비지 콜렉션을 수행하여

쓰레기 값을 제거 할 것이다.

var foo = 'Lee';

// 이전에 할당되어 있던 값에 대한 참조를 제거. foo 변수는 더 이상 'Lee'를 참조하지 않는다.
// 유용해 보이지는 않는다. 변수의 스코프를 좁게 만들어 변수 자체를 재빨리 소멸시키는 편이 낫다.
foo = null;

 

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

HTML요소에 없는 요소를 검색할 경우 null을 반환한다.

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

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

 

 

타입을 나타내는 문자열을 반환하는 typeof 연산자로 null 값을 연산해 보면

null이 아닌 object가 나온다.

이는 자바스크립트의 설계상의 오류이다.

-> 기존 코드와의 호환성이 깨질 우려가 있기에 이오류를 유지하고 있다.

var foo = null;
console.log(typeof foo); // object

 

 

따라서 null 타입을 확인할 때 typeof 연산자를 사용하면 안되고

일치 연산자(===)를 사용하여야 한다.

var foo = null;
console.log(typeof foo === null); // false
console.log(foo === null);        // true

---

 

심벌 타입 🐰

 

심볼은 ES6에서 새롭게 추가된 7번째 타입으로 변경 불가능한 원시 타입의 값이다.

심볼은 주로 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키를 만들기 위해 사용한다.

심볼은 함수를 호출해 생성한다.

이때 생성된 심볼 값은 다른 심볼 값들과 다른 유일한 심볼 값이다.

// 심벌 값 생성
var key = Symbol('key');
console.log(typeof key); // symbol

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

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

---

 

객체 타입 🐰

 

객체는 데이터와 그 데이터에 관련한 동작을 모두

포함할 수 있는 개념적 존재이다.

다르게 말하면 이름과 값을 가지는 데이터를 의미하는

프로퍼티와 동작을 의미하는 메소드를

포함할 수 있는 독립적 주체이다.

 

자바스크립트 객체 기반의 스크립트 언어로서 자바스크립트를

이루고 있는 거의 "모든것"이 객체이다.

원시타입을 제외한 나머지 값들은 모두 객체이다.

또한 객체는 참조에 의한 전달 방식으로 전달된다.

 

---

 

데이터 타입의 필요성 🐰

 

✨ 데이터 타입이 필요한이유✨

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

값은 메모리에 저장하고 참조할 수 있어야 한다.

메모리에 값을 저장하려면 먼저 확보해야 할

메모리 공간 크기를 결정해야 한다.

var score = 100;

 

위 코드가 실행되면 컴퓨터는 숫자 값 100을 저장하기 위해

메모리 공간을 확보한 다음,

확보된 메모리에 숫자 값 100을 2진수로 저장한다.

이러한 처리를 하려면 숫자 값을 저장할 때 확보해야

할 메모리 공간의 크기를 알아야한다.
자바스크립트 엔진은 값의 종류에 따라 정해진 크기의

메모리 공간을 확보한다.

 

즉, 변수에 할당되는 값의 데이터 타입에 따라

확보해야 할 메모리 공간의 크기가 결정된다.

위 예제에서는 숫자 타입의 값 100을 저장하기 위해

8바이트의 메모리 공간을 확보 한 후

2진수로 저장한다.

 

위 예제에서 score변수는 저장되어 있는 값이 숫자 타입이므로

8바이트 단위로 읽어 들이지 않으면 값이 훼손된다. 

변수에 숫자 타입의 값이 할당되어 있으므로 자바스크립트 엔진은

score 변수를 숫자 타입으로 인식한다.

숫자 타입은 8바이트 단위로 저장되므로 score 변수를 참조하면

8바이트 단위로 메모리 공간에 저장된 값을 읽어 들인다.

 

2. 데이터 타입에 의한 값의 해석
그렇다면 메모리에서 읽어 들인 2진수를 어떻게 해석할까?

모든 값은 데이터 타입을 가지며, 매모리에 2진수, 즉 비트의 나열로 저장된다.

메모리에 저장된 값은 데이터 타입에 따라 다르게 해석될 수 있다.

예를 들면 메모리에 저장된 값 0100 0001을 숫자와 문자로 해석해보면,

숫자는 65 문자로는 'A'  가 나온다.

 

 

🐣 그렇다면 데이터 타입을 정리 해보자! 🐣 

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

 

그래서 결국 데이터 타입이 필요한 이유는 밑의 이유들 때문이다.

- 값을 저장할 때 확보해야 하는 메모리 공간의 크기를 결정하기 위해- 값을 참조할 때

한 번에 읽어 들여야 할 메모리 공간의 크기를 결정하기 위해

메모리에서 읽어 들인 2진수를 어떻게 해석할지 결정하기 위해

---

 

동적 타이핑 🐰

 

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

C나 자바 같은 정적타입 언어는 변수를 선언할 때

데이터 타입을 사전에 선언해야한다.

이를 명시적 타입 선언이라한다. 

아래 예제는 C에서 정수 타입의 변수를 선언하는 예시이다.

// c 변수에는 1바이트 정수 타입의 값(-128 ~ 127)만을 할당할 수 있다.
char c;

// num 변수에는 4바이트 정수 타입의 값(-2,124,483,648 ~ 2,124,483,647)만을 할당할 수 있다.
int num;

 

정적 타입 언어는 변수의 타입을 변경할 수 없고

변수에 선언한 타입에 맞는 값만 할당할 수 있다.

정적 타입 언어는 컴파일 시점에 타입 체크(타입과 맞는 값을 할당했는지)를 수행한다.

 

타입 체크를 통과하지 못하면 에러! 발생시키고 프로그램의 실행을 막는다

-> 런타임 에러 줄어듦

 

자바스크립트는 정적 타입 언어와 다르게 변수를 선언할 때 타입을 선언하지 않는다.

다만 var, let, const를 선언할 뿐이다.

자바스크립트의 변수는 어떠한 데이터 타입의 값이라도 자유롭게 할당 가능하다.

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

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

foo = 'Hello';
console.log(typeof foo);  // string

foo = true;
console.log(typeof foo);  // boolean

foo = null;
console.log(typeof foo);  // object

foo = Symbol(); // 심벌
console.log(typeof foo);  // symbol

foo = {}; // 객체
console.log(typeof foo);  // object

foo = []; // 배열
console.log(typeof foo);  // object

foo = function () {}; // 함수
console.log(typeof foo);  // function

 

위 예제에서는 변수에 할당된 값의 데이터 타입을 반환하였다.

정적 타입 언어는 변수 선언 시점에 변수의 타입이 결정되고 타입을 변경할 수 없다.

하지만 자바스크립트에서는 값을 할당하는 시점에 변수의 타입이 동적으로 결정되고

변수의 타입을 언제든지 자유롭게 변경 가능하다.

 

즉, 자바스크립트의 변수는 선언이 아닌 할당에 의해 타입이 결정된다.

그리고 재할당에 의해 변수의 타입은 언제든지 동적으로 변할 수 있다. (= 동적 타이핑)

 

그렇다면 변수는 타입을 갖는것일까? 정답은 아니다! 값이 타입을 갖는것이다.

따라서 현재 변수에 할당되어 있는 값에 의해 변수의 타입이 동적으로 결정된다고

표현하는 것이 더 적절하다.

 

동적 타입 언어와 변수

동적 타입 언어는 변수에 어떤 데이터 타입의 값이라도 자유롭게 할당 가능하다.

이런 동적 타입 언어의 장점과 단점을 알아보자!

 

🐯 장점  : 데이터 타입에 의해 무감각해질 정도로 편리하다.

 

🐯 단점  : 언제든지 변경될 수 있기 때문에 복잡한 프로그램에서 변화하는 변수 값을 추적하기 어렵다

또한 언제든 변할 수 있어 의도한 타입이 아닐 수 있다 이것은 유연성은 높지만

신뢰성이 떨어진다는 의미이다

 

물론 이 단점들을 변수를 사용하기 이전에 데이터 타입을 체크하여 해결할 수 있다.

하지만 코드의 양도 증가하고 번거롭다. 따라서 변수를 사용할 때 주의사항은 아래와 같다.

---

 

1.  변수의 값은 재할당에 의해 언제든 변경될 수 있다 그러므로

변수는 꼭 경우에 한해 제한적으로 사용한다.

 

2.  변수의 유효 범위는 최대한 좁게 만들어 변수의 부작용을 억제해야 한다.

 

3.  전역 변수는 최대한 사용하지 말자.

 

4. 변수보다는 상수를 사용해 값의 변경을 억제하자.

 

5. 변수 이름은 변수의 목적이나 의도를 파악할 수 있도록 네이밍한다.

사람이 이해할 수 있는 코드, 즉 가동성이 좋은코드를 쓰자.