Modern Js 3(구조, 엄격모드)

자바스크립트의 구조와 엄격모드에 대한 정리

Featured image

본 문서는 모던 자바스크립트를 정리하고 공부한 문서입니다.

2.2 코드 구조

2.3 엄격 모드

2.2 코드 구조

아래 코드는 ‘Hello World’를 두 개의 alert 문으로 나눈 예시입니다.

alert('Hello'); alert('World');

코드의 가독성을 높이기 위해 각 문은 서로 다른 줄에 작성하는 것이 일반적입니다.

alert('Hello');
alert('World');

세미콜론

줄 바꿈이 있다면 세미콜론(semicolon)을 생략할 수 있습니다.

아래 코드는 에러 없이 동작합니다.

alert('Hello')
alert('World')

자바스크립트는 줄 바꿈이 있으면 이를 ‘암시적’ 세미콜론으로 해석합니다. 이런 동작 방식을 세미콜론 자동 삽입(automatic semicolon insertion)이라 부릅니다.

대부분의 경우, 줄 바꿈은 세미콜론을 의미합니다. 하지만 ‘대부분의 경우’가 ‘항상’을 의미하진 않습니다.

아래와 같이 줄 바꿈이 세미콜론을 의미하지 않는 경우도 있습니다.

alert(3 +
1
+ 2);

세미콜론 자동 삽입이 일어나지 않았기 때문에 6이 출력됩니다. 어떤 줄이 "+" 로 끝나면, 그 줄은 ‘불완전한 표현식’이므로 세미콜론이 필요하지 않다는 걸 직감하실 겁니다. 위 코드도 이런 의도로 동작합니다.

대괄호[...]앞에는 세미콜론이 없을 시 세미콜론이 있다고 가정하지 않음.

alert("에러가 발생합니다.")
[1, 2].forEach(alert)

alert("에러가 발생합니다.")[1, 2].forEach(alert)

주석

한줄 // 여러줄 /* */

2.3 엄격 모드

자바스크립트는 꽤 오랫동안 호환성 이슈 없이 발전해왔습니다. 기존의 기능을 변경하지 않으면서 새로운 기능이 추가되었죠.

덕분에 기존에 작성한 코드는 절대 망가지지 않는다는 장점이 있었습니다. 하지만 자바스크립트 창시자들이 했던 실수나 불완전한 결정이 언어 안에 영원히 박제된다는 단점도 생겼습니다.

이런 상황은 ECMAScript5(ES5)가 등장하기 전인 2009년까지 지속되었습니다. 그런데 새롭게 제정된 ES5에서는 새로운 기능이 추가되고 기존 기능 중 일부가 변경되었습니다. 기존 기능을 변경하였기 때문에 하위 호환성 문제가 생길 수 있겠죠? 그래서 변경사항 대부분은 ES5의 기본 모드에선 활성화되지 않도록 설계되었습니다. 대신 use strict라는 특별한 지시자를 사용해 엄격 모드(strict mode)를 활성화 했을 때만 이 변경사항이 활성화되게 해놓았습니다.

use strict

지시자 "use strict", 혹은 'use strict'는 단순한 문자열처럼 생겼습니다. 하지만 이 지시자가 스크립트 최상단에 오면 스크립트 전체가 “모던한” 방식으로 동작합니다.

예시:

"use strict";

// 이 코드는 모던한 방식으로 실행됩니다.
...

명령어를 그룹화하는 방식인 함수에 대해선 곧 학습하도록 하겠습니다. 함수에 대해 학습하기 전에, "use strict"는 스크립트 최상단이 아닌 함수 본문 맨 앞에 올 수도 있다는 점을 알아두시기 바랍니다. 이렇게 하면 오직 해당 함수만 엄격 모드로 실행됩니다. 엄격 모드는 대개 스크립트 전체에 적용하지만 말이죠.

use strict를 취소할 방법은 없습니다.

자바스크립트 엔진을 이전 방식으로 되돌리는 "no use strict"같은 지시자는 존재하지 않습니다.

일단 엄격 모드가 적용되면 돌이킬 방법은 없습니다.

브라우저 콘솔

개발한 기능을 테스트하기 위해 브라우저 콘솔을 사용하는 경우, 기본적으로 use strict가 적용되어있지 않는다는 점에 주의하셔야 합니다.

use strict에 영향을 받는 경우라면 개발자는 기대하지 않았던 결과를 얻을 수 있기 때문입니다.

그렇다면 어떻게 해야 콘솔에서 use strict를 사용할 수 있을까요?

‘use strict’를 입력한 후, Shift+Enter키를 눌러 줄 바꿈 해 원하는 스크립트를 입력하면 됩니다. 아래와 같이 말이죠.

'use strict'; <Shift+Enter 눌러  바꿈 >
//  ...테스트하려는 코드 입력
<Enter 눌러 실행>

이 기능은 Firefox와 Chrome 같은 유명한 브라우저에서 대부분 사용 가능합니다.

브라우저가 오래 되어서 콘솔 창에 use strict를 입력하는 게 불가능하다면, use strict를 적용하는 가장 확실한 방법은 아래와 같이 코드를 래퍼로 감싸면 됩니다.

(function() {
  'use strict';

  // ...테스트하려는 코드...
})()

‘use strict’를 꼭 사용해야 하나요

“당연히 사용해야 하는 거 아니야?”라는 생각이 드시겠지만, 꼭 그렇지만은 않습니다.

누군가는 스크립트 맨 윗줄엔 "use strict"를 넣는 게 좋다고 권유할 수 있습니다. 그런데 그거 아세요?

모던 자바스크립트는 ‘클래스’와 ‘모듈’이라 불리는 진일보한 구조를 제공합니다(클래스와 모듈에 대해선 당연히 뒤에서 학습할 예정입니다). 이 둘을 사용하면 use strict가 자동으로 적용되죠. 따라서 이 둘을 사용하고 있다면 스크립트에 "use strict"를 붙일 필요가 없습니다.

결론은 이렇습니다. 코드를 클래스와 모듈을 사용해 구성한다면 "use strict"를 생략해도 됩니다. 그런데 아직은 이 둘을 배우지 않았으니 "use strict"를 귀한 손님처럼 모시도록 하겠습니다.

지금까지는 use strict의 일반적인 특징에 대해 알아보았습니다.

다음 챕터부터는 자바스크립트 언어가 제공하는 기능들을 하나씩 학습하면서 이 기능들이 엄격 모드와 비 엄격 모드에서 어떤 차이점을 보이는지 알아보겠습니다. 희소식을 알려드리자면 두 모드에서 차이를 보이는 기능이 많지 않다는 점과 엄격 모드를 사용하면 개발자의 삶의 질이 조금 더 높아진다는 점입니다.

그리고 특별한 언급이 없는 한 이 튜토리얼에 등장하는 모든 예시엔 엄격 모드를 적용할 예정입니다. 외부 스크립트 파일은 <script src="path/to/script.js"></script>와 같이 삽입합니다.