해당 포스팅은 위키북스의 모던 자바스크립트 Deep Dive라는 책을 독학하며 기록하는 글입니다.

function f() {
  x = 10;
}
f();

console.log(x);

위 코드의 마지막 행에서 뭐가 출력이 될지 한 번 생각을 해보자. 먼저 함수 f가 실행이 되면 선언되지 않은 변수인 x에 10을 할당하려 할 것이다. 자바스크립트는 함수 f의 변수 스코프에서 먼저 x를 찾아보고 없기 때문에 함수 밖에서 다시 찾아볼 것이다. 하지만 밖에도 x가 없기 때문에 암묵적으로 자바스크립트의 전역객체에 x라는 프로퍼티를 만들고 10을 할당하게 된다. 이때 x를 전역변수처럼 사용할 수 있게 되며 마지막 행에서는 10이 출력되게 된다.

이러한 현상을 암묵적 전역이라고 한다.

strict mode

암묵적 전역과 같은 상황은 오류를 발생시키는 원인이 될 가능성이 크기 때문에 항상 변수를 선언한 다음 사용해야 한다.

하지만 암묵적 전역 외에도 자잘한 오타나 문법오류로 알 수 없는 오류가 발생할 가능성이 있다. 이러한 오류를 방지하게 위해 ES5부터는 strict mode가 추가되었는데 이는 자바스크립트 언어의 문법을 좀 더 엄격히 적용하여 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킨다.

strict mode를 사용하기 위해서는 적용하려는 부분의 선두에 'use strict';를 추가하면 된다. 전역의 선두에 추가하면 스크립트 전체에 적용이 되고, 함수의 선두에 추가하면 해당 함수에 그 아래에 있는 중첩 함수에 적용이된다. (중간에 추가하게 되면 추가하기 이전에는 strict mode가 적용되지 않는다)

하지만 이 책의 필자는 script단위나 함수 단위로 strict mode를 사용하는 것을 피하는 것을 권고했으며 사용하고자 하면 다음 코드와 같이 스크립트 전체를 즉시 실행함수로 감싸고 해당 즉시 실행함수의 선두에 strict mode를 추가하는 것을 추천했다. (참고로 ES6에 추가된 클래스와 모듈에는 기본적으로 strict mode가 적용된다)

(fuction() {
  'use strict';
  
  //함수내용
}());

strict mode가 발생시키는 에러

  1. 암묵적 전역
  2. 변수, 함수, 매개변수의 삭제
  3. 매개변수 이름의 중복
  4. with문의 사용

strict mode가 변화시키는 내용

  1. 함수를 일반 함수로서 호출하면 함수내의 this에 undefined가 바인딩된다.
  2. 매개변수에 전달된 인수를 재할당하여도 arguments 객체에 반영되지 않는다.

ESLint

추가적으로 이 책의 필자가 strict mode보다 추천하는 것은 ESLint같은 린트 도구인데, 린트 도구는 정적 분석 기능을 통해 소스코드를 실행하기 전에 소스코드를 스캔하며 문법적 오류만이 아니라 잠재적 오류까지 찾아내고 오류의 원인을히포팅해주는 유용한 도구다.

린트도구는 strict mode가 제한하는 오류는 물론 코딩 컨벤션을 설정 파일 형태로 정의하고 강제할 수 있기 떄문에 더욱 강력한 효과를 얻을 수 있다.

profile
I Will be Relaxed Person

0개의 댓글