multiking

자바스크립트와 객체

jsBae — Sun, 2 Aug 2026 23:21:56 +0900

학습목표

이번 장에서는 여러 개의 데이터를 하나의 단위로 묶어서 관리하는 객체(Object)의 개념과 사용 방법을 학습한다. 객체는 실제 웹 프로그램에서 사용자 정보, 상품 정보, 게시글, 게임 캐릭터, 설정값 등 다양한 데이터를 표현하는 데 활용된다.

JavaScript 객체의 개념을 설명할 수 있다.
객체를 생성하고 속성(Property)을 정의할 수 있다.
점 표기법과 대괄호 표기법으로 객체의 값에 접근할 수 있다.
객체의 속성을 추가·수정·삭제할 수 있다.
객체 안에 메서드(Method)를 작성할 수 있다.
this를 사용하여 객체 자신의 속성에 접근할 수 있다.
객체를 활용하여 간단한 웹 프로그램을 구현할 수 있다.

1. 개념

1.1 객체란 무엇인가?

지금까지 변수는 일반적으로 하나의 값을 저장하는 용도로 사용하였다.

let name = "김민준";
let age = 20;
let major = "소프트웨어학과";

학생 한 명의 정보를 표현하기 위하여 세 개의 변수를 만들었다.

그런데 이 세 값은 서로 관계가 있다.

이름: 김민준
나이: 20
전공: 소프트웨어학과

모두 한 명의 학생에 관한 정보이다. 따라서 다음과 같이 하나의 묶음으로 관리할 수 있다.

const student = {
    name: "김민준",
    age: 20,
    major: "소프트웨어학과"
};

이것이 객체(Object)이다.

객체(Object)는 서로 관련된 데이터와 기능을 하나의 단위로 묶어서 관리하는 자료구조이다.

MDN에서는 JavaScript 객체를 서로 관련된 데이터와 기능의 집합으로 설명하며, 객체 내부의 데이터는 속성(Property), 객체에 포함된 함수는 메서드(Method)라고 설명한다.

1.2 현실 세계와 객체

객체를 처음 학습할 때에는 현실 세계의 사물을 생각하면 이해하기 쉽다.

예를 들어 자동차를 하나의 객체라고 생각하여 보자.

자동차의 정보

구분	내용
제조사	Hyundai
모델	IONIQ 5
색상	White
속도	0

이러한 정보는 자동차가 가지고 있는 속성(Property)이다.

자동차는 동작도 할 수 있다.

동작	설명
start()	자동차 시동을 건다.
drive()	자동차를 운전한다.
stop()	자동차를 정지한다.

이러한 동작은 객체의 메서드(Method)라고 한다.

이를 JavaScript로 표현하면 다음과 같다.

const car = {
    brand: "Hyundai",
    model: "IONIQ 5",
    color: "White",
    speed: 0,

    start: function() {
        console.log("자동차가 출발합니다.");
    }
};

객체는 크게 다음 두 요소로 구성할 수 있다.

객체(Object)
   │
   ├── 속성(Property) → 객체가 가지고 있는 데이터
   │
   └── 메서드(Method) → 객체가 수행하는 기능

1.3 객체의 기본 구조

JavaScript에서는 중괄호 { }를 사용하여 객체를 만들 수 있다.

const 객체이름 = {
    속성이름: 값,
    속성이름: 값
};

예를 들어 다음과 같다.

const student = {
    name: "이서연",
    age: 21,
    major: "디자인학과"
};

구조를 살펴보면 다음과 같다.

student
 ├─ name   : "이서연"
 ├─ age    : 21
 └─ major  : "디자인학과"

객체에서 다음과 같은 형식을 키(Key)와 값(Value)의 쌍이라고 한다.

name: "이서연"

여기에서

name        → Key
"이서연"    → Value

이다.객체의 속성은 일반적으로 key: value 형태로 표현된다.

1.4 객체를 사용하는 이유

let studentName = "김민준";
let studentAge = 20;
let studentMajor = "소프트웨어학과";
let studentGrade = 1;

학생 정보가 많아질수록 변수도 계속 증가한다.하지만 객체를 이용하면 다음과 같이 표현할 수 있다.

const student = {
    name: "김민준",
    age: 20,
    major: "소프트웨어학과",
    grade: 1
};

따라서 객체를 사용하면 다음과 같은 장점이 있다.

일반 변수	객체
각각의 변수를 따로 관리	관련 데이터를 하나로 관리
변수 이름이 많아짐	구조적으로 정리 가능
데이터 관계 파악이 어려움	데이터의 의미가 명확함
프로그램이 커지면 관리가 어려움	복잡한 데이터 관리에 적합

1.5 객체의 속성에 접근하기

객체 안에 저장된 값을 사용하려면 속성에 접근하여야 한다.

대표적으로 두 가지 방법이 있다.

① 점 표기법(Dot Notation)

가장 일반적인 방법이다.

객체이름.속성이름

예를 들어 다음과 같다.

const student = {
    name: "김민준",
    age: 20,
    major: "소프트웨어학과"
};

console.log(student.name);
console.log(student.age);
console.log(student.major);

실행 결과는 다음과 같다.

김민준
20
소프트웨어학과

② 대괄호 표기법(Bracket Notation)

다음과 같이 사용할 수도 있다.

객체이름["속성이름"]

예를 들어 다음과 같다.

console.log(student["name"]);
console.log(student["age"]);

결과는 동일하다.

김민준
20

MDN과 W3Schools 모두 객체 속성 접근 방법으로 점 표기법과 대괄호 표기법을 설명한다. 특히 속성 이름이 변수에 저장되어 있거나 일반적인 식별자로 사용할 수 없는 경우에는 대괄호 표기법이 필요하다.

1.6 점 표기법과 대괄호 표기법의 차이

대부분의 경우에는 점 표기법을 사용하는 것이 읽기 쉽다.

student.name

하지만 다음과 같이 속성 이름을 변수로 지정할 때에는 대괄호 표기법이 유용하다.

const student = {
    name: "김민준",
    age: 20
};

let key = "name";

console.log(student[key]);

결과는 다음과 같다.

김민준

여기에서

student.key

라고 작성하면 안 된다.key라는 이름의 속성을 찾기 때문이다.

1.7 객체 속성의 값 변경하기

객체를 만든 후에도 속성의 값을 변경할 수 있다.

const student = {
    name: "김민준",
    age: 20
};

student.age = 21;

console.log(student.age);

결과는 다음과 같다.

중요

객체를 const로 선언하여도 객체 내부의 속성값은 변경할 수 있다.

const student = {
    name: "김민준"
};

student.name = "이서연";

이 코드는 정상적으로 실행된다.

하지만 객체 자체를 다른 객체로 다시 대입하는 것은 불가능하다.

student = {
    name: "박지훈"
};

이 경우 오류가 발생한다.

따라서 초보 단계에서는 다음과 같이 이해하면 된다.

const 객체는 객체 자체를 다른 값으로 바꿀 수 없지만, 객체 안의 속성은 변경할 수 있다.

1.8 객체에 새로운 속성 추가하기

처음부터 모든 속성을 작성할 필요는 없다.

const student = {
    name: "김민준",
    age: 20
};

새로운 속성을 추가하여 보자.

student.major = "소프트웨어학과";
student.grade = 1;

결과적으로 객체는 다음과 같은 정보를 가지게 된다.

student
 ├─ name  : 김민준
 ├─ age   : 20
 ├─ major : 소프트웨어학과
 └─ grade : 1

1.9 객체의 속성 삭제하기

객체의 속성을 삭제할 때에는 delete를 사용할 수 있다.

const student = {
    name: "김민준",
    age: 20,
    major: "소프트웨어학과"
};

delete student.age;

console.log(student);

객체에서는 속성을 변경하거나 추가하고 삭제할 수 있다.

1.10 객체와 메서드(Method)

객체 안에는 데이터뿐만 아니라 함수도 저장할 수 있다.

const student = {
    name: "김민준",

    hello: function() {
        console.log("안녕하세요.");
    }
};

함수가 객체의 속성으로 포함되어 있을 때 이를 메서드(Method)라고 한다.

메서드를 실행할 때에는 다음과 같이 작성한다.

student.hello();

결과는 다음과 같다.

안녕하세요.

즉,

일반 함수

function hello() {
}

객체의 메서드

student.hello()

라고 구분하여 생각할 수 있다.

1.11 this의 이해

이번에는 학생의 이름을 사용하여 인사하도록 만들어 보자.

const student = {
    name: "김민준",

    hello: function() {
        console.log("안녕하세요. 저는 " + this.name + "입니다.");
    }
};

student.hello();

결과는 다음과 같다.

안녕하세요. 저는 김민준입니다.

여기에서 중요한 코드가 있다.

this.name

이 메서드를 호출한 객체가 student이므로 현재 예제에서 this.name은 다음과 같은 의미가 된다.

student.name

따라서 초보 단계에서는 다음과 같이 이해하면 좋다.

객체의 메서드 안에서 this는 해당 메서드를 호출한 객체를 가리킬 때 사용한다.

W3Schools의 객체 메서드 설명에서도 메서드 내부의 this를 호출 객체의 속성에 접근하기 위한 방법으로 설명한다. 다만 JavaScript의 this는 호출 방식에 따라 값이 달라질 수 있으므로 이후 함수 심화 과정에서 다시 다룰 필요가 있다.

2. 기본예제

기본예제 1. 학생 객체 만들기

다음과 같은 학생 정보를 객체로 만들어 보자.

const student = {
    name: "김민준",
    age: 20,
    major: "소프트웨어학과",
    grade: 1
};

console.log(student.name);
console.log(student.major);

실행 결과는 다음과 같다.

김민준
소프트웨어학과

코드 이해하기

const student

student라는 객체를 생성한다.

name: "김민준"

name이라는 속성에 "김민준"을 저장한다.

student.name

student 객체의 name 속성에 접근한다.

기본예제 2. 상품 객체 만들기

const product = {
    name: "무선 이어폰",
    price: 59000,
    stock: 12
};

console.log("상품명:", product.name);
console.log("가격:", product.price);
console.log("재고:", product.stock);

실행 결과는 다음과 같다.

상품명: 무선 이어폰
가격: 59000
재고: 12

기본예제 3. 객체의 값 변경하기

const product = {
    name: "무선 이어폰",
    price: 59000
};

product.price = 49000;

console.log(product.price);

결과는 다음과 같다.

기본예제 4. 속성 추가하기

const product = {
    name: "무선 이어폰",
    price: 59000
};

product.stock = 10;

console.log(product.stock);

결과는 다음과 같다.

기본예제 5. 메서드 사용하기

const dog = {
    name: "초코",
    age: 3,

    bark: function() {
        console.log("멍멍!");
    }
};

dog.bark();

결과는 다음과 같다.

멍멍!

기본예제 6. this 사용하기

const dog = {
    name: "초코",

    introduce: function() {
        console.log("내 이름은 " + this.name + "입니다.");
    }
};

dog.introduce();

결과는 다음과 같다.

내 이름은 초코입니다.

3. 활용예제

나의 프로필 객체 만들기

이번에는 객체를 이용하여 웹페이지에 자신의 프로필을 출력하여 보자.

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>나의 프로필</title>
</head>
<body>

    <h1>나의 프로필</h1>

    <p id="name"></p>
    <p id="major"></p>
    <p id="hobby"></p>

    <button id="btn">프로필 보기</button>

    <script src="script.js"></script>

</body>
</html>

JavaScript

const student = {
    name: "김민준",
    major: "소프트웨어학과",
    hobby: "게임"
};

const button = document.querySelector("#btn");

button.addEventListener("click", function() {

    document.querySelector("#name").textContent =
        "이름: " + student.name;

    document.querySelector("#major").textContent =
        "전공: " + student.major;

    document.querySelector("#hobby").textContent =
        "취미: " + student.hobby;
});

실행 과정

사용자가 버튼을 클릭한다.

[프로필 보기]
       ↓
click 이벤트 발생
       ↓
student 객체의 정보 읽기
       ↓
name / major / hobby
       ↓
웹페이지에 출력

이 예제는 앞에서 학습한 내용을 함께 사용한다.

변수
 ↓
함수
 ↓
이벤트
 ↓
DOM
 ↓
객체

객체가 추가되면서 프로그램의 데이터를 훨씬 체계적으로 관리할 수 있게 된다.

4. 바이브코딩 종합예제

AI와 함께 만드는 「나만의 게임 캐릭터」

이번 장에서 배운 객체를 이용하여 작은 게임 캐릭터를 만들어 보자.

중요한 것은 새로운 어려운 문법을 사용하는 것이 아니라 지금까지 학습한 객체·함수·이벤트를 조합하는 것이다.

4.1 완성 프로그램

화면에는 게임 캐릭터 정보가 나타난다.

┌────────────────────────┐
│        루미           │
│                        │
│ Level : 1              │
│ HP    : 100            │
│                        │
│ [⚔️ 공격] [❤️ 회복]    │
│ [⭐ 레벨업]             │
│                        │
│ 루미가 모험을 시작합니다!│
└────────────────────────┘

버튼을 클릭하면 객체의 정보가 변경된다.

4.2 캐릭터 객체

먼저 캐릭터를 하나의 객체로 만든다.

const character = {
    name: "루미",
    level: 1,
    hp: 100
};

캐릭터가 가지고 있는 상태는 다음과 같다.

character
   ├─ name  → 루미
   ├─ level → 1
   └─ hp    → 100

4.3 HTML 작성하기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>나의 게임 캐릭터</title>
</head>

<body>

    <h1>  나의 게임 캐릭터</h1>

    <h2 id="name"></h2>

    <p id="level"></p>
    <p id="hp"></p>

    <button id="attackBtn">⚔️ 공격</button>
    <button id="healBtn">❤️ 회복</button>
    <button id="levelBtn">⭐ 레벨업</button>

    <p id="message"></p>

    <script src="script.js"></script>

</body>
</html>

4.4 JavaScript 작성하기

const character = {
    name: "루미",
    level: 1,
    hp: 100
};

const nameText = document.querySelector("#name");
const levelText = document.querySelector("#level");
const hpText = document.querySelector("#hp");
const message = document.querySelector("#message");

nameText.textContent = "  " + character.name;
levelText.textContent = "Level : " + character.level;
hpText.textContent = "HP : " + character.hp;


// 공격
document.querySelector("#attackBtn").addEventListener("click", function() {

    character.hp = character.hp - 10;

    hpText.textContent = "HP : " + character.hp;

    message.textContent =
        character.name + "가 공격하였습니다!";
});


// 회복
document.querySelector("#healBtn").addEventListener("click", function() {

    character.hp = character.hp + 10;

    hpText.textContent = "HP : " + character.hp;

    message.textContent =
        character.name + "가 체력을 회복하였습니다!";
});


// 레벨업
document.querySelector("#levelBtn").addEventListener("click", function() {

    character.level = character.level + 1;

    levelText.textContent =
        "Level : " + character.level;

    message.textContent =
        character.name + "가 레벨업하였습니다!";
});

4.5 객체의 변화 살펴보기

처음에는 다음과 같다.

character = {
    name: "루미",
    level: 1,
    hp: 100
}

공격 버튼을 누르면

