변수선언

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(호이스팅)

호이스팅(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)되고나서 값이 설정됩니다.

출처) 변수 선언과 호이스팅(Hoisting)