[TIL 2] - [JS] 암묵적 전역 변수, void

암묵적 전역 변수

식별자가 없는 변수, 즉 var, let, const가 없이 변수를 할당하면 어떻게 될까? 직관적으로는 에러가 발생할 것으로 생각된다.

baz = 1;

function foo() {
  bar = 2;
}

foo();

console.log(baz); // 1
console.log(bar); // 2

그러나 JS는 식별자를 선언하지 않아도 변수를 할당할 수 있다. 이를 암묵적 전역 변수(implicit global)라고 한다.

이것이 가능한 이유는 자바스크립트 엔진이 최상위 객체인 window에 전역 변수를 프로퍼티로 동적 생성하기 때문이다.

bar = 1;
var x = "global var";

console.log(x === window.x); // true
console.log(bar === window.bar); // true

이러한 변수 생성은 예기치 못한 오작동 등을 유발할 수 있기 때문에 사용을 지양하며, 다양한 방식으로 예방할 수 있다.

strict mode

ES5에서 도입된 strict mode는 다양한 자바스크립트 문법 오류를 잡아준다. 오류를 확인할 코드 상단에 use strict를 추가한다.

"use strict";

baz = 1; // ReferenceError: baz is not defined

console.log(baz);

하지만 전역에 적용한 strict mode는 non-strict-mode인 서드 파티 라이브러리까지 영향을 미치기 때문에 피하는 것이 좋다. 함수 단위로 적용하는 것이 바람직하지만, 모든 함수마다 use strict를 적는 일은 매우 비효율적이다. 권장하는 방법은 즉시 실행 함수 단위 적용이다.

(function () {
  "use strict";

  baz = 1; // ReferenceError: baz is not defined

  console.log(baz);
})();

ESLint

ESLint는 코딩 컨벤션에 맞지 않는 코드를 자동 검출하는 도구이다.

자세한 내용은 Poiemaweb - 14.1 ESLint 참고.

let, const

let과 const는 var와 달리 블록 단위 스코프를 가진다. 전역에 선언하더라도 window의 프로퍼티로 생성되지 않아 암묵적 전역 변수를 방지할 수 있다.

let foo = 1;
const bar = 2;

console.log(foo === window.foo); // false
console.log(bar === window.bar); // false

참고
Poiemaweb - Strict mode
Poiemaweb - 전역 객체와 let

void

주어진 표현식을 평가하고 undefined를 반환하는 문법이다. 여기서 평가한다는 말은 실행 가능 여부를 판단한다는 의미이다. 단순히 undefined를 사용하기 위해서라면 void를 사용하지 않아도 된다.

const x = void 0;
console.log(x); // undefined

void (function foo() {
  console.log("foo");
})(); // foo

void 문법은 a 태그의 href에 javascript:void(0);을 추가하여 페이지 이동을 막는 용도로 사용되었다고 한다. ES5 이전에는 undefined에 값을 할당할 수 있어 void로 undefined를 강제한 듯하다. 지금은 undefined가 읽지 전용이라 잘 사용하지 않는 문법이 되었다.

또한, inline script는 xss 공격 가능성이 있으므로 사용하지 않는 것이 좋다.

참고\
MDN - void
DevStory - [JavaScript]void(0)의 의미
Reiphiel - javascript:void(0)과 #중에 어떤것을 사용할까