엄격 모드

자바스크립트의 엄격 모드(strict mode)의 개념과 왜 사용해야 하는지에 대해 다음의 목차로 알아봅니다.

  1. 엄격 모드 소개
  2. 엄격 모드 활성화하기
  3. 엄격 모드의 동작 원리
  4. 코드 품질 향상을 위한 엄격 모드 활용

엄격 모드란 무엇인가?

엄격 모드는
자바스크립트 코드를 실행할 때 발생하는 일부 문제를 잡고 오류를 줄이기 위한 특별한 모드입니다.
이 모드를 사용하면 자바스크립트 코드에 더욱 엄격한 오류 검사를 적용해 줍니다. 엄격 모드는 스크립트나 함수의 맨 처음에 "use strict" 지시어를 사용하여 선언할 수 있습니다.

JavaScript 
"use strict";

// strict mode가 적용될 코드

엄격 모드의 사용 목적

엄격 모드의 주요 목적은 코드의 품질을 높이고 오류를 줄여 안전한 개발 환경을 제공하는 것입니다. 자바스크립트는 유연한 언어로써 암묵적인 변환과 오류를 처리하는 기능이 많은데, 이는 가끔 의도하지 않은 결과를 낳을 수 있습니다. 엄격 모드는 이러한 불명확한 부분을 명확히하고 예상치 못한 오류를 줄여 코드의 신뢰성을 높여줍니다.

JavaScript 
"use strict";

function exampleFunction() {
    nonDeclaredVar = 10; // ReferenceError: nonDeclaredVar is not defined
}

exampleFunction();

이 코드는 엄격 모드를 사용하여 작성한 함수인 exampleFunction을 보여줍니다.

  1. "use strict": 이 코드는 엄격 모드를 선언하는 지시어입니다. "use strict"를 스크립트나 함수 맨 위에 작성하면 해당 스코프 내에서 엄격 모드가 적용됩니다.
  2. function exampleFunction() { ... }: exampleFunction은 엄격 모드에서 실행되는 함수입니다. 따라서 함수 내의 코드는 엄격 모드의 규칙에 따라 동작하게 됩니다.
  3. nonDeclaredVar = 10;: 이 부분은 문제를 일으키는 부분입니다. nonDeclaredVar라는 변수를 선언하지 않고 값을 할당하려고 했기 때문에 엄격 모드에서는 에러가 발생합니다. 엄격 모드에서는 변수를 선언하지 않고 사용하는 것을 금지합니다.
  4. exampleFunction(): exampleFunction을 호출하는 부분입니다. 함수가 호출되면 내부 코드가 실행됩니다.

위의 코드 예제에서는 "use strict"를 통해 엄격 모드가 적용되었고, 함수 내에서 암묵적으로 선언되지 않은 변수를 사용하려고 시도했기 때문에 ReferenceError가 발생하게 됩니다. 이처럼 엄격 모드를 사용하면 실수와 오류를 사전에 예방하고 코드의 안전성을 높일 수 있습니다.

왜 엄격 모드를 사용해야 하는가?

  • 오류 감소와 디버깅 용이성: 엄격 모드는 실수나 오류를 사전에 예방하고 런타임 오류를 줄여줍니다. 이는 개발 단계에서의 디버깅을 용이하게 합니다.
  • 보안 강화: 엄격 모드는 보안을 강화하는데 도움을 줍니다. 예상치 못한 동작을 방지하여 악의적인 코드 실행을 어렵게 만들어줍니다.
  • 가독성 향상: 변수의 명시적인 선언과 초기화, 중복된 매개변수 이름 방지 등은 코드의 가독성을 향상시킵니다.
  • 모던한 코드 습관: 엄격 모드는 현대적인 자바스크립트 개발의 중요한 부분으로서, 모던한 코드 습관을 기르는데 도움을 줍니다.

