JavaScript 데이터 타입 설명 (String, Number, Boolean 등)

Source: Dev.to

By Chetan Gupta · Web Developer · Learner · JavaScript enthusiast

제가 처음 JavaScript를 배우기 시작했을 때, 데이터 타입을 별로 흥미롭지 않은 이론처럼 여기곤 했습니다. 저는 React로 멋진 UI를 만들고, 웹사이트에 인터랙티브한 기능을 추가하고, Node.js로 백엔드 API를 작성하고 싶었을 뿐이었죠. 하지만 시간이 지나면서 한 가지 진실을 깨달았습니다:

JavaScript를 진정으로 마스터하고 싶다면—프론트엔드든 백엔드든—데이터 타입을 이해하는 것은 절대 양보할 수 없는 조건입니다.

이 블로그에서는 제가 배우면서 누군가 나에게 친절히 설명해줬으면 하는 방식대로, 개발자를 위한 실용적이고 친근한 접근으로 JavaScript 데이터 타입을 살펴보겠습니다.

이 글은 다음과 같은 키워드에 최적화되어 있습니다: “JavaScript data types,” “learn JavaScript basics,” “JavaScript primitive vs non‑primitive,” “JavaScript scope,” “JavaScript for frontend and backend.”

🌍 왜 JavaScript 데이터 타입이 중요한가

JavaScript의 모든 값은 데이터 타입에 속합니다. 다음과 같이 작업할 때도 마찬가지입니다:

• React에서 버튼 클릭
• Vue에서 상태 관리
• 순수 JavaScript로 DOM 조작
• Node.js + Express에서 API 응답
• MongoDB + Mongoose와 데이터베이스 호출

…당신은 끊임없이 데이터 타입을 다루고 있습니다. 데이터 타입이 잘못되면 앱이 깨집니다. 그게 전부입니다.

Source: …

🧠 두 가지 큰 카테고리

1️⃣ 원시 데이터 타입

이들은 단순하고 불변(immutable)인 값들입니다. JavaScript에는 7개의 원시 데이터 타입이 있습니다:

📌 String — JavaScript의 텍스트

let name = "Chetan";
let city = 'Delhi';
let message = `Hello, I am ${name}`;

문자열은 React 컴포넌트의 UI 텍스트부터 백엔드 API의 JSON 응답까지 어디에나 존재합니다.

📌 Number — 모든 숫자값

let age = 25;
let price = 99.99;
let negative = -10;

숫자는 다음과 같은 경우에 사용됩니다:

• 계산
• 게임 개발
• 분석
• 전자상거래 가격 책정

📌 Boolean — 참 또는 거짓

let isLoggedIn = true;

if (isLoggedIn) {
  console.log("Show dashboard");
} else {
  console.log("Show login page");
}

다음과 같이 React state를 사용해 본 적이 있다면:

const [isOpen, setIsOpen] = useState(false);

이미 불리언을 사용하고 있는 것입니다.

📌 Undefined vs Null — 헷갈리는 두 개념

let x;          // undefined
let y = null;   // null

• undefined → 변수가 존재하지만 값이 없음
• null → 의도적으로 비워둔 값

Node.js와 같은 백엔드 개발에서 API는 데이터가 없을 때 종종 null을 반환합니다.

🧩 비원시 데이터 타입 (참조 타입)

여기에는 Objects, Arrays, 그리고 Functions가 포함됩니다.

Object 예시

let user = {
  name: "Chetan",
  role: "Developer",
  skills: ["JavaScript", "React", "Node.js"]
};

객체는 프런트엔드 상태 관리부터 MongoDB의 데이터베이스 모델까지 어디에서든 사용됩니다.

📦 Arrays — 순서가 있는 컬렉션

let frameworks = ["React", "Vue", "Angular"];
frameworks.push("Svelte");

React에서 map()을 사용해 본 적이 있다면 배열을 다뤄본 것입니다:

frameworks.map(fw => console.log(fw));

Source: …

🔍 Scope — How Data Types Live in JavaScript

데이터 타입을 이해하려면 스코프를 이해해야 합니다. JavaScript에는 다음과 같은 스코프가 있습니다:

• 전역 스코프
• 함수 스코프
• 블록 스코프 (let 및 const)

let x = 10; // global

function test() {
  let y = 20; // local
  console.log(x + y);
}

test(); // 30

스코프를 잘못 다루면 다음과 같은 버그에 직면하게 됩니다:

• 예상치 못한 undefined
• 변수 덮어쓰기
• 메모리 누수

특히 다음과 같이 작업할 때 중요합니다:

• React 훅
• 비동기 함수
• 콜백
• Node.js 미들웨어

🌐 프론트엔드 + 백엔드: 같은 언어, 다른 파워

프론트엔드 JavaScript

사용되는 프레임워크/라이브러리:

• React
• Angular
• Vue
• Tailwind
• Three.js

React 예시 코드:

const [count, setCount] = useState(0);

여기서 count는 Number이며, setCount는 이를 업데이트합니다.

백엔드 JavaScript (Node.js)

사용되는 프레임워크/라이브러리:

• Express.js
• NestJS
• MongoDB
• Prisma

API 예시:

app.get("/user", (req, res) => {
  res.json({ name: "Chetan", age: 25 });
});

응답은 문자열과 숫자를 포함하는 Object입니다.

같은 언어. 다른 세계.

👥 JavaScript 커뮤니티 — 왜 중요한가

제가 JavaScript를 사랑하는 이유 중 하나는 방대한 커뮤니티 때문입니다. 다음 곳에서 도움을 받을 수 있습니다:

• StackOverflow
• GitHub
• Discord
• Reddit
• Dev.to
• Medium

데이터 타입 문제에 막히면 언제나 이렇게 검색합니다:

“왜 내 JavaScript 객체가 undefined인가?”

…그리고 수천 명의 개발자들이 이미 같은 문제를 겪어본 결과가 바로 여기 있습니다. 이것이 바로 이 생태계의 아름다움입니다.

🖼️ 블로그를 위한 이미지 구조 제안

If you post this on Medium or Dev.to, consider adding images like:

1. Cover Image – “JavaScript Data Types Diagram”
2. Second Image – “Primitive vs Non‑Primitive Types”
3. Third Image – “Frontend vs Backend JavaScript”

✅ 최종 생각

JavaScript 데이터 타입을 이해하는 것은 언어를 말하기 전에 문법을 배우는 것과 같습니다. 기본을 마스터하면 나머지 코드는 자연스럽게 흐를 것입니다. 즐거운 코딩 되세요!

이를 마스터하면 더 깔끔한 코드를 작성하고, 디버깅을 빠르게 하며, 더 나은 앱을 만들 수 있습니다 — 다음과 같은 환경에서도:

• React
• Node.js
• Next.js
• Vue
• Vanilla JS

처음 시작한다면 꾸준히 하세요. 매일 더 재미있어질 거라고 약속합니다.

즐거운 코딩! 🚀