- Published On
엄격 모드(Strict Mode)
엄격 모드(Strict Mode)
는 자바스크립트에서 더 안전하고, 오류를 줄이며, 성능 개선을 도모하기 위해 ECMAScript 5에서 도입된 개념입니다.
의도치 않은 오류를 방지하고, 코드의 안정성을 높여주며, 일반적인 코딩 실수를 예외처리 하여 디버깅을 용이하게 합니다.
이 모드를 활성화하기 위해서는 스크립트나 함수의 최상단에 'use strict';
를 선언하면 됩니다.
예를 들어, 엄격 모드가 아닌 일반 모드에서는 전역 변수를 의도치 않게 생성할 수 있습니다.
이는 나중에 코드가 복잡해졌을 때, 버그를 찾기 어렵게 만들 수 있습니다. 하지만 엄격 모드에서는 이러한 실수를 바로 잡아줍니다.
일반 모드와 엄격 모드의 비교
구분 | 일반 모드(Non-strict Mode) | 엄격 모드(Strict Mode) |
---|---|---|
변수 선언 | 변수를 선언하지 않고 사용할 수 있습니다. | 변수를 선언하지 않은 채로 사용하려 하면 ReferenceError 가 발생합니다. |
전역 객체 | this 가 전역 객체를 가리킵니다. | undefined 를 가리킵니다. |
삭제 연산 | delete 연산자를 이용하여 변수, 함수, 객체의 속성을 삭제할 수 있습니다. | 삭제가 불가능한 프로퍼티에 delete 연산을 사용하면 TypeError 가 발생합니다. |
중복 매개변수 | 함수에서 매개변수 이름을 중복해서 사용할 수 있습니다. | 중복 매개변수를 사용하면 SyntaxError 가 발생합니다. |
예시: 엄격 모드에서의 변수 사용
엄격 모드를 활성화한 상태에서 아래와 같은 코드를 작성하면, 선언하지 않은 변수를 사용하려고 했기 때문에 오류가 발생합니다.
index.jsjavascript
'use strict';
x = 10; // ReferenceError: x is not defined
반면, 엄격 모드를 사용하지 않는다면, 이 코드는 전역 변수 x
를 만들고 그 값으로 10
을 할당합니다.
이는 의도치 않은 전역 변수의 생성을 예로 들 수 있으며, 이는 프로그램의 예측 불가능한 동작을 초래할 수 있습니다.
React에서의 사용
App.jsxjavascript
//사용(기본값으로 사용)
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
//끄기
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
이전 포스트
JavaScript의 연산자 비교다음 포스트
Open Graph란 무엇인가?연관된 포스트 구경가기
1. AJAX란 무엇인가?2. 자바스크립트의 ES6 주요 변경 사항3. 이벤트 위임(Event Delegation)4. 실행 컨텍스트(Execution Context)5. 자바스크립트의 new 연산자 동작 방식6. JavaScript의 연산자 비교7. 엄격 모드(Strict Mode)8. JavaScript의 프로토타입 (Prototype) 이해하기9. Javascript에서 URL 및 URLSearchParams 사용10. Fetch web API11. 타입스크립트 주요 타입 정리12. import vs require13. JavaScript의 비동기 처리14. HTML SVG태그 분석15. JavaScript의 this 바인딩 완벽 정리16. JavaScript 배열 메서드: reduce()와 sort() 분석17. JavaScript 배열 메서드와 고차 함수 총정리
간략히