2.2 코드 구조

문

• 문(statement)은 어떤 작업을 수행하는 문법 구조(syntax structure)와 명령어(command)를 의미한다.
• 이때, 서로 다른 문은 세미콜론으로 구분합니다.

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

 

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

 

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

세미콜론

줄 바꿈이 있다면 세미콜론(semicolon)을 생략할 수 있고 이런 방식을 '암시적'세미콜론 또는 세미콜론 자동 삽입(automatic semicolon insertion)이라 한다.

 

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

 

아래와 같이 줄 바꿈이 세미콜론을 의미하지 않는 경우가 있다. 이는 '불완전한 표현식’이므로 세미콜론이 필요하지 않다는 걸 추정하고 의도대로 동작하게 된다.

 

alert(3 +
1
+ 2);

✅ 에러 예제

[1, 2].forEach(alert)

 

위 코드를 실행하면 결과가 1과 2가 출력된다.

 

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

 

위 예제를 실행해 보면 자바스크립트가 대괄호 [...]앞에는 세미콜론이 있다고 가정하지 않기 때문에 alert만 제대로 출력되고 에러가 발생하는 걸 확인할 수 있다.

 

alert("제대로 동작합니다.");
[1, 2].forEach(alert)

 

위 예제에서는 “제대로 동작합니다.” 메시지 다음에 1과 2가 나타난다.

 

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

 

위에 코드도 문이 잘못 합쳐지면서 에러가 발생한다.

줄 바꿈으로 문을 나눴더라도 문 사이엔 세미콜론을 넣는 것이 좋고 안전한다. 자바스크립트 커뮤니티에서도 이를 규칙으로 정해 권장하고 있다.

주석

주석은 스크립트의 어느 곳에나 작성할 수 있습니다.

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

 

// 이 주석은 한 줄을 다 차지합니다.
alert('Hello');

alert('World'); // 이 주석은 문 다음 이어집니다.

 

여러 줄의 주석은 슬래시와 별표 /* 로 시작해 별표와 슬래시 */로 끝난다.

 

/* 두 줄짜리 주석 예제
이것은 여러 줄의 주석입니다.
*/
alert('Hello');
alert('World');

 

주석 /* … */ 안에 코드가 들어가도 이 코드는 실행되지 않고 코드 일부를 일시적으로 비활성화할 수 있습니다.

 

/* 코드 주석 처리하기
alert('Hello');
*/
alert('World');

단축키 사용하기
대부분의 에디터는 Ctrl+/ 를 사용하면 해당 줄의 코드를 한 줄짜리 주석으로 처리할 수 있으며, 여러 줄의 주석은 Ctrl+Shift+/ 를 통해 처리할 수 있습니다. Mac에서는 Ctrl 대신 Cmd를, Shift대신 Option를 사용하면 된다.

중첩 주석은 지원하지 않습니다.

주석을 중첩해 쓰면 에러가 발생합니다.

 

/*
  /* 중첩 주석 ?!? */
*/
alert( 'World' );

 

주석을 달면 코드의 전체적인 길이가 증가하지만 이는 전혀 문제가 되지 않습니다. 배포하기 전에 코드를 압축해주는 도구가 많이 있고, 이 도구들은 주석을 삭제해주기 때문이다. 실행 중인 스크립트엔 주석이 들어가지 않으므로, 주석은 최종으로 배포되는 코드에 부정적인 영향을 끼치지 않는다.

참고자료 : 코드 구조