회고록 블로그
[공부 필기] JavaScript 문법 공부 6일차 본문
※ 필자는 자바스크립트 초보자입니다
※ 피드백/잘못된 사항 지적은 언제든지 환영합니다
왜 다시 공부를 시작했는지 등은 이전 글을 참고
2022.02.19 - [2. 개발 공부/JavaScript] - [공부 필기] JavaScript 문법 공부 1일차
[공부 필기] JavaScript 문법 공부 1일차
※ 필자는 자바스크립트 초보자입니다 ※ 피드백/잘못된 사항 지적은 언제든지 환영합니다 0. 사담 여러 언어를 조금씩 공부해봤는데 가장 흥미로웠던 분야는 프론트엔드 개발이었다. 정확하게
cinnamonc.tistory.com
1. 이 글은 이렇게 작성될 계획..
너무 좋은 자료(https://ko.javascript.info/)에, 너무 좋은 필기들, 너무 좋은 댓글들이 이미 있기 때문에
별도로 필기를 하며 공부하지는 않고 그냥 글을 쭉쭉 읽어가면서
더 추가적으로 공부한 내용이나, 개인적으로 필기해놓고 싶은 내용, 실습해보기 위해 작성해본 소스코드 등만 본 글에 필기할 계획이다.
- 엄격 모드(strict mode)
공부 자료 : https://ko.javascript.info/strict-mode
엄격 모드
ko.javascript.info
도대체 엄격 모드가 무엇인가.
엄격모드를 쉽게 이해해보자..
자바스크립트는 기존의 기능을 변경하지 않으면서 새로운 기능이 추가되었다고 한다.
→ 덕분에 기존 작성한 코드가 절대 망가지지 않지만, (=호환의 문제가 생길 일은 없지만)
창시자들의 실수나 불완전한 결정이 언어 안에 영원히 박제된다는 단점이 있다고 한다. (= 코드의 안정성이 떨어지는 규칙 등이 계속 남아 사용됨)
하지만 ECMAScript5(ES5)가 등장하고 나서는 좀 달라졌다고 한다.
→ ES5에서는 새로운 기능도 추가되고, 기존 기능 중 일부가 변경되기도 하였다고 한다.
기존 기능 중 일부가 변경되기도 했고 이전 버전에는 없던 새로운 기능이 추가되기도 해서 '하위 호환성 문제'가 생기게 된다.
이 때문에 ES5에서는 '엄격 모드(strict mode)'라는걸 추가했다.
ES5의 기본 모드('느슨한 모드'라고도 한다)에서는 새롭게 추가되거나 변경된 사항들이 활성화되지 않고 (= 변경된 내용들 사용 불가능하거나 사용해도 해당 코드를 무시하거나 등)
대신 엄격 모드(strict mode)라는걸 활성화하면, 새롭게 추가되거나 변경된 사항들을 활성화되게 해놓았다고 한다. (= 변경된 사항들을 사용할 수 있다)
왜 사용하는걸까
너무 설명이 어려워서 여기저기 구글링을 하고 엄격 모드를 공부하며 혼자 내린 결론은
아래와 같은 상황 때문에 엄격 모드(strict mode)를 사용하는 것 같다. (100% 추측이다)
예를 들어 ECMAScript 3에서는 '정의되지 않은 변수'에 값을 할당하면 에러가 발생하지 않고 정상 작동하도록 되어있지만
코드의 안정성 등 문제로 ECMAScript 5에서는 그러한 기능을 수정한 듯 하다. (정의되지 않은 변수는 사용할 수 없도록)
다만, 당장 모든 프로그램에 ECMAScript 5의 규칙을 적용하면 이전의 ECMAScript 3으로 작성한 프로그램은 다 나가리(?) 되므로
(예상치 못한 결과로 동작하는 등)
엄격 모드(strict mode)를 활성화했을 때만 ES5의 규칙(=정의되지 않은 변수는 사용할 수 없다)을 적용한다는 것이 아닐까.
그래서 엄격 모드(strict mode)를 활성화한 후에 정의되지 않은 변수(ECMASciprt 5에서는 사용되지 않는 규칙)를 사용하면 에러가 발생한다.
※ 참고로 현재 주류의 브라우저들은 엄격 모드를 지원하고 있다고 한다. 그래서 개발자가 따로 엄격 모드(strict mode) 키워드를 사용하지 않아도 적용되는 듯 하다.. (다만 IE 10 이하의 버전은 엄격 모드를 지원하지 않는 듯 하다)
참고 자료 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Strict_mode
Strict mode - JavaScript | MDN
엄격 모드는 평범한 JavaScript 시멘틱스에 몇가지 변경이 일어나게 합니다.
developer.mozilla.org
참고 자료 : http://www.tcpschool.com/javascript/js_exception_strict
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
참고 자료 : https://blog.outsider.ne.kr/823
ECMAScript 5의 Strict Mode :: Outsider's Dev Story
언젠가 node.js 프로젝트 소스를 보다가 use strict라는 코드를 보았습니다. 처음 본 코드라서 이게 무슨 코드인가 찾아보다가 ECMAScript의 기능이라는 것을 알게 되었습니다. 이것저것 찾아봤는데 John
blog.outsider.ne.kr
use strict로 엄격 모드 활성화
어쨌든, 엄격 모드를 이해했으니 다시 학습 자료(https://ko.javascript.info/strict-mode)로 돌아오기로 하자.
이 엄격 모드를 적용하는 정석(?)은 아래와 같다고 한다.
스크립트의 최상단이나 함수 본문의 맨 앞에 "use strict"; 를 추가하면 된다고 한다.
(최상단이 아니면 엄격모드가 활성화 되지 않을 수도 있음)
// 예시코드
"use strict";
...만약 함수의 본문 맨 앞에 use strict를 추가하면, 해당 함수만 엄격 모드로 실행된다고 한다.
function func() {
'use strict';
// 코드 작성
}하지만 대체로 스크립트 전체에 적용하는 편이라고 한다.
마침 PC에 설치된 가상머신 안에 아주 오래된 IE가 있어서 최신 버전의 Chrome과 결과를 비교해보기로 했다.
✅ Chrome 버전 99.0.4844.51에서 실행한 결과
- 첫번째 테스트 코드는 아래와 같다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<body>
<script>
//"use strict";
num = 2;
document.write(num);
</script>
</body>
</html>
일단 "use strict" (엄격 모드)를 사용하지 않았을 때 결과이다.
위와 같이 기본 모드(=느슨한 모드)로 동작하는 듯 하다.
- 두번째 테스트 코드는 다음과 같다.
"use strict"를 주석 해제해줬다. 즉, 엄격 모드를 활성화 한 것!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<body>
<script>
"use strict";
num = 2;
document.write(num);
</script>
</body>
</html>
위와 같이 "num이라는 변수가 정의되지 않았다"는 에러가 발생했다.
엄격 모드에서는 정의되지 않은 변수의 사용을 금하고 있기 때문이다.
✅ IE 버전 8.0에서 실행한 결과
- 첫번째 테스트 코드는 아래와 같다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<body>
<script>
//"use strict";
num = 2;
document.write(num);
</script>
</body>
</html>
일단 기본 모드(=느슨한 모드)로 동작해서 그런지 예상했던 결과가 출력됐다.
- 두번째 테스트 코드는 다음과 같다.
이번엔 엄격 모드를 활성화 해보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<body>
<script>
"use strict";
num = 2;
document.write(num);
</script>
</body>
</html>
use strict 를 추가 했음에도 불구하고 기본 모드(=느슨한 모드)로 결과가 출력되었다.
위에서 말했던 것과 같이 IE 10 이하의 버전이 엄격 모드를 지원하지 못하기 때문인 것 같다.
위에서 배운 것과 같이 브라우저는 기본적으로 기본 모드(=느슨한 모드)를 적용해서 ES5의 변경된 사항을 적용하지 않도록 하되,
프로그래머가 필요하다면 엄격 모드를 활성화해서 ES5의 변경된 사항(=정의되지 않은 변수 사용 불가)을 적용되도록 하는 것 같다.
그 외 엄격 모드에 대한 사실
또한, 엄격 모드를 활성화 하면 다시 돌이킬 방법은 없다고 한다."no use strict" 같은 것 없음...
일단 엄격 모드를 사용하면 안전한 코딩을 할 수 있다는 장점이 있다고 한다. (엄격하게 코드를 검사해서 에러를 발생시키기 때문)
그래서 공부 자료(https://ko.javascript.info/strict-mode)에서도 특별한 언급이 없다면 계속 엄격 모드를 적용할 것이라고 한다.
물론 클래스와 모듈을 사용하면 "use strict"를 생략할 수 있다는데, 아직 배우지 않았으니 일단 "use strict"를 사용하기로 하자.
나중에 찾아봤는데 ES5에서는 "use srtict"가 활성화 해야지만 쓸 수 있었지만 ES6 모듈과 클래스에서는 자동으로 적용이 된다고 한다.
하지만, ES6에서도 아직 "use strict"가 필요한 경우가 있다고 한다.
(2018년 답변이라 더 최신 답변을 찾아봐야할 것 같다. 하지만 위에서 직접 실험해본 결과를 보면 아직 최신 버전도 "use strict"가 필요한 경우가 있는 것 같다.)
https://stackoverflow.com/questions/49582070/does-use-strict-still-work-the-same-way-in-es6
Does "use strict" still work the same way in ES6?
I read an answer that "use strict" helps in restricting access to global variables and throwing unnecessary exceptions. But I just happened to wonder, whether "use strict" is still popular in ES6? ...
stackoverflow.com
결론 : 안전한 코딩을 위해 엄격 모드 활성화(use strict)를 사용하기
'2. 프로그래밍 언어 공부 > JavaScript' 카테고리의 다른 글
| [공부 필기] JavaScript 문법 공부 8일차 (0) | 2022.04.23 |
|---|---|
| [공부 필기] JavaScript 문법 공부 7일차 (0) | 2022.04.20 |
| [공부 필기] JavaScript 문법 공부 5일차 (0) | 2022.03.05 |
| [공부 필기] JavaScript 문법 공부 4일차 (2) (0) | 2022.03.02 |
| [공부 필기] JavaScript 문법 공부 4일차 (1) (0) | 2022.03.02 |
