본문 바로가기

[ONEBITE-REACT] JS 기본 - 자료형 (Data Types)

codeConnection 2024. 3. 11.

의미

자료형 = type(집합).

1, 2, 3, 4 등의 숫자들이 모이면 '숫자', "사과", "배" 등의 문자들이 모이면 "문자"라는 집합으로 묶을 수 있는 것처럼, 자료형은 자료들의 공통된 성질을 나타낸다.

자바스크립트에서의 자료형 종류

  • 자료형 (DataType)
    • 원시 타입
      • Number
      • String
      • Boolean
      • Null
      • Undefined
    • 객체 타입
      • Object
        • Array
        • Function
        • RegexExp

원시 타입 (기본형 타입)

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는 시스템상 아무 값이 없다고 출력하는 메시지이다.

댓글