14 객체, 내가 만든 데이터 묶음
# 객체, 내가 만든 데이터 묶음
## 미션
객체의 개념과 그 사용법을 익히시오.
<img src="http://drive.google.com/uc?export=view&id=1kdakuFSBpTlvoD_BVCBju_l79N_T0S6i" alt="홍팍-자바스크립트-객체-기초-미션">
## 개념
### 객체란?
사용자 정의형 데이터, 이를 객체라 한다. 다시 말해, 내 맘대로 만드는 데이터이다. 객체는 여러개의 프로퍼티(키와 값의 쌍)들로 구성된다. 다음은 3개의 프로퍼티로 구성된 객체의 예이다. name/price/kcal은 각 프로퍼티의 키가 되고, 해당 키의 값들이 각각 "당당치킨"/6990/2100 이다.
<img src="http://drive.google.com/uc?export=view&id=1kfDUE5-KTAaTqBi2-1AZJiGoy9JC0l_X" alt="홍팍-자바스크립트-객체-기초-프로퍼티-키와-값">
### 객체 사용법
객체의 값은 키를 통해 가져올 수 있다. 이때 dot 연산 또는 bracket 연산이 사용된다.
<img src="http://drive.google.com/uc?export=view&id=1kedxZ12h9e3KtzBMETktjpTAGDTzuA2W" alt="홍팍-자바스크립트-객체-기초-닷-연산과-bracket-연산">
### 객체 프로퍼티 확인하기
객체의 모든 프로퍼티는 for..in 루프로 순회할 수 있다. 각각의 프로퍼티의 존재 여부는 in 연산자로 알 수 있다.
```
// chicken 객체의 모든 프로퍼티를 순회하며 출력
for (let key in chicken) {
const value = chicken[key];
console.log(`${key} => ${value}`);
}
// 객체 속 프로퍼티 여부 확인
console.log("name" in chicken); // true
console.log("price" in chicken); // true
console.log("weight" in chicken); // false
```
## 실습
### 02:07 기본 파일 생성
objects.html
```
<!-- HTML 관련 구글링 -->
<!-- 👉 site:developer.mozilla.org {연관_키워드} -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 외부 파일 연결 -->
<link rel="stylesheet" href="objects.css">
<Script defer src="objects.js"></Script>
</head>
<body>
<h1>객체, 내가 만든 데이터!</h1>
<h2>1. 객체 만들기</h2>
<pre>
겜방에 간 홍팍.
신성한 게임을 위해, 먼저 메뉴판을 본다.
== 메뉴판 ==
뽀글이(3000원)
슈넬치킨(5000원)
코카콜라(1000원)
아메리카노(1500원)
</pre>
<h2>2. 객체 값 읽고 쓰기</h2>
<pre>
주문을 하다보니 왠걸,
메뉴 가격이 500원 씩 올랐다.
== 메뉴판(가격 인상) ==
뽀글이(3500원)
슈넬치킨(5500원)
코카콜라(1500원)
아메리카노(2000원)
</pre>
<h2>3. 객체 프로퍼티 확인하기</h2>
<pre>
메뉴 주문을 마치고, 게임에 접속한 홍팍.
== 로그인 성공 ==
name: 홍팍
level: 40
hp: 1200
mp: 800
skills: ["에너지볼트", "파이어볼", "토네이도"]
</pre>
<h2>4. 객체 배열 생성 및 순회</h2>
<pre>
즐겜을 마치고, 겜방을 나서는 홍팍.
영수증을 확인하는데..
== 이용내역 ==
겜방 3시간(3000원)
슈넬치킨(5500원)
코카콜라(1500원)
아메리카노(2000원)
== 총합 ==
12000원
</pre>
</body>
</html>
```
objects.css
```
/*
* CSS 관련 구글링
* 👉 site:developer.mozilla.org {연관_키워드}
*/
body {
font-family: Arial, Helvetica, sans-serif;
}
pre {
background-color: #efefef;
padding-top: 1rem;
margin: 0;
}
```
objects.js
```
// JavaScript 관련 구글링
// 👉 site:developer.mozilla.org {연관_키워드}
'use strict';
```
### 02:53 객체 만들기
```
// 1. 객체란?
// - 사용자가 직접 만드는 데이터로서, 프로퍼티의 집합임
// - 프로퍼티는 키(key)와 값(value)로 구성됨
// 객체 생성
const ramen = {
name: "뽀글이",
price: 3000
};
const chicken = {
name: "슈넬치킨",
price: 5000
};
const coke = {
name: "코카콜라",
price: 1000
};
const americano = {
name: "아메리카노",
price: 1500,
};
// 객체 출력
console.log("== 메뉴판 ==");
console.log(ramen);
console.log(chicken);
console.log(coke);
console.log(americano);
```
### 06:03 객체 값 읽고 쓰기
닷 연산
```
// 2. 프로퍼티 다루기(읽기, 쓰기)
// - 닷 연산: 객체의 키를 통해 값을 가져옴
// - 대괄호 연산: 객체의 키를 조작하여 값을 가져올 수 있음
// 메뉴의 가격 변경
ramen.price += 500;
chicken.price += 500;
coke.price += 500;
americano.price += 500;
// 결과 출력
console.log("== 메뉴판(가격 인상) ==");
console.log(`${ramen.name}(${ramen.price}원)`);
console.log(`${chicken.name}(${chicken.price}원)`);
console.log(`${coke.name}(${coke.price}원)`);
console.log(`${americano.name}(${americano.price}원)`);
```
대괄호 연산
```
// 메뉴의 가격 변경
ramen["price"] += 500;
chicken["price"] += 500;
coke["price"] += 500;
americano["price"] += 500;
// 결과 출력
console.log("== 메뉴판(가격 인상) ==");
console.log(`${ramen["name"]}(${ramen["price"]}원)`);
console.log(`${chicken["name"]}(${chicken["price"]}원)`);
console.log(`${coke["name"]}(${coke["price"]}원)`);
console.log(`${americano["name"]}(${americano["price"]}원)`);
```
### 09:52 객체 프로퍼티 확인하기
```
// 3. 객체 프로퍼티(key: value) 확인하기
// - for..in 루프: 객체의 모든 프로퍼티를 순회하는 반복문
// - in 연산자: 프로퍼티 존재 여부를 확인
// 캐릭터 객체 생성
const hongpark = {
name: "홍팍",
level: 40,
hp: 1200,
mp: 800,
skills: ["에너지볼트", "파이어볼", "토네이도"],
};
// 객체 상태 출력
console.log(hongpark);
// for..in 루프로 프로퍼티 순회
for (let key in hongpark) {
console.log(`${key}: ${hongpark[key]}`);
}
// in 연산자로 프로퍼티 존재 여부 확인
console.log("name" in hongpark);
console.log("age" in hongpark);
console.log("skills" in hongpark);
```
### 13:47 객체 배열 활용하기
```
// 4. 객체 배열 생성 및 순회
// - 객체 또한 배열에 담길 수 있음
// - 대표 배열 순회법: for, for..of, forEach, ..
// 애용내역 객체 배열 만들기
const arr = [
{name: "겜방 3시간", price: 3000}, // 0
{name: "슈넬치킨", price: 5500}, // 1
{name: "코카콜라", price: 1500}, // 2
{name: "아메리카노", price: 2000} // 3
];
// 내역 출력
console.log("== 이용내역 ==");
// 고전 for 루프
for (let i = 0; i < arr.length; i += 1) {
console.log(`${arr[i].name}(${arr[i].price}원)`);
}
// for..of
for (let item of arr) {
console.log(item);
}
// 총합 계산
console.log("== 총합 ==");
let sum = 0;
for (let i = 0; i < arr.length; i += 1) {
sum += arr[i].price;
}
console.log(`${sum} 원`);
```
## 구글링 훈련 🔥
- 자바스크립트 리터럴 객체
- 자바스크립트 객체 생성
- 자바스크립트 객체 사용법
- 자바스크립트 객체 프로퍼티 확인
- 자바스크립트 객체 배열 순회하기
- 자바스크립트 for of 사용법