서론

요즈음 순수 자바스크립트로 프론트엔드 개발을 하는 경우는 거의 드문 것 같다.
하긴 이제 프론트엔드 개발을 시작한 지 2년 조금 넘은 나 조차도 거의 React나 Next.js 같은 프레임워크를 기반으로 개발을 하고 있으니 😔
물론 빠른 결과물 산출이 요구되는 현재 트렌드에 맞춰진 시대적 흐름이라고 생각은 하지만, 이럴 때일 수록 근본이 탄탄한 사람들이 더욱 빛을 바랄 수 있는 시기인 것 같아 자바스크립트 기본기에 대해 다시 한 번 공부하기로 결심했다.

따라서, 이 포스트에서는 아래와 같은 JS의 기본 타입들에 대해 알아보도록 할 것이다.

1. 숫자 (number)
2. 문자열 (string)
3. 불리언 (boolean)
4. 심볼 (symbol) *ES6 부터 제공
5. undefined
6. 객체 (object)

본론

기본 타입

JS에서 타입(data type)이란 프로그램에서 다룰 수 있는 값의 종류를 의미하며, 크게 1. 원시타입 과 2. 객체 타입 으로 구분할 수 있다.

1. 원시 타입

숫자 (number)

다른 언어들과는 다르게 JS에서는 정수, 실수를 따로 구분하지 않는다. 즉, 모든 수를 실수 형식으로만 표현한다.
또한, 매우 큰 수나 매우 작은 수를 표현할 경우에는 e표기법을 사용한다.

const num1 = 10; // 소수점을 사용하지 않은 표현
const num2 = 10.00; // 소수점을 사용한 표현
const num3 = 10.05; // 소수점을 사용한 표현
const num4 = 10e6; 

console.log(num1, num2, num3, num4); // 10, 10, 10.05, 10000000

문자열 (string)

JS에서 문자열은 "" 또는 '' 로 둘러싸인 문자의 집합을 의미한다.

const str1 = "안녕하세요."; // 안녕하세요.
const str2 = '안녕하세요.'; // 안녕하세요.
const str3 = "그는 '안녕하세요' 라고 말했다"; // 그는 '안녕하세요' 라고 말했다
const str4 = '그는 "안녕하세요" 라고 말했다'; // 그는 "안녕하세요" 라고 말했다

또한, 숫자와 문자열을 더하게 될 경우 숫자 타입을 문자열 타입으로 자동 변환하여 두 문자열을 연결하는 연산을 수행한다.

const age = 10;
const name = 'lee';

console.log(age+name); // 10lee

불리언 (boolean)

불리언은 참(true), 거짓(false) 으로 표현한다.

const a = 10;
const b = 11;

conole.log(a === b); // false

심볼(symbol)

심볼 타입은 ES6 부터 신규로 추가된 타입이다.
유일하고 변경할 수 없는 타입이며, 객체의 프로퍼티를 위한 식별자로 사용할 수 있다고 한다. 하지만, 정확하게 언제 사용되는 지는 추후 자세하게 알아봐야할 것 같다.

var sym = Symbol("javascript");  // symbol 타입
var symObj = Object(sym);        // object 타입

null 과 undefined

자바스크립트에서 null 과 undefined는 다음과 같이 취급된다.

• null : '값'이 아직 정해지지 않은 것. (typeof null === object)
• undefined : '타입'이 아직 정해지지 않은 것. 즉, 초기화되지 않은 변수나 존재하지 않는 값에 접근할 때 반환 됨. (typeof null === undefined)

// 동등 연산자 비교
null == undefined // true

// 일치 연산자 비교
null === undefined // false

객체 (object)

JS의 기본 타입은 객체 이다.
여기서 객체란 실생활에서 우리가 인식할 수 있는 사물로 빗대어 이해할 수 있다.
객체는 여러 property 또는 method를 같은 이름으로 묶어놓은 일종의 집합체라고 볼 수 있다.

var dog = { name: "감자", age: 5 }; // 객체 생성
// 객체의 프로퍼티 참조
console.log('나의 강아지 이름은' + dog.name + '이고' + dog["age"] + '살이야.') // 나의 강아지 이름은 감자이고 5살이야.

결론

🤔 JS가 다른 언어들에 비해 자유도가 높다는 말이 무슨 의미인지 조금은 이해할 수 있었던 기회였다.
🫠 흠.. 타입스크립트 짱