[코어 자바스크립트] 2.2 코드 구조
출처 : 모던 JavaScript 튜토리얼
1. 문(statement)
- 문(statement)는 어떤 작업을 수행하는 문법 구조(syntax structure)와 명령어(command)를 의미한다.
- 코드에 원하는 만큼 문을 작성할 수 있다.
- 서로 다른 문은 세미콜론(
;)으로 구분한다. - 아래는 두 개의 문이 작성된 코드이다.
alert('Hello'); alert('World');
- 코드의 가독성을 높이기 위해 각 문은 서로 다른 줄에 작성한다.
alert('Hello');
alert('World');
2. 세미콜론(semicolon)
- 자바스크립트는 줄 바꿈이 있으면 이를 ‘암시적’ 세미콜론으로 해석하기 때문에 줄바꿈이 있다면 세미콜론을 생략할 수 있다.
- 이와 같은 동작 방식을 세미콜론 자동 삽입(automatic semicolon insertion)이라 부른다.
alert('Hello')
alert('World')
- 대부분의 경우 줄 바꿈이 세미콜론을 의미하지만, 그렇지 않은 경우도 있다.
- 아래와 같이 어떤 줄이
+로 끝나면, 그 줄은 ‘불완전한 표현식’이기 때문에 세미콜론이 필요하지 않다.
alert(4 +
1
+ 8);
- 세미콜론이 필요한 상황이지만 자바스크립트가 이를 추정하지 못하는 상황도 존재한다. 따라소 줄바꿈으로 문을 나눴다 하더라도, 문 사이엔 세미콜론을 넣는 것이 좋다.
에러 예제
- 아래의 코드를 실행하면 1과 2가 출력된다.
[1, 2].forEach(alert)
- 위의 코드에 세미콜론을 붙이지 않고 다른 코드를 추가한다. 아래 코드를 실행해 보면 새롭게 추가한
alert만 제대로 출력되고, 에러가 발생한다.
alert("에러가 발생한다.")
[1, 2].forEach(alert)
- alert 끝에 세미콜론을 추가해 다시 실행하면 코드는 잘 작동한다.
alert("제대로 동작한다.");
[1, 2].forEach(alert)
- 세미콜론이 없을 때 에러가 발생했던 이유는 자바스크립트가 대괄호 앞에는 세미콜론이 있다고 가정하지 않기 때문이다. 따라서 세미콜론 자동 삽입이 일어나지 않고, 단일 문으로 처리된다. 자바스크립트 엔진은 에러 해결 전 코드를 아래와 같이 인식한다.
alert("에러가 발생한다.") [1, 2].forEach(alert)
3. 주석
- 주석은 스크립트의 어느 곳에나 작성할 수 있다. 자바스크립트 엔진은 주석을 무사하기 때문에 주석의 위치는 실행에 영향을 주지 않는다.
- 자바스크립트 프로그램이 복잡해지면서, 코드에 대해 설명해주기 위해 주석을 사용하기도 하고 코드를 일시적으로 비활성화 하기 위해 주석을 사용하기도 한다.
- 대부분의 에디터는 주석 처리 단축키를 지원한다.
Ctrl+/를 사용하면 해당 줄의 코드를 한 줄짜리 주석으로 처리할 수 있고, 여러 줄의 주석은Ctrl+Shift+/를 통해 처리할 수 있다.
한 줄 주석
- 한 줄짜리 주석은 두 개의 슬래시
//로 시작되고, 슬래시 뒤에 주석을 적으면 된다. - 한 줄을 주석이 다 차지하는 형태도 있고 문 다음에 주석이 이어지는 형태도 있다.
// 한 줄을 다 차지하는 주석
alert('Hello');
alert('World'); // 문 다음에 이어지는 주석
여러 줄 주석
- 여러 줄 주석은 슬래시와 별표
/*로 시작해 별표와 슬래시*/로 끝난다.
/*
여러
줄
주석
*/
alert('Hello');
alert('World');
- 주석을 중첩해서 사용하면 에러가 발생한다.
/**... **/안에 또 다른/**... **/이 있을 수 없다.