JavaScript 코드 구조

David Kim·2022년 8월 1일
0

JavaScript Basic

목록 보기
2/6
post-thumbnail

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

앞서 "Hello, world!" 메시지를 보여주는 alert("Hello, world!")문을 확인한 바 있습니다.

코드엔 원하는 만큼 문을 작성할 수 있습니다. 이때, 서로 다른 문은 세미콜론으로 구분합니다.

아래 코드는 "Hello world"를 두 개의 console.log문으로 나눈 예시입니다.

console.log("Hello"); console.log("World!");

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

console.log("Hello");
console.log("World!");

세미콜론

줄 바꿈이 있다면 세미콜론을 생략할 수 있습니다.
아래 코드는 에러 없이 동작합니다.

console.log("Hello")
console.log("World!")

자바스크립트는 줄 바꿈이 있으면 이를 "암시적" 세미콜론으로 해석합니다. 이러한 동작 방식을 세미콜론 자동 삽입(automatic semicolon insertion)이라 부릅니다.

대부분의 경우 줄 바꿈은 세미콜론을 의미합니다. 하지만 "대부분"의 경우가 "항상"을 의미하지는 않습니다.

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

console.log(3 +
1
+ 2);

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

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

주석

프로그램의 유지보수와 다른 개발자와의 협업시 본인의 코드가 무슨 역할을 하는지 알리기 위해 주석의 필요성이 요구되었습니다.

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

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

// 이 주석은 한 줄을 다 차지합니다.
console.log("Hello");
console.log("World!"); // 이 주석은 문 다음 이어집니다.

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

/* 두 줄 짜리 주석
이 주석은 여러 줄 주석입니다.*/

/*
이런식으로도
쓸 수 있습니다.
*/
console.log("Hello");
console.log("World");

주석의 내용은 대부분의 경우 무시됩니다.

console.log(/* 정말로 주석 내의 내용은 대부분의 경우 무시됩니다.*/"Hello, world!");

위 예제를 실행 할 경우 주석은 무시된 채 정상적으로 Hello, world!라는 문장이 출력되는것을 확인할 수 있습니다.

console.log("/*문자열을 나타내는 큰따옴표나 작은따옴표 사이의 주석은 무시되지 않습니다.*/Hello, world!");

하지만 주의할 점은 당연히 문자열을 나타내는 작은 따옴표나 큰 따옴표 사이의 주석은 무시되지 않고 하나의 문자열로써 동작합니다.

또한 이러한 주석을 이용해서 일시적으로 코드의 일부를 비활성화 할 수 있습니다.
특정 코드 블럭의 빠른 디버깅을 위해 코드의 일부를 비활성화 하거나, 문제가 발생한 코드를 잠시 사용하지 않기 위해 비활성화 합니다.

/* 코드 비활성화
console.log("Hello");
*/
console.log("World");
profile
Web frontend developer

0개의 댓글