09. strict-mode

01. strict-mode(엄격 모드)

함수 내 변수 타입 미지정 시 암묵적으로 전역 변수가 된다.
개발자의 의도와 상관 없이 발생한 암묵적 전역은 오류 발생의 원인이 될 수 있음
=> 잠재적 오류 발생을 근본적으로 막기 위해 ES5부터 엄격 모드가 추가

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

test();

console.log(x);		// 출력: 10

02_strict-mode-apply(엄격 모드 적용)

적용시키는 방법

1. 전역의 선두에 추가 : 스크립트 전체에 strict mode가 적용 된다.
2. 함수 몸체의 선두에 추가 : 해당 함수와 중첩 함수에 strict mode가 적용된다.(코드의 선두가 아니면 strict mode 적용 불가)

'use strict';	//전역의 선두에 추가

function test() {
    // 함수 몸체의 선두에 추가
    'use strict';

    x = 10;     // ReferenceError: x is not defined

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

test();

console.log(x);

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

<script> //1번영역
    'use strict';
</script>
<script> //2번영역
    x = 10; // 에러 발생하지 않음
</script>

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

(function(){
    'use strict';

    // 작성 코드
    
})();

02. example

01_error-case

strict-mode 에러가 발생하는 경우

1. 암묵적 전역

(function(){
    'use strict';

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

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

(function(){
    'use strict';

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

3. 매개변수의 이름 중복

(function(){
    'use strict';

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

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

})();

4. with문의 사용
use strict를 사용하면 with문을 사용할 수 없다.

(function(){
    'use strict';

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

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

        console.log(x);
        console.log(y);
        console.log(z);

    }
})();

02_change-case(변화 상황)

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

(function(){
    'use strict';

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

    test();

    new test();	//빈객체 생성 -> test{ }

})();

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

console.log(arguments); 결과값
use strict 적용 후: 1
use strict 적용 전: 2

(function(x){
    'use strict';

    x = 2;

    console.log(arguments);

})(1);