엄격 모드를 활성화하는 방법에는 두 가지 주요한 방법이 있습니다.

  • "use strict" 지시어를 사용하여
  • 전체 스크립트에 엄격 모드를 적용하거나,
  • 특정 함수 내에서만 엄격 모드를 활성화할 수 있습니다.
  • 모듈에 엄격 모드를 적용 할 수 있습니다.

"use strict" 지시어의 역할

"use strict" 지시어는 엄격 모드를 활성화하는 역할을 합니다. 이 지시어를 스크립트나 함수의 맨 위에 위치시키면 그 아래의 코드에서는 엄격 모드가 적용됩니다.

다음은 "use strict" 지시어의 사용 예제입니다.

JavaScript 
"use strict"

// 엄격 모드가 여기서부터 적용됩니다.

스크립트 전체에 엄격 모드를 적용하기

스크립트 전체에 엄격 모드를 적용하려면 스크립트 파일의 맨 위에 "use strict"를 추가하면 됩니다. 이렇게 하면 해당 스크립트 파일 전체에서 엄격 모드가 활성화됩니다.

JavaScript 
'use strict';

// 엄격 모드가 이 파일 전체에 적용됩니다.

함수 내에 엄격 모드를 적용하기

특정 함수 내에서만 엄격 모드를 활성화하려면 해당 함수 내에 "use strict"를 추가하면 됩니다. 이렇게 하면 해당 함수에서만 엄격 모드가 활성화됩니다.

JavaScript 
function myFunction() {
    "use strict";
    
    // 엄격 모드가 이 함수 내에만 적용됩니다.
}

함수 내에 엄격 모드를 적용하면 해당 함수 내에서만 엄격한 규칙이 적용되므로, 다른 함수나 스크립트에는 영향을 주지 않습니다.

모듈은 기본적으로 엄격 모드가 적용

자바스크립트 모듈의 전체 내용은 자동적으로 엄격 모드가 되며, 이를 시작하기 위한 문은 필요 없습니다.

JavaScript 
function myStrictFunction() {
    // 모듈이기 때문에 기본적으로 엄격 모드가 적용됩니다.
}

export default myStrictFunction;

자바스크립트에서 엄격모드를 사용하는 경우와 그렇지 않은 경우의 주요 차이점은 다음과 같습니다.

JavaScript에서 엄격모드를 사용하는 경우와 그렇지 않은 경우의 주요 차이점
기능/상황 엄격 모드 사용 시 엄격 모드 미사용 시
암묵적인 전역 변수 금지 변수를 미리 선언하지 않고 사용하면 에러가 발생합니다. 변수를 미리 선언하지 않고 사용해도 에러가 발생하지 않습니다.
할당할 수 없는 속성에 대한 할당 금지 객체의 확장 불가능한 속성에 값을 할당하려고 하면 에러가 발생합니다. 확장 불가능한 객체에 값 할당 시 에러가 발생하지 않습니다.
중복된 매개변수 이름 금지 함수의 중복된 매개변수 이름을 사용하면 에러가 발생합니다. 함수의 중복된 매개변수 이름을 사용해도 에러가 발생하지 않습니다.
일반 함수 실행 시의 this 값 설정 일반 함수 내에서 this가 전역 객체가 아닌 undefined로 설정됩니다. 일반 함수 내에서 호출 컨텍스트가 설정되지 않은 경우 this가 전역 객체를 참조합니다.

암묵적인 전역 변수 금지

JavaScript에서 엄격모드를 사용하는 경우와 그렇지 않은 경우의 주요 차이점 - 암묵적인 전역 변수
기능/상황 엄격 모드 사용 시 엄격 모드 미사용 시
암묵적인 전역 변수 금지 변수를 미리 선언하지 않고 사용하면 에러가 발생합니다. 변수를 미리 선언하지 않고 사용해도 에러가 발생하지 않습니다.
JavaScript - 엄격 모드 사용 
"use strict"

