JavaScript/자바 스크립트 기초

자바 스크립트 기초(1) - 변수(variable)란?

lamarcK 2025. 3. 17. 15:09

변수(variable)란?

변수는 데이터를 저장하는 공간이다. 필요한 값을 저장하고, 저장된 값을 필요에 따라 수정하거나 사용할 수 있다.

 

예를 들면 상자라고 할 수 있다. 물건을 담아서 보관하고, 필요할 때 다시 꺼내 쓸 수 있다. 변수도 마찬가지로 담아뒀다가 꺼내서 사용이 가능하다.

상자에 이름표를 붙여서 구분을 쉽게 하는 것과 마찬가지로 변수도 이름을 붙여서 어떤 데이터들을 담고 있는지 쉽게 구분이 가능하다.

변수 선언(variable declaration)

변수 선언은 데이터를 담기 위한 상자를 준비하는 과정이라고 할 수 있다. 다양한 물건(데이터)을 저장할 상자를 준비하고 이름표를 붙이는 과정이 변수 선언이다.

변수에 이름을 붙이는 것을 선언(declaration)이라고 하는 것은 'A'가 여기에 있다! 하는 식으로 'A'라는 이름을 가진 무언가가(존재가) 이 자리에 있음을 알리는 과정이기 때문이다.

변수 선언 방법

자바 스크립트에서 변수 선언 방법은 일반적으로 3가지가 있다.

  1. var : 중복 선언과 재할당이 가능하다.
  2. let : 재할당만 가능하다.
  3. const : 중복 선언과 재할당이 모두 불가능하다. 상수를 선언할 때 사용한다.

중복 선언? 재할당?

중복 선언(Redeclaration, 재선언)이란 동일한 이름의 상자를 여러개 준비하는 것과 동일하다.

똑같은 이름을 가진 변수를 추가로 선언하는 것이다.

 

재할당 (Reassignment)이란 상자 안에 들어있는 물건을 다른 물건으로 교체하는 것과 같다.

예를 들어 상자 안에 야구공이 들어있었는데 그것을 사과로 바꾸는 식이다.

 

1. var

이름에서 알다시피 variable의 약자이며 자바스크립트 내에서 사용된 최초의 변수이다.

  1. 재선언과 재할당이 가능해서 유연성을 제공할 수 있지만, 오히려 코드의 안정성과 예측 가능성을 떨어뜨리는 요인이 되어 사용이 권장되지 않는다.
  2. 함수 스코프(function scope)를 가진다.
var myNumber = 10;
var myString = "Hello, world!";
var myBoolean = true;

 

각각의 요소는 다음과 같다.

  • var : 변수를 선언하는 키워드
  • myNumber : 변수의 이름(identifier)
  • = : 할당 연산자(assignment operator) 오른쪽의 값을 왼쪽의 변수에 할당하는 역할을 한다.
  • 10 : 변수 값, 변수에 할당된 값이다.

즉 위의 코드는 myNumber이라는 변수에 10이라는 값을 할당했다는 소리다.

여기서 10은 소스 코드 상에서 직접 표현되는 고정된 값이기 때문에 리터럴(Literal)이라고도 부른다.

리터럴(Literal)

  • 리터럴은 코드에서 직접 표현되는 고정된 값을 의미한다.
  • 변수와 달리, 리터럴은 그 자체로 값을 나타내며, 메모리 공간에 저장된 데이터의 실제 값을 의미한다.
  • 예를 들어, 숫자 10, 문자열 "Hello", 불리언 true는 모두 리터럴이다.
  • 리터럴은 변수에 할당되거나, 연산에 사용되는 등 다양한 방식으로 활용된다.

즉 변수 자체에 직접 할당된 값을 리터럴이라고 한다.

위의 방식처럼 변수에 리터럴을 바로 할당(지정, 대입)하는 방식도 있지만 변수만을 선언하는 방식도 있다.

아래 코드는 변수를 선언하고 이후에 값을 별도로 할당한 경우이다.

var myNumber; // 변수 이름만 선언
myNumber = 10; // 값 할당

 

변수만을 선언하고 값을 할당하지 않는다면 초기값은 undefined로 설정된다.

undefined로 설정된 변수는 오류 가능성이 있기때문에 값을 할당해주는 것이 좋다.

함수 스코프(function scope)

함수 스코프(function scope)는 자바스크립트에서 변수나 상수의 유효 범위가 함수 내로 제한되는 개념이다. 즉, 함수 스코프를 가지는 변수나 상수는 선언된 함수 내에서만 접근할 수 있고, 함수 외부에서는 접근할 수 없다.

function myFunction() {
  var x = 10; // 함수 스코프 변수
  console.log(x); // 함수 내부에서 접근 가능
}

