자바스크립트

Section 11. 자바스크립트 엄격 모드

포칼이 2023. 4. 7. 15:20

엄격 모드 strict mode

기존의 느슨한 모드에서 허용되던, 문제를 유발할 수 있는 코드들에 오류를 발생시킨다.

 

엄격 모드의 적용방법과 그 효과들 예시

1. 선언되지 않은 변수 사용시 오류가 발생한다.

notDeclared = 1; // 💡 암묵적으로 전역 var 변수로 선언

지금까지는 이렇게 선언되지 않은 변수를 사용해도 애러는 나지 않았다.

// ⚠️ 새로고침 후 실행해볼 것
// 선언되지 않은 변수 사용 금지
'use strict'; // 쌍따옴표도 가능

notDeclared = 1; // 오류 발생!

하지만 엄격 모드를 사용하면 이제 애러가 나는 모습을 볼 수 있다.

문서 최상단(코드)에 작성하면 문서 전체에 적용된다.

문서, script 태그별로만 적용된다. 따라서 여러 .js파일이 페이지에 사용될 시 각각 작성해야 한다. 예를 들면 다음과 같다

<!DOCTYPE html>
<html lang="ko">
<head>
<script src="./1.js"></script>
<script src="./2.js"></script>
</head>
</html>
// 1.js
'use strict';
x = 1;
console.log(x); // 오류 발생
// 2.js
y = 2;
console.log(y); // 오류 발생하지 않음

 

특정 함수의 최상단에 작성하면 해당 함수에만 적용된다.

notDec1 = 1;

function strictFunc () {
'use strict';

 notDec2 = 2;
 console.log(notDec2);
}

console.log(notDec1);
strictFunc();

 

2. 변수, 함수, 인자 등 삭제 불가능한 것을 삭제시 오류가 발생한다.

// 실제로 지워지지도 않지만 오류를 발생시키지도 않음

let toDelete1 = 1;
delete toDelete1;

console.log('1.', toDelete1); //1. 1
'use strict';

let toDelete2 = 1;
delete toDelete2; //애러 발생

3. 인자명 중복시 오류 발생

'use strict';

function add(x, x) {
  return x + x;
}

console.log(add(1, 2)); //애러

 

실무에서의 엄격 모드

  • 클래스나 모듈(ES6와 그 이후의 기능들) 사용시 엄격 모드가 기본으로 적용된다.
  • 모든 문제를 방지하는 수단이 되지는 않는다.
  • 기존 코드에 엄격 모드를 적용하면 예기치 못한 오류가 발생할 가능성이 있다.