JavaScript Comments

티스토리 뷰

Front-End-Web/javascript

JavaScript Comments

jsBae 2026. 7. 4. 15:31

1. 주석의 의미

주석(comment)은 코드 안에 작성하지만 프로그램 실행에는 영향을 주지 않는 문장이다. 자바스크립트는 주석으로 작성된 부분을 실행하지 않고 무시한다. 주석은 코드의 의미를 정리하거나, 특정 코드의 목적을 기록하거나, 테스트 과정에서 일부 코드를 잠시 실행하지 않도록 만들 때 사용한다.

// 총 금액을 계산한다.
let price = 10000;
let count = 3;
let total = price * count;

console.log(total);

위 코드에서 // 총 금액을 계산한다.는 주석이다. 이 문장은 사람이 코드를 이해하기 위한 메모이며, 자바스크립트 실행 결과에는 영향을 주지 않는다.

실행 결과는 다음과 같다.

2. 한 줄 주석

한 줄 주석(single-line comment)은 //로 시작한다. // 뒤에 작성한 내용은 그 줄의 끝까지 주석으로 처리된다.

// 사용자 이름을 저장한다.
let userName = "홍길동";

// 나이를 저장한다.
let age = 20;

console.log(userName);
console.log(age);

위 코드에서 // 사용자 이름을 저장한다.와 // 나이를 저장한다.는 모두 한 줄 주석이다. 자바스크립트는 이 부분을 실행하지 않고, 실제 명령문인 let과 console.log()만 실행한다.

실행 결과는 다음과 같다.

홍길동
20

3. 코드 뒤에 작성하는 주석

한 줄 주석은 코드 앞에만 쓰는 것이 아니라 코드 뒤에도 작성할 수 있다. 코드 오른쪽에 주석을 붙이면 해당 코드의 의미를 짧게 기록할 수 있다.

let x = 5;       // x에 5를 저장한다.
let y = x + 2;   // x에 2를 더한 값을 y에 저장한다.

console.log(y);

위 코드에서 let x = 5;는 실행되는 명령문이고, // x에 5를 저장한다.는 주석이다.

실행 결과는 다음과 같다.

코드 뒤에 주석을 붙일 때는 너무 긴 문장을 쓰지 않는 것이 좋다. 한 줄이 길어지면 코드의 가독성이 낮아질 수 있다.

4. 여러 줄 주석

여러 줄 주석(multi-line comment)은 /*로 시작하고 */로 끝난다. /*와 */ 사이에 있는 내용은 여러 줄이더라도 모두 주석으로 처리된다.

/*
  상품 가격과 수량을 이용하여
  총 금액을 계산하는 코드이다.
*/

let price = 10000;
let count = 3;
let total = price * count;

console.log(total);

위 코드에서 /*와 */ 사이에 있는 세 줄은 모두 주석이다. 이 주석은 코드의 전체 목적을 정리할 때 사용할 수 있다.

실행 결과는 다음과 같다.

5. 한 줄 주석과 여러 줄 주석의 차이

한 줄 주석은 짧은 설명이나 한 줄 코드의 의미를 기록할 때 사용한다. 여러 줄 주석은 코드의 전체 목적, 긴 설명, 함수의 역할, 작성 의도 등을 정리할 때 사용한다.

// 한 줄 주석: 짧은 설명에 적합하다.
let score = 90;

/*
  여러 줄 주석:
  여러 줄에 걸친 설명을 작성할 때 적합하다.
  코드의 목적이나 처리 과정을 정리할 수 있다.
*/
let grade = "A";

console.log(score);
console.log(grade);

실행 결과는 다음과 같다.

90
A

한 줄 주석은 자주 사용되고, 여러 줄 주석은 비교적 긴 설명이나 문서화가 필요한 부분에서 사용된다.

6. 주석으로 코드 실행 막기

주석은 코드 설명뿐 아니라 특정 코드를 잠시 실행하지 않도록 만들 때도 사용한다. 이를 코드 비활성화 또는 주석 처리라고 한다. 코드 앞에 //를 붙이면 실행 가능한 코드가 주석으로 바뀐다.

// console.log("이 문장은 실행되지 않는다.");
console.log("이 문장은 실행된다.");

실행 결과는 다음과 같다.

이 문장은 실행된다.

첫 번째 줄은 //로 시작하므로 실행되지 않는다. 두 번째 줄은 일반 명령문이므로 콘솔에 출력된다.

7. 여러 줄 코드를 한꺼번에 주석 처리하기

여러 줄의 코드를 한꺼번에 실행하지 않도록 만들 때는 /* */를 사용할 수 있다.

