안녕하세요! 자바스크립트뿐 아니라 모든 프로그래밍의 기본이 되는 변수에 대해 알아보고자합니다. 변수란 무엇인지 변수를 어떻게 선언하는지 알아보고 처음 배우는 사람들에게는 다소 혼란스러울 수 있는 호이스팅에 대한 개념까지 쉽게 정리해보도록하겠습니다!
1. 변수란 ? (Variable)
변수는 프로그래밍에서 데이터를 임시로 저장하고 참조하기위해 사용되는 이름 붙은 공간입니다. 하나의 변수에는 하나의 값만 저장할 수 있고, 이값을 변경할 수 있기 때문에 변할 수 있는값 즉 변수라고합니다.
변수를 통해 다양한 값(숫자, 문자열, 객체 등)을 메모리에 저장하고 필요할때 다시 사용할 수 있습니다.
JavaScript 에서는 변수를 선언할 때 let, const, var라는 세가지 변수선언 키워드를 사용합니다.
2. 자바스크립트 변수선언키워드 let, const, var 와 선언방법
JavaScript 변수선언 키워드에는 let, const, var가 있습니다.
현재 자바스크립트 개발에서 var는 불완전한 요소(호이스팅의 위험성, 변수스코프,중복선언)때문에 사용을 지양하고있습니다.
ES6이후 추가된 let, const변수선언 키워드를 사용하는 것이 좋습니다.
기본적인 변수 선언 방법입니다.
변수선언키워드 변수명을 쓰고 = (등호) 뒤에 값을 넣어주면됩니다.
각 변수선언키워드들에 대해 알아보겠습니다.
1) let (가장 많이 사용되요!)
let myName = "콩선생";
let age = 4;
let isCat = true;
- 스코프 : 블록 스코프를 가집니다. 블록스코프란 변수가 선언된 중괄호 {} 내부에서만 접근이 가능합니다. if문, for루프 등의 블록내에서 선언된 let변수는 그 블록 밖에서는 사용이 불가능합니다.
- 재할당 : 값을 다시 할당하는 것이 가능합니다. 변수에 저장된 데이터를 언제든지 새로운 값으로 변경할 수 있습니다.
- 호이스팅 : 호이스팅 가능하지만 TDZ 라는 영역 존재하여 선언 이전 변수에 미리 접근이 불가능합니다. 변수 선언전에 접근하면 ReferenceError가 발생합니다.
*TDZ란 : Temporal Dead Zone 변수가 선언되고 초기화가 이루어지기 전까지의 구간을 의미합니다. TDZ에서는 변수 선언이전이나 초기화 전의 변수를 사용하는것을 허용하지않는 범위입니다.
2) const (절대 안바뀌는 값, 상수)
const PI = 3.14159;
const BIRTH_YEAR = 2022;
- 스코프 : 블록 스코프를 가집니다.
- 재할당 : 값을 다시 할당할 수 없습니다. const 는 상수(변하지않는값)을 의미하며, 변수를 선언할때 반드시 초기화해야하고 그이후에는 그 값을 변경할 수 없습니다.
- 호이스팅 : let과 동일하게 호이스팅은 가능하지만 TDZ의 영향을 받아 선언전에 접근하면 ReferenceError가 발생합니다.
3) var (옛날방식, 이제 거의 안쓰임) /기존 코드에서 많이 보일 수 있기때문에 알고만 있으면된다.
현대 자바스크립트 개발에서는 var 사용을 지양하고 let과 const를 사용하는 것이 일반적입니다.
함수스코프, 중복선언가능, 호이스팅의 위험성이 있어 es6이후에는 사용을 권장하지않습니다.
- 스코프 : 함수스코프 Function Scope / 함수스코프란 변수가 선언된 함수 전체에서 접근이 가능합니다. if문 또는 for루프와 같은 블록내에서 선언이 되어도 블록밖에서 접근할 수 있어 유효범위가 직관적이지 않습니다.
- 재할당 : 재할당 가능
- 호이스팅 : var로 선언된 변수는 스코프의 최상단으로 끌어 올려질때 undefined로 초기화됩니다. 변수를 선언하기전에 사용해도 에러가 발생하지않고 undefined값을 얻게 됩니다.
3. 헷갈리는 호이스팅 개념 알아보기
호이스팅이란 자바스크립트 엔진이 코드를 실행하기전에 변수와 함수 선언을 현재 스코프의 맨 위로 끌어올리는것처럼 보이는 현상을 말합니다. 중요한점은 선언만 끌어올려지고 할당은 원래 위치(선언한 위치)에 그대로 있습니다.
정말 간단한 예제를 예로 들어보겠습니다.
var로 선언된 변수 a가 선언되기전에 사용하더라도 undefined로 처리됩니다.
let으로 선언한 a를 선언전에 사용하였을때는 ReferenceError가 발생합니다.
초기화 이전에는 사용할 수 없다고 뜹니다!
그래서 어떤 변수를 써야되나요?
✔ 변하지않는 변수에는 const
✔ 값이 변할 수 있는 변수에는 let
❌ var는 특별한 레거시 코드 유지보수 상황이 아니라면 사용을 피하는 것이 좋습니다.
'IT & 프로그래밍 > Javascript' 카테고리의 다른 글
| [javascript] 자바스크립트, vscode에서 바로! 내장터미널로 쉽게 실행하는 방법 (0) | 2025.05.15 |
|---|