20장. strict mode

Happhee·2021년 12월 9일
0

JS : Depp Dive

목록 보기
17/35
post-thumbnail

1. strict mode란?

function foo() {
    x = 10;
}
foo();
console.log(x);

foo함수 내에서 선언하지 않은 x변수에 10을 할당.
-> x변수를 찾아야 x에 값을 할당할 수 있음
-> 스코프 체인을 통해 x변수를 검색하기 시작

x 변수를 검색하기 위해 foo 함수 컨텍스트의 상위 스코프에서 x 변수의 선언을 검색
암묵적 전역 implicit global 발생!!!!!!
-> 이는 개발자의 의도와 상관없이 오류가 발생할수도 있기에 const, let, var 키워드 사용을 권장함

  • ESLint : strict mode (엄격모드)
    자바스크립트 언어의 문법을 좀 더 엄격하게 적용하여 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대한 명시적인 에러를 발생하게 함!

2. strict mode의 적용

전역의 선두 / 함수 몸체의 선두에
'use strict' 을 추가!

'use strict'
function foo() {
    x = 10;
}
foo();
console.log(x);
//ReferenceError
function foo() {
    x = 10;
    'use strict'
}
foo();
console.log(x);
//10

3. 전역에 strict mode를 적용하는 것은 피하자

  • strict mode 스크립트와 non-strict mode 스크립트를 혼용하는 것은 오류를 발생시킬수 있음
  • 즉시 실행함수로 스크립트 전체를 감싸서 스코프를 구분하고 즉시 실행 함수의 선두에 strict mode를 적용

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

4. 함수 단위로 strict mode를 적용하는 것도 피하자

(function () {
    function foo() {
        'use strict'

        x = 10;
    }
    foo();
}());

즉시 실행 함수로 감싼 스크립트 단위로 적용하자

5. strict mode가 발생시키는 에러

암묵적 전역

  • 선언하지 않은 변수를 참조하면 ReferenceError 발생

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

(function () {
    'use strict'
    var a = 1;
    delete a;

    function foo(a) {
        delete a;
    }
    delete foo;
}());
  • Uncaught SyntaxError: Delete of an unqualified identifier in strict mode.

매개변수 이름의 중복

(function () {
    'use strict'
    function add(x, x) {
        return x + x;
    }
    console.log(1, 2);
}());
  • Uncaught SyntaxError: Duplicate parameter name not allowed in this context

with문의 사용

(function () {
    'use strict'
    with ({ x: 1 }) {
        console.log(x);
    }
}());
  • Uncaught SyntaxError: Strict mode code may not include a with statement

    with 문은 전달된 객체를 스코프 체인에 추가
    동일한 객체의 프로퍼티를 반복해서 사용할 때
    객체이름을 생략할 수 있어서 코드가 간단해지는 효과가 있음
    -> 성능과 가독성이 나빠짐,,

    6. strict mode 적용에 의한 변화

    일반 함수의 this

  • strict mode에서 일반함수로서 호출하면 this에 undefined가 바인딩
    생성자 함수가 아니면 의미가 없음

(function () {
    'use strict'
    //undefinded
    function foo() {
        console.log(this);
    }
    foo();
    //Foo
    function Foo() {
        console.log(this);
    }
    new Foo();
}());

arguments 객체

(function (a) {
    'use strict'
    a = 2;
    console.log(arguments)
}());
  • 매개변수에 전달된 인수를 재할당하여 변경해도 arguments 객체에 반영되지 않음
profile
즐기면서 정확하게 나아가는 웹프론트엔드 개발자 https://happhee-dev.tistory.com/ 로 이전하였습니다

0개의 댓글