[Javascript] Data type - Primitive type

 

JS(ko.wikipedia.org)

 Javascript에는 다양한 data type이 있습니다. 자바스크립트에서 제공하는 데이터 타입은 8개가 있습니다. 데이터 타입은 크게 원시 타입(Primitive data type)과 객체 타입(object / reference type)으로 구분할 수 있습니다.

 

https://www.javascripttutorial.net/javascript-data-types/

 

Primitive type

 원시 타입은 변경 불가능한 값(immutable value)으로 7가지가 있습니다. 블로그들이나 사이트를 보면 6개로 표시하거나 5개로 표시하는 경우도 있습니다. Symbol type의 경우 ES2015(6) 문법에서 추가가 되었고 Bigint type의 경우 ES2020에서 새롭게 추가된 data type입니다.

 

 위에서 변경 불가능한 값이라는 게 무엇을 말하는 것일까요? 자바스크립트는 동적 언어이고 사용해 본 사람이라면 값을 변경시킬 수 있던데 왜 변경 불가능한 값이라고 하는지 이해가 잘 안 될 것입니다.

 

let a = 'Hello';
let b = a;

console.log(a);          // Hello
console.log(b);          // Hello


a = "World";
console.log(a);          // World
console.log(b);          // Hello

 위의 코드는 Primitive type중 하나인 string을 이용한 코드 입니다.  코드를 살펴보면 a를 처음에 'Hello'라는 값을 할당해주었고 같은 값을 b에 할당해주었습니다. 그 후에 a의 값을 'World'로 변경을 시켜도 b 값에는 영향이 없습니다.

 

실제로 위의 코드에서 처음 a에 할당한 값이 'Hello'가 'World'로 변경이 되는 것이 아니라 'World'라는 값을 다시 할당하는 것입니다. 

 위의 코드를 그림으로 표현하면 다음과 같습니다. string type은 primitive type이기에 변경 불가능한 값입니다. 따라서 'World' 값을 할당했을 때, 'Hello'를 변경시키는 것이 아니라 그대로 두고 새로운 메모리를 할당합니다. 할당한 메모리에 'World'라는 값이 저장되고 a는 'World'값이 있는 메모리를 참조하게 됩니다. 또한 b = a라는 코드에서 b가 a의 값을 가리키는 것이 아니라 a의 값을 복사해서 b의 값에 넣어줍니다. 따라서 a의 값이 변경되더라고 b에는 영향이 없습니다.

 

이번에는 string에서 값을 변경시켜 보겠습니다. 

 

let a = 'Hello';

console.log(typeof a);   // string
console.log(a);          // Hello

a[0] = 'W';
console.log(a);          // Hello

 위와 같이 string a의 첫 번째 값을 'W'로 변경을 하였습니다. 변경을 하면 'Wello'라는 값이 나올 것 같지만 primitive type은 변경 불가능한 값이기에 'Hello'라는 값이 그대로 나오게 됩니다.

 

 또한 원시타입은 값을 복사할 때 실제 메모리에 해당 값을 복사합니다. 이로 인해 값을 전달할 때 Object type과 큰 차이점이 있습니다. 이 내용은 추후에 call by value와 call by sharing을 다루면서 설명하겠습니다.

 

 

 

number

 number 타입은 숫자를 나타내는 type입니다. 정적 타입 언어인 C나 Java의 경우 숫자가 정수인지 실수에 따라서 int, long, float 등과 같이 다양한 숫자 타입으로 나타냅니다. 자바스크립트는 하나의 숫자 타입인 number만 존재합니다. (더 큰 숫자를 나타내기 위해 ES2020에서 bigint가 등장하기 전까지)

 

let num = 20;

console.log(typeof num);  // number
console.log(num);         // 20

 

 ECMAScript 표준에 따르면 number 타입은 -(2^53 -1) ~  (2^53 -1) 범위의 숫자 값을 나타낼 수 있습니다. 숫자 이외에 추가적으로 3가지 특별한 값이 존재합니다.

• Infinity : 양의 무한대
• -Infinity: 음의 무한대
• NaN: not a number

let pInf = 10 / 0; 
let nInf = 10 / -0;
let nan = 1 * 'string';

console.log(pInf);  // Infinity
console.log(nInf);  // -Infinity
console.log(nan);   // NaN


console.log(typeof pInf);  // number
console.log(typeof nInf);  // number
console.log(typeof nan);   // number

 

 

undefined

 undefined 타입의 값은 undefined 값 하나만 존재합니다. 변수 선언 이후에 값을 할당하지 않은 경우에 undefined 값을 갖습니다. 이전 블로그의 hoisting을 생각하면 이해가 좀 더 잘될 것입니다.

 

