본문 바로가기

프로그래밍/js

lessons 16. Strict mode

2023.02.12

자바스크립트 스터디 5회차

공부 사이트: https://poiemaweb.com/

 

16. Strict mode 

1) Strict mode

개발자의 의도와 상관없는 암묵적 전역 변수는 오류를 발생시키는 원인이 될 수 있다.

#암묵적 전역 변수: 변수를 선언하지 않았을 때 자바스크립트는 암묵적으로 전역 객체에 프로퍼티를 생성.

 

ES5에서 Strict mode가 추가되었다.

자바스크립트 언어의 문법을 엄격히 적용하여 ⓐ 오류를 발생시킬 가능성이 높거나ⓑ엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킨다.

→ 암묵적 전역 변수에 에러를 발생시킬 수 있다.

 

'use strict';

function func(){
	x = 10; // 선언 X
}

func();

암묵적 전역 변수임에도 ReferenceError 발생.

function func(){
	// 해당 함수 범위에서 strict mode 적용 (내부함수 포함)/
    // 코드의 선두에 위치시켜야 함.
	'use strict';
	
	x = 10;  // ReferenceError
}

func();

 

 

 

2) 전역에 strict mode 적용은 피할 것.

전역에 적용한 strict mode는 스크립트 단위로 적용된다.

<!DOCTYPE html>
<html>
<body>
  <script>
    'use strict';
  </script>
  
  <script>
    x = 1; // 암묵적 전역 변수
    console.log(x); // 1
  </script>
  
  <script>
    'use strict';

    y = 1; 
    console.log(y);  // ReferenceError
  </script>
</body>
</html>

 

그러나 외부 서드 파티 라이브러리를 사용하는 경우, 라이브러리가 non-strict mode일 수도 있기 때문에 전역에 strict mode를 적용하는 것은 바람직하지 않다.

# strict mode 스크립트와 non-strict mode 스크립트 함께 사용 시 오류 발생시킬 수 있음.

이런 경우, 즉시 실행 함수를 사용해서 스크립트 전체를 감싸 스코프를 구분한 후, 즉시 실행 함수의 선두에 strict mode를 사용한다.

 

// 즉시실행 함수에 strict mode 적용
(function () {
  'use strict';
  ...
}());

 

 

 

3) 함수 단위 strict mode 적용은 피할 것

- 어떤 함수는 strict mode를 적용하고, 어떤 함수는 적용하지 않는 것은 바람직하지 않음.

- 게다가 모든 함수에 하나하나 strict mode를 적용하는 것도 번거로움.

- strict mode가 적용된 함수에서 non-strict mode인 외부 컨텍스트의 변수 참조 시, 문제 발생

(function () {
  var lеt = 10; 

  function func() {
    'use strict';

    let = 20; // SyntaxError: Unexpected strict mode reserved word
  }
  func();
}());

 

결론: strict mode는 즉시실행함수로 감싼 스크립트 단위로 사용하라.

 

 

 

4) strict mode가 발생시키는 에러

  에러 설명
  ReferenceError 암묵적 전역 변수. 선언하지 않은 변수를 참조하면 발생
  SyntaxError ① 변수, 함수, 배개변수의 삭제.
② 중복된 함수 파라미터 이름 사용 시
③ with문 사용 시 (with: 전달된 객체를 스코프체인에 추가. 해당 스코프에서는 객체명 생략가능)
  undefined 바인딩 strict mode에서 함수를 일반 함수로서 호출 시 this에 undefined 바인딩. 생성자 함수가 아닌 일반 함수 내부에서 this를 사용할 필요가 없기 때문. 
에러는 아니다.

'프로그래밍 > js' 카테고리의 다른 글

lessons 18. 클로저  (0) 2023.02.13
lessons 17. this 키워드  (0) 2023.02.13
lessons 15. 스코프  (0) 2023.02.12
lessons 14. 프로토타입  (0) 2023.02.09
lessons 13. 타입 체크  (0) 2023.02.08