character.hp = character.hp - 10;

객체의 상태가 바뀐다.

HP : 100
   ↓
HP : 90

레벨업 버튼을 누르면

character.level = character.level + 1;

다음과 같이 변경된다.

Level : 1
    ↓
Level : 2

이것이 실제 웹 애플리케이션에서 매우 중요한 개념인 상태(State)의 변화를 이해하는 첫 단계이다.

현재 화면의 정보를 객체가 가지고 있고,

사용자 행동
     ↓
이벤트 발생
     ↓
객체의 값 변경
     ↓
화면 다시 출력

이라는 흐름으로 프로그램이 동작한다.

4.6 AI를 이용한 바이브코딩

코드를 처음부터 AI에게 작성시키는 것이 아니라 현재 만든 프로그램을 기반으로 개선 아이디어를 요청하도록 한다.

예를 들어 ChatGPT와 같은 생성형 AI에 다음과 같이 요청할 수 있다.

바이브코딩 프롬프트

나는 JavaScript 초보자이다.

현재 객체, 함수, click 이벤트와
document.querySelector()까지 배웠다.

다음 캐릭터 객체를 이용하여
간단한 웹 게임을 만들고 싶다.

const character = {
    name: "루미",
    level: 1,
    hp: 100
};

아직 배우지 않은 어려운 문법은 사용하지 말고,
내가 배운 범위에서 재미있는 기능 3가지를 제안하여 줘.

각 기능은 한 단계씩 구현 방법을 설명하여 줘.

이 프롬프트에서 매우 중요한 부분은 다음 문장이다.

“아직 배우지 않은 어려운 문법은 사용하지 말고, 내가 배운 범위에서 구현하여 줘.”

학생에게는 AI가 만들어 준 코드를 그대로 복사하는 것보다, 배운 문법의 범위를 AI에게 명확하게 제한시키는 방법을 함께 교육하는 것이 좋다.

4.7 학생 미션

AI와 대화하면서 다음 중 하나를 추가하여 보자.

️ 방어 버튼
골드 획득 버튼
음식 먹기 버튼
잠자기 버튼
⚡ 마법 사용 버튼

예를 들어 골드를 추가한다면 객체를 다음과 같이 확장할 수 있다.

const character = {
    name: "루미",
    level: 1,
    hp: 100,
    gold: 0
};

버튼을 클릭할 때마다

character.gold = character.gold + 10;

으로 변경하면 된다.

이처럼 객체를 배우면 단순히 여러 변수를 관리하는 것을 넘어 웹페이지의 현재 상태를 하나의 데이터 구조로 관리하는 사고방식으로 발전할 수 있다.

5. 핵심요약

① 객체

객체는 서로 관련된 여러 데이터를 하나로 묶어 관리한다.

const student = {
    name: "김민준",
    age: 20
};

② 속성 Property

객체가 가지고 있는 데이터를 속성이라고 한다.

name: "김민준"

③ 속성 접근

점 표기법

student.name

대괄호 표기법

student["name"]

④ 속성 변경

student.age = 21;

⑤ 속성 추가

student.major = "소프트웨어학과";

⑥ 속성 삭제

delete student.age;

⑦ 메서드

객체 안에 저장된 함수는 메서드라고 한다.

const student = {

    hello: function() {
        console.log("안녕하세요.");
    }

};

student.hello();

⑧ this

객체의 메서드에서 객체 자신의 속성을 이용할 때 사용할 수 있다.

const student = {

    name: "김민준",

    hello: function() {
        console.log(this.name);
    }

};

객체 단원 전체 흐름

객체(Object)
    │
    ├── 속성(Property)
    │      ├── 읽기
    │      ├── 변경
    │      ├── 추가
    │      └── 삭제
    │
    └── 메서드(Method)
           │
           └── this

그리고 웹 프로그램에서는 다음의 흐름으로 연결된다.

객체에 데이터 저장
       ↓
사용자가 버튼 클릭
       ↓
이벤트 발생
       ↓
객체의 속성 변경
       ↓
변경된 내용을 화면에 출력

이 흐름은 이후 DOM 활용 → 배열과 객체 → 객체 배열 → JSON → 웹 데이터 처리를 이해하는 기반이 된다.

자바스크립트_함수와 이벤트 종합 바이브코딩

jsBae — Fri, 31 Jul 2026 11:29:42 +0900

기분에 따라 바뀌는 응원 카드

사용자가 자신의 기분에 해당하는 버튼을 클릭하면 배경색과 응원 문구가 변경되는 웹페이지를 만든다.

1. 완성 화면의 기능

웹페이지에는 다음 세 개의 버튼이 있다.

기분 좋아요
조금 힘들어요
피곤해요

버튼을 클릭하면 다음 내용이 변경된다.

응원 문구
카드의 배경색
이모지

2. 사용 문법

학습 내용	적용
함수	기분별 화면 변경 작업을 함수로 작성한다.
이벤트	버튼을 클릭하였을 때 함수를 실행한다.
DOM 선택	getElementById()로 HTML 요소를 가져온다.
내용 변경	textContent로 문구를 변경한다.
스타일 변경	style.backgroundColor로 색상을 변경한다.

3. HTML 작성하기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>오늘의 응원 카드</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div id="card">
        <h1 id="emoji"> </h1>
        <h2>오늘 기분은 어떤가요?</h2>

        <p id="message">
            아래 버튼을 선택하여 주세요.
        </p>

        <button id="happyButton">  기분 좋아요</button>
        <button id="sadButton">  조금 힘들어요</button>
        <button id="tiredButton">  피곤해요</button>
    </div>

    <script src="script.js"></script>
</body>
</html>

4. CSS 작성하기

body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f2f2f2;
    padding-top: 80px;
}

#card {
    width: 420px;
    margin: 0 auto;
    padding: 40px;
    background-color: white;
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

#emoji {
    font-size: 60px;
}

#message {
    font-size: 20px;
    margin: 30px 0;
}

