scope / hoisting

• scope
• hoisting

 

 scope

scope 는 변수 혹은 함수를 선언할 때 어디서부터 어디까지 유효한지 보는 범위이다.

scope 는 global scope(전역 스코프), function scope(함수 스코프), block scope(블록 스코프) 범위로 나뉠 수 있다.

 

 

global scope

: 전역, 코드의 모든 범위에서 사용 가능

 

function scope

: 특정 함수 코드 내에서 사용 가능

 

block scope

: if, for, switch문 등에서 { } 중괄호로 감싸진 내부 안에서만 사용 가능하다. * const, let 선언에서만 가능 

 

* const, let 선언을 사용했을 때와 var 선언 했을 때의 유효범위가 다르다!

   const, let 선언은 block scope 내에서, var 선언은 function scope 내에서 유효하다.

var value = 'Hello';
 
function globalScope() {
    console.log('globalScope() : ', value);    // globalScope() : Hello
}
 
function functionScope() {
    var value = 'Bye';
    console.log('functionScope() : ', value);    // functionScope() : Bye
}
 
// var 선언을 사용했을 때 : var 선언은 함수 내에서 유효하다. 
function myFunction() {
    var value = 'Bye';
    if(true) {
        var value = 'world';
        console.log('block scope : ', value);           // world
    }
    console.log('myFunction : ', value);                // world
}
 
// const 선언을 사용했을 때 : const 선언은 block scope 내에서만 유효하다. 상수의 값은 재할당 할 수 없다. 
function blockScopeFunction() {
    const value = 'Hi'; 
    if(true) {
        const value = 'How are you?';
        console.log('const block scope : ', value);      // How are you?
    }
    console.log('const value: ', value);                 // Hi
}
 
globalScope();           // globalScope() : Hello
functionScope();         // functionScope() : Bye
console.log(value);      // hello 
myFunction();            // world , world
blockScopeFunction()     // How are you? , Hi

---

 hoisting

선언되지 않은 함수 또는 변수를 끌어올려서 사용되는 자바스크립트 동작 방식

* const, let 은 hoisting이 발생하지 않는다.

 

코드가 헷갈리고 유지보수하기 어렵고 의도치않은 오류가 발생할 수 있음으로 미리 방지 해야 된다. 

 

 

1) 함수에서 호이스팅 

hoistingFunction();             // hoisting Function
 
function hoistingFunction() {
    console.log('hoisting Function');
}

 

2) 변수 선언에서 호이스팅 

console.log(number);           // number is not defined

console.log(number);           // undefined
var number = 2;

number;                            
console.log(number);           // undefined
var number = 2;