[JS] 자료형(Data type)

개요

컴퓨터는 숫자와 문자열 등을 서로 다른 자료형으로 구분하여 처리한다.

종류

자바스크립트에서는 여러 가지 자료형이 있으며, 크게 기본 유형, 복합 유형, 특수 유형으로 나뉜다. (사실 자료형은 파이썬의 자료형과 비슷한 부분이 많아 파이썬의 자료형을 안다면 그리 어렵진 않을 것이다)

• 기본 유형 : 숫자형, 문자열, 논리형이 있다.
  • 숫자형 : 숫자 그대로 표현한다. 예) 12
  • 문자열 : 따옴표 (’’ 또는 “”)로 묶어서 표현한다. 예) “hi”
  • 논리형 : true, false 이 두 값만 존재하는 유형. → 파이썬에서는 True, False처럼 앞 글자를 대문자로 쓰지만, 자바스크립트에서는 true, false와 같이 모든 글자들을 소문자로 쓰는 것에 유의!
• 복합 유형 : 배열과 객체가 있다.
  • 배열 : 대괄호로 둘러싸서 표현하며, 그 안에 여러 개의 값들을 저장할 수 있는 자료형. 파이썬의 리스트와 동일하다. 예) let myArray = [’nice’, ‘to’, ‘meet’, ‘you’, 55];
  • 객체 : 함수와 클래스로 생성된 인스턴스. 파이썬의 객체와 같은 의미인 것 같다. 물론 세부적인 문법은 당연히 다르겠지만.
• 특수 유형
  • undefined : 자료형이 지정되지 않은 경우. var 키워드를 통해 변수 선언만 하고 할당하지 않을 때 볼 수 있다.
  • null : 값이 유효하지 않은 상태.

자료형 확인

어떤 데이터가 주어졌을 떄, 해당 데이터가 어떤 자료형인지 자바스크립트 상에서 알고자 한다면 typeof 키워드를 이용한다. 다음은 크롬 콘솔창에서 입력한 코드이다.

> typeof 12;
<- 'number'

숫자형(number)

자바스크립트에서는 수에 대해, 정수형과 실수형으로 나눌 수 있다. 그러나 사실 자바스크립트에서 실제로는 정수형 데이터든 실수형 데이터든 둘 다 ‘number’형으로 인식한다.

typeof 12;
'number'
typeof 11.52;
'number'

문자열(string)

문자열은 따옴표로 묶인 데이터 자료형이다.

만약 문자열 안에 다른 따옴표로 둘러 쌓인 문자열을 넣고자 한다면, 전체 문자열은 큰 따옴표로 묶고, 내부에 삽입할 문자열을 작은 따옴표로 묶는 식으로 하여 둘 사이의 따옴표를 구분하면 된다.

document.write("<p style='border: 1px solid black;'>", 'hi', '</p>');

예제 3-1 실행결과

배열 (Array)

자바스크립트에서의 배열은 파이썬의 리스트와 동일하게, 대괄호([])로 정의되며, 그 안에 쉼표(,)를 구분자로 사용하여 여러 요소들을 하나의 배열 안에 삽입할 수 있다. 또한 배열의 인덱스도 파이썬과 동일하게 0부터 시작한다.

사진 1. 배열을 선언하고, 해당 배열을 출력한 결과. 위 사진에서 볼 수 있듯, 배열의 맨 첫 번째 요소의 인덱스는 0부터 시작됨을 알 수 있다.

하나의 배열 중에서 특정 값을 검색하고자 한다면 array[3]과 같이 배열이 담긴 변수명 뒤에 대괄호를 쓰고, 그 안에 원하는 값의 인덱스를 적으면 된다. 이 또한 파이썬의 리스트와 동일하다.

사진 2. 인덱싱

다만, 파이썬의 리스트에서 인덱스 범위를 초과하는 숫자를 이용해 인덱싱할 경우, IndexError라는 에러가 발생하지만, 자바스크립트에서는 위 사진에서 보듯, ‘undefined’만 나올 뿐 에러는 발생하지 않는다.

자바스크립트는 동적 언어

파이썬에서는 코드 중간에 이미 선언된 변수의 값을 다른 값으로 재할당할 때 아예 다른 자료형으로 재할당할 수 있다. 또한, 변수를 선언할 때 변수의 자료형이 무엇인지 정의하지 않는다. (물론 my_var: int = 3과 같이 type annotation을 사용할 수 있지만, 이는 강제사항이 아니다)

이러한 특성은 자바스크립트에서도 동일하게 적용된다. 즉, 변수 선언 시 해당 변수의 자료형을 미리 선언할 필요가 없으며, 중간에 아예 다른 자료형의 값을 변수에 재할당해도 된다.

let something = 'hi';
something = 3;
console.log(something);
console.log(typeof something);

3
number

이러한 특성을 가진 프로그래밍 언어를 동적 언어(dynamic language)’또는 스크립팅 언어(scripting language)라 하며, 파이썬과 자바스크립트가 이에 해당한다.

(동적 언어와 그에 반대되는 개념의 정적 언어에 대해서는 정적 언어와 동적 언어 페이지 참고)

---

References

[1] 고경희 - Do it! 한 권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석

This content is licensed under CC BY-NC 4.0