배열 실습

미션

배열의 개념과 그 사용법을 실습을 통해 익히시오.
홍팍-자바스크립트-배열-실습-미션

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

목차 보기