JavaScript/블록 레벨 스코프 ,함수 레벨 스코프

Trooper·2022년 8월 4일

목록 보기

8/13

대부분의 프로그래밍 언어는 블록 레벨 스코프를 따르지만 자바스크립트는 함수 레벨 스코프를 따릅니다.

블록 레벨 스코프

모든 코드 블록내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없습니다.

코드 블록 내부에서 선언한 변수는 지역 변수입니다.

var foo = 123;

console.log(foo); // 123

{
  var foo = 456;
}

console.log(foo); // 456

블록 레벨 스코프를 따르지 않는 var 키워드의 특성 상, 코드 블록내의 변수 foo 는 전연 변수입니다.

var 키워드로 선언한 변수는 중복 선언이 가능하므로 문법적으로는 문제가 없습니다.

하지만 코드 블록 내의 변수 foo는 전역 변수이기 때문에 전역에서 선언된 전역 변수 foo 의 값 123을 456으로 재할당 하였습니다.

let foo = 123;

{
  let foo = 456;
  let bar = 456;
}

console.log(foo); // 123

console.log(bar); // ReferenceError: bar is not defined

ES6+는 블록 레벨 스코프를 따르는 변수를 선언하기 위해 let 키워드를 제공합니다.

let 키워드로 선언된 변수는 블록 레벨 스코프를 따릅니다.

코드 블록 내에서 선언된 foo는 지역 변수이고 전역에서 선언된 foo는 전역 변수로 별개의 변수인 것입니다.

코드 블록내에서 선언된 변수 bar 또한 지역 변수로 전역에서 bar을 참조할 수 없습니다.

함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없습니다.

함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수입니다.

const func = () => {
  let foo = 1;
  console.log(foo);
};

func(); // 1
console.log(foo); // ReferenceError: foo is not defined

함수 내부에서 선언된 변수 foo는 지역 변수이므로 전역 변수에서 참조 할 수 없다.

전역 함수 외부에서 생성한 변수는 모두 전역 변수입니다. 그래서 전역 변수를 남발할 가능성이 높습니다. 그래서 ES6는 let, const 키워드를 도입하였다.

Web FrontEnd Developer