JS

자바스크립트 변수 완벽 가이드 : var, let, const

Seon Dev Notes 2024. 8. 29. 18:20

변수는 프로그래밍에서 데이터를 저장하고 조작하는 데 필수적인 요소이다.

자바스크립트에서는 'var', 'let', 'const' 이 키워드를 사용해서 변수를 선언할 수 있다.

이 글에서는 var, let, const의 차이점과 사용법을 자세히 설명하겠다.

1. 변수는 무엇일까?

변수는 데이터를 저장할 수 있는 이름이 붙은 메모리 공간이다. 숫자나 문자열 같은 데이터를 저장할 때 변수를 사용한다. 변수는 프로그래밍의 핵심 개념으로, 코드를 더 잘 이해하고 유지보수하기 쉽게 해준다.

2. 자바스크립트에서 변수 선언

자바스크립트에서는 'var', 'let', 'const' 이 키워드를 사용해 변수를 선언할 수 있다. 각각의 키워드는 변수의 동작 방식과 스코프에 영향을 미치며, 잘못 사용하면 버그를 유발할 수 있다.

3. var : 오래된 방식

var는 ES6 이전 자바스크립트에서 변수를 선언하는 유일한 방법이었다. var로 선언된 변수는 함수 스코프를 가지며, 블록 내부에서 선언된 변수라도 함수 전체에서 접근이 가능하다. 또한, var로 선언된 변수는 중복 선언이 가능하다.

var name = "Backend";

if (true) { var name = "Frontend";   // 기존 변수 name이 덮어씌워집니다.

}

console.log(name); // "Frontend"

따라서 var은 가급적 사용하지 않는 것이 좋다.

4. let : 현대적 방식

let은 ES6부터 등장한 변수 선언 방식으로, var의 단점을 보완했다. let은 블록 스코프를 가지며, 중복 선언이 불가능하다. 이는 변수가 의도치 않게 덮어씌워지는 것을 방지해 코드의 안정성을 높인다.

let name = "John"; if (true)

{ let name = "Doe"; // 새로운 블록 내에서만 유효합니다.  
console.log(name); // "Doe" }

console.log(name); // "John"

5. const : 상수를 위한 선언

const는 ES6에서 도입된 키워드로, 한 번 값이 할당되면 이후 변경이 불가능한 상수를 선언하는 데 사용된다. const는 let과 마찬가지로 블록 스코프를 가지며, 중복 선언이 불가능하다. 객체나 배열을 const로 선언할 경우, 참조를 변경할 수 없지만 내부 데이터는 수정할 수 있다.

const name = "Frontend";
name = "Backend"; // 상수에 변수값을 할당할 수 없다.

const user = { name: "Frontend" };
user.name = "Backend"; // 객체의 속성은 변경 가능

6. 변수 스코프

변수 스코프는 변수가 어디서부터 어디까지 유효한지를 결정한다. 자바스크립트에서 스코프는 크게 글로벌 스코프(프로그램 전체에서 접근 가능한 변수 존재)와 로컬 스코프(특정 코드 블록 내에서만 접근 가능한 변수 존재)로 나뉜다. var로 선언된 변수는 함수 스코프를 가지며, let과 const는 블록 스코프를 가진다. 이 차이를 이해하는 것은 변수 사용 시 매우 중요하다!

function testVar() {
    if (true) {
        var x = 1; // var로 선언된 변수는 함수 전체에서 접근 가능
    }
    console.log(x); // 1 (출력됨)
}

function testLet() {
    if (true) {
        let y = 2; // let으로 선언된 변수는 블록 내에서만 접근 가능
    }
    console.log(y); // ReferenceError: y는 정의되지 않음 (오류 발생)
}

7. 권장 사항

  1. 의미 있는 변수명 사용: 변수명은 코드의 가독성을 높이는 데 중요한 역할을 한다. 가능한 한 의미 있는 이름을 사용하여 변수의 목적을 명확히 나타내도록 하자.
  2. const 우선 사용: 가능한 한 const를 사용하여 변수를 선언하는 것이 좋다. 이는 값이 변경되지 않음을 보장해 코드의 안정성을 높인다. 값이 변경될 가능성이 있을 때만 let을 사용하자.
  3. 최소 스코프 사용: 변수를 선언할 때는 가능한 좁은 스코프 내에서 선언하여 불필요한 변수 접근을 방지하고 코드의 예측 가능성을 높이자.

결론

자바스크립트에서 변수는 기본적이면서도 중요한 개념이다. var, let, const 키워드를 이해하고 적절히 사용하는 것은 안전하고 효율적인 코드를 작성하는 데 필수적이다. 특히, const와 let의 사용은 var보다 더 예측 가능한 코드를 작성하는 데 도움을 줄 수 있다. 이 가이드를 통해 자바스크립트 변수를 더 잘 이해할 수 있기를 바란다!