자바스크립트 명령문

티스토리 뷰

Front-End-Web/javascript

자바스크립트 명령문

jsBae 2026. 7. 4. 15:22

1. 명령문의 의미

자바스크립트에서 명령문(statement)은 브라우저가 실행하는 하나의 명령 단위이다. 프로그램(program)은 여러 개의 명령문이 모여 만들어지며, 명령문은 작성된 순서대로 위에서 아래로 실행된다. HTML 문서 안의 자바스크립트 프로그램은 웹 브라우저가 해석하고 실행한다.

let x, y, z;
x = 5;
y = 6;
z = x + y;

위 코드는 네 개의 명령문으로 구성된다.

let x, y, z;   // 명령문 1: 변수 x, y, z 선언
x = 5;         // 명령문 2: x에 5 저장
y = 6;         // 명령문 3: y에 6 저장
z = x + y;     // 명령문 4: x + y의 결과를 z에 저장

마지막 명령문에서 x + y가 계산되므로 z의 값은 11이 된다.

2. 자바스크립트 코드

자바스크립트 명령문은 보통 자바스크립트 코드(JavaScript code)라고도 부른다. 명령문은 값(value), 연산자(operator), 표현식(expression), 키워드(keyword), 주석(comment) 등으로 구성된다.

다음 코드는 HTML 요소 안에 문장을 출력하는 명령문이다.

document.getElementById("demo").innerHTML = "Hello Dolly.";

이 명령문은 다음 요소들로 나누어 볼 수 있다.

document.getElementById("demo")는 HTML 문서에서 id="demo"인 요소를 찾는다.
innerHTML은 해당 요소의 내용을 의미한다.
=는 오른쪽 값을 왼쪽에 저장하는 대입 연산자이다.
"Hello Dolly."는 화면에 넣을 문자열 값이다.
;는 명령문의 끝을 나타낸다.

3. 세미콜론

세미콜론(semicolon) ;은 명령문의 끝을 구분할 때 사용한다. 하나의 실행 가능한 명령문이 끝나면 세미콜론을 붙이는 것이 일반적이다.

let a, b, c;
a = 5;
b = 6;
c = a + b;

위 코드는 다음 순서로 실행된다.

a, b, c라는 변수를 만든다.
a에 5를 저장한다.
b에 6을 저장한다.
c에 a + b의 계산 결과를 저장한다.

자바스크립트에서는 여러 개의 명령문을 한 줄에 작성할 수도 있다. 이때 각 명령문은 세미콜론으로 구분한다.

a = 5; b = 6; c = a + b;

세미콜론이 항상 필수인 것은 아니지만, 코드의 끝을 명확하게 구분하기 위하여 붙이는 습관이 좋다.

4. 공백

자바스크립트는 여러 개의 공백을 하나의 공백처럼 처리한다. 따라서 다음 두 코드는 같은 의미이다.

let person = "Hege";

let person="Hege";

두 코드 모두 person이라는 변수에 "Hege"라는 문자열을 저장한다. 그러나 가독성을 생각하면 연산자 앞뒤에 공백을 넣는 것이 좋다.

let x = y + z;

다음 코드보다 읽기 쉽다.

let x=y+z;

공백은 프로그램의 의미를 바꾸기 위한 것이 아니라, 사람이 코드를 읽기 쉽게 만들기 위한 요소이다.

5. 줄바꿈

자바스크립트 명령문이 너무 길어지면 읽기 어렵다. 코드가 길어질 때는 적절한 위치에서 줄바꿈을 할 수 있다. 보통 연산자 뒤에서 줄을 나누면 코드의 흐름을 이해하기 쉽다.

document.getElementById("demo").innerHTML =
"Hello Dolly!";

위 코드는 하나의 명령문이지만 두 줄로 나누어 작성되어 있다.
첫 줄에서는 HTML 요소를 찾고 innerHTML에 값을 넣을 준비를 한다.
두 번째 줄에서는 실제로 넣을 문자열 "Hello Dolly!"를 작성한다.

6. 코드 블록 - 중괄호 { }

