Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
Tags
- 뷰
- Router
- vue #vue.js #font #web-font
- NavigationDuplicated
- DOM
- 프론트엔드
- 렌더링 최적화
- css
- vue-router
- virtual dom
- 라우터
- jest
- cubic-bezier
- vuetify
- 성능 최적화
- 안드로이드
- Transition
- Django
- 장고
- 세션
- 로컬스토리지
- lazy loading
- 주니어 개발자
- 예외처리
- 자바스크립트 #javascript #렌더링 #렌더링순서
- vue.js
- VUE
- 세션스토리지
- webpack
- frontend
Archives
- Today
- Total
한준호
[Modern javascript] strict mode 본문
728x90
function foo() {
x = 10;
}
foo();
console.log(x); // ?
foo 함수의 스코프에서 x 선언부를 검색한다 -> foo 함수 컨텍스트의 상위 스코프에서 x 선언부를 검색한다 -> 찾지 못한다.
참조 에러가 날 듯 싶지만 자바스크립트는 전역 객체에 프로퍼티를 생성한다(암묵적 전역)
strict mode를 통해 이러한 실수를 엄격하게 잡아낼 수 있으며 ESLint도 동일한 역할을 한다.
strict mode는 다음과 같이 사용한다.
'use strict';
function foo() {
x = 10; // ReferenceError: x is not defined
}
foo();
strict mode는 다음과 같은 에러를 감지한다
- 암묵적 전역
- 변수, 함수, 매개변수의 삭제(delete)
- 매개변수 이름의 중복
- with문의 사용
추가적으로 함수를 일반 함수로서 호출하면 this에 undefined가 반영되는데, 생성자 함수가 아닌 일반 함수에서는 this를 호출할 일이 없기 때문이다.
또한 strict mode에서는 매개변수에 전달된 인수를 재할당하여 변경해도 arguments 객체에 반영되지 않는다.
(function (a) {
'use strict';
// 매개변수에 전달된 인수를 재할당하여 변경
a = 2;
// 변경된 인수가 arguments 객체에 반영되지 않는다.
console.log(arguments); // { 0: 1, length: 1 }
}(1));
주의할 점으로
1. 전역에 strict mode를 적용하는 것은 피할 것
-> 외부 라이브러리의 경우 strict mode가 아닐 수도 있기 때문
-> 즉시 실행 함수를 통해 스코프를 구분한다.
// 즉시 실행 함수의 선두에 strict mode 적용
(function () {
'use strict';
// Do something...
}());
2. 함수 단위로 strict mode를 적용하는 것은 피할 것
728x90
'Frontend > modern javascript' 카테고리의 다른 글
[Modern javascript] this (0) | 2021.08.26 |
---|---|
[Modern javascript] 빌트인 객체 (0) | 2021.08.26 |
[Modern javascript] 프로토타입(2) (0) | 2021.08.25 |
[Modern javascript] 프로토타입(1) (0) | 2021.08.23 |
[Modern javascript] 함수와 일급 객체 (0) | 2021.08.22 |
Comments