[JavaScript 33가지 지식] 원시자료형(Primitive Types)

 

들어가기 앞서

오늘은 자바스크립트의 원시형 타입에 대해 알아보고자한다.

들어가기 앞서 자바스크립트의 전체 데이터 타입에 대해 소개하고 들어가겠다.

자바스크립트는 아래와 같은타입들을 가지고있다.

그림을 보게되면 원시형 타입 그리고 참조형타입으로 크게 나누어져있다.

두 데이터 타입에 대해 정말 간다하게 설명을 하자면 아래와같다.

• 원시형: 값을 바로할당
• 참조형: 값이 저장된 주소값을 할당

혹시라도 잘 이해가 가지 않으면 추후에 이 두가지 타입에 대해 포스팅하겠다.

---

원시형 타입(Primitive Types)??

원시형 타입이 현재 7가지가 있으며 아래와 같은 타입들이 있다

• 숫자형
• Biginit
• 문자형
• 불린
• null
• undefined
• Symbol

---

1)숫자형

 

숫자형(numbertype)은 정수 및 부동 소수점 숫자를 나타낸다.

숫자형 에는 일반적인 숫자 외에 Infinity, -Infinity, NaN같은 특수 숫자 값(special numeric value)이 포함되어있다.

infinity는 어떤 숫자보다 더 큰 특수값 무한대를 나타낸다.

어느 숫자든 0으로 나누면 무한대를 얻을 수있다.

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

alert( Infinity ); // 무한대

NaN은 계산중 에러가 발생했다는 것을 나타내주는 값이다.

부정확하거나 정의 되지 않은 수학연산을 사용하면 계산중 에러가 발생한다. 그때 NaN이 반환이 된다.

alert( "숫자가 아님" / 2 ); // NaN, 문자열을 숫자로 나누면 오류가 발생합니다.

alert( "숫자가 아님" / 2 + 5 ); // NaN

연산과정에서 NaN이 반환이 되었다면, 이는 모든 결과에 영향을 끼친다.

---

2)Biginit

 

내부 표현 방식 때문에 자바스크립트에선 (2^53-1)(9007199254740991) 보다 큰 값
혹은 -(2^53-1) 보다 작은 정수는 '숫자형’을 사용해 나타낼 수 없습니다.

 

사실 대부분의 상황에서 이런 제약사항은 문제가 되지 않습니다.

그렇지만 암호 관련 작업같이 아주 큰 숫자가 필요한 상황 이거나 아주 높은 정밀도로 작업을 해야 할 때는 이런 큰 숫자가 필요합니다.

BigInt형은 표준으로 채택된 지 얼마 안 된 자료 형으로, 길이에 상관없이 정수를 나타낼 수 있습니다.

BigInt형 값은 정수 리터럴 끝에 n을 붙이면 만들 수 있습니다.

 

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

---

3)문자형

 

자바스크립트에선 문자열(string)을 따옴표로 묶습니다.

let str = "Hello";
let str2 = 'Single quotes are ok too';
let phrase = `can embed another ${str}`;

따옴표는 세 종류가 있습니다.

1. 큰따옴표: "Hello"
2. 작은따옴표: 'Hello'
3. 역 따옴표(백틱, backtick): Hello

큰따옴표와 작은따옴표는 ‘기본적인’ 따옴표로, 자바스크립트에서는 이 둘에 차이를 두지 않습니다.

역 따옴표로 변수나 표현식을 감싼 후 ${…}템플릿리터럴안에 넣어주면,

아래와 같이 원하는 변수나 표현식을 문자열 중간에 손쉽게 넣을 수 있습니다.

let name = "John";

// 변수를 문자열 중간에 삽입
console.log( `Hello,${name}!` ); // Hello, John!

// 표현식을 문자열 중간에 삽입
console.log( `the result is${1 + 2}` ); // the result is 3

${…} 안에는 name 같은 변수나 1 + 2 같은 수학 관련 표현식을 넣을 수 있습니다.
물론 더 복잡한 표현식도 넣을 수 있습니다.

이렇게 문자열 중간에 들어간 변수나 표현식은 평가가 끝난 후 문자열의 일부가 됩니다.

큰따옴표나 작은따옴표를 사용하면 중간에 표현식을 넣을 수 없다는 점에 주의하시기 바랍니다.

 

이 방법은 역 따옴표를 써야만 가능합니다.

console.log( "the result is ${1 + 2}" ); // the result is ${1 + 2}

---

4)불린형(true,false)

 

불린형(논리 타입)은 true와 false 두 가지 값밖에 없는 자료형입니다.

불린형은 긍정(yes)이나 부정(no)을 나타내는 값을 저장할 때 사용합니다.

true는 긍정, false는 부정을 의미합니다.

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

불린값은 비교 결과를 저장할 때도 사용됩니다.

let isGreater = 4 > 1;

console.log( isGreater ); // true (비교 결과: "yes")

---

5)null(’존재하지 않는값’, ‘비어있는값’, ‘알수없는값’)

 

null 값은 지금까지 소개한 자료형 중 어느 자료형에도 속하지 않는 값입니다.

null 값은 오로지 null 값만 포함하는 별도의 자료형을 만듭니다.

 

자바스크립트의 null은 자바스크립트 이외 언어의 null과 성격이 다릅니다.

다른 언어에선 null을 '존재하지 않는 객체에 대한 참조’나'널 포인터(null pointer)'를 나타낼 때 사용합니다.

하지만 자바스크립트에선 null을 ‘존재하지 않는(nothing)’ 값, ‘비어 있는(empty)’ 값, ‘알 수 없는(unknown)’ 값을

나타내는 데 사용합니다.

 

let age = null;은 나이(age)를 알 수 없거나 그 값이 비어있음을 보여줍니다.

let age = null;

---

6)undefiend(’할당되지 않은 상태’)

undefined 값도 null 값처럼 자신만의 자료형을 형성합니다.

undefined는 '값이 할당되지 않은 상태’를 나타낼 때 사용합니다.

변수는 선언했지만, 값을 할당하지 않았다면 해당 변수에 undefined가 자동으로 할당됩니다.

let age;
console.log(age); // 'undefined'가 출력됩니다.

개발자가 변수에 undefined를 명시적으로 할당하는 것도 가능하긴 합니다.

let age = 100;
// 값을 undefined로 바꿉니다.
age = undefined;
console.log(age); // "undefined"

하지만 이렇게 undefined를 직접 할당하는 걸 권장하진 않습니다.

변수가 ‘비어있거나’ ‘알 수 없는’ 상태라는 걸 나타내려면 null을 사용하고,

undefined는 값이 할당되지 않은 변수의 초기값을 위해 예약어로 남겨둡시다.

---

7)심볼형(symbol)

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

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

[JS] 📚 자바스크립트 자료형 Symbol 🚩 정리

(여기 너무 나도 설명이 잘되어있어서 위와 같이진행하겠습니다.)

 

---

목차

[JavaScript 33가지 지식] 시리즈 소개 및 목차

 

---

 

참고자료

모던 JavaScript 튜토리얼

 

👨‍💻 Dev Scroll