JavaScript에서 변수와 데이터 타입 이해하기

I’m ready to translate the article for you, but I need the full text you’d like translated. Could you please paste the content (or the portion you want translated) here? I’ll keep the source line exactly as you provided and preserve all formatting, markdown, and code blocks.

Source: …

소개

프로그래밍 세계에 오신 것을 환영합니다! 코딩을 배우고 있다면, variables를 마스터하는 것이 필수적입니다.

한 집에서 다른 집으로 이사하는 것을 생각해 보세요. 여러 개의 골판지 상자를 가지고 각각에 라벨을 붙입니다—library는 책을 위해, foot‑wear는 신발을 위해 등등. 프로그래밍에서, variables는 라벨이 붙은 상자와 같으며, data types는 그 안에 넣는 아이템의 종류를 의미합니다.

변수란 무엇인가?

컴퓨터 프로그래밍에서 변수는 명명된(또는 기호적인) 컨테이너로, 메모리 안에 데이터 값을 저장하는 데 사용됩니다. 변수는 다음과 같은 정보를 위한 자리 표시자 또는 레이블 역할을 합니다:

• 사용자 입력
• 컴포넌트 상태
• 계산 결과

변수를 통해 프로그램 실행 중에 데이터를 읽고, 업데이트하고, 조작할 수 있습니다; 변수 없이는 데이터를 다루는 것이 거의 불가능합니다.

변수 왜 필수적인가

Tip: name과 같이 모호한 이름 대신 user_name이나 userName과 같은 설명적인 이름을 사용하세요. 일반적인 명명 규칙으로는 camelCase, snake_case, PascalCase, 그리고 kebab-case가 있습니다.

JavaScript에서 변수 선언하기

JavaScript에서 “변수를 선언한다”는 것은 상자를 만들고 이름을 붙이는 것을 의미합니다. 이를 수행하는 방법은 세 가지가 있습니다:

var (구식)

// Syntax
var userName;

*var*는 변수를 선언하는 원래 방식이었습니다. 현대 코드에서는 그 특이한 동작 때문에 버그가 발생할 수 있어 거의 사용되지 않습니다.

let (블록 범위, 변경 가능)

// Syntax
let playerScore = 0;

값을 나중에 변경해야 할 경우에 let을 사용합니다 (예: 플레이어 점수).

const (블록 범위, 변경 불가)

// Syntax
const userDOB = 1990;

const는 상수를 선언합니다 — 초기 정의 이후에 재할당할 수 없는 값입니다.

Note: let과 const를 우선 사용하고, 특별한 이유가 없는 한 var는 피하세요.

원시 데이터 타입

JavaScript는 정보를 저장하기 위해 여러 원시 타입을 제공합니다. 아래는 가장 일반적인 타입들이며 예시가 포함되어 있습니다.

문자열

텍스트 정보를 저장하기 위해 사용되는 문자들의 연속입니다. 문자열은 불변(원래 문자열을 변경할 수는 없지만 같은 변수에 새로운 문자열을 할당할 수 있습니다).

const userEmail = "something@email.com";

숫자

정수와 부동‑소수점 숫자 모두를 나타냅니다 (JavaScript는 모든 숫자를 부동‑소수점으로 저장합니다). 또한 특수값: Infinity, -Infinity, NaN(Not‑a‑Number)도 포함합니다.

const integer   = 10;
const floating  = 10.55;
const negative  = -10;
const infy      = Infinity;
const negInfy   = -Infinity;

불리언

논리값 true 또는 false를 나타냅니다.

const isLogin = true;
const isAdmin = false;

null

객체 값이 전혀 없음을 명시적으로 나타냅니다. 가능한 값은 하나뿐이며: null.

let data = null;
console.log(typeof data); // "object" (quirk retained for backward compatibility)

undefined

선언만 되었고 초기화되지 않은 변수에 자동으로 할당됩니다.

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

Truthy & Falsy 값

값이 Boolean으로 변환될 때, truthy (true) 혹은 falsy (false) 중 하나가 됩니다. 다음 값들은 falsy 입니다:

다른 모든 값은 truthy 입니다.

Exercise: 브라우저 콘솔을 열고, 다양한 타입의 변수를 선언한 뒤 ! 연산자를 사용해 Boolean으로 어떻게 변환되는지 확인하세요.

Scope

Scope는 변수, 함수 또는 객체가 어디에서 접근 가능하고 보이는지를 결정합니다. 이는 JavaScript 엔진이 코드 전반에 걸쳐 식별자(이름)를 어떻게 해석하는지를 정의합니다. 스코프는 Scope Chain이라고 불리는 계층 구조를 형성합니다.

// Global scope
let globalVar = "I am global";

