13 배열 실습, 홍팍이의 주문 목록
# 배열 실습
## 미션
배열의 개념과 그 사용법을 실습을 통해 익히시오.
<img src="http://drive.google.com/uc?export=view&id=1kHHrmcynVLbzd7j47mYKW1QyJxKSyBls" alt="홍팍-자바스크립트-배열-실습-미션">
## 00:45 기본 파일 생성
arrays.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="arrays.css">
<Script defer src="arrays.js"></Script>
</head>
<body>
<h1>배열, 여러 변수를 하나로!</h1>
<h2>1. 배열 만들기</h2>
<pre>
자취생 홍팍, 그는 오늘도 배달을 시킨다..
아침은 샌드위치, 점심은 초밥, 저녁은 치킨을 먹었다.
가격은 차례로 11000원, 16000원, 19000원이었다.
</pre>
<h2>2. 배열 읽고 쓰기</h2>
<pre>
만만치 않은 하루 식비..!
아, 그러고보니 배달비도 모두 2000원씩 있었다.
</pre>
<h2>3. 배열 요소 추가하기</h2>
<pre>
그러고 보니 방금, 또 시켰다. 궁극의 야식 떡튀순을 말이다.
떡볶이(3000원), 튀김(3000원), 순대(4000원)..!
이벤트로 배달비는 없었다.
</pre>
<h2>4. 배열과 반복문</h2>
<pre>
그럼, 오늘 식비로 모두 얼마를 쓴거지?
</pre>
<h2>5. 배열과 함수호출</h2>
<pre>
그렇다. 홍팍이는 먹는거에 진심인 편이다.
= 주문음식 목록 =
샌드위치: 13000 원
초밥: 18000 원
치킨: 21000 원
떡볶이: 3000 원
튀김: 3000 원
순대: 4000 원
==============
총합: 62000 원
</pre>
</body>
</html>
```
arrays.css
```
/*
* CSS 관련 구글링
* 👉 site:developer.mozilla.org {연관_키워드}
*/
body {
font-family: Arial, Helvetica, sans-serif;
}
pre {
background-color: #efefef;
padding-top: 1rem;
margin: 0;
}
```
arrays.js
```
// JavaScript 관련 구글링
// 👉 site:developer.mozilla.org {연관_키워드}
'use strict';
```
## 01:33 배열 만들기
```
// 1. 배열이란?
// - 여러 변수를 하나로 묶은 것
// - 배열의 각 요소는 인덱스로 구분 됨
// - 요소의 타입은 모두 같아야 좋음
// 배열 생성 예
const menus = ["샌드위치", "초밥", "치킨"];
const prices = [11000, 16000, 19000];
console.log(menus);
console.log(prices);
```
## 04:52 배열 읽고 쓰기
인덱스 사용법
```
// 2. 배열 다루기
// - 인덱스는 기본적으로 0부터 시작
// - 인덱스를 통해 배열의 각 요소로 접근 가능
// 배열 요소 가져오기: 식비 총합 계산
let sum = prices[0] + prices[1] + prices[2];
console.log(`총합: ${sum} 원`);
// 배열 요소 변경하기: 배달비 추가
prices[0] += 2000;
prices[1] += 2000;
prices[2] += 2000;
console.log(prices);
// 최종 총합 계산
sum = prices[0] + prices[1] + prices[2];
console.log(`총합(배달비 포함): ${sum} 원`);
```
## 08:07 배열 요소 추가하기
인덱스 끝자리에 넣기 vs Array.push() 사용하기
```
// 3. 배열 요소 추가하기
// - 끝자리 인덱스로 요소를 추가할 수 있음
// - push() 함수: 알아서 끝자리에 추가하므로 편리함
// 인덱스로 요소 추가
// menus[3] = "떡볶이";
// prices[3] = 3000;
menus.push("떡볶이");
prices.push(3000);
// menus[4] = "튀김";
// prices[4] = 3000;
menus.push("튀김");
prices.push(3000);
// menus[5] = "순대";
// prices[5] = 4000;
menus.push("순대");
prices.push(4000);
console.log(menus);
console.log(prices);
```
## 11:09 배열 순회하기
배열의 총합 계산
```
// 4. 배열과 반복문
// - 배열은 반복문과 함께 자주 사용 됨
// - 배열을 차례로 순회하는 경우가 많음
// - for 문, for..of, forEach 등과 함께 활용
// 배열을 순회하며, 총합 구하기(홍팍이의 식비 총합 계산)
sum = 0;
for (let i = 0; i < prices.length; i += 1) {
sum += prices[i];
}
console.log(`총합(배달비 + 야식): ${sum} 원`);
```
## 14:54 배열과 함수호출
파라미터로 배열 전달, call by reference
```
// 5. 배열과 함수호출
// - 배열도 함수의 파라미터로 전달될 수 있음
// - 배열이 파라미터로 전달되는 경우, 원본이 전달됨(call by reference)
// - 일반변수가 파라미터로 전달되는 경우, 사본이 복사됨(call by value)
// 배열을 입력값으로한 함수 호출(주문 영수증 출력하기)
function printReceipt(menuArr, priceArr) {
// 주문 목록 출력
console.log("= 주문음식 목록 =");
for (let i = 0; i < menuArr.length; i += 1) {
console.log(`${menuArr[i]}: ${priceArr[i]} 원`);
}
// 총합 출력
console.log("==============");
const sum = totalPrice(priceArr);
console.log(`총합: ${sum} 원`);
}
function totalPrice(arr) {
let total = 0;
for (let i = 0; i < arr.length; i += 1) {
total += arr[i];
}
return total;
}
printReceipt(menus, prices);
```
## 구글링 훈련하기 🔥
- 자바스크립트 배열 생성
- 자바스크립트 배열과 인덱스
- 자바스크립트 배열 순회
- 자바스크립트 for of 사용법
- 자바스브립트 forEach 사용법
- 자바스크립트 배열 총합 계산
- 자바스크립트 call by reference