🖥Frontend/Java Script

자바스크립트에서 엄격 모드 "use strict"란

코너(Corner) 2022. 7. 10.
반응형

자바스크립트에서 엄격 모드 "use strict"란


ES5부터 지원하는 "use strict";가 무엇인가.

JS의 유연한 검증체계를 딱딱하게 만들어준다.

암묵적인 느슨한 모드(sloppy mode)를 해제하고,

명시적인 엄격 모드(strict mode)를 사용하는 방법이다.

가끔 엄격하지 않은 기본값을 "느슨한 모드(sloppy mode)"라고 부르기도 한다. ECMAScript 5에서 소개된 JavaScript의 엄격모드는 JavaScript의 제한된 버전을 선택하여 암묵적인 "느슨한 모드"를 해제하기 위한 방법이다. 엄격 모드는 단지 부분적인 것이 아니며, 이것은 이것은 고의적으로 일반 코드와 다른 시멘틱을 가지고 있다. 엄격모드를 지원하지 않는 브라우저에서는 엄격 모드의 코드가 다른 방식으로 동작할 것이다. 그 때문에 엄격 모드가 적절하게 적용된 피쳐 테스트 없이 엄격 모드에 의존하면 안된다. 엄격 모드의 코드와 비-엄격 모드의 코드는 공존할 수 있으며, 때문에 스크립트의 엄격 모드를 취사 선택하는 것이 점진적으로 가능하게 되었다.

자바스크립트의 제한된 버전을 선택함으로써 런타임시, JS 코드에 대하여 향후 버전의 ECMAScript에서 사용될 수 있는 일부 구문의 제외하는 등 보다 엄격한 parsing 및 error handling을 자발적으로 시행하도록 적용함으로써 일반적인 코딩 실수나 안전하지 않은 동작을 포착한다.

엄격 모드(Strict Mode)는 평범한 JavaScript 시멘틱스에 몇가지 변경이 일어나게 한다.

  • 기존에는 조용히 무시되던 에러들을 throwing. 코드의 문제를 더 빨리 알리고 스스로 더 빨리 안내하므로 결과적으로 디버깅이 쉬워진다.
  • JavaScript 엔진의 최적화 작업을 어렵게 만드는 실수를 바로 잡는다. 가끔식 엄격 모드의 코드는 비-엄격 모드의 동일한 코드보다 더 빨리 작동하도록 만들어진다.
  • 엄격 모드는 ECMAScript의 차기 버전들에서 정의 될 문법을 금지한다. 발생 가능한 에러를 예방한다.

엄격 모드 적용하기

엄격모드는 전체 스크립트 또는 부분 함수에 적용가능하다. 단, {} 괄호로 묶여진 블럭문에는 적용되지 않는다.

컨텍스트와 같은 곳에 적용을 시도하면 동작하지 않는다. eval 코드, Function코드, 이벤트 핸들러 속성, WindowTimers.setTimeout()과 관련된 함수들에 전달된 문자열이 전체 스크립트이며 여기에서 엄격모드가 예상대로 동작한다.

스크립트 엄격 모드

엄격모드를 전체 스크립트에 적용하기 위해, 정확한 구문 "use strcit";를 다른 구문 작성전에 삽입한다. (일반적으로 코드 최상단에 위치)

'use strict';
let test = 'hi!!';

이 구문은 이미 유명한 웹사이트에서 문제를 일으킨 적이있다. 상충되지 않는 스크립트들 끼리 맹목적인 연결이 불가능하기 때문이다.

엄격 모드의 스크립트와 비-엄격 모드의 스크립트의 연결은 심사숙고 하여야 한다. 이렇게 되면 전체 연결은 엄격으로 보인다.

엄격 모드에 다른 엄격모드 들을 결합하는 것은 괜찮다. 그리고, 비-엄격 스크립트 사이의 결합도 괜찮다.

스크립트를 결합하는 것이 절대 이상적인 것이 아니라는 것이지만, 그래야 한다면 함수를 기준으로 엄격모드를 사용을 고려하길 권장한다.

또한 함수 내부의 전체 스크립트 내용에 접근할 수 있으며, 엄격 모드를 사용하는 외부 함수를 가질 수 있다. 이는 결합 문제를 없애주기도 하지만, 이것이 스코프 바깥에 위치한 어떤 전역 변수든 확실하게 밖으로 추출할 수 있음을 의미한다.

함수에 strict mode 적용

마찬가지로, 함수에 strict mode를 적용하기 위해, 함수 본문 처음에 다음의 구문을 넣는다.

function strict() {
  // 함수-라벨 strict mode 문법
  'use strict';
  function nested() { return 'end'; }
  return 'hi' + nested();
}
function notStrict() {
  return 'not strict';
}

모듈에 strict mode 적용

엄격 모드를 적용할 수 있는 세번 째 방법이다.

JavaScript 모듈의 전체 컨텐츠는 엄격 모드 시작을 위한 구문 없이도 자동으로 엄격모드이다.

function strict() {
  // 모듈이기 때문에 기본적으로 엄격한 함수
}
export default strict;

브라우저에서의 엄격 모드

현재 주류의 브라우저들은 엄격 모드를 지원하고 있다.

하지만, 아직도 현실에서 사용되는 수 많은 브라우저의 버전들은 엄격 모드를 부분적으로만 지원하거나,

아예 지원을 하지 않고 있기 때문에, 맹목적으로 여기에 의지할 수는 없다. (예를 들면, Internet Explorer 10 버전 이하!)

엄격 모드는 시멘틱을 바꾼다. 이 변화들에 의지하는 것은 실수와 엄격 모드를 지원하지 않는 브라우저의 에러를 야기할 것이다.

엄격 모드를 사용하는 데에 주의하는 것을 익혀야 하고, 피쳐 테스트로 엄격 모드를 사용하기에 적절한 부분인지 확인하고 보완한다.

마지막으로, 엄격 모드를 지원하는 브라우저와 그렇지 않은 브라우저에서 작성한 코드의 테스트를 확실히 하도록 해야한다.

반응형

'🖥Frontend > Java Script' 카테고리의 다른 글

jQuery를 사용했던 이유  (0) 2021.05.24
자바스크립트 - 실습 예제 1  (0) 2021.02.17
자바스크립트 - 02  (0) 2021.02.10
자바스크립트(Javascript)  (0) 2021.02.09

댓글