자바스크립트에서 스코프는 변수와 함수의 유효 범위를 정의합니다. 이는 어떤 부분에서 해당 변수나 함수에 접근할 수 있는지를 결정합니다.

기존에는 자바스크립트에서 스코프는 함수 스코프(Function Scope)로 동작했었습니다. 즉, 변수나 함수가 함수 내부에서 선언되면 해당 함수 내에서만 접근할 수 있었습니다. 이는 좀 더 작은 코드 블록에 제한된 스코프를 가지는 블록 스코프(Block Scope)에 비해 유연하지 않은 구조였습니다.

하지만, ECMAScript 6부터 도입된 let과 const를 사용하면 블록 스코프를 사용할 수 있게 되었습니다. 이를 통해 코드 블록 내에서 선언된 변수는 해당 블록 내부에서만 유효하고 외부에서 접근할 수 없습니다.

블록 스코프는 코드의 가독성과 유지 보수성을 높여줍니다. 변수의 유효 범위가 명확하게 정해지기 때문에 변수 충돌이나 의도치 않은 값 변경 등이 줄어들게 됩니다.

다음은 블록 스코프의 예시 코드입니다.

{
  let x = 10;
  console.log(x); // 10
}

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

위의 예제에서는 중괄호 { } 안에서 let을 사용하여 x 변수를 선언하고 초기화했습니다. 이렇게 선언된 변수 x는 중괄호 밖에서는 유효하지 않습니다. 따라서 두 번째 console.log(x)는 ReferenceError를 발생시킵니다.

블록 스코프는 if, for, while과 같은 제어문에서도 유용하게 사용될 수 있습니다.

if (true) {
  let y = 20;
  console.log(y); // 20
}

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

위의 예제에서도 블록 스코프를 사용하여 y 변수가 if 문 내에서만 유효하도록 한 것을 확인할 수 있습니다.

블록 스코프는 let과 const 키워드를 사용하여 변수를 선언함으로써 사용할 수 있습니다. 기존의 var 키워드는 함수 스코프를 가지므로 블록 스코프를 지원하지 않습니다.

블록 스코프를 사용하여 변수의 유효 범위를 제한함으로써 코드의 가독성과 유지 보수성을 개선하고 버그를 줄이는 데 도움이 될 수 있습니다. 최신 ECMAScript 버전에서는 블록 스코프를 적극적으로 활용하여 코드를 작성해보는 것을 권장합니다.