function exampleStrict() {
    strictVar = 10; // ReferenceError: strictVar is not defined
}

exampleStrict();

위의 코드에서 strictVar라는 변수를 미리 선언하지 않고 사용하려고 하면, 엄격 모드에서는 ReferenceError가 발생합니다. 이는 엄격 모드에서는 변수를 명시적으로 선언하지 않으면 암묵적으로 전역 변수로 처리하는 것을 방지하기 위함입니다.

JavaScript - 엄격 모드 미사용 
function exampleNonStrict() {
    nonStrictVar = 20; // No error, 암묵적으로 전역 변수로 처리
}

exampleNonStrict();
console.log(nonStrictVar); // 20

위의 코드에서는 엄격 모드를 사용하지 않았기 때문에 nonStrictVar 변수를 미리 선언하지 않고 사용해도 에러가 발생하지 않습니다. 이렇게 되면 변수 nonStrictVar는 암묵적으로 전역 변수로 처리되며, 이는 코드의 예상치 못한 동작을 일으킬 수 있는 위험성을 내포하게 됩니다.

할당할 수 없는 속성에 대한 할당 금지

JavaScript에서 엄격모드를 사용하는 경우와 그렇지 않은 경우의 주요 차이점 - 할당할 수 없는 속성에 대한 할당 금지
기능/상황 엄격 모드 사용 시 엄격 모드 미사용 시
할당할 수 없는 속성에 대한 할당 금지 객체의 확장 불가능한 속성에 값을 할당하려고 하면 에러가 발생합니다. 확장 불가능한 객체에 값 할당 시 에러가 발생하지 않습니다.
JavaScript - 엄격 모드 사용 
"use strict"

const sealedObject = Object.seal({ prop: 10 });

// 엄격 모드에서는 확장 불가능한 객체에 속성 값을 할당하려고 하면 에러가 발생합니다.
sealedObject.newProp = 20; // TypeError: Cannot add property newProp, object is not extensible

위의 코드에서 Object.seal() 메서드를 사용하여 객체를 밀봉(seal)하였습니다. 엄격 모드에서는 이렇게 밀봉된 객체에 새로운 속성을 추가하려고 시도하면 TypeError가 발생합니다.

JavaScript - 엄격 모드 미사용 
const nonStrictSealedObject = Object.seal({ prop: 10 });

// 엄격 모드가 아니라면 확장 불가능한 객체에 값 할당 시 에러가 발생하지 않습니다.
nonStrictSealedObject.newProp = 20; // No error, 새로운 속성이 객체에 추가

위의 코드에서는 엄격 모드를 사용하지 않았기 때문에 확장 불가능한 객체에 속성 값을 할당하려고 시도하면 에러가 발생하지 않고, 새로운 속성이 객체에 추가됩니다. 이는 예상치 못한 동작을 유발할 수 있으며 엄격 모드를 사용함으로써 이를 방지할 수 있습니다.

중복된 매개변수 이름 금지

JavaScript에서 엄격모드를 사용하는 경우와 그렇지 않은 경우의 주요 차이점 - 중복된 매개변수 이름 금지
기능/상황 엄격 모드 사용 시 엄격 모드 미사용 시
중복된 매개변수 이름 금지 함수의 중복된 매개변수 이름을 사용하면 에러가 발생합니다. 함수의 중복된 매개변수 이름을 사용해도 에러가 발생하지 않습니다.
JavaScript - 엄격 모드 사용 
"use strict"

function strictExample(param1, param1) {
    console.log(param1);
}

strictExample(10, 20); // SyntaxError: Duplicate parameter name not allowed in this context

위의 코드에서는 strictExample 함수의 매개변수 param1이 중복되어 선언되었습니다. 엄격 모드에서는 함수의 매개변수 이름이 중복되면 SyntaxError가 발생합니다.

JavaScript - 엄격 모드 미사용 
function nonStrictExample(param1, param1) {
    console.log(param1);
}

