JavaScript 기초 <3. JavaScript의 데이터 타입 완벽 정리>

자바스크립트 JavaScript

3. JavaScript의 데이터 타입 완벽 정리

 

안녕하세요! 태마입니다.

JavaScript 기초 강좌입니다.

 

강좌의 경우 

1. 주제 간단 정리

2. 상세 주제 정리

으로 이루어져 있습니다.

 

자바스크립트 JavaScript

포스팅 시작하겠습니다 :)

---

 

1. 주제 간단 정리

 

1. 데이터 타입이란?

프로그래밍에서 **데이터 타입(Data Type)**이란 값의 종류를 구분하는 방법입니다.
JavaScript에서 변수에 저장할 수 있는 값은 여러 가지 종류가 있으며, 이러한 값을 구별하는 것이 중요합니다.

📌 JavaScript에서는 값의 종류를 구분하기 위해 데이터 타입을 사용!

---

 

2. JavaScript의 데이터 타입 종류

JavaScript의 데이터 타입은 원시(Primitive) 타입과 참조(Reference) 타입으로 나눌 수 있습니다.

타입설명예제

원시 타입 (Primitive Type)	값이 변수에 직접 저장됨 (변경 불가능)	number, string, boolean 등
참조 타입 (Reference Type)	값이 메모리 주소를 참조함 (객체 형태)	object, array, function

📌 JavaScript의 데이터 타입은 원시 타입과 참조 타입으로 나뉜다!

---

 

3. 원시 타입 (Primitive Type) 정리

✅ 1) 숫자(Number)

JavaScript의 숫자는 정수와 실수를 모두 포함하는 하나의 타입입니다.

let integer = 42;  // 정수
let float = 3.14;  // 실수
let nanValue = NaN; // 숫자가 아닌 값 (Not-a-Number)

✅ 2) 문자열(String)

문자는 큰따옴표(""), 작은따옴표(''), 백틱(``)을 사용해 정의할 수 있습니다.

let name = "Alice"; 
let greeting = `Hello, ${name}!`;  // 템플릿 리터럴

✅ 3) 불리언(Boolean)

true 또는 false 두 가지 값만 가질 수 있습니다.

let isAdult = true;
let hasPermission = false;

✅ 4) undefined와 null의 차이

• undefined → 변수를 선언했지만 값을 할당하지 않은 상태
• null → 변수에 의도적으로 "없음"을 표현

let unassigned;   // undefined
let emptyValue = null;

📌 undefined와 null은 다르다! null은 의도적인 빈 값!

---

 

4. 참조 타입 (Reference Type) 정리

✅ 1) 객체(Object)

객체는 키-값(Key-Value) 쌍으로 데이터를 저장하는 구조입니다.

let person = { name: "Alice", age: 25 };
console.log(person.name);  // Alice

✅ 2) 배열(Array)

배열은 여러 개의 값을 저장하는 리스트입니다.

let numbers = [1, 2, 3, 4, 5];
console.log(numbers[0]); // 1

✅ 3) 함수(Function)

함수는 재사용 가능한 코드 블록입니다.

function greet() {
    console.log("Hello!");
}
greet(); // Hello!

📌 객체, 배열, 함수는 모두 참조 타입에 속한다!

---

✅ 여기까지 JavaScript의 데이터 타입 종류와 기본 개념을 배웠습니다!
👉 "그렇다면, JavaScript는 동적 타입 언어인데, 변수의 타입이 바뀔 수도 있을까?"
✅ 2부에서 동적 타입의 특징, 형 변환, 원시 타입과 참조 타입의 차이까지 상세히 배워봅시다!

 

---

반응형

2. 상세 주제 정리

 

1. JavaScript는 동적 타입 언어

JavaScript는 동적 타입(Dynamically Typed) 언어입니다.
즉, 변수의 데이터 타입이 자동으로 변환될 수 있습니다.

let value = "Hello";  // 문자열
value = 42;           // 숫자로 변경 가능

📌 JavaScript에서는 변수의 타입이 언제든 바뀔 수 있다!

---

 

2. 명시적 vs 암시적 형 변환 (Type Conversion)

JavaScript는 때때로 **자동으로 데이터 타입을 변환(암시적 변환)**하기도 하고,
개발자가 명시적으로 변환할 수도 있습니다.

✅ 1) 명시적 형 변환 (Explicit Conversion)

let str = String(42);  // 숫자를 문자열로 변환
let num = Number("3.14");  // 문자열을 숫자로 변환
let bool = Boolean(1);  // 숫자를 불리언으로 변환

✅ 2) 암시적 형 변환 (Implicit Conversion)

console.log("5" + 2);  // "52" (문자열로 변환됨)
console.log("5" - 2);  // 3 (숫자로 변환됨)
console.log(1 + true); // 2 (true → 1 변환)

📌 암시적 변환은 예기치 않은 결과를 초래할 수 있으므로 주의해야 함!

---

 

3. 원시 타입 vs 참조 타입의 차이점

✅ 1) 값의 저장 방식

• 원시 타입(Primitive) → 값 자체를 저장
• 참조 타입(Reference) → 메모리 주소를 저장

let a = 10;
let b = a;  // 값 자체가 복사됨 (독립적)
b = 20;
console.log(a); // 10 (변경되지 않음)

let obj1 = { name: "Alice" };
let obj2 = obj1;  // 참조값(주소)만 복사됨
obj2.name = "Bob";
console.log(obj1.name); // Bob (변경됨!)

📌 참조 타입은 같은 메모리 주소를 가리키므로, 하나를 변경하면 다른 변수도 영향을 받음!

---

 

4. == vs === 차이점 (느슨한 비교 vs 엄격한 비교)

console.log(5 == "5");  // true  (자동 형 변환 발생)
console.log(5 === "5"); // false (타입까지 비교)

📌 항상 ===(엄격한 비교)를 사용하여 예기치 않은 형 변환을 방지하는 것이 좋음!

---

✅ 지금까지 JavaScript의 데이터 타입과 형 변환, 원시 타입과 참조 타입의 차이를 상세히 배웠습니다!
👉 "그렇다면, JavaScript에서 연산자는 어떻게 동작하며, 어떤 숨은 규칙이 있을까?"
✅ 다음 회차에서 연산자의 종류와 동작 원리를 깊이 있게 배워봅시다! 🚀