한 입 크기로 잘라먹는 리액트Table Of Contents
자바스크립트의 자료형을 알아보겠습니다. 간단한 실습을 병행하면서 자바스크립트 자료형의 특징을 살펴보겠습니다.
자료형과 원시 자료형
자료형(Type, 타입이라고도 함)이란 값을 성질에 따라 분류한 것입니다. 예를 들어 25라는 값은 숫자형, '안녕'이라는 값은 문자열 등 값을 그 성질에 따라 분류한 것을 자료형이라고 합니다. 자바스크립트는 자료형을 크게는 원시 또는 객체 자료형으로 나누고, 작게는 8개의 세부 자료형으로 나눕니다. 이번 절에서는 8개의 자료형 가운데 원시 자료형 5개를 먼저 살펴보겠습니다. 나머지 객체 자료형에 해당하는 객체, 배열, 함수는뒤에서 상세히 다룰 예정이며, 정규 표현식은 이 책에서는 다루지 않습니다.
원시 자료형을 원시 타입 또는 기본 타입이라고 합니다. 원시 자료형은 한 번에 단 하나의 값만 가질 수 있는 타입입니다. 한 번에 단 하나의 값만 가질 수 있다는 것은 반대로 말하면 동시에 여러 개의 값을 가질 수 없다는 뜻이 됩니다. 예를 들어 원시 자료형의 대표 격인 숫자형은 말 그대로 숫자를 의미하는 자료형으로 다음과 같이 한 번에 두 개 이상의 값을 가질 수 없습니다.
코드를 불러오는 중 입니다 ...이렇듯 중간에 값이 변할 수는 있지만 둘 이상의 값을 동시에 가질 수 없는 자료형을 원시 자료형이라고 합니다. 원시 자료형은 다시 총 5개의 자료형으로 세분화됩니다.
숫자형
자바스크립트에서 숫자형(Number Type)은 수의 종류를 구분하지 않습니다. 따라서 소수, 음수, 실수와 같은 수를 모두 포함하는 자료형입니다.
코드를 불러오는 중 입니다 ...C나 자바 언어가 정수와 소수를 각각 다른 자료형으로 구분하는 것과 달리, 자바스크립트는 모든 종류의 숫자를 ‘숫자형’ 하나로 처리합니다.
자바스크립트 숫자형은 덧셈, 뺄셈, 곱셈, 나눗셈의 사칙연산을 수행합니다.
코드를 불러오는 중 입니다 ...기본 사칙연산 외에도 ‘모듈러(Modulo) 연산’이라고 하여, % 기호를 이용해 나머지를 구합니다.
코드를 불러오는 중 입니다 ...숫자형에는 정수, 실수 말고도 일반적이지 않은 몇 가지 값이 있습니다.
코드를 불러오는 중 입니다 ...Infinity는 양의 무한대, -Infinity는 음의 무한대를 의미하는 값입니다. 이 값들은 최솟값이나 최댓값을 구할 때 주로 사용합니다. 또한 Infinity는 0으로 어떤 수를 나눈 결과이기도 합니다.
코드를 불러오는 중 입니다 ...자바나 C 언어에서는 0으로 어떤 수를 나누면 오류가 발생하지만, 자바스크립트는 이렇게 Infinity라는 결과를 얻게 된다는 점이 특이합니다.
NaN은 Not a Number라는 뜻으로 표현이 불가능한 숫자형의 결과를 표현할 때 사용하는 값입니다. 예를 들어 숫자와 문자열을 곱하면 정상적인 연산의 결과물이 나올 수 없으므로 NaN이라는 값을 얻습니다.
다음은 NaN이 발생하는 잘못된 수치 연산의 예입니다.
코드를 불러오는 중 입니다 ...자바스크립트에
NaN이라는 값이 있기 때문에 수학 연산이 안전합니다. 숫자가 아닌 문자열을 곱하는 등 수학적으로 불가능한 연산을 명령해도 자바스크립트는 NaN 이라는 값을 반환할 뿐 오류를 일으키거나 프로그램을 멈추지 않습니다. 그래서 자바스크립트는 다른 언어에 비해 “안전한 수학 연산이 가능하다”라고 말합니다.문자형
문자형(String Type)은 사람의 이름과 같은 문자열을 포함하는 자료형입니다. 다음은 자바스크립트의 문자형을 이용해 저자의 이름을 변수에 저장한 예입니다.
코드를 불러오는 중 입니다 ...어떤 값이 문자형이라는 것을 알리기 위해서는 이 코드처럼 큰따옴표 또는 작은 따옴표로 감싸야 합니다.
문자형에 덧셈 연산자를 사용하면 두 개의 문자를 이어 붙입니다.
코드를 불러오는 중 입니다 ...큰따옴표나 작은따옴표 말고 백틱
코드를 불러오는 중 입니다 ...``을 이용해도 문자형을 만들 수 있습니다. 백틱은 키보드에서 물결 표시와 함께 있는 `를 의미합니다.① 변수 guestName에 "이정환"이라는 문자열을 저장합니다. ② 변수 greetingText에 백틱으로 감싼 문자열을 저장합니다. 백틱으로 감싼 문자열은 따옴표로 감싼 문자열과 동일한 문자형이지만,${ }안에 있는 변숫값도 문자열로 변환합니다. 결과적으로 변수 greetingText에는 welcome 이정환!이라는 문자열이 저장됩니다.
백틱을 이용하면 문자열 사이에 변수를 사용할 수 있어, 값이 변하는 동적인 문자열을 생성할 때 유용합니다. 백틱을 이용한 문자열을 흔히 ‘템플릿 리터럴(TemplateLiteral)’이라고도 합니다. 앞으로도 자주 사용하니 익숙해질 수 있도록 다음코드를 직접 작성해 연습하기 바랍니다.
코드를 불러오는 중 입니다 ...불리언, Null, Undefined
원시 자료형의 나머지 자료형으로 불리언, null, undefined가 있습니다. 예제를 보면서 이들 자료형을 간단히 살펴보겠습니다.
불리언 형(Boolean type)은 참(true) 또는 거짓(false)만을 저장하는 자료형입니다. 우리 일상에서 이런 예를 찾자면 불을 껐다 켰다 하는 스위치에 비유할 수 있습니다.
코드를 불러오는 중 입니다 ...불리언 형은 작업을 성공적으로 종료 했는지, 어떤 값이 있는지 등을 확인할 때 유용하게 사용합니다.
null은 “아무것도 없다”라는 뜻으로, 변수에 아무런 값도 할당할 필요가 없을 때 활용합니다.대다수 프로그래밍 언어에서 null은 하나의 값으로 단순하게 취급하지만, 자바스크립트에서는 독립적인 자료형으로 분류합니다.
마지막으로 소개할 원시 자료형은 ‘미정의 값’이라는 뜻을 가진 undefined입니다. C나 자바 언어에서는 변수를 생성하고 아무런 값도 할당하지 않으면 null을 갖지만, 자바스크립트에서는 null 대신 undefined를 갖게 됩니다.
코드를 불러오는 중 입니다 ...정상적인 할당이 이루어지지 않았을 때 자동으로 할당되는
undefined는 자바스크립트 프로그래밍에서 상당히 많은 오류를 일으키는 주범이기도 합니다.지금까지 숫자형, 문자형, 불리언, null, undefined으로 이루어진 5개의 원시 자료형을 알아보았습니다.