[JavaScript] 데이터 타입 (자료형) (숫자형, BigInt, 문자열, 불린형, null, undefined, 심볼형, 객체형)

 

자바스크립트에는 7가지 기본 자료형이 있다.

 

1. Number (숫자)
2. BigInt 
3. String (문자열)
4. Boolean
5. Null
6. Undefined
7. Symbol
8. Object  → 배열, 함수, 사용자 정의 클래스도 모두 포함됨

 

 

JavaScript 언어의 타입은 원시값과 객체로 나뉜다.

 

 

 

1~7은 기본 자료형 (원시형=Primitive Type)

8은 객체 자료형 (참조형=Reference Type)

 

 

이 둘은 무슨 기준으로 나뉠까?

 

 

 

 기본 자료형 (원시형) 
- 객체를 제외한 모든 타입은 불변 값(변경할 수 없는 값)을 정의한다.
- 즉 값이 생성된 후에 그 값을 변경할 수 없다.
- 예를 들어 문자열은 불변한다. 이런 일련의 타입을 "원시값"이라고 한다.
- 다른 변수에 값을 할당하거나 함수 인자로 넘길 때, 값을 복사하여 전달한다. (pass by value)

 객체 자료형 (참조형) 
- 메모리 주소를 복사시키며 값 자체는 복사되지 않아 같은 객체를 참조하게 된다.


이해가 안된다면, 복사 및 참조에 관한 포스팅을 참고하자! 아주 정리가 잘 돼있음ㅎㅎ https://dev-ini.tistory.com/37

 

 

---

 

 

 

 (1) Number 

 

- 정수 및 부동소수점 숫자
- 숫자형과 관련된 연산은 다양한데, 곱셈 *, 나눗셈 /, 덧셈 +, 뺄셈 - 등이 대표적이다.
- 숫자형엔 일반적인 숫자 외에 Infinity, -Infinity, NaN같은 '특수 숫자 값’이 포함된다.

alert ( 1 / 0 ); // 무한대

alert ( Infinity ); // 무한대

 

- NaN은 계산 중에 에러가 발생했다는 것을 나타내주는 값이다.
- 부정확하거나 정의되지 않은 수학 연산을 사용하면 계산 중에 에러가 발생하는데, 이때 NaN 이 반환된다.

alert ("문자열" / 2 ); // NaN, 문자열을 숫자로 나누면 오류 발생

alert ("문자열" / 2 + 5 ); // NaN, 연산을 해도 마찬가지로 오류 발생

alert ( 42 / +0 ); // Infinity

alert ( 42 / -0 ); // -Infinity

 

 

---

 

 

 (2)  BigInt 

 

- 내부 표현 방식 때문에 자바스크립트에선 (253-1)(9007199254740991) 보다 큰 값 혹은 -(253-1) 보다 작은 정수는 '숫자형’을 사용해 나타낼 수 없는 문제가 있다.
-즉, BigInt는 Number의 안전 한계를 넘어서는 큰 정수도 안전하게 저장하고 연산할 수 있다. (길이에 상관없이 정수를 나타낼 수 있다.)
- BigInt형 값은 정수 리터럴 끝에 n을 붙이면 된다.

const bigInt = 1234567890123456789012345678901234567890n; // 끝에 'n'이 붙으면 BigInt형이다.


const x = 2n ** 53n;  // 9007199254740992n

const y = x + 1n;  // 9007199254740993n

 

 

---

 (3) String 

 

- 문자형은 따옴표로 묶는다.
- 종류는 3가지이다. 큰따옴표("Hello"), 작은따옴표('Hello'), 역따옴표(`Hello`)
- 역따옴표(백틱)로 변수나 표현식을 감싼 후 ${…}안에 넣어주면, 원하는 변수나 표현식을 문자열 중간에 손쉽게 넣을 수 있다.
- 따옴표나 작은따옴표를 사용하면 중간에 표현식을 넣을 수 없다. 이 방법은 역 따옴표를 써야만 가능하다.

let name = "John";


// 변수를 문자열 중간에 삽입

alert( `Hello, ${name}!` ); // Hello, John!



// 표현식을 문자열 중간에 삽입

alert( `the result is ${1 + 2}` ); // the result is 3

 

- 위에서 JavaScript의 문자열 값은 immutable(불변)하다고했다.

let str = 'Hello';
str = 'world';

 

- 하지만 위 코드는 정상적으로 실행된다. 어떻게 가능할까?
- 문자열 자체는 변경 불가능한 것이 맞다.
- 2번째 구문이 실행되면 기존의 ‘Hello’가 수정되는 것이 아닌, 새로운 문자열 ‘world’가 생성된다.
- 그리고 변수 str는 ‘Hello’ 대신 ‘world’를 가리키도록 변경되는 것이다.

 

---

 

 

 (4) Boolean 

 

