개발/Javascript

2. Javascript의 데이터 타입

JonghwanWon 2021. 7. 14. 18:14

데이터 타입의 종류

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

 

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

기본형 데이터 타입(원시형, 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

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

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

'개발 > Javascript' 카테고리의 다른 글

5. Javascript의 스코프  (0) 2021.07.15
4. Javascript의 함수  (0) 2021.07.15
3. Javascript의 타입 변환  (0) 2021.07.14
1. Javascript와 브라우저  (0) 2021.07.14
0. Javascript 동작 원리 이해의 중요성  (0) 2021.07.14