[Js] 자료형에 대해서 알아보자.

자바스크립트에서 변수를 선언할 때 데이터 타입을 명시해주지 않아도 에러가 발생하지 않습니다. 또한, 변수에 저장되는 값의 자료형은 언제든지 바꿀 수 있습니다. 이는 자바스크립트가 동적 타입(dynamically typed)언어이기 때문입니다.

 

let message = 'hello';
message = 123456;

message라는 변수에 초기 문자형태의 자료형을 담았지만 다시 숫자형 자료를 대입해도 전혀 에러가 발생하지 않습니다.

 

 

 

자바스크립트에는 8가지의 자료형이 존재합니다. 이를 이해하는 것이 중요합니다. 

 

 

 

문자형(String)

따옴표로 묶은 형태의 자료형입니다. 자바스크립트에서 따옴표는 세 가지 종류가 있습니다.

 

let str = "문자형";
let str1 = '작은 따옴표도 가능합니다.';
let phrase = `다른 ${str}을 포함하는 것이 가능합니다.`

1. 큰따옴표 "hello"

2. 작은따옴표 'hello'

3. 백틱(역따옴표, backtick) `hello`

 

이 중 주목해야 할건 바로 백틱인데 백틱 안에 ${}를 사용해서 다른 변수 혹은 표현식을 포함하는 것이 가능합니다. 뿐만 아니라 수학적 계산 역시도 가능하며 더 복잡한 표현식을 추가하는 것 역시 가능합니다. 

 

let name = 'john';

alert(`Hello ${name}!`)	// Hello john!
alert(`${1 + 2}가 답이다.`) // 3이 답이다.

 

큰따옴표와 작은따옴표는 백틱과 같은 기능이 없어 중간에 ${}를 사용해서 표현식을 넣을 수 없습니다. 

 

 

 

숫자형(Number)

숫자형은 정수 및 부동소수점 숫자를 나타냅니다. 숫자형과 관련된 더하기(+), 빼기(-), 곱하기(*), 나누기(/) 등의 연산도 사용할 수 있습니다. 숫자형에는 Infinity, -Infinity, NaN과 같은 '특수 숫자 값' 이 포함됩니다. 

 

Infinity

Infinity는 어떤 숫자보다 더 큰 특수 값, 즉 무한대를 나타냅니다. 어느 숫자든 0으로 나누면 무한대 값을 얻을 수 있습니다.

alert(1 / 0) //infinity

 

Infinity를 직접 참조할 수도 있습니다. 

alert(infinity);

 

NaN

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

alert('문자형인데' / 2); // NaN

 

또한, 연산과정 중에 NaN이 발생했다면 어떤 추가 연산을 해도 결국  NaN이 반환됩니다. 

alert('문자가 아닌데' / 2 + 5); // NaN

 

 

 

BigInt

BigInt는 정수를 나타내는 자료형으로  Number 자료형의 한계를 극복하기 위해서 ECMA Script 2020에 새롭게 추가된 자료형 중 하나입니다. 기존 Number 자료형은 2^53-1(9007199254740991)보다 큰 정수를 표현할 수 없었습니다.

 

이런 큰 숫자들은 대부분 암호 관련 작업이나 혹은 정밀도로 작업해야하는 경우에 주로 사용되며 BigInt는 여기에 걸맞는 자료형 입니다.  BigInt형 값은 정수 리터럴 끝에 n을 붙여 만들 수 있습니다. 

const bigInt = 1234567890123456789012345678901234567890n;

 

 

 

불린형(Boolean)

불린형은 true 또는 false를 사용해서 긍정, 부정을 나타내는 자료형입니다.

let nameFieldChecked = true; //name field 활성화(checked)
let ageFieldChecked = false; //age field 비활성화(noy checked)

 

또한 불린 자료형은 비교 결과를 저장할 때도 사용됩니다. 

let is Greater = 4 > 1;

alert(isGreater) // true; 

//4가 1보다 큰 것이 참(true)이기 때문에

 

 

 

 

null

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

let age = null;

 

다른 프로그래밍 언어에서는 null을 '존재하지 않는 객체에 대한 참조' 정도로 해석하지만 자바스크립트에서 null은 존재하지 않는 값(nothing), 비어 있는(empty) 값, 알수없는(unknown) 값을 나타내는데 사용합니다.  

 

위 코드 예시에서 age는 곧, 나이를 알 수 없거나 그 값이 비어있는 값을 나타냅니다. 

 

 

 

 

undefined

undefined 역시 null과 마찬가지로 자신만의 자료형을 형성합니다. undefinded는 '값이 할당되지 않은 상태'를 나타낼 때 사용됩니다. 즉, 변수는 선언했지만 값을 할당하지 않은 상태를 말합니다.

let age;

alert(age); //undefined

 

변수에 명시적으로 undefined를 할당하는 것이 가능합니다.

let age = 100;

age = undefined;

alert(age) //undefined

하지만 이렇게 undefined를 직접 할당하는 것은 권장사항이 아닙니다. 변수가 비어있거나 알수없는 상태라는 걸 나타내려면 null을 사용하는걸 권장합니다. undefined는 값이 할당되지 않은 변수의 초기값을 위해 예약어로 남겨두기로 합시다.

 

 

 

객체와 심볼

객체(object)형은 특수한 자료형입니다. 객체형을 제외한 다른 자료형은 (문자던 숫자던) 한 가지만을 표현할 수 있기 때문에 원시 자료형(Primitive data type)이라고 부릅니다. 반면 객체형을 사용하면 더 복잡한 데이터 구조를 표현할 수 있습니다.

 

심볼형은 객체의 고유한 식별자(unique identifier)를 만들 때 사용됩니다. 

 

 

 

 

typeof 연산자

typeof 연산자는 변수의 데이터 타입을 반환합니다. 

let num = 10;
console.log(typeof num); // "number" 출력

let str = "Hello, World!";
console.log(typeof str); // "string" 출력

let bool = true;
console.log(typeof bool); // "boolean" 출력

let nullValue = null;
console.log(typeof nullValue); // "object" 출력

let undefinedValue;
console.log(typeof undefinedValue); // "undefined" 출력

let person = {name: "John", age: 30};
console.log(typeof person); // "object" 출력

function add(num1, num2) {
  return num1 + num2;
}
console.log(typeof add); // "function" 출력

let bigNum = 9007199254740992n;
console.log(typeof bigNum); // "bigint" 출력

let sym = Symbol();
console.log(typeof sym); // "symbol" 출력