"use strict"; 이 무엇인가요? 사용 시 장단점이 무엇인가요?
use strict는 자바스크립트에서 엄격한 모드를 활성화하는 지시어로, 코드에서 잠재적 오류를 빠르게 찾아내고, 불필요한 전역 변수 생성을 방지하는 등 코드의 안정성과 품질을 향상 시킵니다. 또한 일부 브라우저에서는 성능을 최적화 할 수 있지만, 구형 브라우저에서의 호환성 문제와 기존 코드에 영향을 미칠 수 있어 신중하게 사용해야 합니다.
Strict Mode의 등장 배경
💡 JS는 오랫동안 호환성 문제 없이 발전해왔습니다. 새로운 기능이 추가되면서도 기존 기능은 변경되지 않았습니다. 이로 인해 기존 코드의 안정성이 보장되는 장점이 있었습니다. 그러나 동시에 자바스크립트 창시자들의 실수나 불완전한 결정이 언어에 영구히 남게 되는 단점도 생겼습니다. 이러한 점들은 2009년
ECMAScript 5(ES5)가 등장하기 전까지 지속되었습니다.ES5에서는 새로운 기능이 추가되고 일부 기존 기능이 변경되었습니다. 이는 하위 호환성 문제를 야기할 수 있었습니다. 그래서 대부분의 변경사항은 ES5의 기본 모드에서 비활성화되도록 설계되었습니다. 대신use strict라는 특별한 지시자를 사용해엄격 모드(strict mode)를 활성화했을 때만 이 변경사항이 적용되도록 했습니다.
use strict 주의할 점
use strict는 무조건 스크립트 최상단에 있어야 합니다.
"use strict";
..."use strict"의 위에는 주석만 사용할 수 있습니다.
alert("some code");
// 하단에 위치한 "use strict"는 스크립트 상단에 위치하지 않으므로 무시됩니다.
"use strict";
// 엄격 모드가 활성화되지 않습니다.use strict를 취소할 방법은 없습니다.- 자바스크립트 엔진을 이전 방식으로 되돌리는
"no use strict"같은 지시자는 존재하지 않아서 일단 엄격 모드가 적용되면 돌이킬 방법은 없습니다.
- 자바스크립트 엔진을 이전 방식으로 되돌리는
사용법
- 기본적으로 파일 전체에서 적용 하는 경우가 많은데 한 파일에 여러 번 사용해도 전혀 지장이 없습니다.
1, 2, 3의 경우는 적용 범위만 달라지는 것입니다..
- 기본 - 파일 전체에 적용할 때
'use strict';
// 이 파일 전체에서 엄격 모드가 적용됩니다.- 함수 단위에서 적용 할 때
function myFunction() {
'use strict';
// 이 함수 내에서만 엄격 모드가 적용됩니다.
}- 블록 단위에서 적용 할 때
{
'use strict';
// 이 블록 내에서만 엄격 모드가 적용됩니다.
}
use strict 사용 전/후
변수 선언 할 때
function test() {
x = 10; // 선언되지 않은 변수
console.log(x);
}
test(); // 출력: 10 (전역 변수로 생성됨)
// strict mode 사용 시
"use strict";
function test() {
x = 10; // 오류 발생: x가 선언되지 않았습니다.
console.log(x);
}
test(); // TypeError: x is not defined예약어 사용할 때
var let = 5; // 문제 없음 (비정상적이지만 오류가 없음)
console.log(let); // 출력: 5
// strict mode 사용 시
"use strict";
var let = 5; // 오류 발생: SyntaxError객체의 속성에서..
const obj = {};
obj.prop = 42; // 문제 없음
console.log(obj.prop); // 출력: 42
// strict mode 사용 시
"use strict";
const obj = {};
Object.defineProperty(obj, 'prop', { value: 42, writable: false });
obj.prop = 100; // 오류 발생: Cannot assign to read only property 'prop'this 키워드 사용 시
function showThis() {
console.log(this); // 전역 객체 (브라우저에서는 window)
}
showThis(); // 출력: Window
// strict mode 사용 시
"use strict";
function showThis() {
console.log(this); // undefined
}
showThis(); // 출력: undefined중복 매개변수
function sum(a, a, c) { // 문제 없음
return a + a + c;
}
console.log(sum(1, 2, 3)); // 출력: 6
// strict mode 사용 시
"use strict";
function sum(a, a, c) { // 오류 발생: Duplicate parameter name not allowed in this context
return a + a + c;
}
console.log(sum(1, 2, 3));
기본적으로 strict mode가 탑재된..
- 모듈(Modules)
- ES6(ECMAScript 2015)부터 도입된 모듈은 기본적으로 엄격 모드로 실행됩니다. 즉, 모듈을 사용하면 별도로 'use strict';를 명시하지 않아도 엄격 모드의 규칙이 적용됩니다.
// 모듈 파일 (예: myModule.js)
export function myFunction() {
// 이 함수는 자동으로 엄격 모드로 실행됩니다.
}- 클래스(class)
- ES6에서 도입된 클래스 또한 기본적으로 엄격 모드로 실행됩니다. 클래스 내부의 모든 메서드는 엄격 모드로 작동합니다.
class MyClass {
myMethod() {
// 이 메서드는 자동으로 엄격 모드로 실행됩니다.
}
}- eval 함수 내 코드 ⇒
모든 곳에서 그냥 eval은 쓰지 말라고 합니다..
- eval 함수 내에서 코드가 실행될 때, eval이 호출된 스코프의 엄격 모드가 적용됩니다. 즉, 외부 코드가 엄격 모드로 실행되고 있다면, eval 내의 코드도 엄격 모드로 실행됩니다.
장단점
장점
- 실수로 전역 변수를 만드는 것을 방지합니다.
- 암묵적으로 실패하는 할당에 대해 예외를 발생시킵니다.
- 삭제할 수 없는 속성을 삭제하려는 시도를 차단합니다.
- 함수의 매개변수 이름은 고유해야 합니다.
this는 전역 컨텍스트에서 undefined가 됩니다.- 일반적인 코딩 오류에 대해 예외를 발생시킵니다.
- 모호하거나 잘 알려지지 않은 기능의 사용을 제한합니다.
단점
-
일부 개발자에게는 익숙하지 않은 기능이 많습니다. (위에서 언급한 주의할 점 참조)
-
function.caller와function.arguments에 접근할 수 없게 됩니다.-
function.caller와function.arguments
💡GPT 설명:function.caller -
function.caller는 현재 함수가 호출된 함수를 참조하는 속성입니다. 이를 통해 함수의 호출 스택을 추적할 수 있습니다. -
엄격 모드에서의 변화: 엄격 모드에서는
function.caller를 사용할 수 없습니다. 호출 스택에 대한 정보 노출이 보안상 위험할 수 있으며, 의도하지 않은 코드 의존성을 줄이고 함수의 독립성을 강화하기 위한 조치입니다.
💡
GPT 설명:function.arguments-
function.arguments는 함수가 호출될 때 전달된 인수 배열에 대한 참조를 제공합니다. 하지만, 이 속성은 사용을 권장하지 않으며, 대신arguments객체를 사용해야 합니다. -
엄격 모드에서의 변화: 엄격 모드에서는
function.arguments를 사용할 수 없으며, 접근 시 오류가 발생합니다. 이는 코드의 명확성을 높이고, 매개변수 사용을 더 명시적으로 만들기 위한 조치입니다.
-
-
서로 다른 엄격 모드로 작성된 스크립트를 병합할 때 문제가 발생할 수 있습니다.
전반적으로 장점이 단점보다 더 중요합니다. 엄격 모드가 제한하는 기능들은 대부분 피할 수 있으므로, 엄격 모드의 사용을 권장한다고 합니다.
