Strict
strict 모드는 Javascript ES5부터 지원하는 기능으로 'use strict'를 작성함으로써 적용할 수 있다. 'use strict' 하단부터 적용되며, 이는 곧, 내가 앞으로 엄격한 JS 문법을 사용해 코드를 작성할 것이니, JS Engine 역시 엄격하게 문법을 적용시켜서 처리해달라는 의미가 된다.
strict 모드를 적용함으로써 코딩의 실수를 최소화할 수 있고, JS Engine이 처리하는 알고리즘이 단순해져 퍼포먼스가 빨라지기 때문에 strict 모드로 코드를 작성하는 것은 필수라고 할 수 있다. 때문에, 되도록이면 코드 최상단에 'use strict'를 작성해 전체 스크립트에 strict 모드를 적용할 것을 추천한다.
전체 스크립트에 적용할 경우(전역 레벨의 strict 모드)
'use strict';
var v = "Hi! I'm a strict mode script!";
함수에 적용할 경우(함수 레벨의 strict 모드)
function strict() {
'use strict';
function nested() { return "And so am I!"; }
return "Hi! I'm a strict mode function! "+ nested();
}
function notStrict() { return "I'm not strict."; }
모듈에 적용할 경우
Javascript 모듈은 ECMAScript 2015에서 처음 등장했다. 모든 모듈은 'use strict' 구문이 없어도 자동으로 strict 모드가 적용된다.
function strict() {
...
}
export default strict;
참고
MDN Javscript - Strict mode(https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Strict_mode)
방문해보면 좋을 페이지
버미노트(https://beomy.tistory.com/13)
cf. strict 모드에서는 var 키워드를 사용하지 않고 변수를 작성하면 에러를 발생시킨다.
'use strict';
try {
book = "노인과 바다";
console.log("book", book);
} catch(e) {
console.log(e.message);
}
위의 코드에서 상단의 'use strict'가 존재할 때는 'book is undefined' 에러 메세지가 출력되나, 'use strict'를 제거하게 되면 정상적으로 'book 노인과 바다'가 출력된다.
cf. strict 모드 하에서 with문을 사용한 코드를 작성시 오류가 발생한다. 이 이유에 대해 생각해보자
: with문에서 특정 객체를 선언하고, with문 내부에서 객체의 속성 또는 함수를 사용하게 되는데, 이 경우 해당 변수가 그 객체의 변수인지 전역 변수인지 모호하기 때문에 오류를 발생시킨다.
※ with문이란?
특정 객체를 반복해서 사용할 때, 해당 객체를 계속해서 선언하는 것을 생략할 수 있게 해준다. 예를 들어 Math 객체의 메소드들을 여러 번 사용할 경우 with문으로 한번만 선언하고, 내부적으로 생략해 줄 수 있다.
기존 코드
x = Math.cos(3 * Math.PI) + Math.sin(Math.LN10);
y = Math.tan(14 * Math.E);
with문을 사용한 예
with(Math) {
x = cos(3 * PI) + sin(LN10);
y = tan(14 * E);
}
cf. strict 모드 하에서 label문을 사용한 코드를 작성시 오류가 발생한다. 이 이유에 대해 생각해보자
※ label문이란?
특정 문장의 위치를 label로 삼아 기억할 수 있게 해준다. break, continue와 함께 유용하게 사용된다. 예를 들어, 이중 for문을 작성할 때, 특정 조건에 따라 내외부의 for문을 모두 한번에 종료시키고 싶을 때 아래와 같이 작성할 수 있다.
label문을 사용하지 않을 경우
var flag = false;
for(var i = 0; i < 10; i++) {
for(var j = 0; j < 5; j++) {
if(j = 3) {
flag = true;
break;
}
}
if(flag == true) {
break;
}
}
label문을 사용할 경우
foo :
for(var i = 0; i < 10; i++) {
for(var j = 0; j < 5; j++) {
if(j = 3) {
break foo;
}
}
}
'Frontend > Javascript' 카테고리의 다른 글
JavaScript/jQuery) closest(), find() (0) | 2021.09.06 |
---|---|
JavaScript/jQuery) outerHTML, lnnerHTML (0) | 2021.09.05 |
JavaScript/jQuery) offset 함수 (0) | 2021.09.05 |
JavaScript/jQuery) debugger를 통해 코드 일정 부분 테스트하기 (0) | 2021.07.04 |
RequireJS를 사용해 스크립트 모듈화 하기 (0) | 2021.06.13 |