[JS-ES6] variables[2] - Block Scope

📌 Block Scope

Block Scope란 블록문(다른 언어에서는 복합문이라고도 함)이라고 불리며 0개 이상의 구문을 묶을때 사용한다. 블록은 한 쌍의 중괄호로 구성하며 선택적으로 이름을 붙일 수 있다.
https://velog.io/@bibiboy/JS-ES6-variables-letconstant 에서 공부한 Let과 Const의 또 다른장점은 Block Scope가 있는점이다.

⭐️ Block Scope와 Function Scope

변수들의 범위를 확인해보면 var는 Function Scope이고, let, const는 Block Scope이다.
Function Scope는 함수(function)단위, Block Scope는 중괄호({})단위로 범위를 정한다. Scope는 기본적으로 버블(블록)이며 이 버블이 변수들이 접근이 가능한지 아닌지를 감시해준다. 조금 더 확인해보자

if(true){
  let hello = 'h1';
};
console.log(hello); // Uncaught ReferenceError: hello is not defined

이 코드를 보면 우리 머릿속에서는 조건문의 true가 조건으로 들어가니 당연하게 Block안에 선언한 hello라는 값이 있을것이라고 생각을 한다.
하지만 hello는 정의되어있지않다고 에러가 출력이된다.

이 경우에는 const 그리고 let도 마찬가지로 모두 Block Scope({})로 되어있다. 그 말은 그 Block 안에서만 존재한다는 것이다.

if(true){...} 밖에서 hello는 존재하지 않는것이다.
이것이 우리가 값을 가져오지 못하는 이유다.

❗️Block밖에서는 정의되어 있지 않기 때문

const나 let이 아닌 var를 쓰면 Function Scope이기 때문에 그 변수를 어떤 구문(if, while, for ...)을 써도 전역변수처럼 외부에서도 사용할 수 있을것이다.

let myName = 'bibi';
console.log(myName); // bibi 출력(정상작동)

console.log(myName); // Uncaught ReferenceError: myName is not defined. error출력
let myName = 'bibi'; 

⭐️ Block Scope 정리

if(true){
	let hello = 'hi';
};
let hello = 'bye';
console.log(hello); // bye

상단의 코드를 보면 내가 가지고 있는것이 보호받고 있는것이다. 현재의 코드를 기준으로 if문 안의 Block안에서 선언한 hello가 외부로 나가지 않는것이다.

물론 외부로 꺼내면 안에서 그 값을 가져올 수 있다.

// 외부에 꺼내놓은 let
let hello; // 선언
if(true){
	let hello = 'hi';
};
console.log(hello); // hi

hello는 버블(Block) 외부에 있기 때문에 잘 실행될것이다.
이것이 scope다 보기 편해졌고 {}를 볼 때마다 그 안에 버블(Block)이 있다는 것을 알고 그 버블(Block)외부에서는 안으로 접근할 수 없다는 것을 알게된것이다

//마지막 정리
if (true) {
  1111111
  if (true) {
    2222222
  }
}

예를들어 상단 코드를 보게되면 2에서는 1로 접근이 가능하지만 1에서는 2로 접근하지 못한다.

🔥 요약정리

버블과 Block은 같은말이며 {}를 가리킨다. var, let, const의 scope(범위)를 알고 사용하는것이 중요하다. let, const는 Block Scope, var는 Function Scope

📖 참고

https://nomadcoders.co/ - Nomad Coder