ESLint 규칙 중 block-scoped-var 란?

by

ESLint 규칙 중 block-scoped-var 란?

프로그래밍을 할 때 변수의 범위(scope)를 정확하게 이해하고 사용하는 것은 매우 중요합니다. 특히 자바스크립트에서는 변수의 유효 범위가 실수로 인해 의도하지 않은 동작을 초래할 수 있습니다. 바로 이러한 문제를 해결하고자 ESLint는 block-scoped-var와 같은 규칙을 제공하여 개발자들이 실수를 방지할 수 있게 돕습니다. 이번 블로그 글에서는 ESLint 규칙 중 하나인 block-scoped-var에 대해 자세히 알아보겠습니다.

block-scoped-var 규칙이란?

block-scoped-var 규칙은 변수가 선언된 블록 내에서만 유효하도록 강제하는 ESLint 규칙입니다. 자바스크립트는 기본적으로 함수 단위 스코프(function scope)를 가집니다. 즉, 변수가 함수 내 어디서든 접근 가능하다는 의미입니다. 그러나 ES6에서는 let과 const를 도입해 블록 단위 스코프(block scope)를 지원하게 되었고, 이로 인해 변수를 보다 안전하게 관리할 수 있게 되었습니다.

block-scoped-var 규칙은 기존의 var 키워드를 사용할 때 마치 let이나 const처럼 블록 단위로 변수를 이해하고 사용할 것을 유도합니다. 이를 통해 변수의 유효 범위를 명확히 하고, 의도하지 않은 변수 참조를 방지하여 코드를 좀 더 안전하게 작성할 수 있습니다.

예제와 설명

다음은 block-scoped-var 규칙이 적용되지 않은 경우 코드의 동작을 보여주는 예입니다.

function checkValue() {
  if (true) {
    var count = 1;
  }
  console.log(count); // 1이 출력됩니다.
}

위 코드에서 var로 선언된 count 변수는 if 블록 외부에서도 접근이 가능합니다. 이는 함수 전반에 걸쳐 변수가 유효함을 의미하며, 때로는 의도치 않은 결과를 초래할 수 있습니다.

block-scoped-var 규칙을 적용하면, 아래와 같이 let을 사용해 오류를 방지할 수 있습니다.

function checkValue() {
  if (true) {
    let count = 1;
  }
  console.log(count); // ReferenceError 발생
}

이 코드에서는 let을 사용함으로써 count 변수가 if 블록 내에서만 유효하게 되어 외부에서 접근 시 오류가 발생합니다. 이는 변수의 유효 범위를 더욱 명확하게 정의하여 예기치 않은 오류를 방지하는 데 도움을 줍니다.

block-scoped-var 규칙 적용하기

block-scoped-var 규칙은 기본적으로 활성화되어 있지 않으므로, .eslintrc 파일에 이를 추가해야 합니다.

{
  "rules": {
    "block-scoped-var": "error"
  }
}

이렇게 설정함으로써, var 키워드를 사용할 때 블록 스코프에서 변수가 정의되지 않으면 오류를 발생시켜 실수를 미리 감지할 수 있습니다.

결론

block-scoped-var 규칙은 자바스크립트에서 변수의 유효 범위를 명확하게 정의해주는 유용한 ESLint 규칙입니다. var 키워드를 사용할 때 발생할 수 있는 범위 관련 오류를 방지하고, 코드를 더 안전하게 작성할 수 있도록 돕습니다. 블록 스코프 내에서의 변수 선언을 적극 활용하여 코드의 품질을 높여보세요.

이제 var 대신 let이나 const를 활용해 블록 스코프를 바르게 작성하고, block-scoped-var 규칙을 적용해 변수가 의도치 않게 사용되는 것을 미리 방지해 보세요!

Leave a Comment