Source: Dev.to

변수와 데이터 타입 이해하기: JavaScript 기본 개념

JavaScript는 동적 타이핑 언어이기 때문에 변수와 데이터 타입을 올바르게 이해하는 것이 매우 중요합니다. 이 글에서는 변수 선언 방법, 주요 데이터 타입, 그리고 타입 변환에 대해 자세히 살펴보겠습니다.

1. 변수 선언

JavaScript에서는 세 가지 키워드(var, let, const)를 사용해 변수를 선언합니다.

var oldStyle = "나는 var 로 선언했어요";
let blockScoped = "나는 let 로 선언했어요";
const constantValue = "나는 const 로 선언했어요";

Tip: 최신 코드에서는 let과 const를 사용하고, var는 가능한 피하는 것이 좋습니다.

2. 기본 데이터 타입

JavaScript에는 원시 타입과 객체 타입 두 가지 카테고리가 있습니다.

2.1 원시 타입 (Primitive Types)

let age = 27;                // Number
let name = "Jane Doe";      // String
let isStudent = false;      // Boolean
let notDefined;             // undefined
let empty = null;           // null
let uniqueId = Symbol('id'); // Symbol
let hugeNumber = 9007199254740991n; // BigInt

2.2 객체 타입 (Object Types)

객체는 키‑값 쌍을 저장하는 복합 데이터 구조이며, 배열, 함수, 일반 객체 등이 포함됩니다.

// 일반 객체
const person = {
  name: "Alice",
  age: 30,
  isAdmin: true
};

// 배열
const colors = ["red", "green", "blue"];

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

3. 원시 타입 vs 객체 타입

4. 타입 변환 (Type Coercion)

JavaScript는 암시적과 명시적 두 가지 방식으로 타입을 변환합니다.

4.1 암시적 변환 (Implicit)

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

4.2 명시적 변환 (Explicit)

let str = "123";
let num = Number(str);   // 123 (Number)
let bool = Boolean(0);   // false

5. 흔히 발생하는 실수와 해결 방법

1. == vs ===

   • ==는 타입을 강제 변환한 뒤 비교하고, ===는 타입과 값이 모두 동일해야 true를 반환합니다.
   • 권장: 항상 ===와 !==를 사용하세요.

2. null과 undefined 구분

   • null은 의도적인 “값 없음”을 의미하고, undefined는 “정의되지 않음”을 의미합니다.
   • 체크할 때는 value == null (두 값을 모두 포함) 혹은 value === null / value === undefined를 상황에 맞게 사용합니다.

3. 객체 복사

   • 객체를 복사할 때 let copy = original;은 레퍼런스 복사이므로 원본이 변경되면 복사본도 바뀝니다.
   • 얕은 복사는 Object.assign({}, original) 혹은 전개 연산자 {...original}를, 깊은 복사는 JSON.parse(JSON.stringify(original)) 혹은 structuredClone()을 사용합니다.

6. 결론

• 변수 선언: 가능한 let과 const를 사용하고, var는 피합니다.
• 데이터 타입: 원시 타입과 객체 타입을 명확히 구분하고, 각각의 특성을 이해합니다.
• 타입 변환: 암시적 변환에 의존하기보다 명시적 변환을 활용해 예측 가능한 코드를 작성합니다.
• 비교 연산: ===와 !==를 기본으로 사용해 타입 혼동을 방지합니다.

이 기본 개념들을 탄탄히 잡아두면, 복잡한 로직을 구현할 때도 버그를 최소화하고 코드 가독성을 높일 수 있습니다. Happy coding!

변수란 무엇인가?

변수를 상자에 비유해 보세요:

• 이름을 그 안에 넣습니다.
• 상자의 유일한 역할은 나중에 사용할 수 있도록 정보를 보관하는 것입니다.

JavaScript에서 그 상자는 변수라고 불립니다.

모든 프로그램—간단한 계산기든 Netflix와 같은 대규모 애플리케이션이든—은 데이터를 저장하고 관리하기 위해 변수에 의존합니다. 변수를 이해하지 못한다면 실제 프로그래밍이 아니라 쓰레기를 입력하는 것과 같습니다.

변수를 사용하는 주요 이유

• 값 재사용
• 값 업데이트
• 프로그램을 동적으로 만들기
• 더 깔끔한 코드 작성

간단한 예시

let name = "Ritam";
console.log(name);

• name → 변수
• "Ritam" → 그 안에 저장된 값

다음과 같이 생각해 보세요:

[ name ]  →  "Ritam"

변수가 없으면 프로그램은 경직되고 쓸모없게 됩니다.

Source: …

