본문 바로가기

Javascript/기초

[자료와 변수] - 자료형

자바스크립트에는 8가지 기본 자료형이 있다.
  • 숫자형 - 정수, 부동 소수점 숫자 등의 숫자를 나타낼 때 사용. 정수의 한계는 ±253.
  • bigInt - 길이 제약 없이 정수를 나타낼 수 있다.
  • 문자형 - 빈 문자열이나 글자들로 이뤄진 문자열을 나타낼 때 사용한다. 단일 문자를 나타내는 별도의 자료형은 없다.
  • boolean형 - true, false를 나타낼 때 사용한다.
  • null - null 값을 위한 독립 자료형이다. null은 알 수 없는 값을 나타낸다.
  • undefined - undefined 값을 위한 독립 자료형이다. undefined는 할당되지 않은 값을 나타낸다.
  • 객체형 - 복잡한 데이터 구조를 표현할 때 사용한다.
  • 심볼형 - 객체의 고유 식별자를 만들 때 사용한다.

 

자세하게 알아보자. 

 

  • 자바스크립트에서 값은 항상 문자열이나 숫자형 같은 특정한 자료형에 속한다.
  • 자바스크립트의 변수는 자료형에 관계없이 모든 데이터일 수 있다.
  • 변수는 어떤 순간에 문자열일 수 있고, 다른 순간엔 숫자가 될 수 있다.
let fruit = "grape";
fruit = 356;

 

이렇게 자료 타입은 있지만

변수에 저장되는 값의 type은 언제든지 바꿀 수 있는 언어 = '동적 타입(dynamically typed)'언어라고 부른다.

 

  • 숫자형
let num = 567;
num = 67.892

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

- 숫자형엔 일반적인 숫자 외에 Infinity , -Infinity, NaN 같은 '특수 숫자 값'이 포함된다.

 

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

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

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

 

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

 부정확 or 정의되지 않은 수학 연산을 사용하면 NaN이 반환됨.

alert("coke" / 2); //NaN

 

 

  • BigInt

BigInt형 숫자는 자주 쓰이지 않지만

암호 관련 작업같이 아주 큰 숫자가 필요한 상황이거나

아주 높은 정밀도로 작업을 해야 할 때는 이런 큰 숫자가 필요합니다.

 

BigInt 형은 길이에 상관없이 정수를 나타낼 수 있다.

 

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

const bigInt = 342167890123456789012345678901234567890n;

 

 

  • 문자형

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

따옴표는 세 종류가 있다.

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

여기서 역따옴표로 변수나 표현식을 감싼 후 

${  } 안에 넣어주면, 아래와 같이 원하는 변수나 표현식을 문자열 중간에 손쉽게 넣을 수 있다.

let name = "suzy";

alert( `hello, ${name}!` ); //hello, suzy!

//또는 수학 관련식도 넣을 수 있다.
alert( `Result is ${12 + 34}` ); //Result is 46

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

단! 

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

마지막 Result는 역따옴표만 가능하다.

 

 

  • Boolean형

truefalse 두가지 값밖에 없는 자료형이다.

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

let number1 = 2 < 10;
alert(number1); //true

 

  • null 

null값은 지금까지 말한 자료형 중 어느 자료형에도 속하지 않는 값이다.

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

let name = null;

 

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

다른 언어에선 null을 '존재하지 않는 객체에 대한 참조' 나 'null pointer'를 나타낼 때 사용한다.

하지만

자바스크립트에선 null을 '존재하지 않는(nothing)'값, '비어있는(empty)'값, '알 수 없는(unknown)'값을 나타내는데 사용한다.

let name = null;은 name(이름)을 알 수 없거나 그 값이 비어있음을 나타낸다.

 

 

  • undefined

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

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

 

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

let age;

alert(age); //undefined

 

 

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

let age = 80;

//값을 undefined로 바꿔본다.
age = undefined;

alert(age); //undefined

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

변수가 '비어있거나' '알 수 없는 상태'라는 걸 나타내려면 null을 사용하자.

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

 

  • 객체

객체(object)형은 특수한 자료형이다.

객체는 데이터 컬렉션이나 복잡한 개체(entity)를 표현할 수 있다.

 

 

  • typeof 연산자

typeof 연산자는 인수의 자료형을 반환한다.

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

 

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

  1. 연산자 : typeof a
  2. 함수 : typeof(a)

괄호가 있으나 없으나 결과가 동일하다.

typeof a 를 호출하면 인수의 자료형을 나타내는 문자열을 반환한다.

typeof 0 //number
typeof 100n // bigInt
typeof true // boolean
typeof "jennie" // string
typeof undefined //undefined
typeof Math //object
typeof null //object
typeof Symbol("id") //symbol
typeof alert //function

 

여기서 

  • typeof Math : Math는 수학 연산을 제공하는 내장 객체이므로 "object"가 출력된다. 내장 객체는 객체형이라는 걸 알 수 있다.
  • typeof null : null은 별도의 고유한 자료형을 가지는 특수값으로 객체가 아니지만, 하위 호환성을 유지하기 위해 이런 오류를 수정하지 않고 남겨둔 상황이다. 언어 자체의 오류이므로 null이 객체가 아님에 유의하길 바란다.
  • typeof alert : typeof 는 피연산자가 함수면 "function"을 반환한다. 그러므로 typeof alert는 "function"을 출력해준다. 그런데 '함수형'은 따로 없다. 함수는 객체형에 속한다. 이것도 하위 호환성 유지를 위해 남겨진 상태다.