본문 바로가기
개발/웹 개발

Day 12: JavaScript 데이터 타입과 변수

$ecu_Log 2024. 8. 9.

1. 오늘의 학습 목표 

학습 목표: JavaScript에서 데이터를 저장하고 다루는 기본 단위인 변수(Variable)와 데이터 타입(Data Type)을 이해합니다. 변수의 유효 범위인 스코프(Scope)와 변수 선언이 끌어올려지는 현상인 호이스팅(Hoisting), 그리고 var, let, const의 중요한 차이점을 배웁니다.

핵심 요약: 변수와 데이터 타입을 정확히 이해하는 것은 프로그래밍의 가장 기초적인 첫 단추이며, let과 const를 올바르게 사용하는 것은 버그를 줄이는 좋은 습관의 시작입니다.

2. 핵심 개념 파헤치기

2.1. 데이터 타입 (Data Types)

JavaScript의 데이터 타입은 크게 두 가지로 나뉩니다.

원시 타입 (Primitive Types): 변수에 값 자체가 저장됩니다.

  • string: 문자열 (예: "hello")
  • number: 숫자 (예: 123, 3.14)
  • boolean: 참/거짓 (예: true, false)
  • null: '값이 없음'을 의도적으로 명시하는 값
  • undefined: 값이 할당되지 않은 상태
  • symbol: 고유하고 변경 불가능한 값

참조 타입 (Reference Type): 변수에 데이터가 저장된 메모리 주소(참조)가 저장됩니다

  • object: 객체 (예: { name: 'Kim', age: 30 })
  • array: 배열 (예: [1, 2, 3])
  • function: 함수

 

2.2. 변수(Variable)와 var, let, const

변수는 데이터를 저장하기 위한 메모리 공간에 붙인 이름입니다.

ES6 이전에는 var만 사용했지만, 현재는 let과 const의 사용이 권장됩니다

  • var: 함수 레벨 스코프를 가집니다. 변수 재선언 및 재할당이 모두 가능하여 예기치 못한 문제를 일으킬 수 있습니다.
  • let: 블록 레벨 스코프를 가집니다. 변수 재할당은 가능하지만, 재선언은 불가능합니다
  • const: 블록 레벨 스코프를 가집니다. '상수'를 의미하며, 선언과 동시에 값을 할당해야 하고, 재선언과 재할당이 모두 불가능합니다. (단, 참조 타입의 경우 내부 속성은 변경 가능)

 

2.3. 스코프(Scope)와 호이스팅(Hoisting)

  • 스코프 (Scope): 변수가 유효한 범위. {} 중괄호로 둘러싸인 범위를 블록 스코프, 함수 내부를 함수 스코프라고 합니다. let과 const는 블록 스코프를 따르므로 더 예측 가능한 코드를 작성하게 해줍니다.
  • 호이스팅 (Hoisting): var로 선언된 변수나 함수 선언문이 코드의 최상단으로 끌어올려지는 것처럼 동작하는 현상입니다. 이로 인해 변수를 선언하기도 전에 참조해도 에러가 발생하지 않는 경우가 생깁니다. (let과 const도 호이스팅이 되지만, TDZ(Temporal Dead Zone) 때문에 선언 전에 참조하면 에러가 발생합니다.)

3. 코드로 배우기

3.1. 구현 목표

var, let, const의 스코프 차이와 호이스팅 동작을 코드를 통해 직접 확인합니다

 

3.2. [1단계: var의 함수 스코프와 문제점]

var는 블록({})을 무시하고 함수 전체에서 유효합니다. for 루프 안에서 선언된 i가 밖에서도 접근 가능합니다

function varTest() {
  for (var i = 0; i < 3; i++) {
    console.log(i); // 0, 1, 2
  }
  console.log('Loop finished. i is:', i);   //3 -> 블록 밖에서도 접근 가능
}
varTest();

 

3.3. [2단계: let의 블록 스코프]

let은 {} 블록 스코프를 따르기 때문에, for 루프 안에서 선언된 i는 루프 밖에서 접근할 수 없어 ReferenceError가 발생합니다. 의도치 않은 변수 사용을 막아줍니다.

function letTest() {
  for (let i = 0; i < 3; i++) {
    console.log(i);    //0, 1, 2
  }
  // console.log('Loop finished. i is:', i); // Uncaught ReferenceError: i is not defined
}
letTest();

 

3.4. [3단계: const의 특징]

const는 재할당이 불가능합니다.

하지만 객체나 배열과 같은 참조 타입의 경우, 내부의 값은 변경할 수 있다는 점에 유의해야 합니다

const name = 'Alice';
//name = 'Bob'; // Uncaught TypeError: Assignment to constant variable.

const person = {
  name: 'Alice',
  age: 25
};

	//person 객체 자체를 바꾸는 것은 불가능
	//person = { name: 'Bob' }; // TypeError

	//객체 내부의 속성을 바꾸는 것은 가능
person.age = 26;
console.log(person); // { name: 'Alice', age: 26 }

4. 전체 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>JS Variables & Scope</title>
</head>
<body>
  <h1>F12를 눌러 개발자 도구 콘솔을 확인하세요.</h1>
  <script>
    console.log("--- var 스코프 테스트 ---");
    function varTest() {
      for (var i = 0; i < 3; i++) {
        console.log("in loop:", i);
      }
      console.log("out of loop:", i);
    }
    varTest();

    console.log("\n--- let 스코프 테스트 ---");
    function letTest() {
      for (let j = 0; j < 3; j++) {
        console.log("in loop:", j);
      }
      //onsole.log("out of loop:", j); //-> ReferenceError 발생
      console.log("`let`으로 선언된 j는 루프 밖에서 접근할 수 없습니다.");
    }
    letTest();
    
    console.log("\n--- const 재할당 테스트 ---");
    const person = { name: "Alice" };
    console.log("Original:", person);
    person.name = "Bob";     //내부 속성 변경은 가능
    console.log("Modified:", person);
    // person = {};   //재할당은 TypeError 발생
  </script>
</body>
</html>

'개발 > 웹 개발' 카테고리의 다른 글

Day 14: JavaScript 객체와 배열  (1) 2024.08.14
Day 13: JavaScript 함수와 제어문  (0) 2024.08.12
Day 11: 반응형 웹 디자인과 CSS Grid  (0) 2024.08.08
Day 10: CSS Grid  (0) 2024.08.07
Day 9: CSS Flexbox  (1) 2024.08.07

'개발/웹 개발' 관련글

티스토리툴바