JavaScript에서 변수 선언하기

JavaScript는 변수를 선언하는 세 가지 방법을 제공합니다:

var

var age = 20;

• 변수를 선언하는 가장 오래되고 원래의 방법입니다.
• 함수 스코프(함수 밖에서 선언하면 전역 스코프)입니다.
• 재선언 및 재할당이 가능해 버그를 유발하기 쉽습니다.

Tip: 최신 코드에서는 var를 거의 사용하지 않습니다. let이나 const를 사용하세요.

let

let city = "Kolkata";

• 블록 스코프입니다.
• 재할당은 가능하지만 같은 스코프 내에서 재선언은 할 수 없습니다.

let score = 10;
score = 20;   // ✅ 허용

const

const country = "India";

• 블록 스코프입니다.
• 초기 정의 이후 재할당할 수 없습니다.

const PI = 3.14;
PI = 3.14159;   // ❌ 오류
console.log(PI); // 3.14

const를 사용해야 할 때 – 값이 변하지 않아야 할 경우(예: 설정값, 고정 참조)입니다.

let과 const가 도입된 이유에 대해 더 깊이 알고 싶다면 이전 블로그 **[here]**를 참고하세요.

데이터 타입

데이터 타입은 변수에 저장되는 값의 종류를 정의합니다. JavaScript에는 두 가지 큰 범주가 있습니다:

1. 원시 데이터 타입
2. 비원시(참조) 데이터 타입

이번 포스트에서는 원시 타입을 다룹니다. 추후 포스트에서는 객체, 배열, 함수 등을 자세히 살펴볼 예정입니다.

⚠️ 참고: 이것은 기본 개요입니다. 전체 참고 자료는 MDN Web Docs를 확인하세요.

원시 타입 개요

String

let name = "Ritam";
let programming = "JavaScript";
let id = "123"; // 여전히 문자열!

Number

let age = 21;
let price = 99.99;

Boolean

let isStudent = true;
let isLoggedIn = false;

null

let result = null;

undefined

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

주의: undefined를 변수에 명시적으로 할당할 수는 있지만, 디버깅을 어렵게 만들 수 있기 때문에 일반적으로 권장되지 않습니다.

BigInt

let bigNumber = 123456789012345678901234567890n; // 뒤에 붙은 "n"
let bigValue = BigInt(12345678901234567890);       // 생성자를 사용

BigInt가 필요할 수 있는 경우

• 금융 시스템(정밀한 통화 계산)
• 암호화
• 과학 계산
• 대용량 데이터베이스 ID

Symbol

const uniqueRuneId1 = Symbol("rune_of_fire");
const uniqueRuneId2 = Symbol("rune_of_fire");

console.log(uniqueRuneId1 === uniqueRuneId2); // false

주요 사용 사례

• 고유한 객체 속성 키
• 고급 JavaScript 패턴(예: 이터레이터)
• 내장 메커니즘(예: Symbol.iterator)

typeof 연산자

console.log(typeof "Ritam"); // "string"
console.log(typeof 21);      // "number"
console.log(typeof true);   // "boolean"

⚡ 작은 과제: typeof null은 무엇을 반환할까요? 코드를 실행하기 전에 생각해 보세요!

typeof를 깊이 이해하는 것이 중요한 이유는 그 결과가 항상 기대와 일치하지 않을 수 있기 때문입니다(예: typeof null은 "object"입니다). 앞으로의 글에서 이 연산자를 더 자세히 살펴볼 것입니다.

빠른 비교: var vs let vs const

JavaScript에서 변수 선언

실용적인 규칙

• 기본적으로 const를 사용하세요.
• 값이 변경되어야 할 때 let을 사용하세요.
• 현대 JavaScript에서는 var를 피하세요.

왜 변수는 중요한가

변수는 단순히 초보자 주제가 아니라 다음의 기반입니다:

• 함수
• 루프
• API
• React 같은 프레임워크
• Node.js 를 이용한 백엔드 개발

변수와 데이터 타입을 잘못 이해하면 그 위에 구축된 모든 것이 불안정해집니다.

변수 마스터링으로 진정한 제어를 얻다

• 변수 선언 방법
• let vs const 를 언제 사용할지
• 데이터 타입 이 무엇을 나타내는지

…그리고 이 지식은 견고하고 유지보수 가능한 코드로 이어집니다.

시작하기

1. 간단히 시작하세요.
2. 단계별로 이해를 쌓아가세요.

그것이 진정한 이해가 이루어지는 방법입니다.

핵심 소프트웨어 엔지니어링 개념에 대한 초보자 친화적인 해설을 더 보려면 팔로우하세요.