[JavaScript] 자바스크립트 자료형과 형 변환 [원시 타입과 비 원시 타입, 묵시적 형 변환, 명시적 형 변환]

---

- 자료형과 형 변환

1. 원시 타입과 비 원시 타입

자바스크립트 자료형은 크게 원시타입과 비 원시 타입으로 나뉜다.

- 원시 타입 : 하나의 고정된 값을 갖는 변수들의 타입
  ex) 숫자형, BigInt형, 문자형, Boolean형, Null, Undefined, Symbol형

- 비 원시 타입 : 한 번에 여러 개의 값을 갖고 있는 변수들의 타입
  ex) 객체형 (객체, 함수, 배열)

* 이번 게시글에서 Symbol형은 안다룰 예정

let number = 123;
number = "123"; // 원시 타입 : 단 하나의 값만을 갖고있는 타입들

let array = [1, "2", 3]; // 비원시 타입 : 여러 개의 값을 갖고있는 타입

---

1) 숫자형

숫자형(Number 타입)은 정수, 소수 등 모든 숫자를 나타낸다.

// 덧셈 ＋, 뺄셈 －, 곱셈 ＊, 나눗셈 ／의 사칙연산이 가능
let number = 25;
console.log(number + 5); // 30
console.log(number - 5); // 20
console.log(number * 5); // 125
console.log(number / 5); // 5

// 정수와 소수 외에 Infinity, NaN 과 같은 특수한 숫자 값들도 포함
number = 20;
number = 10.00123;
number = Infinity; // 무한대
number = NaN; // Not a Number(숫자가 아니다) : 부정확한 연산을 하게 될 경우 반환되는 값

number = 10;
console.log(number / 0); // Infinity
console.log("자바스크립트" / number); // NaN

---

2) BigInt형

BigInt 타입은 숫자형으로는 표현하지 못하는 범위인 (2^53 - 1)보다 크거나 -(2^53 - 1) 보다 작은 정수를 나타내야 할 때 사용한다. (아직 몇몇의 브라우저에서는 지원하지 않기에 자주 쓰이지는 않음)

let big1 = 9007199254740991n; // 끝에 'n'을 붙임
let big2 = BigInt("9007199254740991"); // 함수 BigInt() 호출

---

3) 문자형

문자형(String 타입)은 따옴표로 묶어 사용한다. [ "큰따옴표", '작은따옴표', `역따옴표(백틱)` ]
(역따옴표를 사용하면 템플릿 리터럴 ${}를 사용할 수 있다.)

let name1 = "yermi"; // 큰따옴표
let name2 = "yermi"; // 작은따옴표
let name3 = `yermi`; // 역따옴표(백틱)

// 문자열 안에 특정 변수에 저장된 값을 넣을 수 있다.
let name = "yermi";
let intro = `제 이름은 ${name} 입니다.`;
console.log(intro); // 제 이름은 yermi 입니다.

---

4) Boolean형

Boolean형은 값이 true, false로 이루어져 있다. (주로 참인지 거짓인지 분별하는 값을 저장할 때 사용)

let isClicked = false; // 버튼이 클릭되었는지 안되었는지
let isOpen = true;     // modal이 열렸는지 안열렸는지

// if문에 자주 사용
if (isClicked) {
    console.log("클릭O");
} else {
    console.log("클릭X");
}

---

5) Null

null 값은 존재하지 않거나, 알 수 없는 값을 나타낼 때 사용한다.
(다른 언어들과는 다르게, 자바스크립트에서 null은 오직 null 값만 포함하는 자료형이다.)

let name = null;

let age;
console.log(age); //null이 아니라 undefined이다.

---

6) Undefined

null 값과 마찬가지로, undefined 값만을 포함하는 자료형이다.
(변수에 값이 할당되지 않은 상태일 때 자동으로 undefined라는 값이 할당 된다.)

let age;
console.log(age); //undefined

---

2. 묵시적 형 변환, 명시적 형 변환

1) 묵시적 형 변환

묵시적 형 변환 : 우리가 의도해서가 아니라 자동으로 자료형을 변환

let num1 = "15";
let num2 = 5;

console.log(num1 / num2); // 3
// 자바스크립트 엔진이 나누기 연산을 실행하기 위해 문자열 "15"를 숫자 15로 적절하게 자동 변환

---

2. 명시적 형 변환

명시적 형 변환 : 내장함수 등을 이용하여 값을 유지하며 자료형을 의도적으로 변환

let num1 = "15";
let num2 = 5;

console.log(num1 + num2); // 155
// 문자열 "15"가 숫자형으로 변환되지 않고, 숫자 5가 문자열로 변환되어 "155" 라는 문자열이 출력

console.log(parseInt(num1) + num2); // 20
// parseInt()를 사용해 num1의 값인 문자열 15를, 숫자형 15로 변환

---

- 참고자료

웹 프론트엔드를 위한 자바스크립트 첫 걸음 - 인프런 | 강의

---