자바스크립트 데이터 타입 완전 정복: 숫자, 문자열부터 객체, null까지

🔢 숫자(Number) 타입의 특징과 주의점

자바스크립트에서 숫자(Number)는 정수와 부동소수점을 포함한 단일 타입으로 관리됩니다.
즉, 1과 1.5 모두 같은 Number 타입으로 간주되며, 별도로 정수형(integer)과 실수형(float)을 구분하지 않습니다.
이러한 특성은 간단하면서도 유연하지만, 때로는 의도치 않은 결과를 만들 수 있어 주의가 필요합니다.

예를 들어 부동소수점 연산은 자바스크립트에서도 정확하지 않을 수 있습니다.
0.1 + 0.2 === 0.3을 기대할 수 있지만 실제 결과는 false입니다.
이는 컴퓨터의 부동소수점 처리 방식 때문이죠.

• 🧮모든 숫자는 64비트 IEEE 부동소수점 형식으로 저장됩니다.
• ⚠️정확한 비교가 필요한 경우 소수점 자리 반올림을 고려하세요.
• 🚫NaN은 Number 타입이지만 자신과 같지 않은 유일한 값입니다.

// 숫자 타입 예시
let a = 10;
let b = 0.1 + 0.2;
console.log(b === 0.3); // false
console.log(Number.isNaN(NaN)); // true

📝 문자열(String) 다루는 방법

자바스크립트에서 문자열(String)은 문자(character)의 집합으로, 큰따옴표 ", 작은따옴표 ', 백틱 ` 세 가지 모두로 표현할 수 있습니다.
이 중 백틱은 템플릿 리터럴(template literal)이라고 불리며, 문자열 안에 변수를 직접 삽입하거나 여러 줄 문자열을 작성할 때 유용하게 사용됩니다.

문자열은 문자열.length처럼 속성이나 다양한 메서드를 사용할 수 있어 조작이 매우 편리합니다.
예를 들어, toUpperCase()로 대문자로 바꾸거나, slice()로 원하는 위치의 문자열을 추출할 수 있습니다.
또한 includes()는 특정 문자열이 포함되어 있는지 빠르게 확인할 수 있는 메서드입니다.

• 🔤문자열은 불변(immutable)하므로 직접 수정이 불가능합니다.
• 💡템플릿 리터럴 `문자열 ${변수}` 형식은 가독성 높은 코드 작성을 돕습니다.
• ✂️slice()를 활용해 문자열 일부만 추출할 수 있습니다.

// 문자열 예시
const name = "JavaScript";
console.log(name.length); // 10
console.log(name.toUpperCase()); // "JAVASCRIPT"
console.log(name.slice(4)); // "Script"

const greeting = `Hello, ${name}!`;
console.log(greeting); // "Hello, JavaScript!"

📦 배열(Array)과 객체(Object)의 차이

자바스크립트에서 배열(Array)과 객체(Object)는 모두 참조 타입입니다.
기본적으로 데이터를 그룹으로 관리할 때 사용되며, 각각의 목적과 특징이 다릅니다.
이 둘을 구분하지 않고 사용할 경우 데이터 구조가 엉키거나 원하는 동작을 하지 않을 수 있으므로, 차이를 명확히 이해하는 것이 중요합니다.

배열은 순서가 있는 리스트로, 인덱스를 통해 값에 접근합니다.
객체는 키(key)와 값(value) 쌍으로 이루어진 구조로, 특정 속성을 이름으로 호출할 수 있는 점이 특징입니다.
각각의 사용 목적이 다르기 때문에, 상황에 맞게 선택해야 합니다.

• 🔢배열은 숫자 인덱스로 요소에 접근합니다.
• 🔑객체는 키-값 쌍으로 속성을 구성하며, 순서가 없습니다.
• 📊데이터의 순서가 중요하다면 배열을, 속성 중심이라면 객체를 사용하세요.

// 배열 예시
const fruits = ["apple", "banana", "cherry"];
console.log(fruits[1]); // banana

