[JavaScript공부 -3] 코드의 구조

Statements

---

Statements는 구문의 구성요소이며 행동을 수행하는 명령들을 이야기 함.

alert("hello world!");

alert("hello"); alert("world!");

보통은 코드를 읽기 쉽게 하기 위해서 구문(statements)들을 줄바꿈을 통해서 구분해 줌!

alert("hello"); 
alert("world!");

Semicolons(세미콜론,  ; )

---

statements들은 세미콜론으로 구분된다고 했는데, 세미콜론은 대부분의 경우에 줄바꿈이 될 때 생략이 가능함.

따라서, 아래와 같은 경우도 가능함.

alert("hello")
alert("world!")

자바스크립트는 줄바꿈을 "암묵적인" 세미콜론으로 해석하기 때문임! 이런걸 자동 세미콜론삽입(automatic semicolon insertion)이라고 부름. 대부분의 경우, 새로운 행이 세미콜론을 의미하지만 항상 그런것은 아님!!!!

예를들어..

alert(3 +
1
+ 2);

이런 경우에 결과는 6이라는 메세지를 보여줌. 그 이유는 자바스크립트가 각 행에 자동 세미콜론 삽입이 일어나지 않았기 때문! 이는 직감적으로 플러스("+") 기호가 행의 끝에 있다면 "완전한 구문"이 아니라고 결정하기 때문임.

그러나 실제로 필요한 곳에 있어야할 세미콜론을 자동 삽입하지 못하는 경우가 종종 있음.

이런 경우에는 찾아서 고치는게 어려운 경우가 있음.

# 에러 사례

[1,2].forEach(alert)

일단 구조에 대해서는 다른 챕터에서 생각하기로 하고.. 이 구문의 결과로 1이라는 메세지를 먼저 보여준 다음에 2라는 메세지를 보여줌.

이제 이 앞에 alert()를 세미콜론 없이 추가해 보자!

alert("There will be an error")
 
[1,2].forEach(alert)

이 코드를 실행시키면 앞에 alert 메세지가 보여진 다음에 에러가 발생하는 걸 볼 수 있음!

이를 해결하려면 alert 뒤에 세미콜론을 삽입해 주면 정상적으로 실행됨.

alert("All fine now");
 
[1,2].forEach(alert)

이 코드의 실행결과는 All fine now라는 메세지가 보여진 다음, 1이라는 메세지 다음, 2라는 메세지가 차례로 나오게 됨.

세미콜론을 붙이지 않았을 때 에러가 나는 이유는 자바스크립트가 square brackets [...] 이 부분 앞에 세미콜론이 당연히 있어야 한다고 인지하지 않기 때문임.

세미콜론이 자동으로 삽입되지 않기 때문에 자바스크립트 엔진은 아래와 같이 인식하게 됨.

alert("There will be an error")[1,2].forEach(alert)

alert와 forEach는 두 개의 분리된 구문이 되어야 함. 이렇게 자바스크립트가 세미콜론이 있어야 한다는 인지를 못하는 경우가 여러 있음!

이렇게 의도치 않는 에러가 발생하기 때문에 개행(new line)으로 구문을 분리하더라도 완전한 구문 뒤에 세미콜론을 붙이는 걸 추천함! 이 규칙은 다들 암묵적으로 지키자고 약속이 되어있음.

Comments(주석)

---

시간이 지날 수록 프로그램은 점점 더 복잡해지고 있어서 이 코드가 무엇이고 왜 있는지를 설명하는 "주석"을 추가하는게 필요함. 

주석은 스크립트 어떤 곳에서든 넣을 수 있음. 자바스크립트 엔진은 이 주석을 무시하기 때문에 주석은 프로그램을 실행시키는 데 영향을 끼치지 않음.

한 줄 주석의 경우 주석이 시작되는 문자 앞에 // 를 넣어줌.

// 뒤에 있는 문자들은 주석이 됨. 주석 줄은 아래와 같이 한 줄을 처음부터 차지할 수있고 아니면 구문 뒤에 추가될 수도 있음.

// This comment occupies a line of its own(주석임)
alert('Hello');
 
alert('World'); // This comment follows the statement

여러 줄 주석은 /*로 시작하여 끝나는 부분에 */로 끝을 냄. 

/* An example with two messages.
This is a multiline comment.(여러 줄 주석입니다)
*/
alert('Hello');
alert('World');

이 주석의 부분은 자바스크립트 엔진이 읽을 때 무시하기 때문에 주석 안에 코드를 넣어도 실행되지 않음. 따라서 가끔 일시적으로 한 부분의 코드를 실행시키고 싶지 않는 경우에 그 블럭을 주석처리 하기도 함.

/* Commenting out the code
alert('Hello');
*/
alert('World');

위의 코드는 Hello라는 메세지를 보여주지 않음. 주석이기 때문에!

에디터에서 주석을 처리하는 단축키

한 줄 주석 : Ctrl + /

여러 줄 주석 : Ctrl + Shift + /

Mac에서는 Ctrl 대신에 Cmd를 사용하면 됨!

여러줄 주석 기호 안에 또 다른 여러줄 주석 기호를 사용하면 에러가 나기 때문에 주의 할 것!

코드를 짤 때 주석을 다는 것을 추천함. 주석은 코드의 전체적인 이해도를 높여주고 프로그램이 실행될 때 아무런 문제가 없기 때문. 대부분의 서비스들은 서비스를 시작하기 전에 코드를 최소화하게 만드는 툴을 사용함. 이 툴들은 주석을 제거해주기 때문에 실행되는 스크립트에는 보이지 않음. 그러므로 제품을 만들고 서비스하는 데에 부정적인 영향을 끼치지 않음!

주석을 어떻게 작성해야 더 나은 방향인지 나중에 포스팅 하도록 하겠음.

[출처 : https://javascript.info/structure ]