nonStrictExample(10, 20); // 20 (두 번째 매개변수의 값)

위의 코드에서는 엄격 모드를 사용하지 않았기 때문에 함수의 매개변수 이름이 중복되어도 에러가 발생하지 않습니다. 두 번째 매개변수의 값이 출력되는 것을 볼 수 있습니다.

일반 함수 실행 시의 this 값 설정

JavaScript에서 엄격모드를 사용하는 경우와 그렇지 않은 경우의 주요 차이점 - 일반 함수 실행 시의 this 값 설정
기능/상황 엄격 모드 사용 시 엄격 모드 미사용 시
일반 함수 실행 시의 this 값 설정 일반 함수 내에서 this가 전역 객체가 아닌 undefined로 설정됩니다. 일반 함수 내에서 호출 컨텍스트가 설정되지 않은 경우 this가 전역 객체를 참조합니다.
JavaScript - 엄격 모드 사용 
"use strict"

function strictFunction() {
    return this;
}

console.log(strictFunction()); // undefined

위의 코드에서는 엄격 모드에서 함수 strictFunction을 호출하면 this는 undefined를 가리킵니다. 엄격 모드에서는 함수의 호출 컨텍스트를 변경하지 않고 this를 undefined로 설정합니다.

JavaScript - 엄격 모드 미사용 
function nonStrictFunction() {
    return this;
}

console.log(nonStrictFunction()); // 전역 객체 (브라우저에서는 window)

위의 코드에서는 비 엄격 모드에서 함수 nonStrictFunction을 호출하면 this는 전역 객체를 가리킵니다. 비 엄격 모드에서 함수의 호출 컨텍스트가 설정되지 않은 경우, this는 전역 객체를 참조합니다.

엄격 모드를 활용하여 코드 품질을 향상시키는 것은 매우 중요합니다.

실수와 오류를 최소화하여 코드 유지보수성 향상

엄격 모드는 코드 내의 일부 실수와 오류를 사전에 예방하고 감지할 수 있도록 도와줍니다. 이로 인해 코드를 작성하는 과정에서 발생할 수 있는 오류를 줄이고, 디버깅 시간을 절약할 수 있습니다. 변수의 미리 선언과 초기화, 중복된 매개변수 이름 등을 방지하여 코드의 안정성을 높이며, 이는 코드 유지보수성을 향상시킵니다.

엄격 모드를 적용한 코드의 가독성 향상 사례

엄격 모드는 코드의 가독성을 향상시키는데도 도움을 줍니다. 변수를 미리 선언하고 초기화하며, 명시적인 this 사용 등은 코드의 동작을 명확하게 설명해주므로 코드를 이해하기 쉽게 만들어줍니다.

JavaScript 
"use strict"

// 엄격 모드를 적용하지 않은 경우
var globalVar = 10;

function someFunction(x) {
    y = x * 2; // 오류 발생 가능
    return y;
}

// 엄격 모드를 적용한 경우
var globalVar = 10;

function someFunction(x) {
    var y = x * 2; // 변수 명시적 선언
    return y;
}

위의 예제에서는 엄격 모드를 사용한 경우 변수의 명시적인 선언과 초기화가 강조되어 가독성이 향상되는 것을 확인할 수 있습니다.

이와 같은 방법들을 활용하여 코드의 품질과 가독성을 높일 수 있습니다. 엄격 모드는 런타임 오류를 줄여 안정성을 높이는 것뿐만 아니라, 코드의 의도를 명확히 표현하여 유지보수를 용이하게 만들어주는 도구로서 매우 유용합니다.

명세서

엄격 모드의 명세서 사양
명세서 사양
"use strict" The Strict Mode of ECMAScript

브라우저 호환성

엄격 모드의 브라우저 호환성
지시어
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
"use strict" 13 10 4 6

caniuse.com에서 더 자세한 정보를 확인해 보세요.

참고문헌