JavaScript [코드구조, 엄격모드]

코드구조

1. 문

문(statement)은 어떤 작업을 수행하는 문법 구조(syntax structure)와 명령어(command)를 의미합니다.

코드에는 우리가 원하는 만큼 문을 작성할 수 있지만 이때 서로 다른 문을 구분하기 위해 세미콜론(;)을 사용합니다.

alert('hello'); alert('world');

 

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

alert('hello');
alert('world');

 

 

2. 세미콜론

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

alert('hello')
alert('world')

이렇게 코드를 작성해도 문제 없이 작동합니다.

자바스크립트에서는 세미콜론이 없어도 줄 바꿈이 있으면 세미콜론으로 해석합니다. 이를 "세미콜론 자동 삽입"이라 부릅니다.

대부분의 경우에서 세미콜론은 줄 바꿈을 의미하지만 예외가 존재합니다.

alert(2 +
3
+5);

위와 같이 코드를 입력하면 세미콜론 자동 삽입이 작동하지 않아 결과가 10이 출력됩니다. 이는 "+"로 끝나면서 '불완전한 표현식'으로 처리되며 때문에 자동적으로 세미콜론이 삽입되지 않아 결과로 10이 출력된 것입니다.

반면 세미콜론이 자동으로 삽입하지 못하는 경우도 존재합니다. 이런 상황에서 발생하는 에러는 찾거나 고치기가 어렵습니다.

[1, 2].forEach(alert)

forEach는 ()에 있는 것을 대괄호에 있는 것에 각각 적용시켜주는 것으로 이해하면 됩니다. 그러면 결과가 1과 2가 출력될 것입니다. 

여기서 코드를 더 추가해보겠습니다.

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

코드를 실행시키면 '에러가 발생합니다'라는 알림은 잘 뜨지만 아래 코드가 실행되지 않아 에러가 발생합니다.

그래서 이번에는 첫 문장의 코드에 세미콜론을 찍어 다시 출력해보았습니다.

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

그러자 "에러가 발생합니다"라는 문장과 함께 1과 2가 출력되는 것을 확인할 수 있습니다.

이런 현상이 나타난 이유는 자바스크립트가 대괄호[] 앞에서는 세미콜론이 있다고 가정하기 않기 때문입니다.

이러한 이유로 줄 바꿈이 자동으로 될지라도 문 사이에는 세미콜론을 넣는 것이 좋습니다. 

 

 

3. 주석

주석은 우리가 사용하는 코드를 설명할 때 사용합니다. 스크립트의 어느 곳에서나 작성할 수 있고 자바스크립트 엔진이 주석을 무시하기 때문에 주석은 코드에 영향을 주지 않습니다.

한 줄짜리 주석은 두 개의 슬래시 //로 작성합니다.

슬래시 뒤에는 주석을 적어주면 됩니다.

//이 코드는 에러를 의미합니다.
alert('Error');

alert('Pass'); // 이 코드는 패스를 의미합니다.

위처럼 한 줄을 주석이 다 차지할 수 있고 문 옆에 위치할 수 있습니다.

 

여러 줄을 차지하는 주석은 슬래시, 별표 /* 로 시작해서 별표 슬래시 */로 끝나게 됩니다.

/* 이것은 
여러 줄의 주석입니다.
*/
alert('hello');
alert('world');

주석을 사용할 때 ctrl + / 를 사용하면 해당 줄의 코드를 한 줄짜리 주석으로 처리할 수 있으며 여러 줄의 주석은 ctrl + shift + / 를 통해 처리할 수 있습니다. 단, 사용하는 프로그램, OS에 따라 다를 수 있습니다. 또한 주석은 중첩이 되지 않기 때문에 중첩해서 사용하면 에러가 발생합니다.

 

 

 

엄격 모드

자바스크립트는 웹페이지에서 꾸준히 쓰여왔기 때문에 기존의 기능을 변경하지 않으면서 새로운 기능이 추가되었다. 이 점은 사용자들에게 큰 장점이었지만 처음 만들었을 때 했던 실수나 불완전한 기능들이 고쳐지지 않는다는 단점도 생겼다.

그래서 이 점을 해결하기 위해 ECMAScript5(ES5)가 등장하여 새로운 기능이 추가되고 기존 기능 중 일부가 변경되었습니다. 그러면 하위 호환성 문제가 발생할 수 있는데 이를 해결하기 위해서 변경사항의 대부분은 ES5의 기본 모드에서는 활성되지 않도록 설정하였다. 대신 use strict라는 특별한 지시자를 사용해 엄격 모드(strict mode)를 활성화 했을 때만 이 변경사항이 활성화되게 하였습니다.

 

 

1. use strict

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

"use strict";
// 이 코드는 모던한 방식으로 실행됩니다

또한 스크립트 최상단이 아닌 함수 본문 맨 앞에 올 수 있다. 이때 함수란 명령어를 그룹화하는 방식으로 이해하면 된다. 자세한 내용은 다음에 배우도록 하겠습니다.

이렇게 함수 본문 맨 앞에 오면 오직 해당 함수만 엄격 모드로 실행된다. 그러나 엄격 모드는 대개 스크립트 전체에 적용한다.

주의할 점은 use strict를 취소할 수 있는 방법은 존재하지 않기 때문에 원하는 위치에 잘 적용시켜 사용해야 합니다.

 

 

2. 브라우저 콘솔

개발한 기능을 테스트하기 위해 브라우저 콘솔을 사용하는 경우 use strict가 적용되지 않는다. 이는 개발자가 기대하지 않았던 결과를 얻을 수 있기 때문이다.

그렇다면 use strict를 사용하려면 어떻게 해야 할까요?

'use strict'를 입력한 후, shift + Enter 를 눌러 줄 바꿈 하여 원하는 스크립트를 입력하면 됩니다.

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

 

그렇다면 'use strict'를 꼭 사용해야 할까?

답은 '아니요'이다.

'클래스'와 '모듈'이라 불리는 구조를 사용하면 use strict가 자동으로 적용딘다. 따라서 이 둘을 사용하고 있다면 스크립트에 'use strict'를 붙일 필요가 없다.

 

 

 

*  요약  *

1. 문은 어떤 작업을 수행하는 문법 구조와 명령어를 의미한다.

2. 문을 구분하기 위해서 세미콜론(;)을 사용한다.(단, 예외 존재)

3. 한 줄짜리 주석은 두 개의 슬래시(//)로, 여러 줄을 차지하는 주석은 /* 내용 */로 작성한다.

4. ES5 적용 후 생긴 변경사항으로 인한 하위 호환성 문제를 막기 위해 기본 모드에서 ES5의 변경사항이 활성화 되는 것을 막았다. 이것을 use strict를 사용해 엄격 모드를 활성화 했을 때만 변경사항이 적용된다.

5.'use strict'를 스크립트 최상단에 작성하면 스크립트 전체에 엄격모드가 실행된다. 또한 'use strict'를 함수 본문 맨 앞에 오면 해당 함수만 엄격 모드로 실행된다.

6. 브라우저 콘솔에서 'use strict'가 적용되지 않음으로 'use strict'를 입력한 후, shift + Enter 를 눌러 줄 바꿈 하여 원하는 스크립트를 입력하면 된다.

7. '클래스'와 '모듈'이라 불리는 구조를 사용하면 'use strict'를 붙일 필요가 없다.