// 객체 예시
const user = {
  name: "Alice",
  age: 28
};
console.log(user.name); // Alice

🚫 null과 undefined는 어떻게 다를까?

자바스크립트를 배우다 보면 가장 혼란스러운 개념 중 하나가 바로 null과 undefined입니다.
둘 다 “값이 없음”을 의미하는 것처럼 보이지만, 의미와 사용 목적은 분명히 다릅니다.
이 두 값을 제대로 이해하지 못하면 의도치 않은 로직 오류가 발생할 수 있습니다.

undefined는 변수가 선언되었지만 값이 할당되지 않은 상태를 의미하며, 자바스크립트가 자동으로 부여하는 기본값입니다.
반면, null은 개발자가 명시적으로 “아무 값도 없다”는 의도를 가지고 할당하는 값입니다.

• 📌undefined: 값이 할당되지 않은 변수에 자동 부여됨
• 🧹null: 명시적으로 비어 있음을 표현하는 값
• ⚠️typeof null은 “object”로 반환되며 이는 오래된 JS 버그입니다

// null과 undefined 차이
let x;
console.log(x); // undefined

let y = null;
console.log(y); // null

console.log(typeof x); // "undefined"
console.log(typeof y); // "object" (주의!)

🧪 typeof와 instanceof로 타입 판별하기

자바스크립트는 동적 타입 언어이기 때문에 변수에 어떤 타입이 들어오는지 사전에 알기 어렵습니다.
이럴 때 사용하는 도구가 바로 typeof와 instanceof입니다.
두 가지는 비슷해 보이지만 적용 대상과 판별 결과가 다릅니다.

typeof는 주로 원시 타입 판별에 사용되며, 문자열 형태의 타입명을 반환합니다.
instanceof는 참조 타입에서 객체가 특정 생성자 함수의 인스턴스인지 확인할 때 사용합니다.
따라서 상황에 따라 적절한 도구를 선택해야 합니다.

• 🔍typeof는 문자열로 타입을 반환합니다. 예: “string”, “number”
• 🧬instanceof는 객체가 특정 생성자에서 만들어졌는지를 판별합니다.
• ❗typeof null은 “object”를 반환하므로 주의가 필요합니다.

// typeof 사용 예시
console.log(typeof "hello"); // "string"
console.log(typeof 123);     // "number"
console.log(typeof null);    // "object" (주의)

// instanceof 사용 예시
const today = new Date();
console.log(today instanceof Date); // true

const arr = [];
console.log(arr instanceof Array); // true

❓ 자주 묻는 질문 (FAQ)

🧾 자바스크립트 타입을 알면 코드가 보인다

자바스크립트를 처음 접하거나, 실무에서 자주 사용하는 분들에게도 데이터 타입에 대한 정확한 이해는 매우 중요합니다.
숫자(Number), 문자열(String), 배열(Array), 객체(Object), null, undefined 등 다양한 타입들이 어떻게 동작하는지 알면, 코드를 보다 안정적이고 예측 가능하게 만들 수 있습니다.
특히 typeof와 instanceof를 적절히 사용하면 디버깅이 쉬워지고, 변수의 상태를 보다 명확하게 판단할 수 있습니다.

이번 글을 통해 각 타입의 기본 개념뿐만 아니라 실제 예제까지 함께 살펴보았으니, 헷갈렸던 개념이 조금이나마 명확해졌기를 바랍니다.
자바스크립트는 자유도가 높은 만큼, 실수도 그만큼 자주 발생할 수 있는 언어입니다.
하지만 타입에 대한 이해를 바탕으로 한 코딩 습관을 들인다면, 더 나은 코드와 유지보수가 쉬운 프로젝트를 만들 수 있을 거예요.

🏷️ 관련 태그 : 자바스크립트, JS데이터타입, typeof, instanceof, null과undefined, 배열과객체, 프론트엔드기초, 웹개발, 변수관리, 타입스크립트