JavaScript에서 스트릭 모드(Strict Mode)란 무엇인가? 예시로 설명하기

목차

• JavaScript에서 스트릭 모드란 무엇인가?
• JavaScript에서 스트릭 모드를 사용하는 방법
• 스트릭 모드와 일반 JavaScript의 차이점
• 기본적으로 스트릭 모드를 사용하는 JavaScript 기능들
• 결론

JavaScript에서 스트릭 모드란 무엇인가?

자바스크립트 개발자라면 코드 상단에 “use strict”라는 문자열을 볼 수도 있습니다. 이는 자바스크립트에서 스트릭 모드가 사용중임을 의미합니다. 하지만 이것이 무슨 뜻이며, 왜 중요한 것인가요?

이 글에서는 자바스크립트 코드를 스트릭 모드에서 작성한다는 것이 무엇을 의미하는지, 그리고 어떻게 활성화할 수 있는지 배우게 될 것입니다. 또한 스트릭 모드를 사용하는 이점과 일반 자바스크립트와는 어떻게 다른지를 보여주는 몇 가지 예시도 다룹니다.

스트릭 모드는 ECMAScript 5에서 도입된 JavaScript의 기능입니다. 좀 더 엄격한 규칙을 따라 코드를 작성할 수 있게 해줍니다.

스트릭 모드가 활성화되면 자바스크립트 엔진은 추가적인 제약 사항들을 적용합니다. 이는 평소에 발견하지 못했던 일반적인 오류들을 잡아낼 수 있다는 것을 의미합니다. 또한 더 깔끔하고 안전한 코드를 작성하는 데 도움을 줍니다.

JavaScript에서 스트릭 모드를 사용하는 방법

스트릭 모드를 사용하는 두 가지 방법이 있습니다. JavaScript 파일 전체에 스트릭 모드를 활성화하거나 함수의 범위 내에서 활성화할 수 있습니다.

전체 JavaScript 파일에 대해 스트릭 모드를 활성화하려면, 코드 상단에 “use strict” 문자열을 추가하면 됩니다.

"use strict"

// 여기에 코드를 작성...

함수에 대해서는 함수 본문의 시작 부분에 “use strict” 문자열을 배치하여 스트릭 모드를 활성화할 수 있습니다.

function myFunction() {
  "use strict"
  // 함수 본문은 여기에...

}

파일이나 함수 본문의 상단에 “use strict” 문자열을 배치해야 합니다. 그렇지 않으면 작동하지 않습니다.

그러나 “use strict” 문자열 위에 주석을 추가하는 것은 허용됩니다. 주석을 제외하고는 “use strict” 아래에 모든 것이 있어야 작동합니다.

스트릭 모드와 일반 JavaScript의 차이점

이제 스트릭 모드에서 적용되는 몇 가지 규칙과 일반 JavaScript에서 작성할 때 적용되지 않는 규칙들을 살펴보겠습니다.

선언되지 않은 변수 사용

스트릭 모드에서 JavaScript 코드를 작성할 때는 사용하기 전에 모든 변수와 객체를 선언해야 합니다. 이는 실수로 전역 변수를 만들어 버그를 유발하는 것을 방지하는데 유용합니다.

예제를 보겠습니다.

// 일반 JavaScript

function regularFunc() {
  username = "Marie"
  console.log(username)
}

regularFunc()
// Regular JS는 username 변수에 대해 오류를 발생시키지 않습니다.

// 스트릭 모드

function strictFunc() {
  "use strict"
  username = "Marie"
  console.log(username)
}

strictFunc()
// 스트릭 모드는 선언되지 않은 변수에 대해 오류를 발생시킵니다.

regularFunc 함수에서는 브라우저가 username을 콘솔에 오류 없이 로그합니다.

하지만 스트릭 모드가 적용된 strictFunc 함수에서는 참조 오류가 발생합니다.

그 이유는 username 변수가 선언되지 않았기 때문입니다. 스트릭 모드는 선언되지 않은 변수의 사용을 허용하지 않습니다.

매개변수 이름 중복

비스트릭 모드에서는 함수에서 매개변수 이름을 중복해서 사용하는 것이 허용됩니다. 하지만 스트릭 모드에서는 이를 허용하지 않으며, 중복될 경우 구문 오류를 발생시킵니다.

예를 들어보겠습니다:

function addNums (num, num) {
  console.log(num + num)
}

addNums(2, 3) // 6
// 위 예제에서 첫 번째 num 매개변수는 무시됩니다. 오직 두 번째 것만 사용됩니다. 이 때문에 함수는 6을 반환합니다 (3 + 3).

하지만 같은 매개변수들을 스트릭 모드에서 함수로 정의할 경우, 구문 오류를 발생시켜 실행할 수 없습니다. 스트릭 모드에서는 각 매개변수가 고유한 이름을 가져야 합니다.

function addNums (num, num) {
  "use strict"
  console.log(num + num)
}

addNums(2, 3)
// 브라우저는 중복된 매개변수 이름에 대해 오류를 발생시킵니다.

