[자바스립트(JavaScript )] 13. Strict mode

Front-End/JavaScript

[자바스립트(JavaScript )] 13. Strict mode

Bigone17 2022. 3. 15. 10:54

🟡 1. Strict mode

function func(){
	x = 1;
}

func();

- 위 코드를 실행을 시키면 실행이 잘 됩니다. 그러한 이유는 자바스크립트는 x가 어디에서 선언이 되었는지 처음에는 함수 내에서 찾아봅니다. 함수 안에서 없으면 함수 밖으로 나와 전역 변수에서 찾아봅니다. 만약 전역 변수에서도 없으면 에러는 내는 것이 아니라, 암묵적으로 전역 객체에 x라는 변수 동적으로 생성합니다. 이러한 변수를 암묵적 전역 변수(implicit global)라 합니다. 개발자의 의도와는 상관없이 암묵적 전역 변수가 생성이 되고 실행되는 것을 막기 위해 ES5부터는 strict mode가 추가되었습니다.

'use strict'

function func(){
	x = 10; // Uncaught ReferenceError: x is not defined
}

func();

- strict mode를 사용하기 위해서는 코드 상단에 'use strict'를 작성하고 코드를 작성하면 됩니다.

- use strict가 어디에 작성되었냐에 따라 어떤 부분은 암묵적 전역 변수 생성을 허용하게 되고, 어떤 부분은 허용을 안 하게 됩니다.

🟣 use strict가 함수 단위로 있는 경우

// use strict가 함수 안에 있는 경우

function func () {
    x = 10; // 에러가 발생하지 않음
}

function func2() {
	'use strict';
	y = 20; // Uncaught ReferenceError: y is not defined
}

func();
func2();

🟣 use strict가 전역으로 있는 경우

// use strict전역 선두에 있는 경우

'use strict';

function func () {
    x = 10; // Uncaught ReferenceError: x is not defined
}

function func2() {
	y = 20; // Uncaught ReferenceError: y is not defined
}

func();
func2();

🟢 use strict 사용 시 주의 사항

1. 스크립트 전역에 사용하지 말기.

 // 전역에 사용하지 말기
<!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>

- 전역에 사용할 경우 적용한 스크립트에서만 작동을 하므로, use strict를 사용하지 않는 스크립트와 충돌이 날 수 있습니다.

2. 함수 단위로 사용하지 말기.

// 함수 단위로 적용 X
function func1(){
	'use strict';
	x = 100; //Uncaught ReferenceError: x is not defined
}


function func2() {
	'use strict';
    y = 10; //Uncaught ReferenceError: y is not defined
}

- 일일이 strict mode를 적용하는 것이 번거로운 일이기도 하고, 외부의 콘텍스트를 참조할 때 문제가 발생할 수 있습니다.

3. 즉시 실행 함수로 감싼 스크립트 단위로 사용하기.

(function (){
	'use strict';
    let a = 10;
    let b = 20;
}());

🎈 ESLint

- use strict 대신 ESLint라는 확장 도구를 사용하면 보다 유용하게 코딩을 할 수 있습니다.

📝 정리

자바스크립트에서는 선언하지 않은 변수에 값을 할당하면 암묵적으로 전역 변수가 생성이 된다.
암묵적 전역 변수 생성을 막기 위해 strict mode를 사용한다.
strict mode를 사용하기 위해서는 'use strict'를 쓰고 하단에 코드를 작성하면 된다.
즉시 실행 함수로 감싼 스크립트 단위로 사용하는 것이 바람직하다.

긴 글 읽어주셔서 감사합니다 :)
틀린 내용이 있거나, 덧붙일 내용이 있다면 언제든지 댓글 달아주세요!
제 글이 조금이나마 읽으신 분들에게 도움이 되도록 노력하겠습니다
다음 편에 봬요~

728x90

저작자표시

'Front-End > JavaScript' 카테고리의 다른 글

[자바스립트(JavaScript )] 12. 함수의 다양한 형태 (즉시 실행 함수, 내부 함수, callback 등) (0)	2022.02.21
[자바스립트(JavaScript )] 11. 함수 프로퍼티 (Function Property) (0)	2022.02.10
[자바스립트(JavaScript )] 10. 함수 (Function) (0)	2022.02.04
[자바스립트(JavaScript )] 09. 객체 (Object) (0)	2022.02.03
[JavaScript] 08. 타입 변환 (0)	2022.01.27

현재글[자바스립트(JavaScript )] 13. Strict mode

250x250

jsonserver forbidden, json-server forbidden, 프로그래머스, 자바스크립트, mac json-server forbidden, tag, 코딩테스트, programmers, JS, 코테, HTML FORM, Next.js, Sentry, JavaScript, 자바스크립트 객체, html button, json-server, HTML, jsonServer, NextJS,

Today :
Yesterday :

운좋개