모던 JavaScript 튜토리얼 - 코드 구조

crewd·2021년 1월 4일

모던 자바스크립트 튜토리얼

ko.javascript.info

코드 구조

1.1 문

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

코드에는 원하는 만큼 문을 작성할 수 있다. 이때, 서로 다른 문은 세미콜론으로 구분한다.
아래 코드는 'Hello World'를 두개의 alert 문으로 나눈 예시다.

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

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

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

세미콜론

줄 바꿈이 있다면 세미콜론을 생략할 수 있다.

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

대부분의 경우, 줄바꿈은 세미콜론을 의미하지만 '대부분의 경우'가 항상을 의미하진 않는다.

alert(3 + 
1
+ 2);

세미 콜론은 자동 삽입이 일어나지 않았기 때문에 6이 출력.
어떤 줄이 +로 끝나면, 그 줄은 '불완전한 표현식'이므로 세미콜론이 필요하지 않는다.

반면, 세미콜론이 정말로 필요하지만 자바스크립트가 이를 추정하지 '못하는' 상황도 존재

✔에러 예제

자바스크립트가 세미콜론을 자동으로 삽입해주지 못하는 구체적은 상황은 다음과 같습니다.
[1, 2].forEach(alert)
지금은 대괄호 []와 foreach는 아직 배우지 않았으므로, 코드를 실행하면 1과 2가 출력된다는 사실만 기억해주세요.

이제 위에서 작성한 코드 앞쪽에 세미콜론을 붙이지 않은 채 alert를 추가해 봅시다.
alert('에러 발생')
[1, 2].forEach(alert)
예제를 실행해 보면 새롭게 추가한 alert만 제대로 출력되고 에러가 발생하는 걸 확인 할 수 있습니다.
alert 끝에 세미콜론을 추가해 다시 실행하면 코드는 잘 작동합니다.
alert('제대로 동작합니다.');
[1, 2].forEach(alert)
'제대로 동작합니다.' 메시지 다음에 1과 2가 나타나는 것을 확인 할 수 있습니다.

세미콜론이 없을때 에러가 발생했던 이유는 자바스크립트가 대괄호 [...] 앞에는 세미콜론이 있다고 가정하지 않기 때문입니다.
따라서 세미콜론 자동삽입이 일어나지 않고 첫 번째 예제는 단일 문으로 처리됩니다.

이 예제 외에도 이런 상황이 발생할 여지는 언제나 있습니다.

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

주석

주석은 스크립트의 어느 곳에나 작성할 수 있다.
자바스크립트 엔진은 주석을 무시하기 때문에 주석의 위치는 실행에 영향을 주지 않는다.

한 줄짜리 주석은 두 개의 슬래시 //로 시작.
슬래시 뒤엔 주석을 적어주면 된다.

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

여러 줄의 주석은 /*로 시작해 */로 끝난다.

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

주석의 내용은 무시된다. 주석 안에 코드가 들어가도 코드는 실행되지 않는다.

//alert('Hello');
/*
alert('World');
*/

✔단축키 사용하기

블록을 지정하고 단축키를 누르면 원하는 코드를 주석처리 할 수 있다. Ctrl + /를 사용하면 한 줄 짜리 주석, Ctrl + Shift + /를 사용하면 여러 줄의 주석을 처리할 수 있다.
Mac에서는 Ctrl대신 Cmd를, Shift대신 Option을 사용