[쉽고 빠르게 배우는 자바스크립트] 2. 변수

728x90

2023.05.20 - [프로그래밍언어/자바스크립트] - [쉽고 빠르게 배우는 자바스크립트] 1. 실행 환경 구축하기

[쉽고 빠르게 배우는 자바스크립트] 1. 실행 환경 구축하기

2023.05.20 - [프로그래밍언어/자바스크립트] - [쉽고 빠르게 배우는 자바스크립트] 0. 자바스크립트(JS)란 무엇인가 [쉽고 빠르게 배우는 자바스크립트] 0. 자바스크립트(JS)란 무엇인가 자바스크립트

c4u-rdav.tistory.com

안녕하세요! 오늘은 자바스크립트에서 변수에 대해 알아보려고 합니다. 변수를 제대로 이해하는 것은 프로그래밍의 첫걸음이라고 할 수 있죠. 함께 차근차근 배워보도록 할게요!

변수란 무엇인가?

변수는 값을 저장하는 공간입니다. 쉽게 말하면, 데이터를 저장해 두고 필요할 때 꺼내 쓸 수 있는 상자라고 생각하면 됩니다. 변수는 프로그램 실행 중에 메모리 공간을 할당받아 이름으로 값을 참조할 수 있습니다.

let number = 10;
console.log(number); // 출력: 10

위에서 number는 숫자 10을 저장하는 변수입니다. 나중에 number라는 이름을 사용해 값을 참조할 수 있습니다.

변수 선언 방법

자바스크립트에서 변수를 선언할 수 있는 방법은 세 가지가 있습니다: var, let, const.

var

var는 자바스크립트의 오래된 변수 선언 방식입니다. 과거에는 자주 사용되었지만, 현재는 권장되지 않는 방식입니다.

var greeting = "Hello"; 
console.log(greeting); // 출력: Hello

특징 중 하나는 동일한 이름으로 재선언이 가능하다는 점입니다. 즉, 동일한 이름의 변수를 여러 번 선언할 수 있습니다.

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

var name = "Jane";
console.log(name); // 출력: Jane (값이 변경됨)

또한 var로 선언된 변수는 언제든 값을 다시 할당할 수 있습니다.

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

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

let

let은 ES6(ECMAScript 2015)에서 도입된 변수 선언 방식으로, 현재 가장 많이 사용되는 방식입니다. var와는 달리 재선언이 불가능하다는 점이 큰 차이입니다.

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

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

let name = "Jane"; // 불가능

const

const 키워드는 앞선 let, var과는 다르게 상수를 선언할 때 사용됩니다. 한 번 값을 할당하면 다시 변경할 수 없습니다.

const pi = 3.14;
console.log(pi); // 출력: 3.14

pi = 3.1415; // 오류 발생: 값을 다시 할당할 수 없음

하지만 객체나 배열을 const로 선언할 경우, 내부 속성이나 요소는 변경할 수 있습니다. 이는 참조값은 고정되지만 그 내부 데이터는 변경 가능하기 때문입니다. (참조라는 개념은 나중에 따로 글을 올리도록 하겠습니다.)

const user = { name: "Alice", age: 25 };
user.age = 30; // 가능: 객체 내부 속성은 변경할 수 있음
console.log(user); // 출력: { name: "Alice", age: 30 }

SMALL

스코프

스코프는 변수나 함수가 선언되어 사용할 수 있는 유효 범위를 말합니다. 자바스크립트에서는 크게 함수 스코프와 블록 스코프가 있습니다.

함수 스코프

var로 선언된 변수는 함수 스코프를 따릅니다. 즉, 함수 내에서만 유효하고 함수 밖에서는 접근할 수 없습니다.

printName이라는 함수가 생성되면 해당 함수의 스코프가 생기고 이 함수 안에서 선언된 name은 함수 내에서만 사용될 수 있는 것이죠. 따라서 함수 밖에서 함수 안에 있는 name 변수를 참조하려 하면 에러가 발생합니다.

function printName() {
  var name = 'Jun';
}

name; //ReferenceError

블록 스코프

let과 const는 블록 스코프를 따릅니다. 블록({}) 내부에서 선언된 변수는 그 블록 내에서만 유효합니다.

const로 선언된 hello는 블록 스코프를 따르기 때문에 선언된 블록 밖에서 참조하면 에러를 발생시키는 것을 확인할 수 있습니다.

function printName(name) {
    if (name) {
    	const hello = "Hello" + name;
    	console.log(hello);
    }
    
    console.log(hello); // ReferenceError
}

호이스팅

추후에 다룰 개념이지만 var와 let의 차이를 위해 간단하게 호이스팅에 대해 설명하겠습니다. 자바스크립트는 변수 선언을 코드 실행 전에 최상단으로 끌어올리는 현상이 있습니다. 이를 호이스팅(hoisting)이라고 합니다. 하지만 var는 선언과 초기화가 동시에 끌어올려지는 반면, let과 const는 선언만 호이스팅 되며, 초기화 전에는 사용하면 ReferenceError가 발생합니다.

선언과 초기화가 동시에 끌어올려진다는 것은 자바스크립트가 "이 변수를 사용할 거니까 미리 공간을 마련해 두고, 그 공간에 기본값(undefined)도 넣어둘게"라고 이해할 수 있습니다.
선언만 끌어올려진다는 것은 "이 변수를 사용할 거야! 그런데 아직 공간을 준비하지 않았고 값을 넣지도 않았어"라고 이해하면 됩니다. 그래서, 나중에 값이 할당되기 전까지는 이 변수를 사용하려고 하면 오류가 발생하게 됩니다. 그리고 이렇게 오류가 발생하는 지점을 일시적 사각지대라고 합니다. (TDZ: Temporal Dead Zone)

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

console.log(y); // ReferenceError: y is not defined
let y = 10;

var vs let

var와 let의 용도는 비슷해 보이지만, var는 사용하지 않는 것이 좋습니다. 그 이유는 var가 다음과 같은 문제를 일으킬 수 있기 때문입니다.

재선언 가능: 같은 이름으로 여러 번 변수를 선언할 수 있어 의도치 않은 버그가 발생할 수 있습니다.
스코프 문제: var는 함수 스코프를 가지기 때문에, 블록({}) 내부에서도 전역적으로 동작할 수 있습니다.
호이스팅: var는 선언되기 전에 사용해도 오류가 발생하지 않아 의도치 않은 버그를 발생시킬 수 있습니다.

따라서 변수는 var 보다는 let을 사용하는 것이 안전합니다.

마무리

자바스크립트에서 변수를 어떻게 선언하고, 각 방식(var, let, const)이 어떻게 다른지 이해하는 것은 아주 중요합니다. 특히, var의 스코프 문제와 호이스팅을 주의하고, 가급적이면 let과 const를 사용하는 습관을 들이는 것이 좋습니다.