자바스크립트의 변수 할당 규칙은 너무 간단해서 실수로 전역변수를 만들기 쉽다. 프로그램에서 바인딩되지 않은 변수를 할당하면, 오류를 발생하는 대신 단순히 새로운 전역 변수를 만들고, 이 변수를 새로운 전역 변수에 할당한다. 이는 지역 변수 선언을 깜빡 잊으면 아무말 없이 전역변수로 변한다는 뜻이다.

function swap(a, i, j){
	temp = a[i];
	a[i] = a[j];
	a[j] = temp;
}

temp 앞에 let, var, const 같은 키워드를 사용하여 변수의 스코프와 생명주기를 지정하는데 여기서는 선언하지 않아 temp가 전역변수가 되어버렸다.

프로그램은 오류없이 실행되지만 적절한 구현 방법은 tmep 변수 앞에 let, var 등의 키워드를 붙이는 것이다.

function swap(a, i, j){
	var	temp = a[i];
	a[i] = a[j];
	a[j] = temp;
}

의도적으로 전역 변수를 만드는건 나쁜 습관이지만 우연히 전역 변수를 만드는건 재앙이다. 이 때문에 많은 프로그래머들이 lint도구를 사용한다.

lint 도구

javascript에서 사용되는 lint 도구는 코드의 문제점을 감지하고 일관성 있는 코딩 스타일을 유지하도록 도와주는 도구다.

• ESLint : 가장 널리 사용되는 javascript lint 도구중 하나
• JSLint : 코드를 정적으로 분석하여 잠재적인 문제를 찾아내는데 사용되는 도구
• JSHint : JSLint의 대안으로 개발된 lint도구, 단순하고 가벼운 사용을 원하는경우 유용
• TSLint : typescript 코드를 위한 lint도구, typescript3.7 버전 이후에는 지원이 중단됨

다음은 바인딩 되지 않은 변수가 lint도구에 의해 감지되고 경고 메시지로 표시하게 되는 과정이다.

// ESLint 설정 파일 (.eslintrc.js 또는 package.json의 eslintConfig)
module.exports = {
  rules: {
    "no-undef": "error"
  }
};

위의 설정을 실행하고 다음과 같은 코드를 분석하면

console.log(myVariable);

ESLint는 “myVariable is not defined” 와 같은 경고 메시지를 출력한다.

자바스크립트에서 사용가능한 개발도구에 어떤 것들이 있는지 찾아보는 것은 그만한 가치가 있다. 우연한 전역변수 선언과 같은 흔한 오류를 확인하는 과정을 개발 프로세스에 통합하여 자동화하면 큰 도움이 된다.

기억할 점

• 새로운 지역 변수는 항상 var let const 를 사용해서 선언하라
• 바인딩되지 않은 변수를 확인하는데 도움을 주는 lint 도구의 사용을 고려해 보라