myFunction();

console.log(x); // 오류 발생: x is not defined (함수 외부에서 접근 불가)

이처럼 함수의 코드 블록 내에서는 작동하지만 함수의 코드 블록 밖에서는 적용되지 않는다.

 

2. let 

기존의 var 키워드의 단점을 보완하고 더 안전하고 예측 가능한 코드를 작성할 수 있도록 ES6(ECMAScript 2015)에서 도입된 변수 선언 키워드이다.

  1. 재할당 가능, 재선언 불가능
  2. 블록 스코프(Block Scope)를 가진다.

재할당 가능, 재선언 불가능

재할당이 가능하다는 것은 선언된 변수의 값을 바꿀 수 있다는 것이다.

// 재할당 예시
let y = 20;
console.log(y); // 출력: 20
y = 30;
console.log(y); // 출력: 30

let을 사용해서 y라는 변수를 선언하고 초기 20이라는 값을 줬다. 이후에 y = 30이라는 코드를 사용해서 y의 값을 30으로 바꾸었다. 이처럼 let으로 선언된 변수는 기존에 할당된 값을 변경하는 재할당이 가능한 키워드이다.

 

재선언이 불가능하다는 것은 동일한 이름을 가진 변수를 추가로 선언이 불가능하다는 것이다.

// 재선언 불가능 예시
let myVar = 10;
let myVar = 20;

이런식으로 동일한 이름을 가진 변수를 선언하려고 하면 아래 이미지와 같이 오류 메시지가 뜨게 된다. 일반적으로 오류 메시지가 뜬다는 것은 코드가 실행 되지 않는다 얘기이기 때문에 반드시 수정해줘야 한다.

블록 스코프(Block Scope)

블록 스코프(Block Scope)는 프로그래밍에서 변수나 상수의 유효 범위가 코드 블록({}) 내로 제한되는 개념이다.

즉, 블록 스코프를 가지는 변수나 상수는 선언된 블록 내에서만 접근할 수 있고, 블록 외부에서는 접근할 수 없다.

 

기본적으로 let이라는 변수는 재선언이 불가능하다. 하지만 let은 블록 스코프를 가지는 변수이기 때문에 속해있는 코드 블록이 다르면 재선언이 가능해진다.

let myVar = 10;

if (true) {
  let myVar = 20; // 다른 블록 스코프에서는 재선언 가능 (새로운 변수 선언)
  console.log(myVar); // 출력: 20
}

console.log(myVar); // 출력: 10

이런식으로 코드를 짠다면 처음 선언된 let myVar = 10;와 let myVar = 20;는 영역이 달라서 이름이 같더라도 서로 다른 변수 취급된다.

 

전역 스코프(Global Scope)

여기서 처음 선언된 let myVar = 10;은 코드블록이 없기 때문에 블록스코프를 가지는 것이 아니냐고 할 수 있는데 이럴 경우 전역 스코프(Global Scope)라고 해서 변수나 상수의 유효 범위가 전체 프로그램 영역에 걸쳐있는 것을 의미한다. 즉, 전역 스코프를 가지는 변수나 상수는 코드 어디에서든 접근하고 사용할 수 있다.

 

단 코드 블록 내에서 동일한 이름의 변수가 선언되었다면 해당 블록에서는 그것을 우선시한다.

3. const

constant의 약자로 상수를 선언하는 키워드다. 상수는 변수와 달리, 한 번 값이 할당되면 다시 변경할 수 없는 불변의 값을 의미한다.

const는 let과 마찬가지로 var의  단점을 보완하기 위해 ES6(ECMAScript 2015)에서 도입된 변수 선언 키워드다.

 

  1. 재할당 불가능, 재선언 불가능
  2. 블록 스코프(Block Scope)를 가진다.

재할당 불가능, 재선언 불가능

 

const로 선언된 상수는 값을 다시 할당할 수 없기 때문에 값을 변경하려고 하면 오류가 발생한다.

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

마찬가지로 재선언이 불가능하기 때문에 한번 더 선언 하려고 하면 오류가 발생한다.

const PI = 3.14159;
const PI;
console.log(PI); // 출력: 3.14159

 

블록 스코프(Block Scope)

let과 마찬가지로 상수의 유효 범위가 코드 블록({}) 내로 제한된다.

if (true) {
  const myConst = 10;
  console.log(myConst); // 출력: 10
}

console.log(myConst); // 오류 발생: myConst is not defined

때문에 변수가 위치한 코드 블록 외에 변수를 불러 온다면 오류가 나게 된다.

왜냐하면 변수가 선언된 코드 블록 외의 영역에선 해당 변수가 존재하지 않기때문이다.