/*
console.log("첫 번째 출력");
console.log("두 번째 출력");
console.log("세 번째 출력");
*/

console.log("마지막 출력");

실행 결과는 다음과 같다.

마지막 출력

/* */ 안에 들어간 세 개의 console.log() 문은 실행되지 않는다. 마지막 줄의 console.log()만 실행된다.

이 방법은 여러 코드 중 일부를 비교하거나 테스트할 때 사용할 수 있다.

8. HTML 요소 변경 예제

주석은 HTML 요소를 변경하는 JavaScript 코드에서도 사용할 수 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Comments</title>
</head>
<body>
  <h1 id="title">처음 제목</h1>
  <p id="message">처음 문단입니다.</p>

  <script>
    // 제목 내용을 변경한다.
    document.getElementById("title").innerHTML = "JavaScript Comments";

    // 문단 내용을 변경한다.
    document.getElementById("message").innerHTML = "주석은 코드 이해를 돕는다.";
  </script>
</body>
</html>

위 코드에서 첫 번째 주석은 제목을 변경하는 코드의 목적을 나타낸다. 두 번째 주석은 문단 내용을 변경하는 코드의 목적을 나타낸다.

브라우저 화면에는 다음과 같이 출력된다.

JavaScript Comments
주석은 코드 이해를 돕는다.

9. 주석 작성 시 주의할 점

주석은 코드의 의미를 분명하게 만드는 데 도움이 되지만, 지나치게 많이 작성하면 오히려 코드 읽기가 어려워질 수 있다. 좋은 주석은 코드가 왜 필요한지, 어떤 의도로 작성되었는지를 짧고 분명하게 알려 준다.

다음 주석은 코드와 거의 같은 내용을 반복하고 있다.

let price = 10000; // price에 10000을 저장한다.
let count = 3;     // count에 3을 저장한다.

이 경우 변수 이름만 보아도 의미를 어느 정도 알 수 있다. 다음처럼 코드의 목적을 정리하는 주석이 더 자연스럽다.

// 상품 가격과 수량을 기준으로 총 금액을 계산한다.
let price = 10000;
let count = 3;
let total = price * count;

주석은 코드 자체가 말하지 못하는 의도와 맥락을 보완하는 역할을 한다.

10. 종합 예제

다음 예제는 한 줄 주석, 여러 줄 주석, 코드 실행 막기를 함께 사용한 코드이다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Comments</title>
</head>
<body>
  <h1>JavaScript Comments</h1>
  <p id="result"></p>

  <script>
    /*
      상품 가격과 수량을 이용하여
      총 금액을 계산하는 예제이다.
    */

    let price = 10000;  // 상품 가격
    let count = 3;      // 상품 수량
    let total = price * count;

    // 계산 결과를 웹페이지에 출력한다.
    document.getElementById("result").innerHTML =
      "총 금액은 " + total + "원입니다.";

    // 아래 코드는 테스트용이므로 실행하지 않는다.
    // console.log("테스트 메시지");
  </script>
</body>
</html>

위 코드의 흐름은 다음과 같다.

/* */ 주석은 코드 전체의 목적을 정리한다.
// 상품 가격, // 상품 수량은 변수의 의미를 짧게 표시한다.
// 계산 결과를 웹페이지에 출력한다.는 출력 코드의 역할을 나타낸다.
// console.log("테스트 메시지");는 실행하지 않을 코드를 잠시 막아 둔 형태이다.

실행 결과는 다음과 같다.

JavaScript Comments
총 금액은 30000원입니다.

11. 핵심 정리

자바스크립트 주석(comment)은 코드 안에 작성하지만 실행되지 않는 문장이다. 주석은 코드의 의미를 정리하고, 프로그램의 흐름을 이해하기 쉽게 만들며, 테스트 과정에서 특정 코드를 잠시 실행하지 않도록 할 때 사용할 수 있다.

한 줄 주석은 //로 작성한다. // 뒤에 있는 내용은 그 줄의 끝까지 주석으로 처리된다. 여러 줄 주석은 /*와 */ 사이에 작성한다. 여러 줄에 걸친 설명이나 여러 줄의 코드를 한꺼번에 주석 처리할 때 사용할 수 있다.

좋은 주석은 코드의 단순 반복이 아니라 코드의 목적과 의도를 알려 주는 문장이다. 변수 이름과 코드 구조만으로 충분히 이해되는 부분에는 주석을 줄이고, 코드의 목적이나 처리 이유가 필요한 부분에 주석을 작성하는 것이 좋다.

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2026/07 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

multiking

티스토리 뷰