Frontend/JavaScript

JavaScript - 엄격 모드(strict mode)

고코모옹 2021. 6. 25. 16:54
  • ES5에서 기존 기능이 변경되었고, 기존 기능을 변경하였기 때문에 하위 호환성 문제가 발생할 수 있음
  • 변경사항 대부분은 ES5의 기본 모드에선 활성화되지 않도록 설계
  • 'use strict' 라는 특별한 지시자를 사용해 엄격 모드를 활성화 했을 때만 기존 기능의 변경사항이 활성화

- use strict

  • 'use strict' 지시자가 스크립트 최상단에 오면 스크립트 전체가 모던한 방식으로 동작
  • 스크립트 최상단이 아닌 함수 본문 맨 앞에도 가능하며, 해당 함수만 엄격모드로 실행
  • 'use strict'는 반드시 최상단에 위치
    • use strict의 위에는 주석만 사용 가능
    alert("some code");
    // 하단에 위치한 "use strict"는 스크립트 상단에 위치하지 않으므로 무시됩니다.
    
    "use strict";
    
    // 엄격 모드가 활성화되지 않습니다.
  • use strict를 취소할 방법은 없다.
  • 코드를 클래스와 모듈을 사용해 구성하는 경우 use strict는 자동으로 적용되기 때문에 생략 가능

- 엄격 모드 적용 후

  • 실수를 에러로 변경
    • 실수로 글로벌 변수 생성 불가
    "use strict";
                               // 전역 변수 mistypedVariable 이 존재한다고 가정
    mistypedVaraible = 17; // 변수의 오타때문에 이 라인에서 ReferenceError 를 발생시킴
    • 예외를 발생시키는 실패에 대해 예외 발생
    "use strict";
    
    // 쓸 수 없는 프로퍼티에 할당
    var undefined = 5; // TypeError 발생
    var Infinity = 5; // TypeError 발생
    
    // 쓸 수 없는 프로퍼티에 할당
    var obj1 = {};
    Object.defineProperty(obj1, "x", { value: 42, writable: false });
    obj1.x = 9; // TypeError 발생
    
    // getter-only 프로퍼티에 할당
    var obj2 = { get x() { return 17; } };
    obj2.x = 5; // TypeError 발생
    
    // 확장 불가 객체에 새 프로퍼티 할당
    var fixed = {};
    Object.preventExtensions(fixed);
    fixed.newProp = "ohai"; // TypeError 발생
    • 삭제할 수 없는 프로퍼티를 삭제하려할 때 예외를 발생(시도가 어떤 효과도 없을 때)
    "use strict";
    delete Object.prototype; // TypeError 발생
    • 유니크한 함수 파라미터 이름을 요구(중복 인수명은 구문 에러)
    function sum(a, a, c){ // !!! 구문 에러
      "use strict";
      return a + b + c; // 코드가 실행되면 잘못된 것임
    }
    • 8진 구문을 금지. 모든 브라우저에서 앞에 0을 붙여 지원. ES6에서는 접두사 '0o'를 붙여 8진수를 지원
    var a = 0o10; // ES6: 8진수
    
    "use strict";
    var sum = 015 + // !!! 구문 에러
              197 +
              142;
    • primitive 값에 프로퍼티를 설정하는 것을 금지
    (function() {
    "use strict";
    
    false.true = "";         // TypeError
    (14).sailing = "home";   // TypeError
    "with".you = "far away"; // TypeError
    
    })();

 

[ 참고자료 ]

https://ko.javascript.info/strict-mode

 

엄격 모드

 

ko.javascript.info

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Strict_mode

 

Strict mode - JavaScript | MDN

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

developer.mozilla.org