[ONEBITE-REACT] JS 기본 - 자료형 (Data Types)
의미
자료형 = type(집합).
1, 2, 3, 4 등의 숫자들이 모이면 '숫자', "사과", "배" 등의 문자들이 모이면 "문자"라는 집합으로 묶을 수 있는 것처럼, 자료형은 자료들의 공통된 성질을 나타낸다.
자바스크립트에서의 자료형 종류
- 자료형 (DataType)
- 원시 타입
- Number
- String
- Boolean
- Null
- Undefined
- 객체 타입
- Object
- Array
- Function
- RegexExp
- Object
- 원시 타입
원시 타입 (기본형 타입)
Number Type(숫자)
- 모든 숫자롤 의미한다. 정수, 실수, 음수 모두 Number Type이다.
- 숫자로 보이지 않는 무한대, NaN도 number 타입이다.
- Number Type은 사칙연산과 나머지 (모듈러 연산) 계산이 가능하다.
// 모든 숫자는 Number 타입이다.
let num1 = 32; // 정수
let num2 = 1.5; // 실수
let num3 = -20; // 음수
// 숫자로 안 보이는 값들도 아래의 경우는 Number 타입이다.
let num4 = infinity; // 양의 무한대
let num5 = -infinity; // 음의 무한대
let num6 = NaN; // Not a Number 연산에 실패했을 때 발생하는 오류 메시지이다.
// 사칙연산이 가능하다.
console.log(num1 + num2); // 더하기
console.log(num1 - num2); // 빼기
console.log(num1 * num2); // 곱하기
console.log(num1 / num2); // 나누기
console.log(num1 % num2); // 나머지 (모듈러 연산이라고도 함.)
NaN 추가 설명
console.log(typeof 1 * "Hello");
// 위와 같이 숫자가 아닌 데이터 타입을 계산 시키면 콘솔에는 NaN이라는 에러가 출력되고 이는 넘버타입이다.
String Type (문자열)
- ""나 ''와 같이 따옴표로 묶어서 문자를 표현한다.
- 따옴표로 묶지 않으면 자바스크립트에서는 변수명으로 인식한다.
- 문자열은 덧셈 연산을 지원한다. 숫자를 더하는 개념은 아니고, 텍스트를 한 군데로 합쳐주는 기능이다.
- Template Literals(템플릿 리터럴)이라고 하여 ``백틱을 사용해서 따옴표 대신 문자열을 표현할 수 있다.
장문으로 작성할 수 있고, 줄바꿈 등도 우리가 입력한 그대로 입력이 가능하다. 템플릿 리터럴에서는 ${변수명}의 형태로 변수를 호출하는 것도 가능하다.
let myName = "장원영";
let myName = 장원영; // 이렇게 선언하면 장원영은 문자열이 아니라 변수의 이름으로 생각해서
// myName은 장원영이라는 변수와 같다고 해석된다.
let myGroup = "아이브";
let myIntroduce = myGroup + myName;
console.log(myIntridouce); // "아이브장원영"이라고 출력된다.
let myIntroduceText = `${myName}은 ${myGroup}에서 활동하고 있습니다.` // 템플릿 리터럴
Boolean Type (불리언 타입)
- True나 False로 표현되는 값.
- 주로 상태를 나타내는 변수와 함께 사용한다.
let isSwitchOn = true;
let isEmpty = false;
// 위와 같이 스위치가 켜져 있으면 true, 비어있으면 false와 같이 상태를 나타내는 변수와 함께 사용한다.
Null Type (아무 것도 없다.)
let empty = null;
Undefined Type (아무 것도 없다.)
let none;
console.log(none); // undefined로 출력됨.
Null과 Undefiened의 차이는 null은 값이 없음을 알리기 위해 개발자가 직접 입력하는 값이다.
그리고 undefined는 시스템상 아무 값이 없다고 출력하는 메시지이다.
'Programing > React' 카테고리의 다른 글
[ONEBITE-REACT] JS 기본 - 조건문 (Conditional Satatement) (0) | 2024.03.11 |
---|---|
[ONEBITE-REACT] JS 기본 - 연산자 (Operator) (0) | 2024.03.11 |
[ONEBITE-REACT] JS 기본 - 형 변환 (Type Casting) (0) | 2024.03.11 |
[ONEBITE-REACT] JS 기본 - 변수와 상수 (0) | 2024.03.10 |
[ONEBITE-REACT] JS 기본 - VSCode 준비하기 (0) | 2024.03.10 |
댓글