코드 블록(code block)은 여러 개의 명령문을 하나로 묶은 구조이다. 자바스크립트에서는 중괄호 { }를 사용하여 코드 블록을 만든다. 코드 블록은 함께 실행되어야 하는 명령문들을 하나의 단위로 묶을 때 사용한다.

function myFunction() {
  document.getElementById("demo1").innerHTML = "Hello Dolly!";
  document.getElementById("demo2").innerHTML = "How are you?";
}

위 코드에서 { } 안에 있는 두 개의 명령문은 myFunction() 함수의 코드 블록에 속한다.
함수가 실행되면 두 명령문이 함께 실행된다.

첫 번째 명령문은 id="demo1"인 요소의 내용을 "Hello Dolly!"로 바꾼다.
두 번째 명령문은 id="demo2"인 요소의 내용을 "How are you?"로 바꾼다.

코드 블록 안에서는 들여쓰기(indentation)를 사용하여 구조를 분명하게 표현한다.

7. 키워드

키워드(keyword)는 자바스크립트에서 특별한 의미를 가진 예약어이다. 명령문은 특정 동작을 나타내기 위하여 키워드로 시작하는 경우가 많다. 예를 들어 let, const, if, for, function, return 등이 있다.

키워드	의미
var	변수를 선언한다
let	블록 범위 변수를 선언한다
const	블록 범위 상수를 선언한다
if	조건이 참일 때 실행할 코드 블록을 만든다
switch	여러 경우에 따라 실행할 코드 블록을 선택한다
for	반복 실행할 코드 블록을 만든다
function	함수를 선언한다
return	함수 실행 결과를 반환하고 함수를 종료한다
try	오류 처리를 위한 코드 블록을 만든다

키워드는 이미 자바스크립트에서 정해진 의미를 가지고 있으므로 변수 이름으로 사용할 수 없다.

let score = 90;      // 올바른 작성
const title = "JS";  // 올바른 작성

let let = 10;        // 올바르지 않은 작성
let function = 20;   // 올바르지 않은 작성

8. 종합 예제

다음 예제는 명령문, 세미콜론, 코드 블록, 키워드를 함께 사용한 코드이다.

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

  <p id="demo1"></p>
  <p id="demo2"></p>

  <button onclick="showResult()">결과 출력</button>

  <script>
    function showResult() {
      let x, y, z;
      x = 5;
      y = 6;
      z = x + y;

      document.getElementById("demo1").innerHTML = "x + y의 결과";
      document.getElementById("demo2").innerHTML = z;
    }
  </script>
</body>
</html>

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

function 키워드를 사용하여 showResult() 함수를 만든다.
{ } 안에 여러 개의 명령문을 작성하여 코드 블록을 만든다.
let x, y, z; 명령문으로 변수를 선언한다.
x = 5;, y = 6; 명령문으로 변수에 값을 저장한다.
z = x + y; 명령문으로 계산 결과를 저장한다.
document.getElementById() 명령문으로 HTML 요소에 결과를 출력한다.

버튼을 클릭하면 showResult() 함수가 실행되고, 화면에는 다음과 같은 결과가 나타난다.

x + y의 결과
11

9. 핵심 정리

자바스크립트 명령문(statement)은 브라우저가 실행하는 하나의 명령 단위이다. 프로그램은 여러 개의 명령문으로 이루어지며, 명령문은 작성된 순서대로 실행된다.

명령문은 값, 연산자, 표현식, 키워드, 주석 등으로 구성된다. 세미콜론 ;은 명령문의 끝을 구분하는 데 사용한다. 자바스크립트는 여러 개의 공백을 무시하지만, 연산자 앞뒤에 공백을 넣으면 코드가 읽기 쉬워진다.

여러 개의 명령문을 함께 실행하여야 할 때는 중괄호 { }를 사용하여 코드 블록을 만든다. let, const, if, for, function, return과 같은 키워드는 자바스크립트에서 특별한 의미를 가지므로 변수 이름으로 사용할 수 없다.

공지사항

최근에 올라온 글

최근에 달린 댓글

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

티스토리 뷰