예약된 키워드 사용

자바스크립트에서는 향후 사용될 가능성이 있는 일부 키워드를 예약어로 두고 있습니다. 그리고 이러한 예약어를 식별자(변수나 함수 이름 등)로 사용하는 것은 향후에 문제를 유발할 수 있습니다.

예를 들어, package는 그러한 키워드 중 하나입니다. 스트릭 모드를 사용하지 않으면 변수나 함수 이름으로 사용할 수 있습니다.

const package = "This is a package"
console.log(package)
// 일반 JavaScript에서 예약 키워드를 사용하면 로그 결과를 표시합니다.

스트릭 모드에서는 이러한 예약 키워드의 사용을 허용하지 않습니다. 이는 자바스크립트의 미래 버전과의 호환성을 보장하기 위한 조치입니다.

"use strict"
const package = "This is a package"
console.log(package)
// 스트릭 모드에서 예약 키워드를 사용하면 구문 오류가 발생합니다.

사용되지 않는 기능의 사용

스트릭 모드는 arguments.caller, arguments.callee 등과 같은 자바스크립트의 사용되지 않는 기능들의 사용을 제한합니다. 이는 보안과 성능 우려 때문에 금지되어 있습니다. 하지만 비스트릭 모드에서는 사용할 수 있습니다.

// 비스트릭 모드

function outerFunction() {
  innerFunction();
}

function innerFunction() {
  console.log(innerFunction.caller); // .caller 예제
}

outerFunction();
// arguments.caller는 비스트릭 모드에서 오류 없이 작동합니다.

비스트릭 모드에서는 .caller를 사용하여 innerFunction을 호출한 outerFunction을 콘솔에 로그합니다. 그러나 스트릭 모드에서는 아래 예제와 같이 자바스크립트에서 오류를 발생시킵니다.

"use strict"

function outerFunction() {
  innerFunction();
}

function innerFunction() {
  console.log(innerFunction.caller); // .caller 예제
}

outerFunction();
// 스트릭 모드는 사용되지 않는 기능을 사용할 때 "Uncaught TypeError"을 발생시킵니다.

읽기 전용 속성에 대한 할당

비스트릭 모드에서 읽기 전용 속성에 새 값을 할당하려고 할 때, 할당은 속성의 값을 수정하지 않습니다. 하지만 오류를 발생시키지 않고 묵시적으로 실패합니다. 따라서 속성은 원래값을 유지합니다.

const obj = {}

Object.defineProperty(obj, 'key', { value: 10, writable: false })
obj.key = 20

console.log(obj.key)
// object.key에 대한 로그 결과가 표시됩니다.

위 예제는 새로운 빈 객체 obj를 정의합니다. 그리고 Object.defineProperty를 사용하여 obj에 새 속성 key를 추가합니다. 이 key 속성은 읽기 전용 속성으로 설정됩니다.

로그 결과에서 보듯이 key의 값을 업데이트하려고 해도 오류는 발생하지 않으며, key 속성은 원래의 값 10을 유지합니다.

그러나 스트릭 모드에서는 속성의 값을 업데이트하려고 하면 TypeError가 발생합니다. 엄격한 강제를 통해 잠재적인 오류를 조기에 발견하는 데 도움이 됩니다.

"use strict"
const obj = {}

Object.defineProperty(obj, 'key', { value: 10, writable: false })
obj.key = 20

console.log(obj.key)
// 스트릭 모드에서 읽기 전용 속성에 새 값을 할당하면 오류가 발생합니다.

기본적으로 스트릭 모드를 사용하는 JavaScript 기능들

일부 자바스크립트 기능은 명시적으로 “use strict”를 호출할 필요가 없습니다. 기본적으로 스트릭 모드가 적용되어 일반적인 오류를 예방하고 자바스크립트 버전과의 호환성을 보장합니다.

다음과 같은 컨텍스트에서 스트릭 모드는 기본적으로 적용됩니다:

• ES6 클래스
• ES6 모듈
• 화살표 함수
• 태그가 있는 템플릿 리터럴

결론

자바스크립트는 웹 페이지에 단순한 상호작용을 추가하기 위한 언어로 시작했지만, 간단하고 복잡한 양쪽 애플리케이션을 만드는 데 사용되는 가장 널리 사용되는 프로그래밍 언어로 발전해 왔습니다.

언어가 발전함에 따라, 일부 구형 결함이 여전히 남아 있습니다. 스트릭 모드 기능은 자바스크립트 개발자들이 이러한 결함으로 인한 문제에 대처할 수 있도록 도와줍니다.

이 글을 통해 스트릭 모드에 대해 배웠고, 스트릭 모드를 사용하는 방법과 비스트릭 모드에서 자바스크립트를 작성하는 것과는 어떻게 다른지에 대해서도 알게 되었습니다. 또한 스트릭 모드 규칙이 기본적으로 적용되는 자바스크립트의 여러 컨텍스트에 대해서도 배웠습니다.