자바스크립트 배열(Array) 기초 배우기

안녕하세요! 오늘은 자바스크립트에서 가장 많이 사용되는 데이터 구조 중 하나인 배열(Array) 에 대해 배운 내용을 정리해보려고 합니다. 

---

1. 배열(Array)이란?

배열(Array)은 여러 개의 값을 하나의 변수에 저장할 수 있는 데이터 구조입니다.
예를 들어, 장바구니 목록을 저장하려고 할 때, 각각의 항목을 따로 변수로 저장하는 대신 배열을 활용하면 관리가 편리해집니다.

배열 선언하기

배열을 선언하는 방법은 두 가지가 있습니다.

// 방법 1: 대괄호([])를 사용
const fruits = ["apple", "banana", "grape"];

// 방법 2: Array 생성자를 사용
const vegetables = new Array("carrot", "potato", "onion");

대부분의 경우 첫 번째 방법을 더 많이 사용합니다.

---

2. 배열의 요소(Element) 다루기

배열에서 개별 요소를 다룰 때는 인덱스(Index) 를 사용합니다. 인덱스는 0부터 시작합니다.

const toBuy = ["potato", "tomato", "pizza"];

console.log(toBuy[0]); // "potato"
console.log(toBuy[1]); // "tomato"
console.log(toBuy[2]); // "pizza"

배열의 길이(요소 개수)는 .length 속성을 사용하여 확인할 수 있습니다.

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

---

3. 배열 요소 추가 및 제거

요소 추가 (push, unshift)

배열에 요소를 추가할 때는 push()와 unshift() 메서드를 사용할 수 있습니다.

const toBuy = ["potato", "tomato", "pizza"];

// 배열 끝에 추가
toBuy.push("kimbab");
console.log(toBuy); // ["potato", "tomato", "pizza", "kimbab"]

// 배열 앞에 추가
toBuy.unshift("banana");
console.log(toBuy); // ["banana", "potato", "tomato", "pizza", "kimbab"]

요소 제거 (pop, shift)

배열에서 요소를 제거할 때는 pop()과 shift() 메서드를 사용합니다.

const fruits = ["apple", "banana", "grape"];

// 배열의 마지막 요소 제거
fruits.pop();
console.log(fruits); // ["apple", "banana"]

// 배열의 첫 번째 요소 제거
fruits.shift();
console.log(fruits); // ["banana"]

---

4. 배열 요소 변경 및 검색

특정 요소 변경하기

배열의 특정 요소를 변경하려면 인덱스를 이용하면 됩니다.

const colors = ["red", "blue", "green"];
colors[1] = "yellow";
console.log(colors); // ["red", "yellow", "green"]

특정 요소 찾기

배열에서 특정 요소가 있는지 확인할 때는 indexOf()나 includes()를 사용할 수 있습니다.

const animals = ["dog", "cat", "rabbit"];

console.log(animals.indexOf("cat")); // 1 (해당 요소의 인덱스 반환)
console.log(animals.includes("rabbit")); // true (포함 여부 반환)
console.log(animals.includes("elephant")); // false

---

5. 배열을 활용한 간단한 실습

배열을 사용한 쇼핑 목록 만들기

지금까지 배운 내용을 활용하여, 쇼핑 목록을 관리하는 간단한 예제를 만들어보겠습니다.

const shoppingList = ["milk", "bread", "butter"];
console.log("현재 쇼핑 목록:", shoppingList);

// 새로운 항목 추가
shoppingList.push("cheese");
console.log("추가 후:", shoppingList);

// 첫 번째 항목 삭제
shoppingList.shift();
console.log("첫 번째 항목 삭제 후:", shoppingList);

// 특정 항목이 있는지 확인
if (shoppingList.includes("bread")) {
    console.log("빵이 목록에 있습니다!");
} else {
    console.log("빵이 목록에 없습니다!");
}

---

배열(Array)은 데이터를 효율적으로 관리하고 조작할 수 있는 강력한 도구입니다. 

• 배열은 여러 개의 데이터를 저장하는 리스트 형태의 데이터 구조이다.
• push()와 unshift()를 사용해 요소를 추가할 수 있다.
• pop()과 shift()를 사용해 요소를 제거할 수 있다.
• indexOf()와 includes()를 활용하여 요소를 찾을 수 있다.