자바스크립트 변수의 모든 것: var, let, const의 차이점

안녕하세요 찐망고 입니다.

 

오늘은 자바스크립트에서 변수에 대해 알아보겠습니다.

변수란 무엇이며, 어떻게 사용하는지, 그리고 자바스크립트에서 변수 선언의 다양한 방법에 대해 자세히 설명해 드릴게요.

 

 

변수란?

변수는 값을 저장하는 선물 상자와 같아요.

이 상자에는 한 번에 한 가지 물건만 담을 수 있으며, 다른 물건을 넣으면 기존의 물건은 사라지거나 다른 상자를 준비해야 하죠.

프로그래밍에서 변수는 변하는 값을 담는 그릇을 의미하며, 'variable'이라고 불러요.

 

 

 

변수에 값을 할당하기

변수에 값을 넣는 것을 **할당(assignment)**이라고 합니다.

예를 들어, mood라는 변수에 "행복"이라는 값을 할당하거나, age라는 변수에 40이라는 값을 할당할 수 있습니다.

mood = "행복";
age = 40;

 

= 기호는 수학에서의 '같다'가 아니라 대입을 의미합니다. 수학에서의 '같다'는 ==로 표현하죠.

 

 

 

변수의 초기화와 출력

변수를 선언하면서 값을 대입하는 것을 초기화라고 합니다.

초기화된 변수는 특정 값을 가지며, 이 값을 가지고 있다고 표현합니다.

예를 들어, mood 변수는 "행복"이라는 값을 가지고 있으며, age 변수는 40이라는 값을 지니고 있습니다.

alert(mood);
alert(age);

 

 

 

 

 

자바스크립트 변수의 특성

자바스크립트에서는 변수를 선언하지 않고도 사용할 수 있지만, 이는 다른 언어에서는 불가능합니다.

대다수 언어는 변수를 사용하기 전에 먼저 선언해야 해요.

또한, 자바스크립트는 대소문자를 구별하며, 변수 이름에는 공백이나 구두점 등을 사용할 수 없습니다.

대신, 밑줄을 사용해 가독성을 높일 수 있습니다.

var my_age = 40;

 

 

 

 

 

변수 선언 방식

1. var (function scope)

var 키워드는 함수 범위(scope) 내에서 변수를 선언합니다.

중복 선언이 가능하며, 값 재지정도 가능합니다. 하지만 호이스팅(hoisting) 문제가 발생할 수 있습니다.

var num = 10;
var num = 20;

function example() {
  var x = 10;
  if (x > 5) {
    var y = 20;
    console.log(x); // 출력: 10
    console.log(y); // 출력: 20
  }
  console.log(y); // 출력: 20
}
example();

 

var로 선언된 변수는 중복 선언이 가능하며, 값을 재지정할 수도 있습니다.

 

 

Hoisting

자바스크립트는 함수 내의 모든 변수를 함수 맨 위로 끌어올린 것처럼 동작합니다.

이는 변수가 선언되기 전에 참조되더라도 에러가 발생하지 않음을 의미합니다.

var scope = 'all';
function fnc() {
    console.log(scope); // 'underfined' 출력
    var scope = 'all'; 
    console.log(scope); // 'all' 출력
}

 

 

2. let (block scope)

let 키워드는 블록 범위 내에서 변수를 선언합니다.

중복 선언이 불가능하며, 값 재지정은 가능합니다. 또한 호이스팅되지 않아 안전하게 사용할 수 있습니다.

let num1 = 10;
num1 = 20;

function example() {
  let x = 10;
  if (x > 5) {
    let y = 20;
    console.log(x); // 출력: 10
    console.log(y); // 출력: 20
  }
  console.log(y); // ReferenceError: y is not defined
}
example();

 

블록 유효 범위

let은 변수가 선언된 블록, 구문 또는 표현식 내에서만 유효한 변수를 선언합니다.

이는 var 키워드가 블록 범위를 무시하고 전역 변수나 함수 지역 변수로 선언되는 것과 다른 점입니다.

 

let num1 = 10;
     num1 = 20;

중복 선언은 불가하고, 값을 재지정할 수는 있습니다.

 

프로그램이나 함수의 최상위에서는 let과 var는 서로 다르게 행동합니다.

var는 전역 객체의 프로퍼티를 생성하지만, let은 전역 객체의 속성 값을 생성하지 않습니다.

 

hoisting 되지 않습니다.

변수가 초기화(선언)되기 전에 참조할 경우 ReferenceError가 발생합니다.

 

3. const (block scope)

const 키워드는 상수를 선언하며, 선언과 동시에 초기화해야 합니다.

값 재할당이나 재선언이 불가능합니다.

const PI = 3.14;
console.log(PI); // 출력: 3.14
PI = 3.14159; // 에러 발생: 상수는 재할당할 수 없습니다.

 

const로 선언된 상수는 변할 수 없는 값을 가집니다. 한 번 할당된 값은 절대 바뀌지 않습니다.