스코프

스코프(Scope)는 직역하면 범위 라는 뜻으로 자바스크립트에서 변수 또는 함수를 생성할 때, 해당 변수 또는 함수가 갖게 되는 유효범위를 뜻함.


1. 전역 스코프와 지역 스코프
전역 스코프는 Global Scope로 전역에 선언되어있어 어디서든지 해당 변수에 접근 할 수 있는 범위를 뜻함.
지역 스코프는 Local Scope로 해당 지역에서만 접근할 수 있고 지역을 벗어난 곳에서는 접근할 수 없는 범위를 뜻함.

 

// 스코프
// 전역 스코프와 지역 스코프
const num = 10; //전역 스코프
function print() {
  const num = 100; //지역 스코프
  console.log(`지역 스코프 ${num}`);
}
print();
console.log(`전역 스코프 ${num}`);
// - 출력결과
// 지역 스코프 100
// 전역 스코프 10

 

같은 지역에서만 접근 가능한 지역 스코프에는 함수 스코프와 블록 스코프 2가지 종류의 스코프가 있다.


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

 

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

 

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


3. let과 var
let과 var는 서로 유사하게 동작하는 키워드이다.

 

// let과 var
let num1 = 10;
var num2 = 20;
num1 = 100;
num2 = 200;
console.log(num1); // 100
console.log(num2); // 200

 

하지만 var는 오래된 변수 선언 키워드 라고도 불리며, 잘 사용하지 않는 키워드이다.
let과 var는 어떤 차이점이 있고, 왜 많은 사람들이 var 대신 let을 이용하여 변수를 선언하는지 살펴본다.

1) 변수 선언 방식
let 과 var 를 사용해 변수를 선언한 다음, 동일한 이름의 변수를 다시 선언하는 코드를 작성한다.

 

// 변수 선언 방식
let num1 = 10;
let num1 = 100;
console.log(num1); //ERROR

var num2 = 20;
var num2 = 200;
console.log(num2); //200

 

let 으로 변수를 생성해보면, 코드 실행 결과 "이미 num1 이 선언되어있다" 라는 오류가 발생.
var 로 변수를 선언하면, 같은 이름의 변수를 여러번 다시 선언할 수 있고, 기존에 선언되었던 동일한 변수는 무시되는 것을 확인할 수 있다.

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

2) 함수 스코프
let 과 var 의 또다른 차이점은 var은 함수 스코프 이며, let은 블록 스코프 이다.

 

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

 

let을 var로 변경하니 에러가 발생하지 않고 10 이라는 숫자가 출력.
var 키워드는 해당 함수 안에서만 접근 가능한 범위를 갖는 함수 스코프 이기 때문에 print 함수의 내부에서 변수 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

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