function foo() {
    // Function scope
    let funcVar = "I am inside foo";

    if (true) {
        // Block scope
        const blockVar = "I am inside a block";
        console.log(blockVar); // works
    }

    console.log(funcVar); // works
    // console.log(blockVar); // ReferenceError
}

foo();
// console.log(funcVar); // ReferenceError

스코프를 이해하면 의도치 않은 변수 충돌을 방지하고 코드를 체계적으로 유지할 수 있습니다.

요약

• 변수는 데이터에 라벨이 붙은 컨테이너입니다.
• 설명적인 이름과 적절한 명명 규칙을 사용하세요.
• let과 const를 선호하고, var는 피하세요.
• 기본 데이터 타입을 알아두세요 (string, number, boolean, null, undefined).
• truthy와 falsy 값을 구분하세요.
• 변수가 존재하는 범위를 제어하기 위해 scope를 숙달하세요.

즐거운 코딩 되세요! 🚀

JavaScript에서의 스코프

• **중괄호 {}**는 해당 블록 내부에서만 접근 가능한 블록을 생성합니다.
• 여기에는 if 문, 반복문, 그리고 독립 블록이 포함됩니다.

모듈 (ES6)

ES6 모듈(import / export)을 사용할 때, 모듈 내부에서 선언된 변수는 해당 파일에만 스코프가 제한됩니다. 전역 변수가 아니며 명시적으로 내보내지 않는 한 다른 모듈에서 접근할 수 없습니다.

정적(레시컬) 스코프

JavaScript는 정적(레시컬) 스코프를 사용합니다. 즉, 변수의 스코프는 컴파일 시점에 소스 코드 상에서의 위치에 의해 결정되며, 런타임에 호출되는 위치에 의해 결정되지 않습니다.

인터프리터가 변수를 찾을 때는 스코프 체인을 따라갑니다:

1. 현재(가장 안쪽) 스코프를 확인합니다.
2. 찾지 못하면 상위 스코프로 이동합니다.
3. 계속해서 전역 스코프에 도달할 때까지 외부로 나갑니다.
4. 그래도 변수를 찾지 못하면 **ReferenceError**가 발생합니다.

var, let, and const

각 키워드는 서로 다른 스코핑 규칙을 가진 변수를 정의합니다.

var – Function‑Scoped

• var 로 선언된 변수는 해당 변수가 나타나는 전체 함수에 스코프가 적용됩니다(함수 밖에서 선언하면 전역 스코프가 됩니다).

function varDeclaration() {
    if (true) {
        var x = 10;   // function‑scoped
    }
    console.log(x);   // 10
}

if 블록 안에서 x를 선언했지만, varDeclaration 함수 전체에서 접근할 수 있습니다.

let – Block‑Scoped

• let 은 변수를 정의된 블록({})에만 제한합니다.
• 이는 실수로 발생하는 호이스팅 및 스코프 관련 버그를 방지하는 데 도움이 됩니다.

Note: Hoisting 은 자바스크립트가 변수/함수 선언을 컴파일 단계에서 스코프의 최상단으로 이동시키는 동작을 말합니다.

function letDeclaration() {
    if (true) {
        let y = 20;   // block‑scoped
    }
    console.log(y);   // ReferenceError: y is not defined
}

y는 if 블록 내부에만 존재하며, 블록 밖에서 접근하면 ReferenceError가 발생합니다.

const – Block‑Scoped, Immutable Binding

• const 도 블록 스코프 변수를 만들지만, 바인딩을 재할당할 수 없습니다.
• 값이 객체나 배열인 경우, 그 자체는 여전히 변형 가능할 수 있습니다.

function constDeclaration() {
    if (true) {
        const z = 30;   // block‑scoped
    }
    console.log(z);   // ReferenceError: z is not defined
}

z를 재할당하려고 하면 TypeError가 발생하고, 블록 밖에서 접근하면 ReferenceError가 발생합니다.

실습 과제

1. 브라우저에서 JavaScript 실행 (예: HTML 파일이나 콘솔을 통해).

2. var, let, const를 사용하여 name, age, isStudent와 같은 변수를 선언합니다.

3. console.log()로 출력합니다.

4. 변수 값을 변경해 봅니다:

   • var와 let은 재할당이 가능합니다.
   • const는 재할당할 수 없으며(오류가 발생합니다).

다른 동작을 관찰하세요.

왜 중요한가

var, let, const의 차이를 이해하는 것은 신뢰할 수 있고 버그 없는 JavaScript를 작성하는 데 기본입니다. 모든 웹 개발자는 이러한 개념을 숙달하여 스코프를 올바르게 관리해야 합니다.

추가 읽을거리

• JavaScript의 변수
• JavaScript의 스코프
• let, const, 및 var의 차이점