들어가기에 앞서

나는 프론트엔드 개발자가 되고 싶다. 백엔드 개발자가 되기 싫은건 아니다. 그러나 프론트엔드 개발자는 사용자가 직접 마주하는 화면을 담당하고, 프론트엔드에서 사용하는 기술은 변화가 매우 빠른 편이다. 이 점이 프론트엔드 개발자를 희망하는 이유이다. 프론트엔드는 크게 HTML, CSS, Javascript를 사용해 화면을 구성한다. 물론 HTML과 CSS도 중요하지만 먼저 Javascript에 대해 정리해보려고 한다. 왜냐하면 코딩테스트를 볼 때 Javascript 언어를 사용하고, 몇 년전부터 프론트엔드 개발에 많이 사용되는 React, Vue 등의 라이브러리 또는 프레임워크는 Javascript 기반이기 때문이다. 이런 이유로 Javascript의 이해도가 중요하다고 생각되어 잊어버리지 않게 글로 정리하려고 한다.

코어 자바스크립트라는 책을 읽고 내용을 정리한다. 틈틈이 읽어서 시리즈로 정리해보고 싶다.

자바스크립트의 자료형

자바스크립트의 자료형은 크게 기본형(원시형, Primitive type)과 참조형(Reference type)으로 나뉜다.
기본형에는 숫자, BigInt, 문자, 불린(Boolean), null, undefined, 심볼이 있으며
참조형에는 객체가 있다. 객체에는 배열, 함수, 날짜, 정규표현식 등과 ES6에서 추가된 Map, Set 등이 포함된다. 이를 그림으로 표현하면 아래와 같다.

숫자

1  let n = 123;
2  n = 123.45;

숫자는 정수 또는 부동 소수점 숫자를 나타낸다. 일반적인 숫자 외에도 NaN, Infinity, -Infinity같은 특수 숫자 값이 포함된다.

BigInt

1  const n = 123456781234567812345678123456781234567812345678n;
2  // 숫자형 자료형 맨 뒤에 n이 붙으면 BigInt

자바스크립트는 내부 표현 방식때문에 2⁵³-1 보다 큰 값 또는 -(2⁵³-1) 보다 작은 값은 숫자형을 사용해 나타낼 수 없다. 매우 큰 수를 표현하기 위해서 BigInt를 사용한다.

문자

1  const str1 = "hello";
2  const str2 = "hello";
3  const str3 = `hello ${hello}`;

문자를 나타내는 자료형이다. 큰따옴표("), 작은따옴표(') 또는 백틱(`)을 사용해 나타낸다.
큰따옴표와 작은따옴표는 같은 기능을 하고, 백틱은 문자열 안에 변수를 표현할 때 사용한다. 백틱안에 ${}를 통해 변수를 사용할 수 있다.

불린(Boolean)

1  const isLogin = false;
2  const isGood = true;
3  const isGreater = 4 > 1;

불린은 참 또는 거짓을 저장할 때 사용한다. 또한 세 번째 줄처럼 비교 결과를 저장할 수도 있다.

null

1  let age = null;

null은 앞에서 설명한 자료형 중 어느 자료형에도 속하지 않는 값이다. 존재하지 않는 값, 비어 있는 값, 알 수 없는 값을 나타내는 데 사용한다.

undefined

1  let age;

undefined 또한 null 처럼 자신만의 자료형을 형성한다. undefined는 값이 할당되지 않은 상태를 나타낼 때 사용하는데, 변수에 아무것도 할당되어 있지 않으면, 식별자에 접근할 때 undefined를 반환한다.

객체

앞에서 살펴 본 자료형은 모두 문자열이나 숫자 등 한 가지만 표현할 수 있었다. 그러나 객체는 여러개의 데이터를 표현할 수 있다.

정리

자바스크립트의 자료형 8가지를 정리해보았다. 이해하고 있다고 생각하고 글을 쓰기 시작했는데 제대로 모르는 게 많았고, 모르는 게 많은 상태에서 억지로 글을 쓰려고 하니까 핵심내용이 포함되지 않고 정리가 잘 되지 않는 느낌이다. 다른 사람들 블로그 글을 보면 이해하기 쉽고, 필요한 내용이 많고 그림을 통한 설명도 많은데 그런 글을 쓰기까지 얼마나 많은 노력이 필요한지 느낄 수 있었다. 아직 글을 쓰기 시작한지 얼마 안돼서 그렇다고 생각하고 더 열심히 정리하고 글을 작성해야겠다.