함수에서 변수 선언 시 사용 되는 var, let and const의 차이를 알아볼 것이다. 그전에 우선 Hoisting 과 Scope 라는 개념을 짚고 넘어가볼 것이다.
🥝 Hoisting이란?
Hoist의 사전적 의미는 'to raise or pull something up to a higher position, often using ropes or special equipment' 이라고 한다. 즉, '줄이나 특별한 기구 따위를 사용하여 어떠한 것을 높은 곳으로 들어올리거나 당기다' 라는 의미이다.
자바스크립트에서 함수의 유효 범위라는 것은 함수 안에서 선언된 모든 변수는 함수 전체에 걸쳐 유효하다는 의미이다.
그런데 이 유효 범위의 적용이 변수가 선언되기 전에도 똑같이 적용된다. 이러한 자바스크립트의 특징을 함수 호이스팅(hoisting)이라고 한다. 즉, 자바스크립트 함수 안에 있는 모든 변수의 선언은 함수의 맨 처음으로 이동된 것처럼 동작한다. 이를 위의 사전적 의미와 연관지어 생각해본다면 조금은 이해에 도움이 될 것이다.
아래는 Hoisting 의 예시이다.
var globalNum = 10; // globalNum을 전역 변수로 선언함.
function printNum() {
document.write("지역 변수 globalNum 선언 전의 globalNum의 값은 " + globalNum + "입니다.<br>"); // ①
var globalNum = 20; // globalNum을 지역 변수로 선언함. // ②
document.write("지역 변수 globalNum 선언 후의 globalNum의 값은 " + globalNum + "입니다.<br>");
}
printNum();
// 지역 변수 globalNum 선언 전의 globalNum의 값은 undefined입니다.
// 지역 변수 globalNum 선언 후의 globalNum의 값은 20입니다.위의 예제 ①의 시점에서는 변수 globalNum가 전역 변수를 가리킨다고 생각하기 쉽다. 하지만 자바스크립트 내부에서는 함수 호이스팅에 의해 다음과 같이 코드가 변경되어 처리된다.
var globalNum = 10;
function printNum() {
var globalNum; // 함수 호이스팅에 의해 변수의 선언 부분이 함수의 맨 처음 부분으로 이동됨.
document.write("지역 변수 globalNum 선언 전의 globalNum의 값은 " + globalNum + "입니다.<br>");
globalNum = 20;
document.write("지역 변수 globalNum 선언 후의 globalNum의 값은 " + globalNum + "입니다.<br>");
}
printNum();위의 예제 ①의 시점에서는 globalNum라는 지역 변수가 선언만 되어 있고, 아직 초기화만 안 된 상태이다. 따라서 이때 globalNum 변수에 접근하면 아직 초기화되지 않은 변수에 접근했으므로, undefined 값을 반환하게 된다.
실제로 변수가 초기화되는 시점은 원래 코드에서 변수가 선언된 ②의 시점이다.
🥝 Scope이란?
자바스크립트에서 객체나 함수는 모두 변수(variable)이다. 변수의 유효 범위(scope)란 해당 변수가 접근할 수 있는 변수, 객체 그리고 함수의 집합을 의미한다. 자바스크립트에서 변수는 유효 범위에 따라 지역 변수(local variable), 전역 변수(global variable) 으로 구분된다.
지역 변수(local variable)란 함수 내에서 선언된 변수를 가리킨다. 변수가 선언된 함수 내에서만 유효하며, 함수가 종료되면 메모리에서 사라진다.
function localNum() {
var num = 10; // 지역 변수 num에 숫자 10을 대입함.
document.write("함수 내부에서 변수 num의 타입은 " + typeof num + "입니다.<br>"); // number
}
localNum(); // 함수 localNum()을 호출함.
document.write("함수의 호출이 끝난 뒤 변수 num의 타입은 " + typeof num + "입니다.");
// undefined
// 함수 내부에서 변수 num의 타입은 number입니다.
// 함수의 호출이 끝난 뒤 변수 num의 타입은 undefined입니다.선언되지 않은 변수에 대한 typeof 연산자의 결괏값은 undefined 값을 반환하는 것을 알 수 있다.
전역 변수(global variable)란 함수의 외부에서 선언된 변수를 가리키다. 이러한 전역 변수는 프로그램의 어느 영역에서나 접근할 수 있으며, 웹 페이지가 닫혀야만 메모리에서 사라진다.
var num = 10; // 전역 변수 num을 선언함.
function globalNum() {
document.write("함수 내부에서 변수 num의 값은 " + num + "입니다.<br>"); // 10
num = 20; // 전역 변수 num의 값을 함수 내부에서 변경함.
}
globalNum(); // 함수 globalNum()을 호출함.
document.write("함수의 호출이 끝난 뒤 변수 num의 값은 " + num + "입니다."); // 20
// 함수 내부에서 변수 num의 값은 10입니다.
// 함수의 호출이 끝난 뒤 변수 num의 값은 20입니다.위의 예제처럼 전역 변수는 함수 외부뿐만 아니라 내부에서도 접근하여 변경할 수 있다.
자바스크립트에서 지역 변수를 선언할 때에는 반드시 var 키워드를 사용하여 선언해야 한다. 함수 내부에서 var 키워드를 사용하지 않고 변수를 선언하면, 해당 변수는 지역 변수가 아닌 전역 변수로 선언된다.
function globalNum() {
num = 10; // var 키워드를 사용하지 않고 변수 num을 선언함.
document.write("함수 내부에서 변수 num의 값은 " + num + "입니다.<br>"); // 10
}
globalNum(); // 함수 globalNum()을 호출함.
document.write("함수의 호출이 끝난 뒤 변수 num의 값은 " + num + "입니다."); // 10
// 함수 내부에서 변수 num의 값은 10입니다.
// 함수의 호출이 끝난 뒤 변수 num의 값은 10입니다.또한, 전역 변수와 같은 이름의 지역 변수를 선언하면, 해당 블록에서는 해당 이름으로 지역 변수만을 호출할 수 있다.
var num = 10; // 전역 변수 num을 선언함.
function globalNum() {
var num = 20; // 같은 이름의 지역 변수 num을 선언함.
document.write("함수 내부에서 변수 num의 값은 " + num + "입니다.<br>"); // 20
}
globalNum(); // 함수 globalNum()을 호출함.
document.write("함수의 호출이 끝난 뒤 변수 num의 값은 " + num + "입니다."); // 10
// 함수 내부에서 변수 num의 값은 20입니다.
// 함수의 호출이 끝난 뒤 변수 num의 값은 10입니다.🥝 var, let and const 의 차이점
- var (변수 재선언 가능)
var variable = '변수선언함';
console.log(variable); // 변수선언함
var variable = '또 변수선언함';
console.log(variable); // 또 변수선언함여러 번 변수를 선언해도 에러 없이 각각 다른 값이 출력될 수 있다. 이는 필요할 때 마다 변수를 사용할 수 있다는(편리하다는) 장점이 될 수도 있지만 동일한 이름의 변수명을 남용하는 문제를 야기할 가능성이 높아지기에 단점이 더 크다고 할 수 있다. 이를 보완하기 위해 ES6부터 let, const가 추가되었다.
- let (변수 재선언 (재생성) 불가능, 변수 재할당 가능)
let name = "code lee";
let job = "frontend developer"; // 초기값
name = "code sue";
job = "목수"; // 새롭게 할당된 값let은 변수의 재할당은 가능하지만 var처럼 재선언은 불가능하다. 같은 변수 이름을 중복해서 쓰면 안 된다.
- const (변수 재선언 불가능, 변수 재할당 불가능)
const name = "김개발";
name = "김코딩"; // 입력 시 오류 발생const의 경우 constant(상수)의 의미처럼 한 번만 선언하며 변수 재선언이나 재할당은 불가능 하다.
let을 쓸지, const를 쓸지는 개발자가 상황에 맞게 정하면 된다. 변수에 값을 할당하고 영원히 수정할 일이 없으면 const를 사용하고, 변수 값이 한 번이라도 수정될 예정이라면 let을 쓰면 된다.
