[11일차] JavaScript 배열 완벽 가이드: 기초부터 메서드 활용까지

 

목차

1. 배열이란?
2. 배열 선언 및 초기화
3. 배열 요소 접근 및 수정
4. 배열의 주요 메서드
   • 요소 추가 및 제거
   • 탐색
   • 변환
5. 배열의 고급 활용 예제
6. 실습: 배열로 간단한 프로그램 만들기

---

1. 배열이란?

배열(Array)은 JavaScript에서 여러 데이터를 하나의 변수에 저장할 수 있는 구조입니다.
배열은 숫자, 문자열, 객체 등 다양한 데이터 타입을 혼합하여 저장할 수 있습니다.

예시:

let fruits = ["사과", "바나나", "체리"];
let mixedArray = [1, "문자열", true, { key: "value" }];

---

2. 배열 선언 및 초기화

1) 배열 선언

배열은 [] 대괄호를 사용하여 선언합니다.

let emptyArray = []; // 빈 배열
let numbers = [1, 2, 3, 4, 5]; // 숫자 배열

2) 배열 초기화

배열의 각 요소는 0부터 시작하는 인덱스(index)를 사용하여 접근할 수 있습니다.

let colors = ["빨강", "초록", "파랑"];
console.log(colors[0]); // 빨강
console.log(colors[2]); // 파랑

---

3. 배열 요소 접근 및 수정

1) 요소 접근

배열 요소는 인덱스를 통해 읽을 수 있습니다.

let fruits = ["사과", "배", "포도"];
console.log(fruits[1]); // 배

2) 요소 수정

인덱스를 사용해 배열의 값을 변경할 수 있습니다.

fruits[1] = "바나나";
console.log(fruits); // ["사과", "바나나", "포도"]

3) 배열 길이

배열의 길이는 .length를 사용하여 확인할 수 있습니다.

console.log(fruits.length); // 3

---

4. 배열의 주요 메서드

1) 요소 추가 및 제거

• push: 배열의 끝에 요소를 추가
• pop: 배열의 마지막 요소를 제거

let animals = ["고양이", "강아지"];
animals.push("토끼"); // ["고양이", "강아지", "토끼"]
animals.pop();        // ["고양이", "강아지"]

• unshift: 배열의 앞에 요소를 추가
• shift: 배열의 첫 번째 요소를 제거

animals.unshift("새"); // ["새", "고양이", "강아지"]
animals.shift();       // ["고양이", "강아지"]

---

2) 탐색

• indexOf: 특정 값의 첫 번째 인덱스를 반환
• includes: 배열에 값이 포함되어 있는지 확인

let numbers = [10, 20, 30, 40];
console.log(numbers.indexOf(30)); // 2
console.log(numbers.includes(50)); // false

---

3) 변환

• slice: 배열의 일부를 복사하여 새로운 배열 생성
• splice: 배열의 특정 위치에서 요소를 추가/제거

let fruits = ["사과", "바나나", "체리", "포도"];

// slice
let selectedFruits = fruits.slice(1, 3);
console.log(selectedFruits); // ["바나나", "체리"]

// splice
fruits.splice(2, 1, "귤");
console.log(fruits); // ["사과", "바나나", "귤", "포도"]

• join: 배열 요소를 문자열로 합치기
• split: 문자열을 배열로 분리

let words = ["안녕하세요", "세계"];
console.log(words.join(" ")); // "안녕하세요 세계"

let text = "1,2,3";
let splitArray = text.split(",");
console.log(splitArray); // ["1", "2", "3"]

---

5. 배열의 고급 활용 예제

1) 배열 순회

• for 반복문
• for...of
• forEach

let fruits = ["사과", "바나나", "체리"];

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

// for...of
for (let fruit of fruits) {
    console.log(fruit);
}

// forEach
fruits.forEach((fruit) => console.log(fruit));

 

---

2) 배열 필터링 및 변환

• filter: 조건을 만족하는 요소만 반환
• map: 배열 요소를 변환

let numbers = [1, 2, 3, 4, 5];

// 짝수만 필터링
let evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log(evenNumbers); // [2, 4]

// 모든 숫자에 2배
let doubledNumbers = numbers.map((num) => num * 2);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

---

6. 실습: 배열로 간단한 프로그램 만들기

예제: 쇼핑 리스트 관리

let shoppingList = [];

// 아이템 추가
function addItem(item) {
    shoppingList.push(item);
    console.log(`${item}이 추가되었습니다.`);
}

// 아이템 제거
function removeItem(item) {
    let index = shoppingList.indexOf(item);
    if (index !== -1) {
        shoppingList.splice(index, 1);
        console.log(`${item}이 제거되었습니다.`);
    } else {
        console.log(`${item}은(는) 리스트에 없습니다.`);
    }
}

// 리스트 출력
function showList() {
    console.log("현재 쇼핑 리스트:", shoppingList.join(", "));
}

// 테스트
addItem("우유");
addItem("빵");
showList(); // 현재 쇼핑 리스트: 우유, 빵
removeItem("우유");
showList(); // 현재 쇼핑 리스트: 빵

 

 

---

정리 및 다음 단계

이번 시간은 배열의 기초와 자주 사용하는 메서드에 대해 배웠습니다.

• 배열은 데이터를 효율적으로 관리할 수 있는 중요한 도구입니다.
• 다양한 메서드를 활용하면 배열을 더 효과적으로 사용할 수 있습니다.

다음 시간에는 객체(Object)에 대해 알아보겠습니다.
객체는 배열과 함께 JavaScript 데이터 구조의 핵심 개념입니다.