[JS] 스코프와 호이스팅

스코프(Scope)

• 스코프(Scope)란 범위라는 뜻
• 변수 또는 함수를 생성할 때, 해당 변수 또는 함수가 갖게 되는 유효 범위를 뜻함

전역 스코프

• 전역 스코프(Global Scope)는 전역(Global)에 선언되어있음
• 어느 곳이든지 해당 변수에 접근 할 수 있다.

지역 스코프

• 지역 스코프(Local Scope)는 말 그대로 해당 지역에서만 접근할 수 있음
• 지역을 벗어난 곳에서는 접근할 수 없다.

const test = 5; //전역 스코프

function print() {

    const test = 10; //지역 스코프
    
    console.log(`지역 스코프 : ${test}`); // 지역 스코프 : 10
    
}

print();

console.log(`전역 스코프 : ${test}`); // 전역 스코프 : 5

 

함수 스코프

• 함수 스코프는 함수가 선언되면 그 함수 안에서만 접근이 가능하다.

function print() {

    let num = 10;
    
}

console.log(num); //ERROR

//print 함수 내부에 선언된 num 변수는 지역 스코프 중 함수 스코프임, 외부에 있는 console은 num변수에 접근하지 못해 ERROR 가 발생함.

블록 스코프

• 블록 스코프는 블록 { } 내부에서 선언된 변수는 해당 블록에서만 접근 가능한 것을 의미한다.

function print() {

	let cnt =0;
    
    for (let i = 0; i < 10; i++) {
		cnt++;    
    }
    
    console.log(i); //ERROR
    
}

print();

//let과 const는 블록 스코프로, for문 안에 let 으로 선언된 변수 i 는 for문 블록에서만 접근 가능하기 때문에 위의 코드와 같이 오류가 발생함.

오래된 변수 선언 키워드 var

let vs var

• let 재선언 불가
• var 재선언 가능,  기존에 선언되었던 동일한 변수는 무시
• 코드량이 많아지게 되었을 때 var로 변수를 선언한다면, 특정 변수가 이미 선언이 되어있는지 판단하기 어렵고, 어디서 어떻게 사용되고 있는지 파악이 힘들어짐 프로그램상의 오류를 발생시킬 수 있게 됨.

let num1 = 1;

let num1 = 10;

console.log(num1); //ERROR

var num2 = 2;

var num2 = 20;

console.log(num2); //20

 

• var은 함수 스코프, let은 블록 스코프

function print() {

    for (let i = 0; i < 10; i++) {}
    
    console.log(i); //error
}

print();

function print() {

    for (var i = 0; i < 10; i++) {}
    
    console.log(i); //10
    
}

print();

호이스팅

• 아직 선언되지 않은 함수나 변수들을 해당 스코프의 맨 위로 끌어올려서 사용하는 자바스크립트의 작동 방식을 의미함.

console.log(num); // undefined --> 에러가 아닌 undefined가 출력된다.

var num = 10;

 

위의 코드를 아래와 같이 해석하기 때문

var num;

console.log(num); // undefined

num = 10;

• 호이스팅은 var로 선언된 변수에서만 일어남
• let 또는 const로 선언된 변수에서는 호이스팅이 발생하지 않음.
• 호이스팅이 많이 발생하게 작성된 코드는 가독성도 좋지 않아 코드의 이해도가 떨어지고, 많은 오류를 발생시킬 수 있기 때문에 방지하는 것이 좋음
• 되도록 변수는 let과 const로 선언해야하며, 함수는 호출 전에 미리 선언을 할 수 있도록 하자.