변수란 무엇인가?
데이터를 저장하고 참조할 수 있는 저장소
- 이름과 주소를 가진다
- var, let, const 키워드를 이용하여 변수를 선언한다
📌 변수의 5가지 주요 개념
변수 이름 = 저장된 값의 고유한 이름
변수 값 = 변수에 저장된 값
변수 할당 = 변수에 값을 저장하는 행위
변수 선언 = 변수를 사용한다고 컴퓨터에게 알리는 행위
번수 참조 = 변수에 할당된 값을 읽어오는 행위
📌 변수를 이해하기 위해 필요한 지식
TDZ(Temporal Dead Zone) : 변수가 선언되기 전의 코드 영역 (= 변수가 죽어있는 공간)
스코프 : 변수가 영향을 끼칠 수 있는 범위
함수 스코프 : 함수 내에서만 변수가 영향을 끼친다.
블록 스코프 : {} 내에서만 변수가 영향을 끼친다.
변수를 선언하는 3가지 방법
01 var
var coffeeMenu = "Americano"
var coffeeMenu = "Latte" // 재선언이 가능하다
coffeeMenu = "Latte" // 재할당도 가능하다
📌 특징
- 함수 스코프를 가진다.
- 재선언과 재할당이 모두 가능하다.
🚨 문제점
(1) 재선언이 가능하기 때문에, 이미 사용한 변수를 또 사용하게 되는 일이 발생할 수 있다.
var ourCoffeeMenu = "Americano" // 우리 팀 커피 메뉴는 아메리카노로 정해두었는데
var ourCoffeeMenu = "CafeMocha" // 카페모카로 바뀌어버릴 수 있는 것이다
(2) 변수를 선언하기 전에 변수를 참조하는 코드를 허용한다.
console.log(coffeeMenu); // 결과: undefined
coffeeMenu = "Americano";
var coffeeMenu;
=> 이러한 문제점들로 인해 논리적인 흐름을 벗어나기 때문에 var은 최대한 사용하지 않는 것이 좋다.
02 let
let coffeeMenu = "Americano"
let coffeeMenu = "Latte" // 재선언이 불가능하다
coffeeMenu = "Latte" // 재할당은 가능하다
📌 특징
- 블록 스코프를 가진다.
- 재선언이 불가능하다.
- 재할당이 가능하다.
03 const
const coffeeMenu = "Americano"
const coffeeMenu = "Latte" // 재선언이 불가능하다
coffeeMenu = "Latte" // 재할당도 불가능하다
📌 특징
- 블록 스코프를 가진다.
- 재선언과 재할당이 모두 불가능하다. => 값이 영원히 바뀌지 않기 때문에 코드의 안전성을 높인다.
- 반드시 선언과 동시에 초기화를 해야 한다.
const vs let
기본적으로 변수를 선언할 때 const를 사용하고, 재할당이 필요한 경우에만 let을 쓴다.
예를 들어, for문에서 사용되는 i의 경우 계속 값이 바뀌어야 하기 때문에 let을 사용한다.
for (let i = 0; i < 10: i++) {
console.log(i);
}
변수가 필요한 이유
(1) 데이터 저장 및 관리의 필요성
변수는 프로그래밍에서 데이터를 저장하고, 그 값을 쉽게 관리하고 재사용할 수 있도록 한다.
예를 들어, 사용자로부터 받은 입력을 처리하거나 계산 결과를 다시 사용해야 할 때, 변수 없이는 각 단계마다 데이터를 반복적으로 똑같이 적어야 한다.
(2) 프로그램의 복잡성 관리
변수가 없다면 직접 값을 입력해야 하므로 코드의 복잡성이 증가하고 오류 가능성이 높아진다.
또한, 프로그램의 확장성과 유지 보수성이 떨어질 수 있다.
변수를 사용하면 코드의 가독성이 높아지고, 수정이 필요할 때 해당 변수만 수정하면 된다.
(3) 재사용성 및 유지보수 향상
변수를 통해 정의된 데이터 값을 여러 위치에서 재사용함으로써 코드의 재사용성을 높일 수 있다.
예를 들어, 한 함수에서 계산된 결과를 다른 여러 함수에서도 활용할 수 있다.
'Front-end > Javascript' 카테고리의 다른 글
[JS] 조건문(Conditional Statement) (0) | 2025.01.07 |
---|---|
[JS] 함수(Function) (1) | 2025.01.06 |
[JS] 연산자(Operator) (0) | 2025.01.06 |
[JS] 데이터 타입(Data Type) (1) | 2025.01.06 |
[JS] 실행 컨텍스트(Execute context)에 대해 알아보자 (4) | 2025.01.03 |