자바스크립트 - 스코프

스코프

• 스코프(Scope)는 직역하면 범위 라는 뜻으로, 자바스크립트에서는 우리가 변수 또는 함수를 생성할 때, 해당 변수 또는 함수가 갖게 되는 유효범위를 뜻합니다. 자바스크립트의 스코프에는 여러 종류가 있습니다. 이 중에서, 전역스코프와 지역스코프에 대한 내용 먼저 살펴보겠습니다. 

 

전역 스코프와 지역 스코프

• 전역 스코프는 영어로는 Global Scope로 전역에 선언되어있어, 어디서 든지 해당 변수에 접근 할 수 있는 범위를 뜻합니다. 
• 지역 스코프는 Local Scope로 말 그대로 해당 지역에서만 접근할 수 있는, 지역을 벗어난 곳에서는 접근할 수 없는 범위를 나타냅니다. 
• 저번시간에 배웠던 전역변수 혹은 외부변수는 아래에 보이는 코드의 sum변수처럼 어디서나 접근가능하므로 전역스코프를 갖고, 지역변수는 add함수 내부에 선언된 sum변수와 같이 add함수의 내부에서만 접근 가능하기 때문에, 지역스코프를 갖습니다. 

const num = 10; //전역 스코프

function print() {
    const num = 100; //지역 스코프
    console.log(`지역 스코프 ${num}`);
}

print();
console.log(`전역 스코프 ${num}`);

 

print 함수가 호출되어, 내부에 선언된 num변수는 함수 내부에서만 접근 가능한 지역 스코프이기 때문에 "지역 스코프100"이 출력되고 함수의 외부에 있는 num변수는 전역에서 접근 가능한 전역스코프이기 때문에 가장 마지막줄에 있는 "전역스코프10"이 출력되는 것을 확인할 수 있습니다. 

 

 

 

 

블록스코프

• 블록 스코프는 같은 블록에서만 접근 가능한 범위를 뜻합니다. 블록{} 내부에서 선언된 변수는 해당 블록에서만 접근 가능합니다.

작성된 코드를보면 print함수의 내부에 for문이라는 반복문을 이용해 i의 값을 작성한 것을 볼 수 있습니다.

for문 안에 있는 콘솔은 오류없이 잘 실행되지만 , for문의 외부에 있는 콘솔은 출력되지 않고 "i is not defined"라는 오류가 발생하게 됩니다. 

 

우리가 배웠던 let과 const키워드는 블록 스코프로, for문 괄호 안에 let으로 선언된 변수 i는 for문의 블록인 {}(중괄호)안에서만 접근 가능한 블록 스코프에 해당하기 때문에 해당 블록을 제외한 곳에서 접근하면 에러가 발생하게 됩니다.

 

 

let과 var

• let과 const라는 키워드로 변수를 생성한다고 배웠는데 자바스크립트에서는 var라는 또 다른키워드가 존재합니다.

let num1 = 10;
var num2 = 20;

num1 = 100;
num2 = 200;

console.log(num1); // 100
console.log(num2); // 200

let과 var는 어떤 차이가 있는지 알아보기 위해 다음과 같이 각각의 키워드로 num1, num2변수를 선언했습니다. 

let과 var 모두 값이 잘 출력되는 것을 볼 수 있습니다. 

 

그러나 var는 오래된 변수 선언 키워드라고도 불리며, 잘 사용하지 않는 키워드 입니다.

그렇다면 차이점은 무엇일까요?

 

1. 변수선언방식

let으로 변수를 생성해보겠습니다.

let num1 = 10;
let num1 = 100;

console.log(num1); //ERROR

코드를 실행하면 이미 num1이 선언되어있다 라는 오류가 발생합니다. 

 

이제 var로 선언해보겠습니다.

var num1 = 10;
var num1 = 100;

console.log(num1); //ERROR

코드를 실행시키면,let처럼 에러가 발생하지 않고, 20이라는 값이 아니라 200이라는 값이 출력됩니다. 

이렇게 var키워드를 이용해 변수를 선언하면, 같은 이름의 변수를 여러번 다시 선언할 수 있고, 기존에 선언되었던 동일한 변수는 무시되는 것을 확인할 수 있습니다.

 

var로 선언된 변수가 더 유연하다고 생각할 수 있지만, 코드량이 많은 자바스크립트 프로그램에서 var로 변수를 선언한다면, 특정 변수가 이미 선언이 되어있는지 판단하기 어려울 뿐만 아니라, 어디서 어떻게 사용되고 있는지 파악이 힘들어지고 프로그램상의 오류를 발생시킬 수 있게된다는 단점이 있습니다. 

 

함수스코프

• let과 var의 또다른 차이점은 var은 함수스코프이며, let은 블록스코프라는 것입니다. 앞에 작성했던 for문의 let을 var로 변경하겠습니다. 

function print() {
    for (var i = 0; i < 10; i++) {
        console.log(`블록 스코프 : ${i}`);
    }
    console.log(i);
}

print();

i를 let으로 선언했을 때에는, 외부에 있는 console에서 에러가 발생했지만 var로 변경하니 10이라는 숫자가 출력되었습니다. 

다르게 출력되는 이유는, var키워드는 해당 함수안에서만 접근 가능한 범위를 갖는 함수스코프 이기 때문에 pirnt 함수의 내부에서 변수 i 에 접근하는 것이 가능해졌기 때문입니다.

 

이렇게 for문안에 선언된 변수가 var로 선언하게 되면, 해당 for문이 종료되더라도 같은 함수 내부에서는 계속 접근이 가능하기 때문에, 여러가지 오류가 발생할 수 있습니다. 

 

정리

• 정리해보면 let은 같은 이름의 변수를 재선언하면 오류를 발생시키지만, var는 오류 없이 가장 마지막에 작성된 변수의 값이 변경되고, let은 블록스코프, var는 함수스코프라는 차이점이 있습니다. 

---

참고자료

https://www.inflearn.com/course/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%B2%AB%EA%B1%B8%EC%9D%8C

웹 프론트엔드를 위한 자바스크립트 첫 걸음 - 인프런 | 강의