button {
    padding: 12px 18px;
    margin: 5px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

5. JavaScript 작성하기

5.1 HTML 요소 가져오기

const card = document.getElementById("card");
const emoji = document.getElementById("emoji");
const message = document.getElementById("message");

const happyButton = document.getElementById("happyButton");
const sadButton = document.getElementById("sadButton");
const tiredButton = document.getElementById("tiredButton");

5.2 기분별 함수 만들기

function showHappyMessage() {
    emoji.textContent = " ";
    message.textContent = "좋은 기분을 주변 사람들과 나누어 보세요!";
    card.style.backgroundColor = "lightyellow";
}

function showSadMessage() {
    emoji.textContent = " ";
    message.textContent = "조금 쉬어 가도 괜찮습니다. 오늘도 충분히 잘하고 있습니다.";
    card.style.backgroundColor = "lightblue";
}

function showTiredMessage() {
    emoji.textContent = "☕";
    message.textContent = "잠시 자리에서 일어나 몸을 움직이고 물을 한 잔 마셔 보세요.";
    card.style.backgroundColor = "lavender";
}

5.3 버튼과 함수 연결하기

happyButton.addEventListener("click", showHappyMessage);
sadButton.addEventListener("click", showSadMessage);
tiredButton.addEventListener("click", showTiredMessage);

6. 전체 JavaScript 코드

const card = document.getElementById("card");
const emoji = document.getElementById("emoji");
const message = document.getElementById("message");

const happyButton = document.getElementById("happyButton");
const sadButton = document.getElementById("sadButton");
const tiredButton = document.getElementById("tiredButton");

function showHappyMessage() {
    emoji.textContent = " ";
    message.textContent = "좋은 기분을 주변 사람들과 나누어 보세요!";
    card.style.backgroundColor = "lightyellow";
}

function showSadMessage() {
    emoji.textContent = " ";
    message.textContent = "조금 쉬어 가도 괜찮습니다. 오늘도 충분히 잘하고 있습니다.";
    card.style.backgroundColor = "lightblue";
}

function showTiredMessage() {
    emoji.textContent = "☕";
    message.textContent = "잠시 자리에서 일어나 몸을 움직이고 물을 한 잔 마셔 보세요.";
    card.style.backgroundColor = "lavender";
}

happyButton.addEventListener("click", showHappyMessage);
sadButton.addEventListener("click", showSadMessage);
tiredButton.addEventListener("click", showTiredMessage);

7. 바이브코딩 진행 방법

1단계: 먼저 직접 작성하기

기본 예제를 직접 입력하여 함수와 이벤트의 작동 원리를 확인한다.

function showHappyMessage() {
    message.textContent = "오늘도 좋은 하루입니다.";
}

이 과정에서는 AI를 사용하기 전에 다음 내용을 이해하여야 한다.

함수가 언제 실행되는가?
클릭 이벤트는 어디에서 발생하는가?
어떤 HTML 요소의 내용이 변경되는가?
함수 이름 뒤에 괄호를 붙이지 않는 이유는 무엇인가?

2단계: AI에 기능 확장 요청하기

다음과 같은 프롬프트를 사용할 수 있다.

HTML, CSS, JavaScript로 기분에 따라 응원 메시지와 배경색이 변경되는 응원 카드를 만들어 줘. JavaScript 초보자 예제이므로 함수, getElementById, textContent, style, click 이벤트와 addEventListener만 사용하여 줘. 배열, 반복문, 클래스는 사용하지 말아 줘.

이 프롬프트에서 중요한 부분은 사용할 문법과 사용하지 않을 문법을 명확하게 제한하는 것이다.

3단계: AI 코드 분석하기

AI가 생성한 코드를 그대로 제출하지 않고 다음 항목을 확인한다.

항목	질문
HTML 요소	버튼과 메시지 영역의 id는 무엇인가?
함수	각 함수는 어떤 작업을 수행하는가?
이벤트	어떤 이벤트가 사용되었는가?
함수 연결	이벤트와 함수는 어디에서 연결되는가?
화면 변화	어떤 속성을 이용하여 글자와 색상을 변경하는가?

4단계: 학생이 직접 수정하기

학생은 AI가 생성한 결과에서 최소 세 가지를 직접 변경한다.

응원 문구 변경하기
배경색 변경하기
새로운 기분 버튼 하나 추가하기

예를 들어 화가 나요 버튼을 추가할 수 있다.

<button id="angryButton">  화가 나요</button>

const angryButton = document.getElementById("angryButton");

function showAngryMessage() {
    emoji.textContent = " ";
    message.textContent = "잠시 깊게 숨을 쉬고 천천히 마음을 정리하여 보세요.";
    card.style.backgroundColor = "mistyrose";
}

angryButton.addEventListener("click", showAngryMessage);

8. 응용 과제

과제: 나만의 감정 반응 카드 만들기

다음 조건을 만족하는 웹페이지를 제작한다.

필수 조건

버튼을 세 개 이상 만든다.
버튼마다 서로 다른 함수를 연결한다.
버튼을 클릭하면 문구가 변경된다.
버튼을 클릭하면 배경색이 변경된다.
addEventListener()를 사용한다.

선택 조건

이모지를 변경한다.
글자색을 변경한다.
버튼을 하나 더 추가한다.
카드 제목을 변경한다.

함수와 이벤트

jsBae — Fri, 31 Jul 2026 11:28:26 +0900

1. 학습 목표

이 장을 학습하면 다음 내용을 이해할 수 있다.

함수가 필요한 이유를 설명할 수 있다.
함수를 선언하고 호출할 수 있다.
매개변수와 반환값을 사용할 수 있다.
이벤트의 의미를 설명할 수 있다.
버튼 클릭과 같은 이벤트가 발생하였을 때 함수를 실행할 수 있다.
HTML 요소와 JavaScript 함수를 연결할 수 있다.

2. 함수란 무엇인가

2.1 함수의 기본 개념

함수는 특정 작업을 수행하도록 여러 명령문을 하나로 묶은 코드 블록이다.

예를 들어 자판기의 버튼을 누르면 다음 과정이 실행된다.

사용자가 음료 버튼을 누른다.
자판기가 돈이 충분한지 확인한다.
선택한 음료를 내보낸다.
필요한 경우 거스름돈을 반환한다.

이러한 일련의 작업을 하나로 묶어 놓은 것이 함수와 비슷하다.

function 음료꺼내기() {
    console.log("음료를 내보냅니다.");
}

함수는 정의만 하여서는 실행되지 않는다. 함수를 실행하려면 함수의 이름을 사용하여 호출하여야 한다.

음료꺼내기();

2.2 함수가 필요한 이유

다음 코드는 같은 문장을 세 번 출력한다.

console.log("안녕하세요.");
console.log("안녕하세요.");
console.log("안녕하세요.");

같은 작업을 반복하여 작성하면 코드가 길어지고 수정하기도 어렵다. 함수를 사용하면 다음과 같이 정리할 수 있다.

function 인사하기() {
    console.log("안녕하세요.");
}

인사하기();
인사하기();
인사하기();

실행 결과는 다음과 같다.

안녕하세요.
안녕하세요.
안녕하세요.

함수를 사용하는 주요 이유는 다음과 같다

요소	설명
반복 사용	같은 코드를 여러 번 사용할 수 있다.
코드 정리	관련된 작업을 하나로 묶을 수 있다.
수정 편리	함수 내부만 수정하면 모든 호출에 반영된다.
오류 감소	같은 코드를 반복 작성하면서 발생하는 실수를 줄일 수 있다.
가독성 향상	함수 이름을 통하여 코드의 목적을 쉽게 알 수 있다.

3. 함수 선언과 호출

3.1 함수 선언

함수를 만드는 것을 함수 선언이라고 한다.

function 함수이름() {
    실행할 코드;
}

각 부분의 의미는 다음과 같다.

구성	의미
function	함수를 선언하는 키워드이다.
함수이름	함수를 구분하기 위한 이름이다.
()	함수에 필요한 값을 전달받는 부분이다.
{}	함수가 수행할 코드를 작성하는 영역이다.

예제를 살펴보자.

function sayHello() {
    console.log("안녕하세요.");
}

이 코드는 sayHello라는 함수를 만든 것이다. 아직 함수가 실행된 것은 아니다.

3.2 함수 호출

만들어 놓은 함수를 실행하는 것을 함수 호출이라고 한다.

sayHello();

전체 코드는 다음과 같다.

function sayHello() {
    console.log("안녕하세요.");
}

sayHello();

실행 순서는 다음과 같다.

JavaScript가 sayHello 함수를 확인한다.
sayHello()를 만나면 함수 내부로 이동한다.
console.log("안녕하세요.")를 실행한다.
함수 실행이 끝나면 호출한 위치로 돌아온다.

실행 결과는 다음과 같다.

안녕하세요.

4. 함수 이름 작성 방법

함수 이름은 함수가 하는 일을 알 수 있도록 작성하는 것이 좋다.

function showMessage() {
    console.log("메시지를 출력합니다.");
}

다음과 같은 이름은 함수의 목적을 이해하기 어렵다.

function a() {
    console.log("메시지를 출력합니다.");
}

JavaScript에서는 함수 이름에 주로 동사를 사용한다.

function showMessage() {}
function calculateTotal() {}
function changeColor() {}
function printResult() {}
function checkPassword() {}

여러 단어를 연결할 때는 두 번째 단어부터 첫 글자를 대문자로 작성하는 카멜 표기법을 주로 사용한다.

showMessage
changeBackgroundColor
calculateTotalPrice

5. 매개변수가 있는 함수

5.1 매개변수의 개념

함수를 실행할 때마다 다른 값을 사용하고 싶다면 매개변수를 사용한다.

다음 함수는 항상 같은 이름만 출력한다.

function greet() {
    console.log("민수님, 안녕하세요.");
}

여러 사람의 이름을 출력하려면 매개변수를 사용한다.

function greet(name) {
    console.log(name + "님, 안녕하세요.");
}

함수를 호출할 때 이름을 전달한다.

greet("민수");
greet("영희");
greet("지수");

실행 결과는 다음과 같다.

민수님, 안녕하세요.
영희님, 안녕하세요.
지수님, 안녕하세요.

여기에서 name은 매개변수이고 "민수"는 인수이다.

용어	설명
매개변수	함수가 값을 전달받기 위하여 선언한 변수이다.
인수	함수를 호출할 때 실제로 전달하는 값이다.

function greet(name) {
    //             ↑ 매개변수
    console.log(name + "님, 안녕하세요.");
}

greet("민수");
//    ↑ 인수

5.2 두 개의 매개변수 사용하기

함수는 여러 개의 값을 전달받을 수 있다.

function addNumber(a, b) {
    console.log(a + b);
}

addNumber(10, 20);

실행 결과는 다음과 같다.

실행 과정은 다음과 같다.

addNumber(10, 20)을 호출한다.
첫 번째 값 10이 매개변수 a에 저장된다.
두 번째 값 20이 매개변수 b에 저장된다.
a + b를 계산한다.
계산 결과 30을 출력한다.

다른 값을 전달하면 결과도 달라진다.

addNumber(3, 5);
addNumber(100, 200);

실행 결과는 다음과 같다.

8
300

6. 반환값이 있는 함수

6.1 반환값의 개념

함수에서 계산한 결과를 함수 밖으로 전달하려면 return을 사용한다.

function addNumber(a, b) {
    return a + b;
}

함수가 반환한 값은 변수에 저장할 수 있다.

let result = addNumber(10, 20);

console.log(result);

실행 결과는 다음과 같다.

6.2 출력과 반환의 차이

다음 함수는 결과를 화면에 출력한다.

function addNumber(a, b) {
    console.log(a + b);
}

이 함수는 결과를 출력할 뿐, 계산 결과를 다른 코드에서 사용하기 어렵다.

반면 return을 사용하면 결과를 변수에 저장하거나 다른 계산에 사용할 수 있다.

function addNumber(a, b) {
    return a + b;
}

let result = addNumber(10, 20);

console.log(result);
console.log(result * 2);

실행 결과는 다음과 같다.

30
60

return을 만나면 함수의 실행은 즉시 종료된다.

function test() {
    console.log("첫 번째 문장");
    return;
    console.log("두 번째 문장");
}

test();

실행 결과는 다음과 같다.

첫 번째 문장

return 다음에 작성된 코드는 실행되지 않는다.

7. 이벤트란 무엇인가

7.1 이벤트의 기본 개념

이벤트는 웹페이지에서 사용자의 행동이나 브라우저의 상태 변화로 발생하는 사건이다.

대표적인 이벤트는 다음과 같다.

이벤트	상황
click	요소를 클릭하였을 때
dblclick	요소를 두 번 클릭하였을 때
mouseover	마우스 포인터를 요소 위에 올렸을 때
mouseout	마우스 포인터가 요소 밖으로 나갔을 때
keydown	키보드의 키를 눌렀을 때
keyup	눌렀던 키에서 손을 뗐을 때
input	입력 내용이 변경되었을 때
change	선택값이나 입력값이 변경되었을 때
submit	폼을 제출하였을 때
load	웹페이지나 이미지의 로딩이 끝났을 때

예를 들어 사용자가 버튼을 클릭하면 click 이벤트가 발생한다.

사용자 버튼 클릭
        ↓
click 이벤트 발생
        ↓
연결된 함수 실행
        ↓
화면 내용 변경

8. 함수와 이벤트의 관계

함수와 이벤트는 서로 다른 개념이다.

함수는 실행할 작업을 정의한 코드이다.
이벤트는 특정 행동이나 변화가 발생한 상황이다.

그러나 웹페이지에서는 이벤트가 발생하였을 때 함수를 실행하도록 연결하는 경우가 많다.

이벤트 발생 → 함수 호출 → 코드 실행

예를 들어 다음과 같이 구성할 수 있다.

사용자가 버튼을 클릭한다.
click 이벤트가 발생한다.
showMessage 함수가 실행된다.
화면에 메시지가 표시된다.

9. 첫 번째 이벤트 예제: 버튼 클릭하기

9.1 HTML 작성

먼저 버튼과 문장을 작성한다.

<button id="messageButton">클릭하세요</button>
<p id="message">여기에 메시지가 표시됩니다.</p>

전체 HTML 문서는 다음과 같다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>함수와 이벤트</title>
</head>
<body>
    <button id="messageButton">클릭하세요</button>
    <p id="message">여기에 메시지가 표시됩니다.</p>

    <script src="script.js"></script>
</body>
</html>

9.2 HTML 요소 가져오기

JavaScript에서 HTML 요소를 사용하려면 document.getElementById()를 사용한다.

const button = document.getElementById("messageButton");
const message = document.getElementById("message");

이 코드는 HTML에서 다음 요소를 가져온다.

<button id="messageButton">클릭하세요</button>
<p id="message">여기에 메시지가 표시됩니다.</p>

id 값은 HTML 문서에서 요소를 구분하는 이름이다.

9.3 실행할 함수 만들기

function showMessage() {
    message.textContent = "버튼을 클릭하였습니다.";
}

textContent는 HTML 요소의 글자를 변경하는 속성이다.

9.4 이벤트와 함수 연결하기

addEventListener()를 사용하여 이벤트와 함수를 연결한다.

button.addEventListener("click", showMessage);

각 부분의 의미는 다음과 같다.

button.addEventListener("click", showMessage);

부분	의미
button	이벤트를 적용할 HTML 요소이다.
addEventListener	이벤트를 등록하는 메서드이다.
"click"	감지할 이벤트 종류이다.
showMessage	이벤트 발생 시 실행할 함수이다.

9.5 전체 JavaScript 코드

const button = document.getElementById("messageButton");
const message = document.getElementById("message");

function showMessage() {
    message.textContent = "버튼을 클릭하였습니다.";
}

button.addEventListener("click", showMessage);

전체 실행 순서는 다음과 같다.

JavaScript가 버튼 요소를 가져온다.
문장을 표시할 <p> 요소를 가져온다.
showMessage 함수를 선언한다.
버튼에 click 이벤트를 등록한다.
사용자가 버튼을 클릭한다.
showMessage 함수가 실행된다.
문장의 내용이 변경된다.

10. 함수 호출 시 주의점

이벤트에 함수를 연결할 때는 함수 이름 뒤에 괄호를 붙이지 않는다.

올바른 코드이다.

button.addEventListener("click", showMessage);

잘못 작성하기 쉬운 코드이다.

button.addEventListener("click", showMessage());

showMessage()라고 작성하면 버튼을 클릭하기 전부터 함수가 즉시 실행된다.

11. 두 번째 이벤트 예제: 배경색 변경하기

11.1 HTML 코드

<button id="colorButton">배경색 변경</button>

11.2 JavaScript 코드

const colorButton = document.getElementById("colorButton");

function changeBackgroundColor() {
    document.body.style.backgroundColor = "lightblue";
}

colorButton.addEventListener("click", changeBackgroundColor);

실행 과정은 다음과 같다.

사용자가 배경색 변경 버튼을 클릭한다.
click 이벤트가 발생한다.
changeBackgroundColor 함수가 실행된다.
웹페이지의 배경색이 하늘색으로 변경된다.

12. 세 번째 이벤트 예제: 숫자 증가시키기

12.1 HTML 코드

<h2 id="number">0</h2>
<button id="increaseButton">1 증가</button>

12.2 JavaScript 코드

const number = document.getElementById("number");
const increaseButton = document.getElementById("increaseButton");

let count = 0;

function increaseNumber() {
    count = count + 1;
    number.textContent = count;
}

increaseButton.addEventListener("click", increaseNumber);

실행 과정은 다음과 같다.

count 변수의 초기값은 0이다.
사용자가 버튼을 클릭한다.
increaseNumber 함수가 실행된다.
count 값이 1 증가한다.
증가한 값을 <h2> 요소에 표시한다.

버튼을 세 번 클릭하면 다음과 같이 값이 변경된다.

0 → 1 → 2 → 3

count = count + 1은 다음과 같이 줄여 쓸 수 있다.

count++;

따라서 함수는 다음과 같이 작성할 수도 있다.

function increaseNumber() {
    count++;
    number.textContent = count;
}

13. 네 번째 이벤트 예제: 입력한 이름으로 인사하기

13.1 HTML 코드

<input type="text" id="nameInput" placeholder="이름을 입력하세요">
<button id="greetButton">인사하기</button>
<p id="greeting"></p>

13.2 JavaScript 코드

const nameInput = document.getElementById("nameInput");
const greetButton = document.getElementById("greetButton");
const greeting = document.getElementById("greeting");

function greetUser() {
    const userName = nameInput.value;
    greeting.textContent = userName + "님, 반갑습니다.";
}

greetButton.addEventListener("click", greetUser);

value는 입력 상자에 사용자가 입력한 값을 가져오는 속성이다.

사용자가 입력 상자에 민수를 입력하고 버튼을 클릭하면 다음 문장이 표시된다.

민수님, 반갑습니다.

13.3 입력값 검사하기

사용자가 이름을 입력하지 않고 버튼을 클릭할 수도 있다. 이 경우 조건문을 사용하여 입력값을 검사한다.

function greetUser() {
    const userName = nameInput.value;

    if (userName === "") {
        greeting.textContent = "이름을 입력하여 주세요.";
    } else {
        greeting.textContent = userName + "님, 반갑습니다.";
    }
}

전체 코드는 다음과 같다.

const nameInput = document.getElementById("nameInput");
const greetButton = document.getElementById("greetButton");
const greeting = document.getElementById("greeting");

function greetUser() {
    const userName = nameInput.value;

    if (userName === "") {
        greeting.textContent = "이름을 입력하여 주세요.";
    } else {
        greeting.textContent = userName + "님, 반갑습니다.";
    }
}

greetButton.addEventListener("click", greetUser);

14. 다섯 번째 이벤트 예제: 마우스를 올리면 글자 변경하기

14.1 HTML 코드

<div id="box">마우스를 올려 보세요.</div>

14.2 JavaScript 코드

const box = document.getElementById("box");

function changeText() {
    box.textContent = "마우스가 올라왔습니다.";
}

box.addEventListener("mouseover", changeText);

사용자가 요소 위에 마우스를 올리면 mouseover 이벤트가 발생한다.

마우스가 요소 밖으로 나갔을 때 원래 문장으로 되돌리려면 mouseout 이벤트를 사용한다.

function resetText() {
    box.textContent = "마우스를 올려 보세요.";
}

box.addEventListener("mouseout", resetText);

전체 코드는 다음과 같다.

const box = document.getElementById("box");

function changeText() {
    box.textContent = "마우스가 올라왔습니다.";
}

function resetText() {
    box.textContent = "마우스를 올려 보세요.";
}

box.addEventListener("mouseover", changeText);
box.addEventListener("mouseout", resetText);

15. 여섯 번째 이벤트 예제: 실시간 글자 수 확인하기

15.1 HTML 코드

<textarea id="textInput" placeholder="내용을 입력하세요"></textarea>
<p>글자 수: <span id="count">0</span></p>

15.2 JavaScript 코드

const textInput = document.getElementById("textInput");
const count = document.getElementById("count");

function countCharacters() {
    count.textContent = textInput.value.length;
}

textInput.addEventListener("input", countCharacters);

input 이벤트는 사용자가 입력 내용을 변경할 때마다 발생한다.

length는 문자열의 글자 수를 구하는 속성이다.

실행 과정은 다음과 같다.

사용자가 입력 상자에 글자를 입력한다.
input 이벤트가 발생한다.
countCharacters 함수가 실행된다.
입력값의 글자 수를 계산한다.
계산된 글자 수를 화면에 표시한다.

16. 익명 함수로 이벤트 처리하기

함수를 별도로 선언하지 않고 addEventListener() 안에 직접 작성할 수도 있다.

const button = document.getElementById("messageButton");

button.addEventListener("click", function () {
    console.log("버튼을 클릭하였습니다.");
});

이름이 없는 함수를 익명 함수라고 한다.

두 코드는 같은 역할을 수행한다.

이름이 있는 함수

function showMessage() {
    console.log("버튼을 클릭하였습니다.");
}

button.addEventListener("click", showMessage);

익명 함수

button.addEventListener("click", function () {
    console.log("버튼을 클릭하였습니다.");
});

초보자는 먼저 이름이 있는 함수를 사용하여 함수와 이벤트의 관계를 이해하는 것이 좋다.

17. 화살표 함수로 이벤트 처리하기

JavaScript에서는 화살표 함수를 사용할 수도 있다.

button.addEventListener("click", () => {
    console.log("버튼을 클릭하였습니다.");
});

다음 두 코드는 유사한 역할을 한다.

function () {
    console.log("클릭");
}

() => {
    console.log("클릭");
}

초보 단계에서는 일반 함수 문법을 먼저 익힌 후 화살표 함수를 학습하는 것이 이해하기 쉽다.

18. 종합 예제: 간단한 계산기

18.1 HTML 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>간단한 계산기</title>
</head>
<body>
    <h1>두 수 더하기</h1>

    <input type="number" id="number1" placeholder="첫 번째 수">
    <input type="number" id="number2" placeholder="두 번째 수">

    <button id="addButton">더하기</button>

    <p>결과: <span id="result">0</span></p>

    <script src="script.js"></script>
</body>
</html>

18.2 JavaScript 코드

const number1 = document.getElementById("number1");
const number2 = document.getElementById("number2");
const addButton = document.getElementById("addButton");
const result = document.getElementById("result");

function addNumbers() {
    const value1 = Number(number1.value);
    const value2 = Number(number2.value);

    const sum = value1 + value2;

    result.textContent = sum;
}

addButton.addEventListener("click", addNumbers);

18.3 코드 실행 순서

1단계: HTML 요소 가져오기

const number1 = document.getElementById("number1");
const number2 = document.getElementById("number2");
const addButton = document.getElementById("addButton");
const result = document.getElementById("result");

입력 상자, 버튼, 결과 표시 영역을 JavaScript로 가져온다.

2단계: 함수 선언하기

function addNumbers() {

두 수를 더하는 함수를 선언한다.

3단계: 입력값 가져오기

const value1 = Number(number1.value);
const value2 = Number(number2.value);

입력 상자의 값은 기본적으로 문자열이다. 따라서 Number()를 사용하여 숫자로 변환한다.예를 들어 문자열을 그대로 더하면 다음과 같은 결과가 나타날 수 있다.

"10" + "20"

결과는 숫자 30이 아니라 문자열 "1020"이다.

숫자로 변환하면 정상적인 덧셈이 수행된다.

Number("10") + Number("20")

결과는 다음과 같다.

4단계: 덧셈 계산하기

const sum = value1 + value2;

두 수를 더하여 sum 변수에 저장한다.

5단계: 결과 출력하기

result.textContent = sum;

계산 결과를 화면에 표시한다.

6단계: 이벤트 등록하기

addButton.addEventListener("click", addNumbers);

사용자가 버튼을 클릭하면 addNumbers 함수가 실행된다.

19. 함수와 이벤트의 핵심 구조

초보자는 다음 구조를 기억하면 된다.

19.1 HTML 요소 가져오기

const button = document.getElementById("button");

19.2 실행할 함수 만들기

function 실행할함수() {
    console.log("함수가 실행되었습니다.");
}

19.3 이벤트와 함수 연결하기

button.addEventListener("click", 실행할함수);

전체 구조는 다음과 같다.

const 요소 = document.getElementById("아이디");

function 함수이름() {
    실행할 코드;
}

요소.addEventListener("이벤트종류", 함수이름);

20. 자주 발생하는 오류

20.1 HTML의 id와 JavaScript의 이름이 다른 경우

HTML은 다음과 같다.

<button id="messageButton">클릭</button>

JavaScript에서 다른 이름을 사용하면 요소를 찾지 못한다.

const button = document.getElementById("messageBtn");

올바르게 작성하여야 한다.

const button = document.getElementById("messageButton");

20.2 함수 이름 뒤에 괄호를 작성한 경우

잘못된 예이다.

button.addEventListener("click", showMessage());

올바른 예이다.

button.addEventListener("click", showMessage);

20.3 <script> 위치가 잘못된 경우

JavaScript가 HTML 요소보다 먼저 실행되면 요소를 찾지 못할 수 있다.

다음과 같이 <body>의 마지막 부분에 <script>를 작성하는 것이 초보자에게 안전하다.

<body>
    <button id="button">클릭</button>

    <script src="script.js"></script>
</body>

20.4 문자열을 숫자로 변환하지 않은 경우

const number1 = "10";
const number2 = "20";

console.log(number1 + number2);

실행 결과는 다음과 같다.

숫자로 계산하려면 Number()를 사용한다.

console.log(Number(number1) + Number(number2));

실행 결과는 다음과 같다.

20.5 브라우저 기능을 Node.js에서 실행한 경우

다음 객체와 함수는 웹브라우저에서 사용하는 기능이다.

document
alert()
window

따라서 다음 코드는 일반적인 Node.js 실행 환경에서는 오류가 발생한다.

alert("안녕하세요.");

브라우저에서는 사용할 수 있다.

<script>
    alert("안녕하세요.");
</script>

Node.js에서 결과를 확인하려면 console.log()를 사용하는 것이 적절하다.

console.log("안녕하세요.");

21. 핵심 정리

21.1 함수

함수는 여러 명령문을 하나로 묶어 필요할 때 실행하는 코드이다.

function sayHello() {
    console.log("안녕하세요.");
}

sayHello();

21.2 매개변수

매개변수는 함수에 값을 전달할 때 사용한다.

function greet(name) {
    console.log(name + "님, 안녕하세요.");
}

greet("민수");

21.3 반환값

return은 함수의 처리 결과를 함수 밖으로 전달한다.

function add(a, b) {
    return a + b;
}

const result = add(10, 20);

21.4 이벤트

이벤트는 클릭, 키보드 입력, 마우스 이동과 같이 웹페이지에서 발생하는 사건이다.

button.addEventListener("click", showMessage);

21.5 함수와 이벤트

이벤트가 발생하면 연결된 함수가 실행된다.

사용자 행동 → 이벤트 발생 → 함수 실행 → 화면 변경

22. 실습 문제

실습 1. 버튼을 클릭하면 인사말 출력하기

다음 조건을 만족하도록 작성한다.

버튼의 글자는 인사하기로 작성한다.
버튼을 클릭하면 안녕하세요. JavaScript입니다.를 출력한다.

<button id="helloButton">인사하기</button>
<p id="helloMessage"></p>

const helloButton = document.getElementById("helloButton");
const helloMessage = document.getElementById("helloMessage");

function showHello() {
    helloMessage.textContent = "안녕하세요. JavaScript입니다.";
}

helloButton.addEventListener("click", showHello);

실습 2. 버튼을 클릭하면 숫자 감소시키기

<h2 id="number">10</h2>
<button id="decreaseButton">1 감소</button>

const number = document.getElementById("number");
const decreaseButton = document.getElementById("decreaseButton");

let count = 10;

function decreaseNumber() {
    count--;
    number.textContent = count;
}

decreaseButton.addEventListener("click", decreaseNumber);

실습 3. 버튼을 클릭하면 글자색 변경하기

<p id="text">색상이 변경되는 문장입니다.</p>
<button id="colorButton">색상 변경</button>

const text = document.getElementById("text");
const colorButton = document.getElementById("colorButton");

function changeTextColor() {
    text.style.color = "blue";
}

colorButton.addEventListener("click", changeTextColor);

자바스크립트 반복문

jsBae — Sat, 4 Jul 2026 20:15:06 +0900

제9장 자바스크립트 반복문

9.1 반복문과 제어 흐름의 이해

프로그램은 기본적으로 위에서 아래로, 왼쪽에서 오른쪽으로 실행된다. 이러한 실행 순서를 제어 흐름(control flow)이라고 한다. 자바스크립트에서 제어 흐름은 조건문(condition statement), 반복문(loop statement), 점프문(jump statement)을 통해 바뀔 수 있다. 조건문은 실행 경로를 선택하고, 반복문은 같은 작업을 여러 번 수행하며, 점프문은 실행 흐름을 중간에 멈추거나 다른 위치로 이동시킨다.

반복문(loop)은 같은 코드 블록(code block)을 여러 번 실행하기 위한 문법이다. 웹 페이지에서 목록을 출력하거나, 배열(array)에 저장된 데이터를 하나씩 처리하거나, 특정 조건이 만족될 때까지 작업을 반복할 때 사용된다. 반복문은 “같은 작업을 몇 번 수행할 것인가” 또는 “어떤 조건이 유지되는 동안 작업을 계속할 것인가”를 표현하는 구조이다.

반복문을 이해할 때에는 세 가지 질문이 중요하다.

첫째, 반복은 어디에서 시작하는가.
둘째, 반복은 언제까지 계속되는가.
셋째, 반복할 때마다 값은 어떻게 변하는가.

이 세 가지 질문에 답할 수 있으면 대부분의 반복문 구조를 이해할 수 있다.

9.2 for 반복문

for 반복문은 반복 횟수가 비교적 분명할 때 많이 사용한다. 예를 들어 1부터 10까지 출력하거나, 배열의 첫 번째 요소부터 마지막 요소까지 순서대로 처리할 때 적합하다.

for 문은 세 개의 표현식(expression)을 사용하여 반복을 제어한다. 첫 번째 표현식은 반복이 시작되기 전에 한 번 실행되고, 두 번째 표현식은 반복을 계속할 조건을 나타내며, 세 번째 표현식은 코드 블록이 실행된 뒤 매번 실행된다.

for (초기식; 조건식; 증감식) {
  // 반복하여 실행할 코드
}

예를 들어 1부터 5까지 출력하는 코드는 다음과 같다.

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

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

let i = 1은 반복을 시작하기 위한 초기값이다. 변수 i는 1에서 시작한다.
i <= 5는 반복을 계속할 조건이다. i가 5 이하이면 코드 블록이 실행된다.
i++는 반복이 한 번 끝날 때마다 i를 1씩 증가시키는 증감식이다.

따라서 실행 결과는 다음과 같다.

for 반복문은 구조가 한 줄에 모여 있기 때문에 반복의 시작, 조건, 변화 과정을 한눈에 파악하기 쉽다. 반복 횟수가 정해져 있거나 배열의 인덱스(index)를 순서대로 처리할 때 특히 유용하다.

9.3 배열과 for 반복문

배열(array)은 여러 개의 값을 하나의 변수에 저장하는 자료구조이다. 반복문은 배열과 함께 사용할 때 매우 효과적이다. 배열의 각 요소를 하나씩 꺼내어 출력하거나 계산할 수 있기 때문이다.

const fruits = ["사과", "바나나", "딸기", "포도"];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

배열의 인덱스는 0부터 시작한다. 따라서 fruits[0]은 "사과"이고, fruits[1]은 "바나나"이다. fruits.length는 배열에 들어 있는 요소의 개수를 의미한다. 위 예제에서 fruits.length는 4이다.

반복 조건을 i < fruits.length로 작성하면 배열의 마지막 요소까지 안전하게 접근할 수 있다. 만약 i <= fruits.length로 작성하면 존재하지 않는 인덱스까지 접근하게 되므로 undefined가 출력될 수 있다.

9.4 for 반복문의 실행 흐름

다음 코드를 살펴보자.

let total = 0;

for (let i = 1; i <= 5; i++) {
  total = total + i;
}

console.log(total);

이 코드는 1부터 5까지의 합을 구한다. 변수 total은 누적 합계를 저장하는 변수이다.

실행 흐름은 다음과 같다.

처음에 total은 0이다.
i가 1일 때 total = 0 + 1이 되어 1이 된다.
i가 2일 때 total = 1 + 2가 되어 3이 된다.
i가 3일 때 total = 3 + 3이 되어 6이 된다.
i가 4일 때 total = 6 + 4가 되어 10이 된다.
i가 5일 때 total = 10 + 5가 되어 15가 된다.
그다음 i가 6이 되면 i <= 5 조건이 거짓이므로 반복문이 종료된다.

따라서 최종 출력값은 다음과 같다.

이처럼 반복문은 단순 출력뿐 아니라 누적 계산, 개수 세기, 조건에 맞는 값 찾기 등 다양한 작업의 기본 구조가 된다.

9.5 while 반복문

while 반복문은 조건이 참(true)인 동안 코드 블록을 계속 실행한다. for 반복문이 반복 횟수를 중심으로 작성되는 경우가 많다면, while 반복문은 조건의 유지 여부를 중심으로 작성된다.

while (조건식) {
  // 조건식이 true인 동안 실행할 코드
}

예를 들어 1부터 5까지 출력하는 코드를 while 문으로 작성하면 다음과 같다.

let i = 1;

while (i <= 5) {
  console.log(i);
  i++;
}

이 코드는 for 반복문과 동일하게 1부터 5까지 출력한다. 다만 초기값 let i = 1은 반복문 바깥에 있고, 증감식 i++는 반복문 내부에 있다.

while 반복문에서는 조건식에 사용되는 값이 반복 과정에서 반드시 변하여야 한다. 그렇지 않으면 조건이 계속 참으로 남아 무한 반복(infinite loop)이 발생할 수 있다. 조건에 사용되는 변수를 증가시키거나 감소시키지 않으면 반복문이 끝나지 않을 수 있으며, 브라우저 실행 환경에서는 페이지가 멈추는 문제가 생길 수 있다.

다음 코드는 잘못된 예이다.

let i = 1;

while (i <= 5) {
  console.log(i);
}

위 코드는 i++가 없기 때문에 i가 계속 1이다. 조건식 i <= 5는 계속 참이므로 반복문이 끝나지 않는다.

올바른 코드는 다음과 같다.

let i = 1;

while (i <= 5) {
  console.log(i);
  i++;
}

9.6 do...while 반복문

do...while 반복문은 조건을 검사하기 전에 코드 블록을 먼저 한 번 실행한다. 그 뒤 조건식을 검사하여 조건이 참이면 반복을 계속한다. 따라서 조건이 처음부터 거짓이어도 코드 블록은 최소 한 번 실행된다.

do {
  // 먼저 한 번 실행할 코드
} while (조건식);

예제는 다음과 같다.

let i = 10;

do {
  console.log(i);
  i++;
} while (i <= 5);

위 코드에서 i는 처음부터 10이다. 조건식 i <= 5는 거짓이다. 그러나 do...while 문은 조건을 검사하기 전에 코드 블록을 먼저 실행하므로 10이 한 번 출력된다. 그 후 조건을 검사하고 반복을 종료한다.

실행 결과는 다음과 같다.

do...while 문은 사용자 입력을 최소 한 번 받아야 하거나, 메뉴를 한 번 이상 보여 준 뒤 계속 여부를 판단하는 구조에 적합하다. 다만 초급 단계에서는 for와 while을 먼저 충분히 익힌 뒤 do...while을 비교하여 이해하는 것이 좋다.

9.7 for와 while의 비교

for 반복문과 while 반복문은 모두 조건이 참인 동안 코드를 반복한다. 두 문법은 서로 바꾸어 작성할 수 있는 경우가 많다. while 문은 for 문에서 초기식과 증감식이 반복문 바깥 또는 내부로 분리된 형태로 이해할 수 있다.

다음 두 코드는 같은 결과를 출력한다.

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

let i = 1;

while (i <= 5) {
  console.log(i);
  i++;
}

반복 횟수가 분명하면 for 문이 적합하다. 조건이 언제 거짓이 될지 반복 과정에서 결정된다면 while 문이 적합하다.

예를 들어 배열의 모든 요소를 순서대로 처리할 때에는 for 문을 쓰기 쉽다.

const scores = [80, 90, 75, 100];

for (let i = 0; i < scores.length; i++) {
  console.log(scores[i]);
}

반면 특정 조건이 만족될 때까지 반복할 때에는 while 문이 자연스럽다.

let count = 0;

while (count < 3) {
  console.log("버튼 클릭 대기 중");
  count++;
}

9.8 break 문

break 문은 반복문을 즉시 종료할 때 사용한다. 반복문 안에서 break가 실행되면 더 이상 반복을 계속하지 않고, 반복문 다음 문장으로 실행 흐름이 이동한다. break 문은 반복문과 switch 문에서 사용할 수 있다.

for (let i = 1; i <= 10; i++) {
  if (i === 4) {
    break;
  }

  console.log(i);
}

실행 결과는 다음과 같다.

1
2
3

i가 4가 되는 순간 break 문이 실행된다. 이때 반복문은 즉시 종료된다. 따라서 4는 출력되지 않고, 5부터 10까지도 출력되지 않는다.

break 문은 “더 이상 반복할 필요가 없을 때” 사용한다. 예를 들어 배열에서 원하는 값을 찾은 뒤 반복을 멈출 수 있다.

const names = ["민수", "지영", "현우", "서연"];
let target = "현우";

for (let i = 0; i < names.length; i++) {
  if (names[i] === target) {
    console.log(target + "를 찾았다.");
    break;
  }
}

위 코드는 "현우"를 찾는 순간 반복을 멈춘다. 이미 원하는 값을 찾았으므로 남은 요소를 계속 검사할 필요가 없다.

9.9 continue 문

continue 문은 현재 반복 회차(iteration)를 건너뛰고 다음 반복으로 이동할 때 사용한다. break가 반복문 전체를 종료하는 문법이라면, continue는 현재 반복만 건너뛴다.

for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    continue;
  }

  console.log(i);
}

