1.strict mode란?
function foo() {
x = 10;
}
foo();
console.log(x); // ?전역변수에 x변수의 선언이 존재하지 않기때문에 ReferenceError 를 발생할것 같지만 자바스크립트는 암묵적으로 전역객체에 x프로퍼티를 동적생성함. 이러한 현상을 암묵전 전역이라함.
그래서 var ,let,const 키워드를 사용하여 변수를 선언후 사용해야함.
개발자도 사람이기에 실수는 발생. 안정적 코드생산을 위해 사용
ES5부터 strict mode가 추가.
ESLint 같은 린트 도구를 사용해도 strict mode와 유사한 효과 가능
strict mode <<<<< 린트도구
2. strict mode의 적용
전역의 선두 또는 함수 몸체의 'use strict'; 를 추가. 전역의 선두에 추가하면 전체에 strict mode적용
'use strict';
function foo() {
x = 10; // ReferenceError: x is not defined
}
foo();function foo() {
'use strict';
x = 10; // ReferenceError: x is not defined
}
foo();
function foo() {
x = 10; // 에러를 발생시키지 않는다.
'use strict';
}
foo();3.전역에 적용하는건 피하자.
<!DOCTYPE html>
<html>
<body>
<script>
'use strict';
</script>
<script>
x = 1; // 에러가 발생하지 않는다.
console.log(x); // 1
</script>
<script>
'use strict';
y = 1; // ReferenceError: y is not defined
console.log(y);
</script>
</body>
</html>스크립트 단위로 적용.
4. 함수단위로 적용하는것도 피하자.
모든함수에 strict를 적용하는건 번거롭다.
(function () {
// non-strict mode
var lеt = 10; // 에러가 발생하지 않는다.
function foo() {
'use strict';
let = 20; // SyntaxError: Unexpected strict mode reserved word
}
foo();
}());즉시실행함수로 감싼 스크립트 단위로 적용하는것이 바람직.
5. strict mode가 발생시키는 에러
5-1. 암묵적 전역
선언하지 않은 변수를 참조하면 ReferenceError발생
(function () {
'use strict';
x = 1;
console.log(x); // ReferenceError: x is not defined
}());5-2 변수,함수,매개변수의 삭제
delete연산자로 변수,함수, 매개변수를 삭제하면 SyntaxError 가 발생.
(function () {
'use strict';
var x = 1;
delete x;
// SyntaxError: Delete of an unqualified identifier in strict mode.
function foo(a) {
delete a;
// SyntaxError: Delete of an unqualified identifier in strict mode.
}
delete foo;
// SyntaxError: Delete of an unqualified identifier in strict mode.
}());5-3. 매개변수 이름의 중복
중복된 매개변수 이름을 사용하면 SyntaxError발생.
(function () {
'use strict';
//SyntaxError: Duplicate parameter name not allowed in this context
function foo(x, x) {
return x + x;
}
console.log(foo(1, 2));
}());5-4. with문의 사용
(function () {
'use strict';
// SyntaxError: Strict mode code may not include a with statement
with({ x: 1 }) {
console.log(x);
}
}());with문사용시 신택스에러 발생. with문은 전달된 객체를 스코프 체인에 추가한다. 동일한 객체의 프로퍼티를 반복해서 사용할때 객체이름을 생략할 수 있어서 코드가 간단해지지만 성능,가독성 나빠짐. 되도록 사용x
6. strict mode적용에 의한 변화
6-1 일반 함수의 this
strict mode에서 함수를 일반함수로서 호출하면 this에 undifined가 바인딩.
생성자 함수가 아닌 일반함수 내부에서는 this를 사용할 필요가 없음 에러발생x
(function () {
'use strict';
function foo() {
console.log(this); // undefined
}
foo();
function Foo() {
console.log(this); // Foo
}
new Foo();
}());6-2 arguments 객체
(function (a) {
'use strict';
// 매개변수에 전달된 인수를 재할당하여 변경
a = 2;
// 변경된 인수가 arguments 객체에 반영되지 않는다.
console.log(arguments); // { 0: 1, length: 1 }
}(1));
step by step