[모던 JavaScript 튜토리얼] 코드 구조

코드 구조

Statement

문장(statement)은 어떤 작업을 수행하는 문법 구조(syntax structure)와 명령어(command)를 의미한다. 코드에는 원하는 만큼 문장을 작성할 수 있고, 각 문장을 세미콜론(;)으로 구분한다. 코드의 가독성을 위해 일반적으로 각 문장을 서로 다른 줄에 작성한다.

alert('Hello, world!');

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

세미콜론

대부분의 경우 줄 바꿈을 하면 세미콜론을 생략할 수 있다. JavaScript는 줄 바꿈이 있으면 이를 암시적 세미콜론으로 해석하는데, 이러한 동작 방식을 세미콜론 자동 삽입이라고 부른다.

하지만 아래와 같이 불완전한 표현식이면 줄 바꿈이 세미콜론을 의미하지 않는다.

alert(3 +
     1
     + 2);

또, 세미콜론이 정말 필요한데 JavaScript가 이를 추정하지 못하는 경우도 있다. 이 때 발생하는 에러는 찾거나 고치기 어렵다 🥲

alert("에러가 발생합니다")

[1, 2].forEach(alert)

위 코드를 실행하면 alert만 제대로 출력되고 에러가 발생한다.

alert 끝에 세미콜론을 추가해서 다시 실행하면 잘 작동한다.

세미콜론이 없을 때 에러가 발생했던 이유는 JavaScript가 대괄호([...]) 앞에는 세미콜론이 있다고 가정하지 않기 때문이다. 따라서 세미콜론 자동 삽입이 일어나지 않고 하나의 문장으로 처리된다. JavaScript 엔진이 보게 될 코드는 다음과 같을 것이다.

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

문장이 잘못 합쳐지면서 에러가 발생한 것이다. 이외에도 이런 상황이 발생할 여지는 언제나 존재한다 💣

따라서 줄 바꿈으로 문장을 나눴더라도 문장 사이엔 세미콜론을 넣는 게 좋다! 생략할 수는 있지만 사용하는 것이 더 안전하므로 잘 따르자.

주석

주석(comment)은 복잡한 프로그램 안에서 무슨 일이 왜 일어나는지를 설명해준다. 스크립트의 어느 곳에나 작성할 수 있으며, JavaScript 엔진은 주석을 무시하기 때문에 실행에 영향을 주지 않는다.

한 줄짜리 주석은 2개의 슬래시(//)로 시작된다.

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

alert('World'); // 이 주석은 문장 옆에 이어진다.

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

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

이를 이용하면 코드 일부를 일시적으로 비활성화할 수 있다.

대부분의 에디터는 주석 처리 단축키를 지원한다. 원하는 코드에 블록을 지정하고 Ctrl+/(한 줄짜리) 또는 Ctrl+Shift+/(여러 줄)로 주석 처리할 수 있다(Mac은 Ctrl 대신 Cmd, Shift 대신 Option).

⚠️ 중첩 주석은 지원하지 않는다. 주석을 중첩해서 쓰면 에러가 발생한다.

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

주석을 달면 코드의 전체적인 길이가 증가하긴 하지만 문제가 되지 않는다. 프로덕션 서버에 배포하기 전에 코드를 압축해주는 도구가 주석을 삭제해준다. 실행 중인 스크립트에는 주석이 들어가지 않으므로, 최종 배포 코드에 영향을 주지 않는다.

이전[모던 JavaScript 튜토리얼] 엄격 모드

다음[모던 JavaScript 튜토리얼] 변수와 상수