실행 결과는 다음과 같다.

i가 3일 때 continue 문이 실행된다. 이때 console.log(i)는 실행되지 않고 다음 반복으로 넘어간다. 따라서 3은 출력되지 않는다.

continue 문은 특정 조건에 해당하는 값만 제외하고 나머지를 처리할 때 유용하다.

const scores = [90, 0, 85, 100, 0, 70];

for (let i = 0; i < scores.length; i++) {
  if (scores[i] === 0) {
    continue;
  }

  console.log(scores[i]);
}

위 코드는 점수가 0인 경우를 건너뛰고 나머지 점수만 출력한다.

9.10 break와 continue의 차이

break와 continue는 모두 반복문의 흐름을 바꾸는 점프문(jump statement)이다. 그러나 역할은 다르다. 제어 흐름에서 점프문은 break, continue, return, throw와 같이 실행 순서를 갑자기 바꾸는 문장으로 구분된다.

break는 반복문을 완전히 종료한다.

for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    break;
  }

  console.log(i);
}

실행 결과는 다음과 같다.

1
2

continue는 현재 반복만 건너뛰고 다음 반복을 계속한다.

for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    continue;
  }

  console.log(i);
}

실행 결과는 다음과 같다.

따라서 break는 “그만 반복하라”는 의미이고, continue는 “이번 차례만 건너뛰라”는 의미이다.