- true(긍정, yes)와 false(부정, no) 두 가지 값밖에 없는 자료형
- 값이 없거나 0, -0, null, false, NaN, undefined, 빈 문자열 ("")이라면 객체의 초기값은 false가 된다.
- 문자열 "false"를 포함한 그 외 모든 다른 값은 초기값을 true로 설정한다.

let nameFieldChecked = true; // 네, name field가 확인되었습니다(checked).
let ageFieldChecked = false; // 아니요, age field를 확인하지 않았습니다(not checked)

 

- 비교 결과를 저장할 때도 사용된다

let isGreater = 4 > 1;

alert( isGreater ); // true (비교 결과: "yes")

 

 

---

 

 

 (5) Null 

 

- ‘존재하지 않는(nothing)’ 값, ‘비어 있는(empty)’ 값, ‘알 수 없는(unknown)’ 값
- 어떤 값이 의도적으로 비어있음을 표현한다.
- let age = null;은 나이(age)를 알 수 없거나 그 값이 비어있음을 뜻한다.

 

---

 

 

 (6) Undefined 

 

- '값이 할당되지 않은 상태’
- 변수는 선언했지만, 값을 할당하지 않았다면 해당 변수에 undefined 가 자동으로 할당된다.
- undefined를 직접(의도적으로) 할당하는 걸 권장하진 않는다. 변수가 ‘비어있거나’ ‘알 수 없는’ 상태라는 걸 나타내려면 null을 사용해야한다. undefined는 값이 할당되지 않은 변수의 초기값을 위해 예약어로 남겨둬야한다.

 

<null, undefined 헷갈릴땐 이렇게 생각하기>

null은 사용자가(사람이) 직접 값을 부여하는 것이고 (의도적으로 비우는 것이고),
undefined는 자바스크립트 엔진이(컴퓨터가) 부여하는 것이다. (애초부터 없어!)

null: 휴지심 일부러 빼서 비웠어! / undefined: 애초에 아무거토 없어!

 

---

 

 

 (7) Symbol 

 

- 유일하고 변경 불가능한 기본값
- 생성자가 symbol 원시값을 반환하는 내장 객체이다.
- 객체의 고유한 식별자(unique identifier)를 만들 때 사용한다.
- 즉, 객체에 속성을 추가할 때 고유한 키를 부여하여 다른 코드와 충돌하지 않도록 할 때 많이 쓰인다.

let Sym1 = Symbol("Sym")
let Sym2 = Symbol("Sym")

console.log(Sym1 === Sym2) // false

 

 

---

 

 

 (8) 객체 (Object) 

 

- 객체는 식별자로 참조할 수 있는 메모리에 있는 값을 뜻한다.
- 속성들을 담고 있는 상자라고 이해하면 된다.
- 객체(object)형은 특수한 자료형이다.
- 객체형을 제외한 다른 자료형은 문자열이든 숫자든 한 가지만 표현할 수 있기 때문에 원시(primitive) 자료형이라 부른다. 반면 객체는 데이터 컬렉션이나 복잡한 개체(entity)를 표현할 수 있다.
- 객체는 중괄호 {…}를 이용해 만들수 있고, 중괄호 안에는 ‘키(key): 값(value)’ 쌍으로 구성된 프로퍼티(property)를 를 여러 개 넣을 수 있다.
- 키엔 문자형, 값엔 모든 자료형이 허용된다. 
- 자세한 내용은 https://dev-ini.tistory.com/39

 

---

 

 참고) typeof 연산자 

 

- 자료형에 따라 처리 방식을 다르게 하고 싶거나 변수의 자료형을 빠르게 알아내고자 할 때 유용하다.

- typeof 연산자는 두 가지 형태의 문법을 지원한다.

 

• 연산자: typeof x 
• 함수: typeof(x)
  
  

typeof undefined // "undefined"

typeof 0 // "number"

typeof 10n // "bigint"

typeof true // "boolean"

typeof "foo" // "string"

typeof Symbol("id") // "symbol"

typeof Math // "object" (1)

typeof null // "object"  (2)

typeof alert // "function"  (3)

 

(1) Math는 수학 연산을 제공하는 내장 객체이므로 "object"가 출력된다.

(2) null은 별도의 고유한 자료형을 가지는 특수 값으로 객체가 아니지만, 하위 호환성을 유지하기 위해 이런 오류를 수정하지 않고 남겨둔 상황이다. 언어 자체의 오류이므로 null이 객체가 아님에 유의하여야한다!

(3) typeof는 피연산자가 함수면 "function"을 반환한다. 그런데 '함수’형은 따로 없고, 함수는 객체형에 속합니다. 이런 동작 방식이 형식적으론 잘못되긴 했지만, 아주 오래전에 만들어진 규칙이었기 때문에 하위 호환성 유지를 위해 남겨진 상태이다.

 

 

 

 

 

참고 문서

https://ko.javascript.info/types

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol