JavaScript/JavaScript 기본 문법

자바스크립트 기초 정리: var, let, const가 뭐가 다를까? - 코드카인 티스토리

CodeCaine Explorer 2025. 1. 20. 13:28
SMALL

안녕하세요😊 코드카인 여러분!

프로그래밍을 처음 배우면 꼭 듣게 되는 단어들이 있습니다. 바로 변수와 상수입니다. 오늘은 var, let, const를 중심으로 변수와 상수의 차이를 재미있게 알아볼게요!


🛠️ 변수란 무엇인가요?

변수(Variable)변할 수 있는 데이터를 저장하는 그릇이에요. 우리가 요리할 때 재료를 담는 볼처럼 생각해볼까요? 이 볼에 어떤 재료를 담을지는 바꿀 수 있죠. JavaScript에서는 데이터를 담는 그릇을 만드는 방법으로 var, let, const를 사용합니다.


🚀 var, let, const의 차이점

1. var: 옛날 방식 그릇

var오래된 JavaScript 방식이에요. ES6 이전에 주로 사용되었지만, 몇 가지 문제가 있어서 요즘은 잘 쓰지 않아요.

  • 특징:

    1. 함수 스코프(Function Scope): 함수 안에서만 유효해요.
    2. 호이스팅(Hoisting): 선언하기 전에 사용할 수 있어요. 하지만 값은 undefined가 됩니다.
  • 예제:

    console.log(x); // undefined (호이스팅)
    var x = 10;
    console.log(x); // 10
  • 문제점: 같은 이름의 변수를 여러 번 선언할 수 있어서 코드가 복잡해질 수 있어요.

    var x = 10;
    var x = 20; // 문제 없이 동작

2. let: 현대적인 다용도 그릇

let현대 JavaScript에서 가장 많이 쓰이는 변수 선언 방법이에요.

  • 특징:

    1. 블록 스코프(Block Scope): {} 블록 안에서만 유효해요.
    2. 재선언 불가: 같은 이름으로 다시 선언할 수 없어요.
  • 예제:

    let y = 10;
    console.log(y); // 10
    y = 20; // 값 변경 가능
    console.log(y); // 20
  • 호이스팅: 선언하기 전에 접근하면 에러가 발생해요.

    console.log(z); // ReferenceError
    let z = 30;

3. const: 변하지 않는 그릇

const상수(Constant)를 선언할 때 사용해요. 한 번 값을 넣으면 절대 변경할 수 없어요.

  • 특징:

    1. 값 변경 불가: 선언 후 값 변경이 불가능해요.
    2. 블록 스코프(Block Scope): let과 동일하게 {} 안에서만 유효해요.
  • 예제:

    const pi = 3.14;
    console.log(pi); // 3.14
    pi = 3.14159; // TypeError: Assignment to constant variable
  • 참고: 객체나 배열은 값을 수정할 수 있어요. 상수는 참조만 고정됩니다.

    const arr = [1, 2, 3];
    arr.push(4); // 가능
    console.log(arr); // [1, 2, 3, 4]

🍴 일상 속 비유: 그릇의 차이점

  • var: 뚜껑 없는 그릇. 어디에나 열려 있어서 먼지가 들어갈 수 있어요.
  • let: 뚜껑이 있는 안전한 그릇. 필요한 곳에서만 열어요.
  • const: 밀봉된 용기. 내용물을 절대 바꿀 수 없어요.

📝 어떤 걸 사용해야 할까요?

  1. 값을 변경하지 않는 데이터: const
  2. 변경 가능한 데이터: let
  3. 새로운 코드 작성: var는 사용하지 않기!

💻 예제 코드와 결과

function variableExample() {
  if (true) {
    var a = "I am var";
    let b = "I am let";
    const c = "I am const";
  }
  console.log(a); // "I am var"
  console.log(b); // ReferenceError
  console.log(c); // ReferenceError
}
variableExample();

😊 마무리하며..

var, let, const는 JavaScript에서 가장 기본적이지만 중요한 요소입니다. 각자의 특성을 이해하고 적절히 사용하는 것이 코드의 품질을 높이는 비결이에요. 꾸준히 연습하면서 이 개념을 꼭 잡아보세요!
여러분의 코딩 여정에 응원을 보냅니다! 🚀

728x90
반응형
SMALL