9.11 반복문과 변수 범위

반복문에서 변수를 선언할 때에는 일반적으로 let을 사용한다. let으로 선언한 변수는 블록 범위(block scope)를 가진다. 즉, 반복문 안에서 선언한 변수는 반복문 바깥에서 직접 사용할 수 없다.

for (let i = 0; i < 3; i++) {
  console.log(i);
}

console.log(i); // 오류 발생

반면 var로 선언한 변수는 함수 범위(function scope)를 가지므로 반복문 바깥에도 영향을 줄 수 있다. W3Schools의 예제 범위에서도 var로 선언한 반복 변수는 반복문 밖의 변수를 다시 선언하는 결과를 만들 수 있고, let으로 선언한 반복 변수는 반복문 안에서만 보이는 것으로 정리된다.

초급 단계에서는 반복문에서 let을 사용하는 습관이 안전하다.

let i = 100;

for (let i = 0; i < 3; i++) {
  console.log("반복문 안:", i);
}

console.log("반복문 밖:", i);

실행 결과는 다음과 같다.

반복문 안: 0
반복문 안: 1
반복문 안: 2
반복문 밖: 100

반복문 안의 i와 반복문 밖의 i는 서로 다른 범위에 존재한다. 따라서 반복문 안에서 i가 0, 1, 2로 변하여도 반복문 밖의 i는 100을 유지한다.

9.12 반복문 작성 시 주의할 점

반복문은 강력한 문법이지만, 조건과 증감식을 잘못 작성하면 오류가 발생하기 쉽다.

첫째, 종료 조건을 분명히 작성하여야 한다.

for (let i = 1; i <= 10; i++) {
  console.log(i);
}

위 코드는 i가 10보다 커지면 종료된다. 종료 조건이 분명하므로 안전하다.

둘째, while 문에서는 조건식에 사용되는 값이 반복문 안에서 변하여야 한다.

let i = 1;

while (i <= 10) {
  console.log(i);
  i++;
}

셋째, 배열을 반복할 때에는 인덱스 범위를 조심하여야 한다.

const colors = ["red", "green", "blue"];

for (let i = 0; i < colors.length; i++) {
  console.log(colors[i]);
}

배열의 마지막 인덱스는 length - 1이다. 따라서 조건식은 보통 i < 배열.length로 작성한다.

넷째, break와 continue를 남용하지 않아야 한다. 두 문법은 반복 흐름을 바꿀 때 유용하지만, 지나치게 많이 사용하면 코드의 실행 흐름을 읽기 어려워질 수 있다. 필요한 조건에서만 명확하게 사용하여야 한다.

9.13 예제: 짝수만 출력하기

다음 코드는 1부터 10까지의 숫자 중 짝수만 출력한다.

for (let i = 1; i <= 10; i++) {
  if (i % 2 !== 0) {
    continue;
  }

  console.log(i);
}

i % 2는 i를 2로 나눈 나머지이다. 짝수는 2로 나누었을 때 나머지가 0이다. 위 코드에서는 홀수인 경우 continue를 실행하여 출력하지 않고 다음 반복으로 넘어간다.

실행 결과는 다음과 같다.

9.14 예제: 합계가 20을 넘으면 반복 종료하기

다음 코드는 1부터 차례대로 더하다가 합계가 20을 넘으면 반복을 종료한다.

let total = 0;

for (let i = 1; i <= 10; i++) {
  total = total + i;

  if (total > 20) {
    break;
  }
}

console.log(total);

실행 흐름은 다음과 같다.

1을 더하면 합계는 1이다.
2를 더하면 합계는 3이다.
3을 더하면 합계는 6이다.
4를 더하면 합계는 10이다.
5를 더하면 합계는 15이다.
6을 더하면 합계는 21이다.

합계가 20을 넘었으므로 break 문이 실행되고 반복문이 종료된다. 최종 출력값은 다음과 같다.

9.15 예제: 웹 페이지 목록 만들기

반복문은 웹 페이지에서 여러 개의 HTML 요소를 만들 때 자주 사용된다. 다음 예제는 배열에 저장된 과목명을 목록 형태의 문자열로 만든다.

const subjects = ["HTML", "CSS", "JavaScript"];
let html = "<ul>";

for (let i = 0; i < subjects.length; i++) {
  html = html + "<li>" + subjects[i] + "</li>";
}

html = html + "</ul>";

console.log(html);

실행 결과는 다음과 같은 문자열이다.

<ul><li>HTML</li><li>CSS</li><li>JavaScript</li></ul>

이 문자열을 실제 웹 문서의 특정 영역에 넣으면 목록 형태로 화면에 표시할 수 있다.

document.getElementById("subjectList").innerHTML = html;

반복문은 데이터와 화면을 연결하는 기초 문법이다. 배열에 저장된 데이터를 반복하여 HTML 구조로 바꾸면, 같은 코드를 여러 번 작성하지 않고도 여러 항목을 화면에 출력할 수 있다.

9.16 핵심 정리

반복문(loop)은 같은 코드 블록을 여러 번 실행하기 위한 제어 구조이다. for 문은 반복 횟수가 분명할 때 적합하고, while 문은 조건이 참인 동안 반복할 때 적합하다. do...while 문은 조건 검사 전에 코드 블록을 최소 한 번 실행한다.

break 문은 반복문을 즉시 종료한다. continue 문은 현재 반복만 건너뛰고 다음 반복으로 이동한다. 두 문법은 반복문의 흐름을 바꾸는 점프문(jump statement)이다.

반복문을 작성할 때에는 초기값, 조건식, 증감식의 관계를 정확히 이해하여야 한다. 특히 while 문에서는 조건에 사용되는 값이 반복문 안에서 변하지 않으면 무한 반복이 발생할 수 있다. 배열과 반복문을 함께 사용할 때에는 인덱스가 0부터 시작하고 마지막 인덱스가 length - 1이라는 점을 주의하여야 한다.

반복문은 단순한 반복 출력 문법이 아니라, 데이터를 처리하고 화면을 구성하며 프로그램의 흐름을 자동화하는 핵심 문법이다.

9.17 확인 문제

반복문이 필요한 상황을 하나 예로 들어 설명하라.
다음 코드의 실행 결과를 쓰시오.

for (let i = 1; i <= 4; i++) {
  console.log(i);
}

다음 코드에서 무한 반복이 발생하는 이유를 설명하라.

let i = 1;

while (i <= 5) {
  console.log(i);
}

break와 continue의 차이를 설명하라.
다음 코드의 실행 결과를 쓰시오.

for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    continue;
  }

  console.log(i);
}

배열 scores에 저장된 점수 중 80점 이상만 출력하는 코드를 작성하라.

const scores = [70, 85, 90, 60, 100];

조건문

jsBae — Sat, 4 Jul 2026 20:02:39 +0900

1. 조건문의 의미

조건문(conditional statement)은 조건의 참과 거짓에 따라 실행할 코드를 선택하는 문법이다. 프로그램은 기본적으로 위에서 아래로 순서대로 실행되지만, 조건문을 사용하면 특정 상황에서만 코드를 실행하거나, 서로 다른 실행 경로를 선택할 수 있다.

예를 들어 사용자의 나이가 18세 이상이면 “성인”을 출력하고, 그렇지 않으면 “미성년자”를 출력할 수 있다.

let age = 20;

if (age >= 18) {
  console.log("성인입니다.");
}

위 코드에서 age >= 18은 조건식이다. age의 값이 20이므로 20 >= 18은 참이다. 따라서 중괄호 { } 안의 코드가 실행된다.

실행 결과는 다음과 같다.

성인입니다.

2. Boolean 값

조건문을 이해하려면 먼저 불리언(Boolean) 값을 알아야 한다. Boolean은 참과 거짓을 나타내는 자료형이다. 자바스크립트에서 Boolean 값은 true 또는 false 두 가지뿐이다.

let isLogin = true;
let isAdult = false;

true는 참을 의미한다.
false는 거짓을 의미한다.

비교 연산자는 Boolean 값을 만든다.

console.log(10 > 5);
console.log(10 < 5);

실행 결과는 다음과 같다.

true
false

10 > 5는 참이므로 true이다.\
0 < 5는 거짓이므로 false이다.

조건문은 이 Boolean 값을 기준으로 실행 여부를 결정한다.

3. 비교식과 조건식

조건문 안에는 보통 비교식이 들어간다. 비교식은 두 값을 비교하여 true 또는 false를 만든다.

let score = 85;

console.log(score >= 80);

실행 결과는 다음과 같다.

true

score의 값은 85이고, 85 >= 80은 참이다. 따라서 결과는 true이다.

비교	의미	예	결과
>	크다	10 > 5	true
<	작다	10 < 5	false
>=	크거나 같다	10 >= 10	true
<=	작거나 같다	10 <= 5	false
==	값이 같다	5 == "5"	true
===	값과 자료형이 같다	5 === "5"	false
!=	값이 같지 않다	5 != 3	true
!==	값 또는 자료형이 같지 않다	5 !== "5"	true

조건문에서는 ==보다 ===를 사용하는 것이 더 명확하다. ===는 값뿐 아니라 자료형까지 함께 비교하기 때문이다.

console.log(5 == "5");
console.log(5 === "5");

실행 결과는 다음과 같다.

true
false

5 == "5"는 값만 비교하여 참으로 처리된다.

5 === "5"는 숫자 5와 문자열 "5"의 자료형이 다르므로 거짓이 된다.

4. if 문

if 문은 조건이 참일 때만 코드 블록을 실행한다. 가장 기본적인 조건문이다.

if (조건식) {
  조건식이 true일 때 실행할 코드
}

예제는 다음과 같다.

let score = 90;

if (score >= 80) {
  console.log("합격입니다.");
}

실행 결과는 다음과 같다.

합격입니다.

score >= 80의 결과가 true이므로 중괄호 안의 코드가 실행된다.

조건이 거짓이면 코드 블록은 실행되지 않는다.

let score = 60;

if (score >= 80) {
  console.log("합격입니다.");
}

이 경우 60 >= 80은 거짓이므로 아무것도 출력되지 않는다.

5. else 문

else 문은 if 조건이 거짓일 때 실행할 코드를 작성하는 문법이다. if만 사용하면 조건이 참일 때만 처리할 수 있지만, else를 함께 사용하면 참과 거짓의 두 경우를 모두 처리할 수 있다.

기본 형식은 다음과 같다.

if (조건식) {
  조건식이 true일 때 실행할 코드
} else {
  조건식이 false일 때 실행할 코드
}

예제는 다음과 같다.

let score = 60;

if (score >= 80) {
  console.log("합격입니다.");
} else {
  console.log("재평가 대상입니다.");
}

실행 결과는 다음과 같다.

재평가 대상입니다.

score >= 80의 결과가 false이므로 else 블록이 실행된다.

6. else if 문

조건이 두 개 이상일 때는 else if 문을 사용한다. 여러 조건을 순서대로 검사하고, 처음으로 참이 되는 코드 블록만 실행한다.

기본 형식은 다음과 같다.

if (조건식1) {
  조건식1이 true일 때 실행할 코드
} else if (조건식2) {
  조건식2가 true일 때 실행할 코드
} else {
  모든 조건이 false일 때 실행할 코드
}

점수에 따라 등급을 출력하는 예제는 다음과 같다.

let score = 85;

if (score >= 90) {
  console.log("A 등급");
} else if (score >= 80) {
  console.log("B 등급");
} else if (score >= 70) {
  console.log("C 등급");
} else {
  console.log("D 등급 이하");
}

실행 결과는 다음과 같다.

B 등급

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

score >= 90은 85 >= 90이므로 거짓이다.
score >= 80은 85 >= 80이므로 참이다.
따라서 "B 등급"이 출력된다.
한 조건이 참이 되면 그 아래의 else if와 else는 더 이상 실행되지 않는다.

7. 논리 연산자

논리 연산자(logical operator)는 여러 조건을 결합하거나 조건의 의미를 반대로 바꿀 때 사용한다. 자바스크립트의 대표적인 논리 연산자는 &&, ||, !이다.

논리 연산자	이름	의미
&&	AND	두 조건이 모두 참이면 참
`		`
!	NOT	참은 거짓으로, 거짓은 참으로 바꿈

8. AND 연산자 &&

&&는 두 조건이 모두 참일 때만 전체 결과가 참이 된다.

let age = 20;
let hasTicket = true;

if (age >= 18 && hasTicket === true) {
  console.log("입장할 수 있습니다.");
} else {
  console.log("입장할 수 없습니다.");
}

실행 결과는 다음과 같다.

입장할 수 있습니다.

age >= 18은 참이다.
hasTicket === true도 참이다.
두 조건이 모두 참이므로 전체 조건은 참이다.

다음 예제에서는 두 조건 중 하나가 거짓이다.

let age = 16;
let hasTicket = true;

if (age >= 18 && hasTicket === true) {
  console.log("입장할 수 있습니다.");
} else {
  console.log("입장할 수 없습니다.");
}

실행 결과는 다음과 같다.

입장할 수 없습니다.

hasTicket === true는 참이지만 age >= 18이 거짓이므로 전체 조건은 거짓이다.

9. OR 연산자 ||

||는 두 조건 중 하나만 참이어도 전체 결과가 참이 된다.

let isMember = false;
let hasCoupon = true;

if (isMember === true || hasCoupon === true) {
  console.log("할인을 받을 수 있습니다.");
} else {
  console.log("할인을 받을 수 없습니다.");
}

실행 결과는 다음과 같다.

할인을 받을 수 있습니다.

isMember === true는 거짓이다.
hasCoupon === true는 참이다.
두 조건 중 하나가 참이므로 전체 조건은 참이다.

10. NOT 연산자 !

!는 Boolean 값을 반대로 바꾼다. true는 false가 되고, false는 true가 된다.

let isLogin = false;

if (!isLogin) {
  console.log("로그인이 필요합니다.");
}

실행 결과는 다음과 같다.

로그인이 필요합니다.

isLogin은 false이다.
!isLogin은 true가 된다.
따라서 조건문 안의 코드가 실행된다.

