JavaScript에서는 변수를 let과 const,var 키워드를 이용하여 선언할 수 있음.
var value, name; //콤마를 사용하여 한 줄로 선언가능 //변수에 초기값 설정하지 않으면 변수값은 undefined
전역 변수와 함수 내부의 지역 변수 이름이 동일하다면 지역 변수를 우선으로 함.
var num = 10;
function funcNum() {
var num = '지역 변수의 num';
// funcNum 함수 내부의 지역 변수 num을 반환합니다.
return num;
}
console.log(funcNum());
// 지역 변수의 num
console.log(num);
// 10
함수 내부에서 var 키워드를 사용하지 않는다면, 함수 내부에서 전역 변수의 값을 변경함.
var num = 10;
function funcNum() {
// funcNum 함수 내부에서 전역 변수 num의 값을 변경합니다.
num = '지역 변수의 num';
return num;
}
console.log(funcNum());
// 지역 변수의 num
console.log(num);
// 지역 변수의 num
호이스팅(hoisting)은 끌어올림이라는 뜻을 가지며, JavaScript에서 함수 내부의 모든 변수를 맨 위로 '끌어올린' 것처럼 동작.
다른 프로그래밍 언어에서는 블록( { } ) 안에 있는 코드는 유효범위를 가지며, 일반적으로 유효범위 내부의 변수는 외부에서 사용 불가능
즉, 블록( { } )을 기준으로 범위가 생성되기 때문에 블록 유효범위(block scope)라고 부르는데, JavaScript는 블록 유효범위라는 개념이 존재하지 않음.
대신, 함수 유효범위라는 개념이 존재.
함수 유효범위(function scope)는 함수 내부에서 선언된 변수는 함수 전체에 걸쳐 유효하다는 의미입니다.
변수가 선언되기 전에도 유효합니다.
var x = 1000;
function funcTest() {
console.log('x : ' + x);
// x : undefined
var x = 10;
console.log('x : ' + x);
// x : 10
}
funcTest();
=> 함수 내부에서 변수 x가 선언되기도 전에 사용되었기 때문에 전역 변수 x의 값 1000이 출력될거라 예상했지만, undefined가 출력됨.
위 코드의 funcTest 함수는 아래와 같이 동작합니다.
function funcTest() {
var x;
console.log('x : ' + x); // x : undefined
x = 10;
console.log('x : ' + x); // x : 10
}
=> 변수 x는 맨 꼭대기에 호이스팅(hoisting)되고나서 값이 설정됩니다.