티스토리 뷰

Front-End-Web/javascript

자바스크립트와 객체

jsBae 2026. 8. 2. 23:21

학습목표

이번 장에서는 여러 개의 데이터를 하나의 단위로 묶어서 관리하는 객체(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 → 웹 데이터 처리를 이해하는 기반이 된다.

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2026/08 »
일	월	화	수	목	금	토
						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

글 보관함

티스토리 뷰

자바스크립트와 객체

학습목표

1. 개념

1.1 객체란 무엇인가?

1.2 현실 세계와 객체

자동차의 정보

1.3 객체의 기본 구조

1.4 객체를 사용하는 이유

1.5 객체의 속성에 접근하기

① 점 표기법(Dot Notation)

② 대괄호 표기법(Bracket Notation)

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

1.7 객체 속성의 값 변경하기

중요

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

1.9 객체의 속성 삭제하기

1.10 객체와 메서드(Method)

1.11 this의 이해

2. 기본예제

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

코드 이해하기

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

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

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

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

기본예제 6. this 사용하기

3. 활용예제

나의 프로필 객체 만들기

HTML

JavaScript

실행 과정

4. 바이브코딩 종합예제

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

4.1 완성 프로그램

4.2 캐릭터 객체

4.3 HTML 작성하기

4.4 JavaScript 작성하기

4.5 객체의 변화 살펴보기

4.6 AI를 이용한 바이브코딩

바이브코딩 프롬프트

4.7 학생 미션

5. 핵심요약

① 객체

② 속성 Property

③ 속성 접근

④ 속성 변경

⑤ 속성 추가

⑥ 속성 삭제

⑦ 메서드

⑧ this

객체 단원 전체 흐름

티스토리툴바