!는 로그인 여부, 체크 여부, 숨김 여부와 같이 상태를 반대로 판단할 때 자주 사용된다.

11. 삼항 연산자

삼항 연산자(ternary operator)는 조건에 따라 두 값 중 하나를 선택하는 문법이다. if...else 문을 짧게 표현할 수 있다.

기본 형식은 다음과 같다.

조건식 ? 참일 때 값 : 거짓일 때 값

예제는 다음과 같다.

let age = 20;
let result = age >= 18 ? "성인" : "미성년자";

console.log(result);

실행 결과는 다음과 같다.

성인

age >= 18이 참이면 "성인"이 선택되고, 거짓이면 "미성년자"가 선택된다.

위 코드는 다음 if...else 문과 같은 의미이다.

let age = 20;
let result;

if (age >= 18) {
  result = "성인";
} else {
  result = "미성년자";
}

console.log(result);

삼항 연산자는 조건이 단순하고 결과값을 바로 변수에 저장할 때 적합하다.

let score = 75;
let message = score >= 60 ? "통과" : "미통과";

console.log(message);

실행 결과는 다음과 같다.

통과

조건이 복잡하거나 실행할 코드가 여러 줄이면 삼항 연산자보다 if...else 문이 더 읽기 쉽다.

12. Nullish 병합 연산자 ??

삼항 연산자와 함께 자주 비교되는 조건 처리 방식으로 Nullish 병합 연산자(nullish coalescing operator)가 있다. ??는 왼쪽 값이 null 또는 undefined일 때 오른쪽 값을 선택한다.

let userName = null;
let displayName = userName ?? "이름 없음";

console.log(displayName);

실행 결과는 다음과 같다.

이름 없음

userName이 null이므로 오른쪽 값인 "이름 없음"이 선택된다.

다음 예제에서는 왼쪽 값이 존재하므로 왼쪽 값이 사용된다.

let userName = "홍길동";
let displayName = userName ?? "이름 없음";

console.log(displayName);

실행 결과는 다음과 같다.

홍길동

??는 값이 없을 때 기본값을 지정하는 데 사용된다.

13. Optional Chaining ?.

옵셔널 체이닝(optional chaining)은 객체의 속성에 접근할 때, 중간 값이 null 또는 undefined이면 오류를 발생시키지 않고 undefined를 반환하는 문법이다.

const user = {
  name: "홍길동",
  address: {
    city: "부산"
  }
};

console.log(user.address?.city);

실행 결과는 다음과 같다.

부산

user.address가 존재하므로 city 값을 가져온다.

다음 예제에서는 address가 없다.

const user = {
  name: "홍길동"
};

console.log(user.address?.city);

실행 결과는 다음과 같다.

undefined

user.address가 없지만 오류가 발생하지 않는다. ?.는 객체 데이터가 항상 완전하지 않을 때 안전하게 속성에 접근할 수 있게 한다.

14. switch 문

switch 문은 하나의 값을 여러 경우와 비교하여 실행할 코드를 선택하는 조건문이다. 값이 특정 경우 중 하나에 해당하는지 판단할 때 사용한다.

기본 형식은 다음과 같다.

switch (표현식) {
  case 값1:
    실행할 코드
    break;
  case 값2:
    실행할 코드
    break;
  default:
    일치하는 case가 없을 때 실행할 코드
}

요일 번호를 요일 이름으로 바꾸는 예제는 다음과 같다.

let day = 3;
let dayName;

switch (day) {
  case 1:
    dayName = "월요일";
    break;
  case 2:
    dayName = "화요일";
    break;
  case 3:
    dayName = "수요일";
    break;
  case 4:
    dayName = "목요일";
    break;
  case 5:
    dayName = "금요일";
    break;
  default:
    dayName = "주말 또는 알 수 없는 값";
}

console.log(dayName);

실행 결과는 다음과 같다.

수요일

day의 값이 3이므로 case 3의 코드가 실행된다.
break는 해당 case 실행 후 switch 문을 빠져나오게 한다.
default는 일치하는 case가 없을 때 실행된다.

15. break의 역할

switch 문에서 break가 없으면 일치한 case 아래의 코드가 계속 실행될 수 있다. 이를 fall-through라고 한다.

let day = 3;

switch (day) {
  case 1:
    console.log("월요일");
  case 2:
    console.log("화요일");
  case 3:
    console.log("수요일");
  case 4:
    console.log("목요일");
}

실행 결과는 다음과 같다.

수요일
목요일

case 3이 일치한 뒤 break가 없기 때문에 아래의 case 4 코드까지 실행된다.
각 경우를 독립적으로 처리하려면 break를 작성하여야 한다.

let day = 3;

switch (day) {
  case 3:
    console.log("수요일");
    break;
  case 4:
    console.log("목요일");
    break;
}

실행 결과는 다음과 같다.

수요일

16. 여러 case에서 같은 코드 실행하기

여러 값이 같은 결과를 가져야 할 때는 case를 연속으로 작성할 수 있다.

let day = 6;
let result;

switch (day) {
  case 1:
  case 2:
  case 3:
  case 4:
  case 5:
    result = "평일";
    break;
  case 6:
  case 7:
    result = "주말";
    break;
  default:
    result = "알 수 없는 값";
}

console.log(result);

실행 결과는 다음과 같다.

주말

case 6과 case 7은 같은 실행 결과를 공유한다. 이처럼 여러 경우를 같은 범주로 묶을 수 있다.

17. if 문과 switch 문의 차이

if 문은 조건식이 자유롭다. 크기 비교, 범위 비교, 논리 연산 등 다양한 조건을 만들 수 있다.

let score = 85;

if (score >= 90) {
  console.log("A");
} else if (score >= 80) {
  console.log("B");
} else {
  console.log("C 이하");
}

switch 문은 하나의 값이 어떤 경우에 해당하는지 비교할 때 구조가 명확하다.

let menu = "coffee";

switch (menu) {
  case "coffee":
    console.log("커피를 선택하였습니다.");
    break;
  case "tea":
    console.log("차를 선택하였습니다.");
    break;
  default:
    console.log("메뉴를 선택하지 않았습니다.");
}

정리하면, 범위나 복잡한 조건은 if...else if...else 문이 적합하고, 하나의 값이 여러 고정 값 중 무엇인지 판단할 때는 switch 문이 적합하다.

18. 종합 예제: 로그인 상태와 등급 확인

다음 예제는 Boolean, 비교 연산자, 논리 연산자, if...else if...else 문을 함께 사용한다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>JavaScript if</title>
</head>
<body>
  <h1>조건문 예제</h1>
  <p id="result"></p>

  <script>
    const isLogin = true;
    const userLevel = "member";
    const orderPrice = 60000;

    let message;

    if (!isLogin) {
      message = "로그인이 필요합니다.";
    } else if (userLevel === "vip" || orderPrice >= 50000) {
      message = "할인 혜택을 받을 수 있습니다.";
    } else {
      message = "일반 결제 대상입니다.";
    }

    document.getElementById("result").innerHTML = message;
  </script>
</body>
</html>

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

isLogin은 로그인 여부를 저장하는 Boolean 값이다.
!isLogin은 로그인하지 않은 상태인지 확인한다.
userLevel === "vip"는 사용자의 등급이 VIP인지 확인한다.
orderPrice >= 50000은 주문 금액이 50,000원 이상인지 확인한다.
||는 두 조건 중 하나 이상이 참인지 확인한다.

실행 결과는 다음과 같다.

할인 혜택을 받을 수 있습니다.

isLogin은 true이므로 첫 번째 조건은 실행되지 않는다.
userLevel === "vip"는 거짓이지만, orderPrice >= 50000은 참이다.
|| 연산자는 둘 중 하나만 참이어도 참이므로 할인 문구가 출력된다.

19. 종합 예제: 요일별 안내 문구

다음 예제는 switch 문을 사용하여 요일별 안내 문구를 출력한다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>JavaScript switch</title>
</head>
<body>
  <h1>요일 안내</h1>
  <p id="result"></p>

  <script>
    const day = 5;
    let message;

    switch (day) {
      case 1:
        message = "월요일입니다. 한 주가 시작됩니다.";
        break;
      case 2:
      case 3:
      case 4:
        message = "평일입니다. 일정을 확인합니다.";
        break;
      case 5:
        message = "금요일입니다. 주간 작업을 마무리합니다.";
        break;
      case 6:
      case 7:
        message = "주말입니다.";
        break;
      default:
        message = "올바르지 않은 요일 값입니다.";
    }

    document.getElementById("result").innerHTML = message;
  </script>
</body>
</html>

실행 결과는 다음과 같다.

금요일입니다. 주간 작업을 마무리합니다.

day의 값은 5이므로 case 5가 실행된다. break를 만나면 switch 문이 종료된다.

20. 핵심 정리

조건문은 조건의 참과 거짓에 따라 실행할 코드를 선택하는 문법이다. 조건문의 판단 결과는 Boolean 값인 true 또는 false로 표현된다.

if 문은 조건이 참일 때만 코드를 실행한다. else 문은 조건이 거짓일 때 실행할 코드를 작성한다. 조건이 여러 개이면 else if 문을 사용하여 순서대로 검사한다.

논리 연산자는 여러 조건을 결합할 때 사용한다. &&는 두 조건이 모두 참일 때 참이고, ||는 두 조건 중 하나 이상이 참일 때 참이다. !는 참과 거짓을 반대로 바꾼다.

삼항 연산자 ? :는 단순한 조건 판단을 짧게 표현할 때 사용한다. 조건식 ? 참일 때 값 : 거짓일 때 값의 형태로 작성한다. ??는 값이 null 또는 undefined일 때 기본값을 지정하는 데 사용하고, ?.는 객체 속성 접근 과정에서 오류를 줄이는 데 사용한다.

switch 문은 하나의 값이 여러 경우 중 어느 경우에 해당하는지 선택할 때 사용한다. 각 case는 비교할 값을 나타내며, break는 해당 경우를 실행한 뒤 switch 문을 종료한다. default는 일치하는 경우가 없을 때 실행된다.

자바스크립트 연산자

jsBae — Sat, 4 Jul 2026 19:46:17 +0900

1. 연산자의 의미

연산자(operator)는 값을 계산하거나, 변수에 값을 저장하거나, 두 값을 비교하거나, 조건에 따라 다른 코드를 실행하기 위하여 사용하는 기호이다. 자바스크립트에서 연산자는 숫자 계산뿐 아니라 문자열 연결, 변수 값 변경, 비교 판단, 조건 처리에 사용된다.

예를 들어 다음 코드에는 세 가지 연산자가 사용된다.

let x = 10;
let y = 5;
let result = x + y;

=는 오른쪽 값을 왼쪽 변수에 저장하는 대입 연산자(assignment operator)이다.
+는 두 값을 더하는 산술 연산자(arithmetic operator)이다.
x + y는 두 변수의 값을 계산하여 하나의 결과를 만든다.

2. 연산자의 주요 종류

자바스크립트 연산자는 기능에 따라 여러 종류로 나눌 수 있다. 이 장에서는 기초 웹프로그래밍에서 가장 자주 사용하는 연산자를 중심으로 다룬다.

