2. Javascript의 데이터 타입

데이터 타입의 종류

자바스크립트의 데이터 타입은 크게 기본형과 참조형으로 나눌 수 있습니다.

 

자바스크립트의 데이터 타입

기본형 데이터 타입(원시형, primitive type)

숫자(Number), 문자(String), 불리언(Boolean), null, undefined, Symbol

 

참조형 데이터 타입(reference type)

객체(Object), 배열(Array), 함수(Function), 날짜(Date), 정규표현식(RegExp), Map, WeekMap, Set, WeekSet

---

기본형 데이터 타입

1. Number

자바스크립트는 다른 언어와 달리 하나의 정수와 실수 구분 없이 하나의 숫자 타입만 존재합니다.

var integer = 10; // 정수
var f = 7.716; // 실수
var negative = -5; // 음수
var binary = 0b01000001; // 2진수

console.log(1 === 1.0); // true
console.log(3 / 2); // 1.5

2. String

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

var str = 'string'; // 작은 따옴표
str = "string"; // 큰 따옴표
str = `string`; // 템플릿 리터럴 (ES6)

3. Boolean

불리언 타입은 논리적 참, 거짓을 나타내는 true와 false가 있습니다.

주로 조건에 의한 프로그램 흐름을 제어할 때에 사용하며, 다른 데이터 타입이 boolean값처럼 동작하기도 하는데 이 부분은 다음에 추가적

으로 알아보도록 하겠습니다.

 var foo = true;
 var bar = false;

4. undefined와 null

자바스크립트는 '값이 없음'을 나타내는 값 undefined와 null이 존재합니다.

의미는 같지만, 둘은 엄연히 다른 것이고 사용하는 목적 또한 다릅니다.

 

undefined는 사용자가 명시하여 값을 할당해 줄 수도 있지만 값이 존재하지 않을때 자바스크립트 엔진이 자동으로 할당하기도 합니다.

자바스크립트 엔진은 사용자가 값을 지정해야 할 상황에 지정하지 않은 경우, undefined를 반환합니다.

1. 변수에 값을 대입하지 않은 경우

2. 객체 내부에 존재하지 않는 프로퍼티에 접근하려고 할때

3. 함수의 return문이 없거나 호출되지 않는 함수의 실행 결과

var a;
console.log(a); // undefined, 값을 대입하지 않은 변수에 접근 시

var obj = { a: 1 };
console.log(obj.b); // undefined, 존재하지 않는 프로퍼티에 접근 시

var func = function() { };
var b = func();
console.log(b); // undefined, 반환(return)값이 없는 함수의 실행 결과

 

null은 의도적으로 변수에 값이 없다는 것을 명시할 때 사용하게 됩니다. 이는 변수가 기억하는 메모리 주소의 참조 정보를 제거하는 것을 의미하고, 가비지 컬렉션의 수집 대상이 될 것입니다.

var foo = 'Hello World';
foo = null;
// 데이터 영역의 'Hello World'를 참조하던 정보가 제거 되고 다른 곳에서도 사용하지 않는다면 GC(가비지 컬렉션)의 수집 대상이 될 것 입니다.

또는 함수 호출 시 유효한 값을 반환할 수 없는 경우, 명시적으로 null을 반환하기도 합니다.

var element = document.querySelector('.my-element');
// HTML 문서에 'my-element' 클래스를 갖는 요소가 없다면 null을 반환합니다.

console.log(element); // null

typeof null 오류

타입을 나타내는 문자열을 반환하는 typeof 연산자로 null을 연산해 보면 object가 나오게 됩니다.

이는 자바스크립트 설계상의 오류로 만약 null 값을 비교할 시 주의해야 합니다.

console.log(typeof null);         // "object"
console.log(typeof undefined);    // "undefined"
console.log(null == undefined);   // true
console.log(null === undefined);  // false
console.log(null == null);        // true
console.log(null === null);       // true
console.log(!null);               // true
console.log(isNaN(1 + null);      // false
console.log(isNaN(1 + undefined); // true

5. Symbol

심벌(Symbol)은 ES6에서 새롭게 추가된 타입입니다.

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

// 심볼로 key를 생성하게 되면, 객체의 유일한 프로퍼티 키로써 사용 할 수 있습니다.
var key = Symbol('key');
console.log(typeof key); // 'symbol'

var obj = {};
obj[key] = 'value';
console.log(obj[key]); // 'value'

 

참조형 데이터 타입

1. 객체 (Object)

객체(Object)는 데이터와 관련한 동작을 모두 포함할 수 있는 개념적인 존재입니다.

이름('key')과 값('value')을 의미하는 프로퍼티(property)와 동작을 의미하는 메서드(method)를 모두 포함할 수 있는 독립적인 주체입니다.

 

자바스크립트는 객체 기반의 스크립트 언어로서 자바스크립트를 이루고 있는 거의 "모든 것" 이 객체입니다.

기본형 데이터 타입을 제외 한 나머지 (Array, Function, RegExp 등)은 모두 객체입니다.

---

기본형 데이터 타입과 참조형 데이터 타입의 차이점

기본형 데이터 타입은 값이 담긴 주솟값을 바로 복제하는 반면

참조형 데이터타입은 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제한다는 점에서 구분할 수 있습니다.

 

또한 기본형 데이터 타입은 불변성(immutability)을 띄고 있습니다.

// 값을 변경하면 문제없이 변경되는데 무슨 말일까요?

var a = 10;
console.log(a) // 10

a = 15;

console.log(a) // 15

위의 예시에서 최초 할당 한 값 10이 직접적으로 변경되는 것이 아니라, 값 15의 값을 데이터 영역에서 찾고, 만약 찾을 수 없다면 새로 만든 후 변수 a는 새로 만든 값을 a에 저장하게 되는 것입니다. 따라서, 변경은 새로 만드는 동작을 통해서만 이루어지고, 이것이 불변 값의 성질입니다.

 

또 한 가지 예를 들어보겠습니다.

var str = 'Hello World';

str[0] = 'h';
console.log(str); // 'Hello World'

위의 예시에서 str[0]과 같이 문자열은 배열처럼 인덱스를 통해 접근할 수 있는데, 이런 특성을 갖는 데이터를 유사배열이라 합니다.

str[0] = 'h'처럼 이미 저장된 값의 일부 문자를 변경하려고 해도 이미 생성된 문자열은 read only로 변경할 수 없습니다. 따라서 변경사항이 반영되지 않습니다.

 

그럼 객체는 어떨까요?

기본적인 성질은 가변값 이지만 설정에 따라 변경 불가능(Object.freeze 등)한 경우와 불변값으로 활용할 수 있는 방법이 있습니다.

var a = 10;
var b = a;
var obj1 = { c: 10, d: 'Hello World' };
var obj2 = obj1;

b = 15;
obj2.c = 15;

console.log(a === b) // false
console.log(obj1 === obj2) // true

객체 내부의 프로퍼티를 수정하는 것은 객체 자체의 변경이 아니라 참조하는 값은 변하지 않으므로 객체는 가변값 이라고 볼 수 있습니다.

var obj1 = { a: 'Hello World', b: 10 };
var obj2 = obj1;

obj2 = { a: 'Hello World', b: 15 };

console.log(obj1 === obj2) // false

하지만 객체 자체를 변경하기 되면, 객체임에도 불구하고 불변값과 같이 동작할 수 있습니다!

따라서 객체를 불변하게 사용하고자 한다면, 깊은 복사를 통해 새로운 객체를 만들어 냄으로써 불변값으로 사용할 수 있습니다.