[Javascript] 코드 구조

📌 참고 사이트

코드 구조 (javascript.info)

코드 구조

 

 

 

📋 문 (statement)

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

➡️ 서로 다른 문은 세미콜론으로 구분한다.

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

 

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

 

 

 

📋 세미콜론 (semicolon)

📍 세미콜론 자동 삽입

➡️ 자바스크립트는 줄 바꿈을 암시적 세미콜론으로 해석한다. 아래와 같이 세미콜론이 없고 줄 바꿈만 있는 코드도 정상적으로 동작한다.

 

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

 

📍 세미콜론 자동 삽입이 되지 않는 경우

➡️ 하지만 아래와 같이 줄 바꿈이 세미콜론을 의미하지 않는 경우도 있다.

 

alert(3 + 
1
+ 2);

 

세미콜론 자동 삽입이 일어나지 않았기 때문에 6이 출력된다. 위와 같이 연산자 부분에서 줄바꿈이 된 경우 세미콜론 자동 삽입이 일어나지 않는다.

 

➡️ 세미콜론이 꼭 필요한 상황이지만 자바스크립트가 그것을 알아채지 못하는 상황도 존재한다.

 

// 아래의 코드에서는 에러가 발생한다.
alert('에러가 발생합니다.')
[1, 2].forEach(alert)

 

위의 코드의 경우 alert 문만 제대로 동작하고 아래 forEach문은 제대로 동작하지 않는 것을 볼 수 있다.

(TypeError: Cannot read properties of undefined (reading '2'))

이것은 자바스크립트가 대괄호 앞에 세미콜론이 있다고 가정하지 않고 있지 않아 두 문이 단일 문으로 취급되기 때문이다.

따라서 제대로 동작시키기 위해서는 alert문 끝에 세미콜론을 꼭 붙여주어야 한다.

 

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

 

결과적으로 "제대로 동작합니다." 와 1과 2가 차례로 알림창 문구로 뜨는 것 볼 수 있다.

 

결론적으로 세미콜론은 생략할 수 있지만 안전을 위해 세미콜론을 문 사이에 넣는 것이 권장된다.

 

 

 

📋 주석 (Comment)

해당 코드가 어떤 역할을 하는지를 설명해주는 것을 말한다.

 

➡️ 주석은 스크립트의 어느 곳에나 작성할 수 있다. (자바스크립트 엔진은 주석을 무시한다.)

 

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

 

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

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

 

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

 

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

 

➡️ 주석 안에 코드가 들어가면 그 코드는 실행되지 않는다.

 

➡️ 중첩 주석 (주석 안의 주석)을 사용하면 에러가 발생한다.

 

주석을 달면 코드의 길이가 증가하지만 프로덕션 서버에 배포하기 전에 코드를 압축해주는 도구가 많이 존재하고, 그 도구들이 주석을 삭제해 주므로 최종으로 배포되는 코드에 부정적인 영향을 끼치지 않고, 실행 중인 스크립트에 주석이 들어가지 않게 된다.