*위 내용은 <Do it! HTML+CSS+자바스크립트 웹 표준의 정석> 책을 기반으로
공부하면서 작성되었습니다.

자료형이란?

자료형이란 프로그램에서 처리할 자료(data)의 형태를 뜻한다.
자료형은 다른 말로 데이터 유형, 데이터 타입, 데이터형이라고도 한다.
하지만 해당 아티클에서는 자료형이라고 지칭하도록 하겠다.

자바스크립트의 자료형은 숫자, 문자열, 논리형과 같은 기본 유형과
배열, 객체를 다루는 복합 유형, undefined, null과 같은 특수 유형으로 분류된다.

지금부터 자바스크립트의 자료형을 하나씩 살펴보도록 하자.

기본 유형 - 숫자형

자바스크립트에서 숫자형은 정수와 실수로 나누어 구분한다.

1. 정수

정수는 알다시피, 소수점 없는 숫자를 이른다.
자바스크립트에서는 정수 100을 숫자형으로 인식한다.

정수는 표현 방법에 따라 10진수, 8진수, 16진수의 3가지 유형으로 나누기도 한다.
아직 8진수와 16진수가 익숙하진 않지만 프로그래머에게는 반드시 알아두어야 하는 개념 중 하나라고 하니 간단하게라도 한 번 정리해보도록 하자.

10진수: 0~9로 표현할 수 있는 수 ex) 2000, 26, 100

8진수: 0~7로 표현할 수 있는 수, 10진수와 구분하기 위해 숫자 0을 맨 앞에 붙임 ex) 012, 013, 02000

16진수: 숫자 0~9와 알파벳 A~F로 표현할 수 있는 수(16진수는 프로그래밍 할 때 가장 많이 사용), 10진수와 구분하기 위해 0x 또는 0X를 맨 앞에 붙임, 이 때 알파벳 A~F는 대문자와 소문자 모두 사용 가능 ex) 0xfff, 0xFFF, 0Xfff, 0XFFF

2. 실수

실수는 소수점이 있는 숫자를 가리킨다. 예를 들어, 자바스크립트에서 4.13은 정수와 마찬가지로 숫자형에 해당된다. C나 자바와 같은 프로그래밍 언어에서는 정수와 실수를 명확히 구별하고 처리 방법도 다르지만, 자바스크립트에서는 정수와 실수를 함께 묶어 숫자형이라고 한다.

자바스크립트에서 예상하지 못한 계산 결과값이 나올 수 있기 때문에 실수를 정밀하게 계산하는 것은 적합하지 않다.
예를 들어, 계산식 0.1 + 0.2의 결과값은 0.3이 나올 것 같지만 실제로 자바스크립트에서는 0.30000000000000004를 표시한다.

왜일까?
자바스크립트에서는 0.1이나 0.2를 2진수로 변환해서 계산하는데 이때 자릿수가 많은 소수로 변환되고, 그 상태에서 0.1과 0.2를 더하기 때문이다.
따라서 자바스크립트에서 정밀하게 숫자를 계산하는 프로그램을 만들 때는 주의해야 한다.

문자열

문자열은 작은따옴표('')나 큰따옴표("")로 묶은 데이터를 의미한다.
따라서 숫자도 작은따옴표나 큰따옴표로 묶으면 문자열로 인식한다.
단, 작은따옴표로 시작한 문자열 데이터는 작은따옴표로 끝맺음을 해야 하고
큰따옴표로 시작하느 문자열 데이터는 큰따옴표로 끝맺음해야한다는 점을 꼭 기억해두자.

만약 큰따옴표로 묶은 문자열 안에 또 다른 문자열을 넣으려면 어떻게 해야할까?
예를 들어, 문자열 안에 span style="color:blue" 처럼 다른 문자열을 넣어야 하는 상황을 가정해보자.
이 경우에는 아래와 같이 큰따옴표가 중복되지 않도록 속성값은 작은따옴표로 묶어서 표현해야 한다.

document.write("<span style='color:blue'>","Do it","</span>")

논리형

논리형은 불린(boolean)유형이라고도 하며, 참이나 거짓의 값을 표현하는 자료형을 말한다.
어떤 조건을 확인해서 그 조건이 맞으면 true, 맞지 않으면 false의 결과값을 나타낸다. 주로 프로그램에서 조건을 확인할 때 논리형 데이터를 사용하는데
예를 들어, 다음과 같이 숫자 100과 10을 비교한 식이 있다면, 맞으면 true, 틀리면 false를 보여준다.

100 < 10
>>false

100 > 10
>> true

undefined 유형과 null 유형

undefined는 자료형이 정의되지 않았을 때의 데이터 상태를 나타낸다.
자바스크립트에서는 변수를 선언할 때, 자료형을 미리 지정하지 않고 값을 할당할 때 결정한다. 따라서 변수 선언만 하고 값이 할당되지 않은 자료형을 undefined라고 한다.
즉, undefined는 단순히 '변수에 값이 할당되지 않았다'는 의미이다.

반면 null은 '데이터의 값이 유효하지 않은 상태'를 말한다.

undefined와 null은 비슷해보이지만 차이가 크기 때문에
꼭! 구별이 필요하다.

한 문장으로 정리해보자면,

undefined는 변수를 선언한 상태에서 값이 할당되지 않은 유형인 반면,
null은 변수에 할당된 값이 유효하지 않다는 차이라는 점 꼭 기억해두기로 하자.

배열

지금까지 정리한 자료형은 변수 하나에 하나의 값만 저장할 수 있었지만,
배열(array)은 하나의 변수에 값을 여러 개 저장할 수 있다.
배열은 여러 개의 데이터값을 하나의 배열 이름으로 묶어서 선언하며,
다음과 같이 데이터 값을 쉼표로 구분해서 대괄호([])로 묶으면 배열 선언이 가능하다. 물론 빈 배열도 배열을 선언한 것에 해당한다.

배열명["값1", "값2", .....]
배열명[]

계절 이름을 변수에 할당하는 프로그램으로 예를 들어보자.
만약 배열을 사용하지 않는다면, 다음과 같이 변수를 4개 정의하고 값을 할당해야 할 것이다.

var spring = "봄";
var summer = "여름";
var fall = "가을";
var winter = "겨울";

그렇다면 배열을 사용하면 어떻게 될까?
배열을 사용하면 다음과 같이 매우 간단히 1줄짜리 배열로 작성할 수 있다.

var season = ["봄", "여름", "가을", "겨울"]

배열은 여러 개의 요소로 구성되어 있는데 다음 그림과 같이 각 요소는 자신 만의 방 번호를 가지게 된다. 이 방 번호가 인덱스이며 0부터 시작한다.

season 배열에서 두 번째 값을 알고 싶다면 다음과 같이 작성을 하면 된다.
두 번째 요소의 인덱스는 1이므로 콘솔 창에 'seasone[1]'을 입력하면 "여름"이라는 데이터를 보여준다.

seasone[1] // seasone 배열의 두 번째 값 출력
>>여름

배열은 for과 같은 반복문을 사용해서 각 요소의 값을 꺼내거나 length property를 사용해서 크기를 홝인하는 등 다양하게 활용이 가능하므로 꼭 숙지해두도록 하자!