JavaScript 에센셜

엄격 모드

1. 엄격모드란?

엄격 모드는 자바스크립트에서 더 엄격한 오류 검사를 적용하는 방법입니다. ES5에 도입되어 코드 실행 시 더 엄격한 구문과 동작을 적용하여 많은 일반적인 실수나 버그를 잡아내고, 안전하지 않은 작업을 방지합니다.

기본적으로 브라우저는 자바스크립트의 오류를 최대한 관대하게 처리합니다. 하지만 이런 관대함이 예기치 못한 오류를 발생 시킬 수 있습니다. 엄격 모드는 발생할 수 있는 문제를 사전에 방지하기 위해 더 엄격한 규칙을 적용합니다. 이를 통해 개발자는 더 안전하고 명확한 코드를 작성할 수 있습니다.

하지만 엄격 모드는 하위 버전의 자바스크립트와 호환되지 않을 수 있습니다. 따라서 엄격 모드를 사용할 때는 주의가 필요합니다. 예를 들어, this 키워드의 동작이 변경되거나, 일부 예약어가 사용 불가능해지는 등의 변화가 있습니다.

2. 엄격 모드 사용법

엄격 모드를 사용하려면 코드의 맨 위에 "use strict";를 추가하면 됩니다. 이 선언은 해당 스코프 내에서 엄격 모드를 활성화합니다.

"use strict"; function myFunction() { // 엄격 모드가 적용된 함수 var x = 3.14; // 정상 y = 3.14; // ReferenceError: y is not defined } myFunction();

엄격 모드는 전역 스코프와 함수 스코프 모두에서 사용할 수 있습니다. 전역 스코프에서 사용하면 전체 스크립트에 적용되고, 함수 스코프에서 사용하면 해당 함수 내에서만 적용됩니다.

function myFunction() { "use strict"; // 함수 스코프에서 엄격 모드 적용 var x = 3.14; // 정상 y = 3.14; // ReferenceError: y is not defined } myFunction(); // 전역 스코프에서 엄격 모드 적용되지 않음 z = 10; console.log(z);

ES6 모듈을 사용할 때나, 클래스는 자동으로 엄격 모드가 적용됩니다. 따라서 별도로 "use strict";를 선언할 필요가 없습니다.

// ES6 모듈에서 자동으로 엄격 모드 적용 import { myFunction } from './myModule.js'; myFunction();

// 클래스에서 자동으로 엄격 모드 적용 class MyClass { constructor() { this.name = 'licat'; } } const myInstance = new MyClass(); console.log(myInstance.name); // 'licat'

3. 엄격 모드 주요 특징

3.1. 변수 선언 강제

엄격 모드에서는 변수를 선언하지 않고 사용하면 오류가 발생합니다. 따라서 변수를 사용하기 전에 반드시 var, let, const로 선언해야 합니다.

"use strict"; function myFunction() { x = 3.14; // ReferenceError: x is not defined } myFunction();

3.2 삭제 불가능한 속성 삭제 시 오류 발생

엄격 모드에서는 삭제할 수 없는 속성을 삭제하려고 하면 오류가 발생합니다. 기존 자바스크립트 코드에서는 오류를 발생 시키지 않고 해당 동작을 무시했지만, 엄격 모드에서는 오류를 발생 시킵니다. 이는 코드의 안전성을 높이기 위한 조치입니다. 예를 들어, window 객체의 document 속성은 삭제할 수 없습니다.

"use strict"; delete window.document; // TypeError: Cannot delete property 'document' of #<Window>

3.3 중복 매개변수 이름 불가

기존에는 함수의 매개변수를 작성할 때 이름을 중복해서 정의할 수 있었습니다. 하지만 엄격 모드에서는 중복된 매개변수 이름을 사용할 수 없습니다. 이는 코드의 가독성을 높이고, 예기치 못한 오류를 방지하기 위한 조치입니다.

"use strict"; function myFunction(a, a) { // SyntaxError: Duplicate parameter name not allowed in this context console.log(a); } myFunction(1, 2);

기존의 매개변수는 어떻게 값이 할당되었나요?
기존의 매개변수는 마지막에 정의된 값으로 할당되었습니다. 즉, 위의 예시에서는 a가 2로 할당됩니다. 하지만 엄격 모드에서는 중복된 매개변수 이름을 사용할 수 없으므로 오류가 발생합니다.

function sum(a, a){ return a + a; } console.log(sum(1, 2)); // 4

3.4. `this` 바인딩 변화

일반 함수를 호출할 때 this가 전역 객체를 가리키는 것이 아니라 undefined를 가리킵니다. 이는 전역 객체에 대한 의존성을 줄이고, 코드의 안전성을 높이기 위한 조치입니다.

"use strict"; function myFunction() { console.log(this); // undefined } myFunction();

4. 엄격모드의 장점

엄격 모드를 사용하면 다음과 같은 장점이 있습니다.

코드의 안전성 향상: 엄격 모드는 일반적인 실수나 버그를 사전에 방지하여 코드의 안전성을 높입니다.
가독성 향상: 엄격 모드는 코드의 가독성을 높이고, 유지보수를 용이하게 합니다.
성능 향상: 엄격 모드는 자바스크립트 엔진이 코드를 최적화하는 데 도움을 줄 수 있습니다. 이는 성능 향상으로 이어질 수 있습니다.
디버깅 용이: 엄격 모드는 오류를 조기에 발견할 수 있도록 도와줍니다. 이는 디버깅을 용이하게 합니다.

엄격 모드는 하위 버전의 자바스크립트와 호환되지 않을 수 있으므로, 사용 시 주의가 필요합니다. 또한, 엄격 모드를 사용하지 않는 코드와 혼합하여 사용할 때는 주의해야 합니다. 하지만 엄격 모드는 자바스크립트의 안전성과 가독성을 높이는 데 큰 도움이 됩니다. 따라서, 새로운 프로젝트에서는 엄격 모드를 사용하는 것이 좋습니다.