자바스크립트 | 코드 구조

1. 문

문(statement)은 프로그램이 특정 작업을 수행하도록 지시하는 단순 또는 복합 명령입니다. 다시 말해, 어떤 작업을 수행하는 문법 구조(syntax structure)와 명령어(command)를 의미합니다.

문은 자바스크립트 프로그램의 기본 빌딩 블록입니다. 프로그램 실행의 흐름을 제어하고 수행할 작업을 프로그램에 알려줍니다.

간단한 문은 변수에 값을 할당하거나 함수를 호출하는 것과 같은 단일 작업을 수행합니다. 예를 들어 :

let x = 10;
console.log("The value of x is " + x);

블록 문이라고도 하는 복합 문은 여러 문을 단일 엔티티로 그룹화합니다. 중괄호({})로 구분됩니다. 예를 들어:

{
   let x = 10;
   let y = 20;
   console.log("The value of x is " + x);
   console.log("The value of y is " + y);
}

✌🏻 문의 종류

단순문 :

• 대입문 : const A = A + 1;
• 함수 : function Test() {…};
• 리턴문 : return 5;
• 선언문 : var A;

복합문 :

• 구문 블록
• If 문
• switch 문
• While 문
• Do-While 문
• For 루프

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

아래 코드는 ‘Hello World’를 두 개의 alert 문으로 나눈 예시입니다.

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

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

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

 

 

2. 세미콜론

줄 바꿈이 있다면 세미콜론(semicolon)을 생략할 수 있습니다.

참고 : 세미콜론을 작성하지 않아도 무조건 에러가 발생하지는 않습니다. 하지만, 세미콜론이 필요하지 않은 경우라도 항상 세미콜론으로 끝마치는 편이 버그 예방 차원에서 더 좋은 습관이라고 여겨집니다.

아래 코드는 에러 없이 동작합니다.

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

자바스크립트는 줄 바꿈이 있으면 이를 ‘암시적’ 세미콜론으로 해석합니다. 이런 동작 방식을 세미콜론 자동 삽입(automatic semicolon insertion) 이라 부릅니다. 대부분의 경우, 줄 바꿈은 세미콜론을 의미합니다. 하지만 ‘대부분의 경우’가 ‘항상’을 의미하진 않습니다.

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

alert(3 +
1
+ 2);

세미콜론 자동 삽입이 일어나지 않았기 때문에 6이 출력됩니다. 어떤 줄이 “+” 로 끝나면, 그 줄은 ‘불완전한 표현식’이므로 세미콜론이 필요하지 않다는 걸 직감하실 겁니다. 위 코드도 이런 의도로 동작합니다. 반면, 세미콜론이 정말로 필요하지만 자바스크립트가 이를 추정하지 ‘못하는’ 상황도 존재합니다. 이런 상황에서 발생하는 에러는 찾거나 고치기가 상당히 어렵습니다.

 

⚠️ 세미콜론을 사용하지 않았을 때 발생할 수 있는 에러 예제

자바스크립트가 세미콜론을 자동으로 삽입해주지 못하는 구체적인 상황은 다음과 같습니다.

정상 동작 예시 :

alert("제대로 동작합니다.");

[1, 2].forEach(alert)

에러 발생 예시 :

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

[1, 2].forEach(alert)

세미콜론이 없을 때 에러가 발생했던 이유는 자바스크립트가 대괄호 […] 앞에는 세미콜론이 있다고 가정하지 않기 때문입니다.

따라서 세미콜론 자동 삽입이 일어나지 않고 첫 번째 예제는 단일 문으로 처리됩니다. 자바스크립트 엔진이 보게 될 코드는 다음과 같아지죠.

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

 

 

3. 주석

코드에서 무슨 일이 벌어지고 있는지를 설명하기 위해 주석(comment)를 작성할 수 있습니다. 주석은 공백처럼 여겨지며, 스크립트 실행 시 버려집니다. 자바스크립트 주석은 코드 내에 사용되는 특별한 형태의 문장으로, 프로그램 실행에는 영향을 미치지 않지만 코드를 이해하거나 설명하는 데 유용합니다.

자바스크립트 주석은 두 가지 형태가 있습니다. 첫 번째는 한 줄 주석(single line comment)이며, 두 번째는 여러 줄 주석(multi-line comment)입니다.

한 줄 주석은 “//“로 시작합니다. 이전에 나오는 모든 문자는 주석으로 처리되고, “//“ 이후의 문자는 무시됩니다. 다음은 한 줄 주석의 예시입니다 :

// 이 줄은 주석입니다.
console.log("Hello, world!"); // 이 줄도 주석입니다.

 

여러 줄 주석은 “/”로 시작하여 “/“로 끝납니다. 이 사이의 모든 문자는 주석으로 처리됩니다. 여러 줄 주석은 한 줄 주석보다 길지만, 여러 줄에 걸쳐 설명해야 할 경우에 유용합니다. 다음은 여러 줄 주석의 예시입니다 :

/* 이것은 여러 줄 주석입니다. 
여러 줄을 걸쳐서 작성할 수 있습니다. 
이 주석은 여러 줄의 코드를 설명하는 데 유용합니다. 
*/ 
console.log("Hello, world!"); // 이 줄은 실행됩니다.

요약 :

// 한 줄 주석

/* 이건 더 긴,
 * 여러 줄 주석입니다.
 */

/* 그러나, /* 중첩된 주석은 쓸 수 없습니다 */ SyntaxError */

 

🤔 주석을 많이 사용하면 안 좋을까?

주석은 코드의 가독성을 높이고, 코드를 이해하는 데 도움을 줍니다. 코드의 작성자나 다른 사람들이 코드를 검토할 때, 주석을 통해 코드를 이해하는 데 도움을 받을 수 있습니다. 그러나 주석을 너무 많이 사용하면 코드를 읽는 데 더 많은 시간이 걸리므로, 필요한 만큼만 사용하는 것이 좋습니다. 따라서, 주석을 사용할 때는 다음과 같은 사항을 고려해야 합니다.

1. 코드 자체가 명확하고 이해하기 쉬우면 주석을 줄일 수 있습니다. 간단한 함수나 변수명을 명확하게 작성하면, 코드를 이해하는 데 추가적인 주석이 필요하지 않을 수 있습니다.
2. 주석은 코드를 수정할 때 유지보수에 도움이 되지만, 코드가 자주 수정되지 않는다면 주석을 줄일 수 있습니다.
3. 주석의 내용은 정확하고 간결하게 작성해야 합니다. 일관성이 없거나 모호한 주석은 오히려 코드를 이해하는 데 도움이 되지 않습니다.
4. 코드의 다른 부분과 일관성이 있도록 일관된 주석 스타일을 사용해야 합니다.

따라서, 주석을 많이 사용해도 되는 경우와 적게 사용해야 하는 경우가 있습니다. 코드를 작성할 때, 코드 자체가 이해하기 쉽고, 주석이 필요하지 않은 경우는 주석을 줄이고, 코드가 복잡하거나 이해하기 어려운 경우는 적절한 주석을 추가하는 것이 좋습니다.

 

참고 : 몇몇 자바스크립트 파일의 시작부에 #!/usr/bin/env node와 같은 형태의 주석 문법이 쓰이는 것을 볼 수 있습니다. 이것은 해시뱅 주석 구문이라고 하는데, 이 특별한 주석은 스크립트를 실행할 때 쓸 특별한 자바스크립트 인터프리터의 경로를 설정할 때 쓰입니다. 해시뱅 주석 을 참고하여 자세한 내용을 확인할 수 있습니다.

 

📚 javascript.info와 MDN을 참고하여 작성한 글입니다.