strict mode - 엄격 모드

엄격 모드

개발자의 의도와 상관없이 발생한 암묵적 전역은 오류 발생의 원인이 될 수 있다. 이러한 잠재적 오류 발생을 근본적으로 막기 위해 ES5부터 엄격 모두가 추가됐다.

function test () {
    // 암묵적으로 전역 변수가 된다.
    x = 10;
}

test();

console.log(x);   //10 -> 정상출력되는 것이 오류

 

엄격 모드 적용

'use strict' 작성 시 엄격모드가 적용되는데 적용 위치에 따라 범위가 달라진다.

// 전역의 선두에 추가 - 스크립트 전체에 strict mode가 적용 된다.
// 'use strict';

function test() {
    // 함수 몸체의 선두에 추가 - 해당 함수와 중첩 함수에 strict mode가 적용된다.
    // 'use strict';

    x = 10;     // 엄격 모드 적용 시 ReferenceError: x is not defined

    // 코드의 선두가 아니면 strict mode 적용 불가로 오류 적용 X
    'use strict';
}

test();

console.log(x);

 

참고

전역에 strict mode를 적용하면 스크립트 태그 단위로 적용되어 strict mode와 non strict mode의 혼용으로 인한
오류가 발생할 수 있으니 유의한다.

<script>
    'use strict';
</script>
<script>
    x = 10; // 에러 발생하지 않음
</script>

 

서드 파티 라이브러리(외부에서 가져온 라이브러리)가 non strict mode인 경우 즉시 실행 함수로 스크립트 전체를 감싸서 스코프를 구분한다.

function(){
    'use strict';   // 즉시 실행 함수의 선두에 작성한다.

    // 작성 코드
    
})();

 

 

error case

1. 암묵적 전역

(function(){
    // 'use strict';

    x = 1;
    console.log(x); // ReferenceError: x is not defined
})();

 

2. 변수, 함수, 매개변수의 삭제

(function(){
    //'use strict';    작성하지 않을 시 delet가 작동함 
                       //(strict 모드에서는 식별자에 대해 'delete'를 호출할 수 없습니다.)

    var x = 1;
    // delete 연산자로 변수, 함수, 매개변수를 삭제하면 문법 에러 발생 (객체의 프로퍼티 삭제 시에 사용)
    delete x;
})();

 

3. 매개변수의 이름 중복

(function(){
    //'use strict';  작동하지 않을 시 마지막으로 받은 값 2 -> 4 반환

    function test(x, x) {   // SyntaxError: Duplicate parameter name not allowed in this context
        return x + x;
    }

    console.log(test(1, 2));

})();

 

4. with문의 사용

with문이란 명령문의 스코프 체인을 확장해주는 구문으로 특정 객체를 여러 번 사용하는 경우 객체명을 생략할 수 있게 한다.

with는 객체 이름을 생략할 수 있어 코드를 간단하게 할 수 있다는 장점이 있지만 성늘과 가독성이 나빠지는 문제로 사용하지 않는 것이 좋다.

(function(){
    // 'use strict';   -> 적용된다면 ('with' 문은 strict 모드에서 사용할 수 없습니다.)

    const test = { x : 1, y : 2, z : 3 };

    with(test) {

        console.log(x);  //1  ->test.x 에서 test 생략 
        console.log(y);  //2
        console.log(z);  //3

    }
})();

 

change case

 

1. 일반 함수의 this

생성자 함수가 아닌 일반 함수 내부에서는 this를 사용할 필요가 없기 때문에  strict mode에서는 함수를 일반 함수로 호출하면 this에 undefined가 바인딩 된다.

 

(function(){
    'use strict';   // 엄격모드가 아니라면 this 값이 출력된다.

    function test() {
        console.log(this);
    }

    test();

    new test();  //undefined

})();

 

2. arguments 객체

 매개변수에 전달 된 인수를 재할당하여 변경해도 arguments 객체에 반영되지 않는다.

(function(x){
    'use strict';   // 엄격모드가 적용되지 않으면 [Arguments] { '0': 2 } 출력됨

    x = 2; //재할당.

    console.log(arguments);

})(1);  // [Arguments] { '0': 1 }