[JavaScript] 변수 선언

자바스크립트

[JavaScript] 변수 선언

코딩하는둥이 2025. 3. 4. 12:36

변수(Variable)

- 데이터(정보)를 담을 스 메모리 공간의 이름

변수 선언(declaration)

- 어떤 타입의 데이터를 담을 수 있는 메모리 공간을 활당해달라고 명령하는 것

변수 유효범위(scope)

: 선언된 변수가 메모리에서 삭제되지 않고 영향을 미칠 수 있는 코드 범위

ES6가 나오기 전 변수 선언

var

1) 변수 스코프는 함수 레벨이라서 함수가 끝나는 순간 변수를 사용하지 못했습니다.

function testVar() {
  var message = "Hello, World!";
  console.log(message); // 출력: Hello, World!
}
testVar();
console.log(message); // ReferenceError: message is not defined

2) 호이스팅(변수 선언을 중간에서 해도 코드 최상단부에서 선언된 것처럼 동작하는 현상)이 발생했습니다.

console.log(x); // 출력: undefined
var x = 5;
console.log(x); // 출력: 5

3) 불변값도 생성 불가능하고 중복 선언도 가능하여 실수로 중복 사용하여 오류가 발생하는 경우가 많았습니다.

중복 선언 오류

- 큰 문제점은 오류를 발생시키지 않고 덮기때문에 디버깅이 어렵습니다.

var count = 1;
var count = 2; 

console.log(count); // 2 출력, 원래 값 덮어씀

불변성 부재 오류

- user 샛체는 불변값이 아니기 때문에 updateAge 함수가 원본 객체를 직접 수정함으로 큰 문제를 불러올 수 있습니다.

var user = { name: "John", age: 30 };

function updateAge(user) {
  user.age += 1; // 원본 객체 변경
}

updateAge(user);
console.log(user.age); // 31 출력, 원본 객체가 변경됨

4) 루프 안의 선언이 밖에서도 유효해서 예상치 않은 결과를 가지고 올 수 있습니다.

function loopExample() {
  for (var i = 0; i < 3; i++) {
    console.log(`Inside loop: ${i}`); // 출력: Inside loop: 0, Inside loop: 1, Inside loop: 2
  }
  console.log(`Outside loop: ${i}`); // 출력: Outside loop: 3
}

loopExample();

5) 키워드 생략 가능해서 의도치 않은 전역변수 생성를 할 수 있습니다.

function example() {
  x = 10; // var 키워드 없이 선언
}
example();
console.log(x); // 10 (전역 변수가 됨)

ES6 변수 선언

let, const

1) 변수 스코프가 블록 레벨이라서 선언된 블록 내에서만 유효하기 때문에 안전합니다.

function testVar() {
  var message = "Hello, World!";
  console.log(message); // 출력: Hello, World!
}
testVar();
console.log(message); // ReferenceError: message is not defined

let은 일반 변수에 사용되고 const 상수( 불변값) 선언에 사용됩니다.

아래 코드를 보면 let은 재할당이 가능한 걸 확인 할 수 있으며 새로운 값을 가집니다.

let count = 0;
console.log(count); // 출력: 0

count = count + 1;
console.log(count); // 출력: 1

let name = "Alice";
console.log(name); // 출력: Alice

name = "Bob";
console.log(name); // 출력: Bob

for (let i = 0; i < 3; i++) {
  console.log(i); // 출력: 0, 1, 2
}

하지만, cosnt는 한 번 할당하면 재할당이 불가능하기 때문에 재할당할 수 없는 상수를 선언할 떄 사용합니다.

// 상수 선언
const PI = 3.14159;
console.log(PI); // 출력: 3.14159

// 재할당 시도 (주석 처리된 부분)
// PI = 3.14; // TypeError: Assignment to a constant variable

// 배열 선언
const COLORS = ["red", "green", "blue"];
COLORS.push("yellow"); // 배열 내용 변경 가능
console.log(COLORS); // 출력: ["red", "green", "blue", "yellow"]

// 객체 선언
const USER = {
  name: "John",
  age: 30
};
USER.age = 31; // 객체 속성 변경 가능
console.log(USER); // 출력: { name: "John", age: 31 }

티스토리