본 게시물은 Effective Javascript의 내용을 재구성하여 작성되었음을 알립니다. 저작권 문제 발생시 게시물이 비공개 될 수 있습니다.
어떤 자바스크립트를 사용하고 있는지 알아야 한다.
자바스크립트는 오랜 시간에 걸쳐 진화 됬다. 원래는 자바의 보충재로써 자리잡으려 했으나, 지금은 자바를 밀어내고 웹에서 지배적인 프로그램 언어가 되었다. 1997년 ECMAScript라는 이름으로 전세계적인 표준이 공식화 되었다. 현재는 ESMAScript 표준을 지키는 여러 자바스크립트 구현체들이 서로 경쟁하고 있다. 1999년에 완성된 표준은 현재까지 가장 폭넓게 지원되고 있는 자바스크립트다.
포스팅 하는 내용의 전반에 걸쳐 ES5(ECMAScript 중 5번째로 구현된 표준)에 적용되는 특정 항목이나 주의가 필요한 경우 반드시 언급할 것이다.
여러 표준 에디션분만 아니라 일부에서는 지원하지만 다른 곳에서는 지원하지 않는 비표준 기능들도 많다. 이 문제가 복잡한 이유는 사실 자바스크립트의 주요 생태계인 웹브라우저 때문이다. 웹브라우저는 개발자가 작성한 코드를 실행하기 위해 어떤 버전의 자바 스크립트를 사용할 수 잇는지 제어할 방법을 제공하지 않는다. 게다가 최종 사용자가 다른 버전 혹은 다른 웹브라우저를 사용할 수도 있기 때문에 모든 브라우저에서 지속적으로 실행가능한 코드를 작성해야 한다.
이 책은 주로 자바스크립트 표준 기능에 대해 다룬다. 표준이 아니더라도 폭넓게 지원되는 특정 기능들에 대해 논의하는 것 역시 중요하다. 더 새로운 표준이나 비표준 기능을 사용할 때, 이러한 기능들을 지원하는 환경인지 아닌지를 반드시 숙지해야 한다. 그렇지 않으면 테스트환경과 다르게 엔드유저 환경에서는 실행되지 않는 문제가 발생할 수 있다.
이러한 문제들을 해결하기 위해 ES5에서는 strict 모드가 새로 추가되었다. 이 기능은 옵션을 통해 적용할 수 있는데, 특정 버전의 자바스크립트에서는 오류를 일으키기 쉽거나 문제를 일으킬 만한 기능들을 사용할 수 없게 만들 수 있다. 또한 문법의 하위 호환성이 유지되어 스트릭트 모드 화깅ㄴ을 구현하지 않은 환경에서도 엄격한(스트릭트 모드)의 코드를 실행할 수 있게 한다.
스트릭트 모드는 프로그램의 맨 처음 부분 다음 고정 문자열을 추가하면 활성화된다.
"use strict"
유사한 방법으로 함수의 본문 처음에 다음과 같이 명령어를 추가하여 함수 내에서 스트릭트 모드를 활성화 시킬 수 있다.
funciton f(x) {
"use stcit";
// ...
}
문자 리터럴을 명령어로 사용하는 문법이 이상하게 보이지만 하위 호환성의 이점을 가진다. ES3 엔진은 이 명령어를 아무런 해가 없는 표현으로 실행시킨다. 즉, 문자열을 평가하고 그 값을 곧바로 제거한다. 이 방법은 구형 자바 스크립트엔진에서도 실행될 수 있는 스트릭트 코드의 코드를 작성할 수 있게 해주지만 큰 제한이 따른다. 오래된 엔진은 스트릭트 모드에 대한 어떠한 확인도 하지 않을 것이다. 스트릭트 모드로 작성한 코드를 ES5 환경에서 테스트하지 않는다면, 다음과 같이 제대로 실행되지 않는 코드를 작성할 가능성이 높다.
function f(x){
"use strict";
var arguments = [ ]; // 오류: arguments 를 재정의함
}
스트릭트 모드에서는 arguements 를 재정의 하지 않는다. 하지만 스트릭트 모드 확인을 구현하지 않는 환경에서는 이 코드를 허용할 것이다. 따라서 스트릭트 모드로 작성한 코드는 항상 ES5를 오나전히 지원하는 환경에서 테스트해야 한다.
스트릭트 모드와 일반 모드의 파일을 절대 합병해서는 안된다. 이 방법은 가장 쉽지만 프로젝트 파일 구조를 관리하는데 막대한 노력이 필요해진다. 최선의 방법은 스트릭트 모드로 작성된 파일과 일반적인 파일, 즉 두 개의 분리된 파일로 배포하는 것이다.
즉시 실행되는 함수 표현식을 사용해 파일들의 본문을 감싸라.
// 스트릭트 모드 명령어 없음
( function ( ) {
// file1.js
"use strict";
function f( ) {
// ...
}
// ...
} ) ( );
// 스트릭트 모드 명령어 없음
( function ( ) {
file2.js
function f( ) {
var arguemnts = [ ];
// ....
}
// ...
} ) ( );
각 파일의 내용이 별도의 스코프에 위치하기 때문에, 스트릭트 모드 명령어는 해당 파일의 내용에만 영향을 미친다. 이러한 방식은 흔히 모듈 시스템과도 비슷한데, 각 모듈의 내용을 자동으로 개별 함수에 위치시킴으로써 여러 파일과의 의존성을 관리한다. 파일들이 지역 스코프에 위치하기 때문에 각 파일이 스트릭트 모드의 사용 여부를 개별적으로 결정할 수 있다.
어떤 모드에 있건 동일하게 동작하도록 코드를 작성하라. 최대한 호환성을 가지도록 코드를 구성하는 가장 간단한 방법은 스트릭트 모드로 작성하되, 스트릭트 모드가 지역적으로 활성화될 수 있게 명시적으로 전체 코드 내용을 함수로 감싸는 것이다. 이전에 언급된 해결책 즉, 각 파일의 내용을 즉시 힐행되는 함수 표현식으로 감싼느 방법과 유사하다. 하지만 이 경우에는 병합 도구를 믿거나 모듈 시스템에서 알아서 해주길 기대하기보다, 직접 함수 표현식을 작성해 명시적으로 스트릭트 모드를 선택적으로 적용한다는 점이 다르다.
( function () {
"use strict";
function f( ) {
// ...
}
// ...
} ) ( );
위 코드는 스트릭트 모드의 코드에 병합되든 일반 모드의 코드에 병합되든 스트릭트 모드로 처리된다. 대조적으로 스트릭트 코드 다음에 병합된다면 스트릭트 모드로 옵션을 설정하지 않은 함수까지 스트릭트 모드로 처리될 것이다. 따라서 호환성을 위해서는 스트릭트 모드로 코드를 작성하는 것이 바람직한다.
- 애플리케이션이 지원할 자바스크립트의 버전을 정하라.
- 애플리케이션이 동작하게 될 모든 환경에서 여러분이 사용한 모드 자바스크립트의 기능이 지원되어야 한다.
- 항상 스트릭트 모드 확인을 수행하는 최신 브라우저 환경에서 스트릭트 코드를 테스트하라.
- 스트릭트 모드 지원에 대한 기대가 서로 다른 스크립트를 병합할 때는 주의해야 한다.
끄읕.