let a;

console.log(a);        // undefined
console.log(b);        // undefined
console.log(typeof a); // undefined
console.log(typeof b); // undefined

var b;

 

 

null

 null 타입의 값도 null 값 하나만 존재합니다. 의도적으로 변수에 값이 없다는 것을 명시할 때 사용합니다. 값이 없다는 것을 명시할 때 null이 아닌 undefined을 사용하면 왜 안되는지에 대해 의문이 들 수도 있습니다. undefined의 경우 개발자가 의도적으로 값을 할당하는 것이 아니라 Javascript engine에 의해서 초기화된 값입니다. 따라서 개발자가 undefined를 마음대로 할당할 경우 undefined type의 원래 취지와 어긋나서 혼란을 야기할 수 있습니다.

 

let a;
let b = null;

console.log(typeof a);   // undefined
console.log(typeof b);   // object
console.log(a);          // undefined
console.log(b);          // null
console.log(a == b);     // true
console.log(a === b);    // false

 위의 코드를 보면 null 값의 type이 왜 object라고 나오는지에 대해 의문이 들 것입니다. 이는 자바스크립트의 설계상의 오류입니다. 수정을 해달라고 ECMAScript에 제안을 하였으나 거절이 되었다고 합니다.

 위의 코드에서 null과 undefined를 '=='를 통해 비교를 하면 같음을 알 수 있습니다. 

 

 

boolean

 boolean 타입의 값은 참과 거짓을 나타내는 true, false가 있습니다. 보통 조건문에서 많이 사용합니다.

 

let a = true;
let b = false;

console.log(typeof a); // boolean
console.log(typeof b); // boolean
console.log(a == b);   // false
console.log(a != b);   // true

 

 

string

 string 타입은 문자열을 나타내는 타입입니다. 작은따옴표(')와 큰 따옴표(")를 이용해서 나타낼 수 있습니다.

 

let a = 'Hello';
let b = "World";

console.log(typeof a);   // string
console.log(typeof b);   // string
console.log(a);          // Hello
console.log(b);          // World

 

 

symbol

 symbol 타입은 ES6문법에서 새로 추가된 타입입니다. 다른 타입과 다르게 Symbol()이라는 기호를 통해서만 생성할 수 있습니다. Symbol은 private property를 가능하게 하기 위해 처음 만들어졌다고 합니다. 하지만 Obejct.getOwnPropertySymbols를 통해 찾을 수 있기에 현재는 property 간의 이름 충돌을 방지하기 위해 사용되고 있습니다.

 

let a = Symbol('hello');
let b = Symbol('hello');

console.log(a);  // Symbol(hello)
console.log(b);  // Symbol(hello)

console.log(typeof a);   // symbol
console.log(typeof b);   // symbol

console.log(a == b);     // false
console.log(a === b);    // false

 위의 코드를 보면 같은 'hello'를 통해서 Symbol을 만들었는데 동일하지 않는 것을 볼 수 있습니다. Symbol은 고유한 값을 만들기 때문에 false라는 결과가 나옵니다. Symbol을 global 적으로 공유를 하기 위해서는 Symbol.for() 메서드를 사용해야 합니다.

 

 Symbol type에 대한 자세한 내용은 아래 글을 참고해 주시기 바랍니다.

https://www.javascripttutorial.net/es6/symbol/

The Ultimate Guide to JavaScript Symbol

 

 

bigint

 bigint 타입은 ES2020에서 새롭게 추가된 타입입니다. number 타입에서 나타낼 수 있는 최대 숫자인 (2^53 -1) 보다 더 큰 숫자를 표현할 수 있습니다. bigint 타입으로 만들기 위해서 숫자 뒤에 n을 붙여줘야 합니다.

 

let num = 12n;

console.log(typeof num);   // bigint
console.log(num);          // 12n

console.log(num == 12);    // true
console.log(num === 12);   // false
console.log(num == 12n);   // true
console.log(num === 12n);  // true

console.log(1n < 2);       // true
console.log(2n > 1);       // true
console.log(2n > 2);       // false

 위의 코드처럼 숫자와 비교도 할 수 있습니다. +, *, -, **, % 등 다양한 연산자를 지원합니다.  / 의 경우 소수점을 반환하지 않습니다. 다음의 코드를 보면 알 수 있습니다.

 

let num = 12n;

console.log(num / 4n);   // 3n
console.log(num / 5n);   // 2n

 

 

 

※ 틀린점이나 궁금한 점 있으면 댓글 부탁드립니다.

 

 

참고자료

https://www.javascripttutorial.net/javascript-data-types/

JavaScript Data Types

https://poiemaweb.com/js-data-type-variable

Data type & Variable | PoiemaWeb