JavaScript

[JavaScript] use strict란?

prometedor 2024. 5. 22. 10:54

"use strict"

엄격 모드

"use strict";는 자바스크립트에서 엄격 모드(strict mode)를 활성화하는 지시어(directive)이다.

엄격 모드는 더 안전하고 오류가 적은 코드를 작성할 수 있도록 자바스크립트의 문법과 동작 방식을 변경한다.

이는 ECMAScript 5(ES5)에서 도입된 기능이다.

새롭게 제정된 ES5에서는 새로운 기능이 추가되고 기존 기능 중 일부가 변경되었다. 기존 기능을 변경하였기 때문에 하위 호환성 문제가 생길 수 있기 때문에 변경사항 대부분은 ES5의 기본 모드에선 활성화되지 않도록 설계되었다. 대신 use strict라는 특별한 지시자를 사용해 엄격 모드(strict mode)를 활성화 했을 때만 이 변경사항이 활성화되게 해놓았다.

 

use strict

지시자 "use strict", 혹은 'use strict' 가 스크립트 최상단에 오면 스크립트 전체가 “모던한” 방식으로 동작한다.

"use strict";

// 이 코드는 모던한 방식으로 실행됨
...

 

"use strict"는 스크립트 최상단이 아닌 함수 본문 맨 앞에 올 수도 있다. 엄격 모드는 대개 스크립트 전체에 적용하지만, 이렇게 하면 오직 해당 함수만 엄격 모드로 실행된다.

 

"use strict"는 반드시 최상단에 위치시키자.

"use strict"는 스크립트 최상단에 있어야 한다는 점을 잊지 말자. 그렇지 않으면 엄격 모드가 활성화되지 않을 수도 있다.

다음 코드에서는 엄격 모드가 활성화되지 않는다.

"use strict"의 위에는 주석만 사용할 수 있다.

alert( "저장되었습니다." );
// 하단에 위치한 "use strict"는 스크립트 상단에 위치하지 않으므로 무시된다.

"use strict";

// 엄격 모드가 활성화되지 않습니다.

 

use strict를 취소할 방법은 없다.

일단 엄격 모드가 적용되면 돌이킬 방법은 없다.

 

브라우저 콘솔

개발한 기능을 테스트하기 위해 브라우저콘솔을 사용하는 경우, 기본적으로 use strict가 적용되어있지 않는다는 점을 주의해야 한다.

use strict에 영향을 받는 경우라면 개발자는 기대하지 않았던 결과를 얻을 수 있기 때문이다.

브라우저콘솔에서 use strict를 사용하려면

'use strict’를 입력한 후, Shift+Enter키를 눌러 줄 바꿈을 해서 원하는 스크립트를 입력하면 된다.

'use strict'; // <Shift+Enter를 눌러 줄 바꿈>
//  ...테스트하려는 코드 입력
// <Enter를 눌러 실행>

 

이 기능은 Firefox와 Chrome 같은 브라우저에서 대부분 사용 가능한다.

브라우저가 오래 돼서 콘솔 창에 use strict를 입력하는 게 불가능하다면, use strict를 적용하는 가장 확실한 방법은 아래와 같이 코드를 래퍼로 감싸면 된다.

(function() {
  'use strict';

  // ...테스트하려는 코드...
})()

 

 

참고로 모던 자바스크립트에서 제공하는 클래스와 모듈을 사용하게 되면 'use strict'가 자동으로 적용되므로, 스크립트 내에 클래스 또는 모듈을 사용할 경우에는 "use strict"를 적지 않아도 strict mode가 활성화된다는 특징이 있다.

 

 

주요 기능 및 변화

1. 암묵적인 전역 변수 선언 방지

  • 변수 선언 없이 변수를 사용하면 오류가 발생한다.
    "use strict";
    x = 3.14; // ReferenceError: x is not defined
     

2. 읽기 전용 속성에 값 할당 방지

  • 읽기 전용 속성에 값을 할당하려고 하면 오류가 발생한다.
    "use strict";
    Object.defineProperty(obj, "x", { value: 42, writable: false }); // 읽기전용
    obj.x = 9; // TypeError: Cannot assign to read-only property 'x'

 

3. 삭제 불가능한 속성 삭제 방지

  • 삭제 불가능한 속성을 삭제하려고 하면 오류가 발생한다.
    "use strict";
    delete Object.prototype; // TypeError: Cannot delete property 'prototype' of function Object() { [native code] }

4. eval 및 arguments 객체의 변경 방지

  • eval 및 arguments 객체의 사용에 대한 몇 가지 제한이 있다.
    "use strict";
    eval("var x = 2");
    console.log(x); // ReferenceError: x is not defined

 

5. 중복된 매개변수 이름 사용 금지

  • 함수 선언 시 중복된 매개변수 이름을 사용할 수 없다.
    "use strict";
    function sum(a, a, c) { // SyntaxError: Duplicate parameter name not allowed in this context
      return a + a + c;
    }

6. this의 값이 undefined로 설정됨

  • 전역 컨텍스트나 함수 내에서 this의 값이 undefined로 설정된다(클래스와 메서드 예외).
    "use strict";
    function f() {
      return this;
    }
    console.log(f()); // undefined

 

사용 예시

1. 스크립트 전체에 적용

"use strict";

function exFunction() {
    return this; // undefined
}

 

 

2. 함수에만 적용

function exFunction() {
    "use strict";
    return this; // undefined
}

 

엄격 모드는 코드를 더 안전하고 예측 가능하게 만든다. 런타임 시에 더 많은 오류를 발생시키기 때문에, 디버깅을 더 쉽게 하고 나쁜 코딩 습관을 방지하는 데 도움을 준다. 따라서 현대 자바스크립트 개발에서는 "use strict";를 사용하는 것이 권장된다.

 


 

지금까지 use strict의 일반적인 특징에 대해 알아보았다.

 

 

 

참고 사이트

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