구분	기능	예
산술 연산자	숫자 계산	+, -, *, /, %
대입 연산자	변수에 값 저장	=, +=, -=, *=
비교 연산자	두 값 비교	==, ===, >, <
논리 연산자	여러 조건 결합	&&, `
조건 연산자	조건에 따라 값 선택	? :

이 중 산술, 대입, 비교, 조건 처리는 자바스크립트 기초 문법에서 반드시 이해하여야 하는 핵심 내용이다.

3. 산술 연산자

3.1 산술 연산자의 의미

산술 연산자(arithmetic operator)는 숫자 값을 계산할 때 사용한다. 숫자는 코드에 직접 작성한 리터럴(literal)일 수도 있고, 변수에 저장된 값일 수도 있다.

let x = 100 + 50;

위 코드에서 100과 50은 숫자 리터럴이다. + 연산자는 두 숫자를 더한다. 따라서 x에는 150이 저장된다.

변수에 저장된 값도 계산할 수 있다.

let a = 100;
let b = 50;
let x = a + b;

console.log(x);

실행 결과는 다음과 같다.

3.2 피연산자와 연산자

산술식에서 계산 대상이 되는 값을 피연산자(operand)라고 한다. 계산 방법을 나타내는 기호는 연산자(operator)이다.

100 + 50

위 식에서 100과 50은 피연산자이다. +는 연산자이다.

즉, 연산자는 피연산자 사이에서 어떤 계산을 수행할지 결정한다.

3.3 기본 산술 연산자

연산자	의미	예	결과
+	더하기	5 + 2	7
-	빼기	5 - 2	3
*	곱하기	5 * 2	10
/	나누기	5 / 2	2.5
%	나머지	5 % 2	1
**	거듭제곱	5 ** 2	25
++	1 증가	x++	기존 값에서 1 증가
--	1 감소	x--	기존 값에서 1 감소

산술 연산자는 숫자 계산에 사용되며, 나머지 연산자 %는 나눗셈의 나머지를 구할 때 사용한다. 거듭제곱 연산자 **는 왼쪽 값을 오른쪽 값만큼 제곱한다.

3.4 더하기 연산자

+는 두 숫자를 더한다.

let x = 5;
let y = 2;
let z = x + y;

console.log(z);

실행 결과는 다음과 같다.

3.5 빼기 연산자

-는 왼쪽 값에서 오른쪽 값을 뺀다.

let x = 5;
let y = 2;
let z = x - y;

console.log(z);

실행 결과는 다음과 같다.

3.6 곱하기 연산자

*는 두 숫자를 곱한다.

let x = 5;
let y = 2;
let z = x * y;

console.log(z);

실행 결과는 다음과 같다.

3.7 나누기 연산자

/는 왼쪽 값을 오른쪽 값으로 나눈다.

let x = 5;
let y = 2;
let z = x / y;

console.log(z);

실행 결과는 다음과 같다.

2.5

3.8 나머지 연산자

%는 나눗셈의 나머지를 구한다.

let x = 5;
let y = 2;
let z = x % y;

console.log(z);

실행 결과는 다음과 같다.

5를 2로 나누면 몫은 2이고 나머지는 1이다. 따라서 5 % 2의 결과는 1이다.

나머지 연산자는 짝수와 홀수 판별에 자주 사용된다.

let number = 7;

if (number % 2 === 0) {
  console.log("짝수");
} else {
  console.log("홀수");
}

실행 결과는 다음과 같다.

홀수

3.9 증가 연산자와 감소 연산자

++는 변수의 값을 1 증가시킨다.
--는 변수의 값을 1 감소시킨다.

let count = 5;

count++;

console.log(count);

실행 결과는 다음과 같다.

감소 연산자는 다음과 같이 사용한다.

let count = 5;

count--;

console.log(count);

실행 결과는 다음과 같다.

증가와 감소 연산자는 반복문, 카운터, 점수 계산, 남은 횟수 처리 등에 자주 사용된다.

3.10 거듭제곱 연산자

**는 왼쪽 값을 오른쪽 값만큼 거듭제곱한다. x ** y는 Math.pow(x, y)와 같은 결과를 만든다.

let x = 5;
let z = x ** 2;

console.log(z);

실행 결과는 다음과 같다.

같은결과를 Math.pow()로 작성할 수도 있다.

let x = 5;
let z = Math.pow(x, 2);

console.log(z);

실행 결과는 다음과 같다.

3.11 연산자 우선순위

연산자가 여러 개 함께 사용되면 자바스크립트는 정해진 우선순위에 따라 계산한다. 일반적인 수학 계산처럼 곱하기와 나누기가 더하기와 빼기보다 먼저 계산된다. 괄호 ()를 사용하면 괄호 안의 식이 먼저 계산된다.

let result = 100 + 50 * 3;

console.log(result);

실행 결과는 다음과 같다.

50 * 3이 먼저 계산되어 150이 되고, 그 다음 100 + 150이 계산된다.

괄호를 사용하면 결과가 달라진다.

let result = (100 + 50) * 3;

console.log(result);

실행 결과는 다음과 같다.

100 + 50이 먼저 계산되어 150이 되고, 그 다음 150 * 3이 계산된다.

4. 대입 연산자

4.1 대입 연산자의 의미

대입 연산자(assignment operator)는 변수에 값을 저장할 때 사용한다. 여기서 assignment는 ‘과제’가 아니라 대입 또는 할당의 의미이다. 가장 기본적인 대입 연산자는 =이다.

let x = 10;

위 코드는 숫자 10을 변수 x에 저장한다는 뜻이다.
수학에서 사용하는 “같다”의 의미가 아니라, 오른쪽 값을 왼쪽 변수에 넣는 동작이다.

4.2 기본 대입 연산자 =

let score = 90;

console.log(score);

실행 결과는 다음과 같다.

score 변수에 숫자 90이 저장된다.변수에는 계산 결과도 저장할 수 있다.

let x = 10;
let y = 5;
let total = x + y;

console.log(total);

실행 결과는 다음과 같다.

4.3 복합 대입 연산자

복합 대입 연산자는 산술 연산과 대입을 한 번에 처리한다. 예를 들어 x += y는 x = x + y와 같은 의미이다.

연산자	예	같은의미	설명
=	x = y	x = y	y 값을 x에 저장
+=	x += y	x = x + y	x에 y를 더하여 다시 x에 저장
-=	x -= y	x = x - y	x에서 y를 빼서 다시 x에 저장
*=	x *= y	x = x * y	x에 y를 곱하여 다시 x에 저장
/=	x /= y	x = x / y	x를 y로 나누어 다시 x에 저장
%=	x %= y	x = x % y	x를 y로 나눈 나머지를 x에 저장
**=	x **= y	x = x ** y	x를 y만큼 거듭제곱하여 x에 저장

4.4 += 연산자

+=는 기존 변수 값에 오른쪽 값을 더한 뒤 다시 변수에 저장한다.

let x = 10;

x += 5;

console.log(x);

실행 결과는 다음과 같다.

위 코드는 다음 코드와 같다.

let x = 10;

x = x + 5;

console.log(x);

+=는 점수 증가, 수량 증가, 총합 계산에 자주 사용된다.

let score = 0;

score += 10;
score += 20;

console.log(score);

실행 결과는 다음과 같다.

4.5 -= 연산자

-=는 기존 변수 값에서 오른쪽 값을 뺀 뒤 다시 변수에 저장한다.

let life = 3;

life -= 1;

console.log(life);

실행 결과는 다음과 같다.

게임의 생명 감소, 재고 수량 감소, 남은 시간 감소 등에 사용할 수 있다.

4.6 *= 연산자

*=는 기존 변수 값에 오른쪽 값을 곱한 뒤 다시 변수에 저장한다.

let price = 10000;

price *= 2;

console.log(price);

실행 결과는 다음과 같다.

4.7 /= 연산자

/=는 기존 변수 값을 오른쪽 값으로 나눈 뒤 다시 변수에 저장한다.

let total = 10000;

total /= 2;

console.log(total);

실행 결과는 다음과 같다.

4.8 %= 연산자

%=는 기존 변수 값을 오른쪽 값으로 나눈 나머지를 다시 변수에 저장한다.

let x = 10;

x %= 3;

console.log(x);

실행 결과는 다음과 같다.

10을 3으로 나누면 나머지는 1이다. 따라서 x에는 1이 저장된다.

4.9 문자열에서의 +=

+=는 숫자뿐 아니라 문자열에도 사용할 수 있다. 문자열에서 +=는 기존 문자열 뒤에 새로운 문자열을 이어 붙인다.

let text = "Hello";

text += " World";

console.log(text);

실행 결과는 다음과 같다.

Hello World

한글 문자열도 같은 방식으로 연결할 수 있다.

let message = "안녕하세요.";

message += " 자바스크립트입니다.";

console.log(message);

실행 결과는 다음과 같다.

안녕하세요. 자바스크립트입니다.

5. 비교 연산자

5.1 비교 연산자의 의미

비교 연산자(comparison operator)는 두 값을 비교하고, 그 결과를 true 또는 false로 반환한다. 비교 결과는 조건문에서 판단 기준으로 사용된다.

let x = 5;
let result = x > 3;

console.log(result);

실행 결과는 다음과 같다.

true

x의 값은 5이고, 5 > 3은 참이므로 결과는 true이다.

5.2 주요 비교 연산자

연산자	의미	예	값
==	값이 같다	5 == "5"	true
===	값과 자료형이 모두 같다	5 === "5"	false
!=	값이 같지 않다	5 != 8	true
!==	값 또는 자료형이 같지 않다	5 !== "5"	true
>	크다	5 > 8	false
<	작다	5 < 8	true
>=	크거나 같다	5 >= 5	true
<=	작거나 같다	5 <= 8	true

비교 연산자는 항상 true 또는 false를 반환한다. ==는 값만 비교하고, ===는 값과 자료형을 함께 비교한다.

5.3 ==와 ===의 차이

==는 두 값이 같은지 비교한다. 이때 자료형이 다르면 자바스크립트가 자동으로 자료형을 변환하여 비교할 수 있다.

console.log(5 == "5");

실행 결과는 다음과 같다.

true

숫자 5와 문자열 "5"는 자료형이 다르지만, ==는 값이 같다고 판단한다.

===는 값과 자료형이 모두 같은지 비교한다.

console.log(5 === "5");

실행 결과는 다음과 같다.

false

숫자 5와 문자열 "5"는 값처럼 보이는 내용은 같지만 자료형이 다르다. 따라서 ===의 결과는 false이다.

웹페이지 입력값을 비교할 때는 자료형 차이로 인한 오류가 발생할 수 있으므로 ===를 사용하는 습관이 필요하다.

5.4 문자열 비교

문자열도 비교 연산자로 비교할 수 있다. 문자열 비교는 문자 순서를 기준으로 이루어진다.

let text1 = "A";
let text2 = "B";
let result = text1 < text2;

console.log(result);

실행 결과는 다음과 같다.

true

문자 "A"는 "B"보다 앞에 있으므로 text1 < text2의 결과는 true이다.

문자열 숫자는 숫자처럼 보이더라도 문자열 기준으로 비교될 수 있다.

let text1 = "20";
let text2 = "5";
let result = text1 < text2;

console.log(result);

실행 결과는 다음과 같다.

true

숫자로 보면 20은 5보다 크지만, 문자열 비교에서는 첫 글자인 "2"와 "5"를 비교한다. "2"가 "5"보다 앞에 있으므로 "20" < "5"는 true가 된다.

5.5 서로 다른 자료형 비교

서로 다른 자료형을 비교하면 예상하기 어려운 결과가 나올 수 있다. 문자열과 숫자를 비교할 때 자바스크립트는 문자열을 숫자로 변환하여 비교하려고 한다. 빈 문자열은 0으로 변환되고, 숫자로 바꿀 수 없는 문자열은 NaN이 되어 비교 결과가 대부분 false가 된다.

console.log(2 < "12");
console.log(2 < "John");

실행 결과는 다음과 같다.

true
false

"12"는 숫자 12로 변환될 수 있으므로 2 < 12가 되어 true이다.
"John"은 숫자로 변환할 수 없으므로 비교 결과는 false이다.

입력값을 숫자로 비교하여야 할 때는 먼저 숫자로 변환하는 것이 안전하다.

let age = "20";

age = Number(age);

if (age >= 18) {
  console.log("성인");
} else {
  console.log("미성년자");
}

실행 결과는 다음과 같다.

성인

JavaScript Variables

jsBae — Sat, 4 Jul 2026 15:36:44 +0900

1. 변수의 의미

변수(variable)는 데이터를 저장하는 공간이다. 자바스크립트에서 변수는 숫자, 문자열, 계산 결과와 같은 값을 담아 두었다가 나중에 다시 사용하기 위하여 사용한다. 변수는 값에 붙이는 이름이며, 프로그램 안에서 데이터를 기억하고 처리하는 기본 단위이다.

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

위 코드는 세 개의 변수를 사용한다.

x에는 숫자 5가 저장된다.
y에는 숫자 6이 저장된다.
z에는 x + y의 계산 결과가 저장된다.

따라서 z의 값은 11이 된다.

2. 변수를 선언하는 방법

자바스크립트에서 변수는 여러 방식으로 만들 수 있다. 현대 자바스크립트에서는 주로 let과 const를 사용한다. 과거에는 var를 많이 사용하였지만, 현재는 특별한 이유가 없으면 사용하지 않는 편이 좋다. 또한 변수를 선언하지 않고 자동으로 만들어지게 하는 방식도 가능하지만 권장되지 않는다.

대표적인 변수 선언 방식은 다음과 같다.

let name = "홍길동";
const age = 20;
var score = 90;

let은 값을 바꿀 수 있는 변수를 만들 때 사용한다.
const는 값을 바꾸지 않을 변수를 만들 때 사용한다.
var는 오래된 변수 선언 방식이다.

3. let을 사용한 변수 선언

let은 값을 나중에 변경할 수 있는 변수를 만들 때 사용한다.

let carName;

위 코드는 carName이라는 변수를 만든다. 그러나 아직 값은 저장하지 않았다. 이처럼 변수를 만들었지만 값이 없는 상태는 undefined가 된다.

값은 대입 연산자 =를 사용하여 저장한다.

carName = "Volvo";

변수를 만들면서 바로 값을 저장할 수도 있다.

let carName = "Volvo";

다음 예제는 변수 값을 변경하는 코드이다.

let score = 0;

score = 10;

console.log(score);

실행 결과는 다음과 같다.

score는 let으로 선언하였기 때문에 처음 값 0에서 나중 값 10으로 변경할 수 있다.

4. const를 사용한 변수 선언

const는 값을 다시 바꾸지 않을 변수를 만들 때 사용한다. 한 번 값을 저장하면 같은 변수에 다른 값을 다시 대입할 수 없다.

const carName = "Volvo";

다음 예제는 const와 let을 함께 사용한다.

const price1 = 5;
const price2 = 6;
let total = price1 + price2;

console.log(total);

실행 결과는 다음과 같다.

price1과 price2는 변하지 않는 값이므로 const로 선언하였다.
total은 계산 결과를 저장하는 변수이며, 나중에 값이 바뀔 수 있으므로 let으로 선언하였다.

다음 코드는 오류가 발생한다.

const title = "JavaScript";
title = "HTML";

title은 const로 선언되었기 때문에 "HTML"이라는 새 값을 다시 저장할 수 없다.

5. 자동 변수 선언

자바스크립트에서는 변수를 선언하지 않고 값을 대입하면 자동으로 변수가 만들어질 수 있다. 그러나 이 방식은 권장되지 않는다. 변수의 선언 위치와 사용 범위가 불명확해져 오류를 만들기 쉽기 때문이다.

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

위 코드는 실행될 수 있지만, 좋은 작성 방식은 아니다. 변수를 사용할 때는 let 또는 const를 사용하여 명확하게 선언하는 것이 좋다.

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

6. var를 사용한 변수 선언

var는 오래된 자바스크립트에서 사용하던 변수 선언 방식이다. 2015년 이후 현대 자바스크립트에서는 let과 const가 도입되었으며, 일반적인 코드에서는 var보다 let과 const를 사용하는 것이 좋다.

var x = 5;
var y = 6;
var z = x + y;

위 코드는 동작하지만, 새로 작성하는 코드에서는 다음처럼 작성하는 편이 더 적절하다.

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

값이 변하지 않는 경우에는 const를 사용할 수 있다.

const x = 5;
const y = 6;
const z = x + y;

7. let, const, var 사용 기준

변수를 사용할 때는 다음 기준을 적용할 수 있다. 먼저 모든 변수는 명확하게 선언한다. 값이 바뀌지 않는 경우에는 const를 사용한다. 값이 바뀌어야 하는 경우에만 let을 사용한다. var는 가급적 사용하지 않는다.

const userName = "홍길동";
const birthYear = 2005;
let age = 20;

age = 21;

userName과 birthYear는 변하지 않는 값이므로 const로 선언하였다.
age는 시간이 지나거나 계산 과정에서 바뀔 수 있으므로 let으로 선언하였다.

8. 식별자

식별자(identifier)는 변수 이름을 의미한다. 변수 이름은 짧게 x, y, z처럼 작성할 수도 있고, age, sum, carName처럼 의미가 드러나게 작성할 수도 있다.

let x = 10;
let age = 20;
let carName = "Volvo";

식별자 작성 규칙은 다음과 같다.

첫째, 문자, 숫자, 밑줄 _, 달러 기호 $를 사용할 수 있다.
둘째, 첫 글자는 문자, _, $로 시작하여야 한다.
셋째, 첫 글자에 숫자를 사용할 수 없다.
넷째, 대소문자를 구분한다.
다섯째, 자바스크립트 예약어는 변수 이름으로 사용할 수 없다.

올바른 변수 이름은 다음과 같다.

let name;
let userName;
let _count;
let $price;
let score1;

올바르지 않은 변수 이름은 다음과 같다.

let 1score;     // 숫자로 시작
let user-name;  // 하이픈 사용
let let;        // 예약어 사용

9. 밑줄과 달러 기호

자바스크립트에서는 밑줄 _과 달러 기호 $도 변수 이름에 사용할 수 있다. 밑줄과 달러 기호는 식별자에서 문자처럼 처리된다.

let _lastName = "Johnson";
let _x = 2;
let _100 = 5;

달러 기호도 사용할 수 있다.

let $ = "Hello World";
let $$$ = 2;
let $myMoney = 5;

다만 일반적인 변수 이름은 의미가 분명한 단어를 사용하는 것이 좋다.

let userName = "홍길동";
let totalPrice = 30000;
let itemCount = 3;

10. 자료형과 변수

변수에는 여러 종류의 데이터를 저장할 수 있다. 기초 단계에서는 숫자(number)와 문자열(string)을 먼저 구분하면 된다. 문자열은 따옴표 안에 작성하고, 숫자는 따옴표 없이 작성한다. 숫자를 따옴표 안에 넣으면 숫자가 아니라 문자열로 처리된다.

const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';

한글 문자열도 같은 방식으로 작성한다.

let userName = "홍길동";
let message = '안녕하세요.';
let age = 20;

userName과 message는 문자열이다.
age는 숫자이다.

다음 코드는 숫자처럼 보이지만 문자열이다.

let score = "90";

90이 따옴표 안에 있으므로 숫자가 아니라 문자열로 저장된다.

11. 한 문장에서 여러 변수 선언하기

하나의 명령문 안에서 여러 개의 변수를 선언할 수 있다. 변수들은 쉼표로 구분한다.

let person = "John Doe", carName = "Volvo", price = 200;

여러 줄로 나누어 작성할 수도 있다.

let person = "John Doe",
    carName = "Volvo",
    price = 200;

여러 변수를 한 번에 선언할 수 있지만, 초급 단계에서는 한 줄에 하나의 변수를 선언하는 방식이 더 읽기 쉽다.

let person = "John Doe";
let carName = "Volvo";
let price = 200;

12. 대입 연산자

자바스크립트에서 =는 대입 연산자(assignment operator)이다. 수학에서 사용하는 “같다”의 의미가 아니라, 오른쪽 값을 왼쪽 변수에 저장한다는 의미이다.

let x = 10;

위 코드는 x와 10이 같다는 뜻이 아니다.
숫자 10을 변수 x에 저장한다는 뜻이다.

다음 코드도 자바스크립트에서는 올바른 코드이다.

let x = 5;

x = x + 5;

console.log(x);

실행 결과는 다음과 같다.

x = x + 5는 기존 x의 값 5에 5를 더하여 다시 x에 저장한다는 뜻이다.

13. 변수와 산술 연산

변수는 숫자를 저장하고 계산하는 데 사용할 수 있다. +, -, *, /와 같은 산술 연산자를 사용하여 계산할 수 있다.

let x = 5 + 2 + 3;

console.log(x);

실행 결과는 다음과 같다.

상품 금액을 계산하는 예제는 다음과 같다.

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

console.log(total);

실행 결과는 다음과 같다.

14. 변수와 문자열 연결

+ 연산자는 숫자에서는 더하기를 의미하지만, 문자열에서는 문자열을 이어 붙이는 역할을 한다.

let fullName = "John" + " " + "Doe";

console.log(fullName);

실행 결과는 다음과 같다.

John Doe

한글 문자열도 같은 방식으로 연결할 수 있다.

let lastName = "홍";
let firstName = "길동";
let fullName = lastName + firstName;

console.log(fullName);

실행 결과는 다음과 같다.

홍길동

숫자를 따옴표 안에 넣으면 문자열로 처리된다.

let result = "5" + 2 + 3;

console.log(result);

실행 결과는 다음과 같다.

"5"가 문자열이므로 뒤의 2와 3도 문자열처럼 이어 붙여진다.

다음 코드는 먼저 숫자 계산이 이루어진 뒤 문자열이 이어진다.

let result = 2 + 3 + "5";

console.log(result);

실행 결과는 다음과 같다.

먼저 2 + 3이 계산되어 5가 되고, 그 다음 문자열 "5"와 연결되어 "55"가 된다.

15. 종합 예제

다음 예제는 변수 선언, 값 저장, 계산, 문자열 연결, HTML 출력까지 함께 사용한 코드이다.

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

  <script>
    const productName = "노트북";
    const price = 1200000;
    let count = 2;
    let totalPrice = price * count;

    document.getElementById("result").innerHTML =
      productName + " " + count + "개의 총 금액은 " + totalPrice + "원입니다.";
  </script>
</body>
</html>

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

productName에는 상품 이름 "노트북"을 저장한다.
price에는 상품 가격 1200000을 저장한다.
count에는 상품 수량 2를 저장한다.
totalPrice에는 price * count의 계산 결과를 저장한다.
innerHTML을 사용하여 결과 문장을 웹페이지에 출력한다.

실행 결과는 다음과 같다.

노트북 2개의 총 금액은 2400000원입니다.

16. 핵심 정리

변수(variable)는 데이터를 저장하는 공간이다. 자바스크립트에서는 let, const, var를 사용하여 변수를 선언할 수 있다. 현대 자바스크립트에서는 값이 바뀌지 않으면 const, 값이 바뀌어야 하면 let을 사용한다. var는 오래된 방식이므로 새 코드에서는 가급적 사용하지 않는다.

변수 이름은 식별자(identifier)라고 하며, 문자, 숫자, _, $를 사용할 수 있다. 단, 숫자로 시작할 수 없고, 예약어를 사용할 수 없으며, 대소문자를 구분한다.

=는 오른쪽 값을 왼쪽 변수에 저장하는 대입 연산자이다. 변수에는 숫자와 문자열을 저장할 수 있으며, 숫자는 따옴표 없이 작성하고 문자열은 따옴표 안에 작성한다. + 연산자는 숫자에서는 덧셈을 수행하고, 문자열에서는 문자열을 이어 붙인다.

JavaScript Comments

jsBae — Sat, 4 Jul 2026 15:31:06 +0900

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

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

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

자바스크립트 명령문

jsBae — Sat, 4 Jul 2026 15:22:55 +0900

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과 같은 키워드는 자바스크립트에서 특별한 의미를 가지므로 변수 이름으로 사용할 수 없다.

자바스크립트 문법

jsBae — Sat, 4 Jul 2026 15:19:41 +0900

1. 문법의 의미

프로그래밍 언어에서 문법(syntax)은 프로그램을 어떤 규칙에 따라 작성하여야 하는지를 정한 약속이다. 자바스크립트(JavaScript)도 정해진 문법에 맞게 작성하여야 브라우저가 코드를 올바르게 해석하고 실행할 수 있다.

다음 코드는 자바스크립트 문법의 기본 형태를 보여준다. 변수(variable)를 만들고, 값을 저장하고, 계산 결과를 새로운 변수에 넣는 구조이다.

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

위 코드의 의미는 다음과 같다.

x라는 변수에 숫자 5를 저장한다.
y라는 변수에 숫자 6을 저장한다.
x + y의 계산 결과를 z라는 변수에 저장한다.

따라서 z의 값은 11이 된다.

2. 자바스크립트 값

자바스크립트에서 사용하는 값(value)은 크게 두 가지로 나눌 수 있다.

첫째는 리터럴(literal)이다.
리터럴은 코드에 직접 적은 고정된 값이다.
둘째는 변수(variable)이다.
변수는 값을 저장하는 이름이 있는 공간이다.

10
"Hello"
let name = "Hong";

위 코드에서 10과 "Hello"는 리터럴이다.
name은 값을 저장하는 변수이다.

3. JavaScript Literals

3.1 숫자 리터럴

숫자(number)는 정수와 소수 형태로 작성할 수 있다.

1001
10.50

자바스크립트에서는 숫자를 따옴표 없이 작성한다.

let price = 1000;
let rate = 0.15;

위 코드에서 price에는 숫자 1000이 저장되고, rate에는 숫자 0.15가 저장된다.

3.2 문자열 리터럴

문자열(string)은 글자 데이터를 의미한다. 문자열은 큰따옴표(" ") 또는 작은따옴표(' ') 안에 작성한다.

"John Doe"
'John Doe'

두 방식 모두 문자열을 표현할 수 있다.

let userName = "홍길동";
let message = '안녕하세요.';

문자열은 숫자와 달리 따옴표 안에 작성하여야 한다. 따옴표가 없으면 자바스크립트는 글자를 변수 이름이나 키워드로 해석하려고 한다.

4. 키워드

키워드(keyword)는 자바스크립트에서 특별한 의미를 가진 예약된 단어이다. let과 const는 변수를 만들 때 사용하는 대표적인 키워드이다.

let x = 5;
const fname = "John";

let은 값을 변경할 수 있는 변수를 만들 때 사용한다.
const는 값을 다시 바꾸지 않을 변수를 만들 때 사용한다.

let score = 0;
score = 10;

const title = "JavaScript";

위 코드에서 score는 처음에 0이었다가 나중에 10으로 변경된다.
title은 const로 선언하였기 때문에 다시 다른 값으로 바꾸면 오류가 발생한다.

자바스크립트의 키워드는 대소문자를 구분한다. let은 키워드이지만, LET이나 Let은 let과 같지 않다.

let x = 10;   // 올바른 작성
LET y = 20;   // 올바르지 않은 작성
Let z = 30;   // 올바르지 않은 작성

5. 변수( variable )

변수(variable)는 데이터를 저장하는 공간이다. 변수에는 숫자, 문자열, 계산 결과 등 다양한 값을 저장할 수 있다.

let x;
x = 6;

위 코드는 두 단계로 나누어 볼 수 있다. 먼저 let x;는 x라는 변수를 만든다. 다음으로 x = 6;은 변수 x에 숫자 6을 저장한다.

변수를 만들면서 바로 값을 저장할 수도 있다.

let x = 6;
let name = "홍길동";
let score = 90;

변수는 프로그램 안에서 값을 기억하고 다시 사용할 수 있게 해 준다.

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

console.log(total);

위 코드에서 total은 price * count의 계산 결과를 저장한다.
따라서 콘솔에는 30000이 출력된다.

6. 식별자

식별자(identifier)는 변수에 붙이는 이름이다. 변수 이름, 함수 이름, 객체 이름 등에 사용된다. 식별자를 만들 때는 정해진 규칙을 따라야 한다.

자바스크립트 식별자 규칙은 다음과 같다.

첫째, 문자, 밑줄(_), 달러 기호($)로 시작할 수 있다.
둘째, 첫 글자 뒤에는 숫자를 포함할 수 있다.
셋째, let, const, if와 같은 예약어를 식별자로 사용할 수 없다.
넷째, 대소문자를 구분한다.

올바른 변수 이름의 예는 다음과 같다.

let name;
let userName;
let _count;
let $price;
let score1;

올바르지 않은 변수 이름의 예는 다음과 같다.

let 1score;      // 숫자로 시작
let user-name;   // 하이픈 사용
let let;         // 예약어 사용

하이픈(-)은 변수 이름에 사용할 수 없다. 자바스크립트에서 하이픈은 뺄셈 연산자로 사용되기 때문이다.

let firstName = "길동";
let lastName = "홍";

위 코드처럼 여러 단어를 연결할 때는 보통 카멜 표기법(camel case)을 사용한다.

7. 연산자

연산자(operator)는 값을 계산하거나 변수에 값을 저장할 때 사용하는 기호이다.

7.1 대입 연산자

대입 연산자(assignment operator) =는 오른쪽 값을 왼쪽 변수에 저장한다.

let x = 5;
let y = 6;
let sum = x + y;

위 코드에서 x에는 5, y에는 6이 저장된다.
sum에는 x + y의 결과인 11이 저장된다.

여기서 =는 수학에서 말하는 “같다”의 의미가 아니라, 오른쪽 값을 왼쪽에 저장한다는 의미이다.

7.2 산술 연산자

산술 연산자(arithmetic operator)는 숫자를 계산할 때 사용한다. 대표적인 산술 연산자는 +, -, *, /이다.

+ 10
- 3
* 10
/ 4

각 연산의 결과는 다음과 같다.

변수와 함께 사용할 수도 있다.

let a = 10;
let b = 3;

console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);

8. 표현식

표현식(expression)은 값, 변수, 연산자를 조합하여 하나의 결과값을 만들어 내는 코드이다.

(5 + 6) * 10

위 표현식은 먼저 괄호 안의 5 + 6을 계산한다. 그 결과 11에 10을 곱하므로 최종 결과는 110이다.

변수를 포함한 표현식도 만들 수 있다.

let x = 5;

x * 10

x의 값이 5라면 x * 10의 결과는 50이다.

문자열도 표현식에 사용할 수 있다. + 연산자는 숫자에서는 더하기를 의미하지만, 문자열에서는 문자열을 이어 붙이는 역할을 한다.

"John" + " " + "Doe"

실행 결과는 다음과 같다.

John Doe

한글 문자열도 같은 방식으로 연결할 수 있다.

let lastName = "홍";
let firstName = "길동";

console.log(lastName + firstName);

실행 결과는 다음과 같다.

홍길동

9. 대소문자 구분

자바스크립트는 대소문자를 구분한다. 따라서 lastName과 lastname은 서로 다른 변수이다.

let lastName = "Doe";
let lastname = "Peterson";

위 코드에서 lastName과 lastname은 다른 변수로 처리된다.
중간의 대문자 N 하나만 달라도 다른 이름이 된다.

다음 예제를 살펴보자.

let userName = "홍길동";
let username = "김철수";

console.log(userName);
console.log(username);

실행 결과는 다음과 같다.

홍길동
김철수

userName과 username은 서로 다른 변수이다. 변수 이름을 작성할 때 대소문자를 일관되게 사용하는 습관이 필요하다.

10. 카멜 표기법

여러 단어를 하나의 변수 이름으로 만들 때는 표기법을 정하여 작성한다. 자바스크립트에서는 보통 소문자 카멜 표기법(lower camel case)을 많이 사용한다.

카멜 표기법은 첫 단어는 소문자로 시작하고, 두 번째 단어부터 첫 글자를 대문자로 쓰는 방식이다.

let firstName = "길동";
let lastName = "홍";
let userAge = 20;
let totalPrice = 30000;

하이픈 방식은 자바스크립트 변수 이름에 사용할 수 없다.

let first-name = "길동";  // 올바르지 않음

밑줄 방식은 사용할 수 있다.

let first_name = "길동";
let last_name = "홍";

파스칼 표기법(Pascal case)은 각 단어의 첫 글자를 대문자로 쓰는 방식이다.

let FirstName = "길동";
let LastName = "홍";

기본 변수 이름에는 보통 firstName, lastName, totalPrice와 같은 소문자 카멜 표기법을 사용한다.

11. 종합 예제

다음 예제는 자바스크립트 문법의 기본 요소를 함께 사용한 코드이다.

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

  <script>
    let price = 10000;
    let count = 3;
    let totalPrice = price * count;

    document.getElementById("result").innerHTML =
      "총 금액은 " + totalPrice + "원입니다.";
  </script>
</body>
</html>

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

price 변수에 상품 가격 10000을 저장한다.
count 변수에 수량 3을 저장한다.
totalPrice 변수에 price * count의 계산 결과를 저장한다
innerHTML을 사용하여 계산 결과를 웹페이지에 출력한다.

실행 결과는 다음과 같다.

총 금액은 30000원입니다.

12. 핵심 정리

자바스크립트 문법은 프로그램을 작성하는 기본 규칙이다. 문법을 이해하면 변수 선언, 값 저장, 계산, 문자열 연결, 화면 출력과 같은 기본 동작을 정확하게 작성할 수 있다.

자바스크립트의 값은 리터럴과 변수로 나눌 수 있다. 숫자는 따옴표 없이 작성하고, 문자열은 큰따옴표나 작은따옴표 안에 작성한다. let과 const는 변수를 만들 때 사용하는 키워드이다. 변수 이름은 문자, _, $로 시작할 수 있고, 숫자는 첫 글자로 사용할 수 없다. 자바스크립트는 대소문자를 구분하므로 userName과 username은 서로 다른 변수이다.

연산자는 값을 계산하거나 변수에 값을 저장할 때 사용한다. 표현식은 값, 변수, 연산자가 결합되어 하나의 결과값을 만들어 내는 코드이다. 여러 단어로 변수 이름을 만들 때는 totalPrice, userName, firstName처럼 소문자 카멜 표기법을 주로 사용한다.