• 회원가입
  • 로그인
  • 구글아이디로 로그인

[Basic] JS - Use Strict - 엄격모드 ★★★

JS 엄격모드 구문 정의

 

"use strict";

 


 

1.

스크립트나 함수 시작 부분에 위 지시어 추가.


2.
스크립트 시작에 추가되면 전역범위에 영향 미침.

함수 안에 추가되면 함수 안 (= 로컬)에서만 미침.

 

3.

"use strict"; 지시어는 ECMAScript 5 버전에서 추가됨. 이전 JS 버전에서는 무시됨.

즉, 숫자(예: 3 + 4;)나 문자열(예: homzzang;)구문 경우, 존재 않는 변수로 컴파일 되어 사라짐.
오직 "use strict"; 지시어를 이해하는 컴파일러에서만 의미 있음.

4.
구문이 아니라 엄격모드로 실행되야 함을 알리는 지시어 (= 단순한 문자적 표현)일 뿐임.

 

5.

엄격모드에선 선언 안 된 변수는 사용 불가.

 

6.

IE 10 이상 주요 최신 브라우저 모두 지원.

IE 9 및 그 이전 버전 브라우저는 지원 안 함.

 

7.

"use strict"는 단순 지시어라, IE9 이하 브라우저에서도 에러는 안 남. 

단지 이해를 못 해서, 엄격모드로 작동 안 할 뿐임.

 

8.

F12 키 개발자모드에서 에러 내용 확인 가능.

 

9.

모든 프로그램에서 엄격모드 사용 가능하며, 깔끔한 코딩에 도움됨.
즉, 엄격모드는 이전에 허용 된 "잘못된 구문"을 실제 오류로 변경.
(예) 

변수명 오류 시 일반모드에선 새 전역변수가 생성되나, 엄격모드에선 에러 발생.

쓰기 권한 없는 속성에 속성값을 설정할 경우 일반모드에선 오류 피드백 못 받으나, 엄격모드에선 피드백 받음.

 

10.
엄격 모드에서는 아래 경우에 에러 발생함.
・쓰기 권한 없는 속성에 속성값 쓰기,
・존재하지 않는 속성 사용,
・존재하지 않는 변수 사용,
・존재하지 않는 객체 사용.


 

 

Use Strict 예제

 

<script>

"use strict"; // 엄격모드 전역범위 미침.

x = 3.14;  // 에러 유발 (∵ 변수 선언 안 됨.)

</script>

 

결과보기


 

<script>

"use strict"; // 엄격모드 전역범위 미침.

homzzang();


function homzzang() {

  y = 3.14;   // 에러 유발 (∵ 변수 선언 안 됨)

}

</script>

 

결과보기

 


 

<script>

x = 3.14;    // 에러 유발 안 함.

homzzang();


function homzzang () {

  "use strict"; // 엄격모드 함수 안에서만 유효.

  y = 3.14;  // 에러 유발. (∵ 변수 선언 안됨)

}

</script>

 

결과보기

 

 

Use Strict 사용 시 에러발생 경우

 

에러1 - 선언 안 된 변수 사용

 

<script>

"use strict";

x = 100;  // 에러 유발

</script>

 

 

에러2 - 선언 안 된 객체 사용

 

<script>

"use strict";

x = {a:10, b:20};  // 에러 유발

</script>

 

※ 객체도 변수 일종.

 

에러3 - 변수삭제 / 객체삭제

 

<script>

"use strict";

var x = 100;

delete x;  // 에러 유발 

</script> 

 

 

에러4 - 함수삭제

 

<script>

"use strict";

function x(a, b) {}; 

delete x;  // 에러 유발

</script>

 

 

에러5 - 매개변수명 중복

 

<script>

"use strict";

function x(a, a) {};  // 에러 유발

</script>

 

 

에러6 - 8진수 변수값 사용

 

<script>

"use strict";

var x = 010;   // 에러 유발

</script>

 

 

에러7 - 8진수 회피 문자

 

<script>

"use strict";

var x = "\010";   // 에러 유발.

</script>

 

 

에러8 - 읽기전용속성에 쓰기

 

<script>

"use strict";

var obj = {};

Object.defineProperty(obj, "x", {value:0, writable:false});

obj.x = 3.14;   // 에러 유발

</script> 

 

 

에러9 - get전용속성에 쓰기

 

<script>

"use strict";

var obj = {get x() {return 0} };

obj.x = 3.14;   // 에러 유발

</script>

 

 

에러10 - 삭제불가속성 삭제 시도.

 

<script>

"use strict";

delete Object.prototype;   // 에러 유발

</script> 

 

 

에러11 - 변수명으로 단어 eval 사용.

 

<script>

"use strict";

var eval = 100;   // 에러 유발

</script>

 

 

에러12 - 변수명으로 단어 arguments 사용.

 

<script>

"use strict";

var arguments = 100;   // 에러 유발

</script>

 

 

에러13 - with 구문 사용

 

<script>

"use strict";

with (Math){x = cos(2)};   // 에러 유발

</script> 

 

 

에러14 - 변수 호출 범위 안에서 eval()로 변수생성.

 

<script>

"use strict";

eval ("var x = 2");

alert (x); // 에러 유발

</script>

 

※ 보안 상 이유로, 변수 호출 범위에서는 eval()의 변수 생성 금지.

 

에러15 - 함수에서 객체 정의 안 된 this 키워드 사용.

 

<script>

"use strict";

function homzzang() {

  alert(this); // undefined 경고창 뜸.

}

homzznag();

</script>

 

 

에러16 - 미래 JS 버전 예약 키워드 이용한 변수 생성

 

<script>

"use strict";

var public = 100;   // 에러 유발 

</script>



 

※ 예약 키워드

 

implements

interface

let

package

private

protected

public

static

yield

 

 

"use strict" 지시어는 스크립트나 함수 시작 부분에서만 인식된다는 점 명심 !!

 

PS.

 

mdn strict mode 강의 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode (영어)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Strict_mode (한국어)

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
Basic JS - Common Mistakes -
Basic JS - Performance -
Basic JS - Reserved Words -
Basic JS - Versions -
Basic JS - JSON (제이슨) - 데이터 전송 위한 가벼운 자료 형식.
Form JS - Forms - 폼양식 유효성 제어
Form JS - Forms API - 폼유효성
Object JS - Object - 객체개념(=객체의미=객체정의) ★ 3
Object JS - Object Property - 객체속성 ★
Object JS - Object Methods - 객체메서드 ★
Object JS - Object Accessors - 객체접근자 (Getter/Setter = 게러/세러 = 게터/세터… 2
Functions JS - Function Definition - 함수선언방법 + 함수호출방법 ★★★ (= 함수구문 + 함수특…
Functions JS - Function Parameter/argument - 함수 (매개변수/독립변수) ※ 변수 종류 ※ …
Functions JS - Function Invocation - 함수호출방법1 = (함수방식 + 메서드방식 + 함수생성자방…
Functions JS - call() 메서드 - 함수호출방법2 (= call메서드 = 콜메서드)
DOM JS - DOM (= 돔 = 문서객체모델) 정의
DOM JS - Method - 메서드 (= HTML 요소에 대한 수행 작업)
DOM JS - Document - 문서객체
DOM JS - Element Selector - 주요 요소선택자 (= 객체찾기) ※ JS외부링크호출 주의사항
DOM JS - HTML - 내용입력/내용변경/속성값변경(=속성값입력)
3/67
목록
찾아주셔서 감사합니다. Since 2012