JavaScript Data Type (1)

안녕하세요. 오늘은 자바스크립트 기초 개념 중 자료형(Data Type)은 크게

 

기본 자료형(Primitive Type)과 참조 자료형(Reference Type)으로 나눌 수 있는데요.

 

우선 첫 번째로 기본 자료형 부터 알아볼게요.

 

 

 

기본 자료형(Primitive Type)

 

기본 자료형에는 다음과 같이 

 

string, number, boolean, null, undefined 타입이 있어요.

 

 

1. 문자열 (string)

 

문자열은 작은따옴표(' '), 큰따옴표(" "), 또는 백틱(`)으로 감싸서 표현해요.

 

세 가지 방법 모두 문자열을 만들 수 있지만, 백틱(`)을 사용하면 템플릿 리터럴(Template Literal)을 쓸 수 있어요.

 

** 템플릿 문자열 (Template Literal) **

 

문자열 안에서 변수나 표현식을 ${} 문법으로 삽입할 수 있고, 백틱(`)을 사용해야만 가능해요.

 

let name = '홍길동';

// 기존 문자열 연결 방식
console.log('안녕하세요 ' + name + '입니다.');

// 템플릿 리터럴 방식
console.log(`안녕하세요 ${name}입니다.`);
console.log(`3 + 5 = ${3 + 5}`);  // 표현식 삽입도 가능

 

+ 여러줄 문자열을 할 경우 일반 따옴표는 줄 바꿈을 인식하지 못하지만, 백틱(`)은 줄 바꿈을 그대로 표현할 수 있어요.

 

let greeting = `안녕하세요
만나서
반갑습니다.`;

console.log(greeting);

 

 

2. 숫자형 (number)

 

자바스크립트에서는 정수(Integer) 와 실수(Float) 모두 number 타입으로 취급해요.

let num = 10;
let float = 10.5;

console.log(typeof num);   // "number"
console.log(typeof float); // "number"

typeof 연산자는 변수의 자료형을 문자열 형태로 반환할 수 있어요.

 

3. 불리언 형(boolean)

 

불리언은 참(true) 또는 거짓(false) 두 가지 값만 가지고, 주로 조건문(if, while 등)에서 사용해요.

let bool1 = true;
let bool2 = false;

console.log(bool1);           // true
console.log(typeof bool1);    // "boolean"

 

 

4. null & undefined

 

이 두 가지는 모두 "값이 없음"을 표현하지만 의미가 달라요.

 

null은 변수에 의도적으로 “값이 없음”을 할당할 때 사용해요.

 

즉, “이 변수에는 아직 아무 값도 없다”는 개발자의 의도를 표현해요.

let value = null;
console.log(typeof value); // "object" (자바스크립트의 오래된 버그지만 그대로 유지됨)

// null 확인 예시
console.log(
  (typeof value === 'object' && !value) ? 'null' : 'not null'
);

 

undefined는 변수가 선언은 되었지만 값이 할당되지 않은 상태를 의미해요.

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

 

 

 

자료형 변환 (Type Conversion)

 

자바스크립트에서는 자료형을 명시적으로 변활 할 수 있어요.

 

 

1. 문자열 변환: string()

 

문자열 변환은 말 그대로 숫자나 다른 타입의 값을 문자열로 변환해요.

let num1 = 123;
let num2 = 456;

console.log(num1 + num2);               // 579 (숫자 연산)
console.log(String(num1) + String(num2)); // "123456" (문자열 연결)

 

 

2. 숫자형 변환: Number()

 

문자열을 숫자로 변환해요.

 

단, 숫자로 바꿀 수 없는 문자열을 변환하려 한다면 NaN(Not a Number)이 나올 수 있어요.

let strNum = '123';
console.log(Number(strNum)); // 123 (number)

let notANumber = '이건 숫자로 바꿀 수 없는 문자열이야';
console.log(Number(notANumber)); // NaN

 

 

3. 논리형 변환: Boolean()

 

값을 true / false로 변환해요.

 

false로 변환하는 값이 있는데요.

 

대표적으로 false, 0, ''(빈 문자열), null, undefined, NaN 이 있어요.

 

위의 경우를 제외한 나머지는 모두 true로 변환돼요.

console.log(Boolean('hello'));  // true (비어있지 않은 문자열)
console.log(Boolean(''));       // false (빈 문자열)
console.log(Boolean(123));      // true (0이 아닌 숫자)
console.log(Boolean(0));        // false

 

다음은 기본 자료형 예시 정리표예요.

자료형	예시	설명
string	'hello', "hello", `hello`	문자 데이터
number	10, 10.5, -3	정수와 실수 포함
boolean	true, false	참과 거짓
null	let x = null;	의도적으로 "없음" 지정
undefined	let y;	값이 아직 할당되지 않음

 

 

 

 

여기까지  기본 자료형에 알아봤는데요.

 

기본자료형을 하면서 자바를 다시 복습하는 느낌을 강하게 받은 것 같아요.

 

여러분들은 어떠셨나요?