배열 기초

1. 도입 (왜 배워야 하는가)

JavaScript에서 배열은 데이터 구조 중 하나로, 여러 값을 하나의 변수에 저장할 수 있는 매우 중요한 도구입니다. 실무에서는 사용자 데이터, 상품 목록, 게시글 등 다양한 정보를 효율적으로 관리하기 위해 배열을 사용합니다. 만약 배열을 잘 다루지 못한다면, 데이터를 조작하고 관리하는 것이 비효율적으로 되어 코드가 복잡해지고, 버그가 발생할 위험이 커집니다. 예를 들어, 쇼핑몰 웹사이트에서 고객의 장바구니를 관리할 때 배열을 활용하지 않으면 사용자가 선택한 제품을 효율적으로 저장하고 처리하기 어려워집니다.

2. 핵심 개념 설명

배열은 여러 개의 값을 순서대로 저장할 수 있는 객체입니다. 각 값은 인덱스(index)라는 고유한 번호로 접근할 수 있습니다.

실생활 비유

배열을 생각할 때는 서랍에 여러 물건을 정리하는 것을 비유할 수 있습니다. 서랍 안에 여러 물건(예: 연필, 종이, 지우개 등)을 넣을 때, 각각의 물건에 번호를 매겨두면 필요할 때 쉽게 꺼낼 수 있습니다. 배열은 이러한 방식으로 데이터를 정리하고 쉽게 접근할 수 있도록 도와줍니다.

관련 용어 정리

3. 기본 코드 예제

// 배열 생성
let fruits = ['사과', '바나나', '체리'];

// 배열의 첫 번째 요소에 접근
console.log(fruits[0]); // '사과'

// 배열의 두 번째 요소에 접근
console.log(fruits[1]); // '바나나'

// 배열의 길이 확인
console.log(fruits.length); // 3

• 실행 결과:

  사과
  바나나
  3

• 코드 한 줄씩 동작 설명:

1. let fruits = ['사과', '바나나', '체리']; : '사과', '바나나', '체리'라는 세 개의 문자열을 포함하는 배열을 생성합니다. 2. console.log(fruits[0]); : 배열의 첫 번째 요소에 접근하여 '사과'를 출력합니다. 3. console.log(fruits[1]); : 배열의 두 번째 요소에 접근하여 '바나나'를 출력합니다. 4. console.log(fruits.length); : 배열의 길이를 확인하여 3을 출력합니다.

4. 실전 활용 예제

예제 1: 쇼핑몰 장바구니 구현

쇼핑몰에서 사용자가 선택한 상품들을 배열로 저장하여 관리할 수 있습니다.

// 장바구니 배열
let cart = [];

// 상품 추가 함수
function addToCart(product) {
  cart.push(product);
}

// 상품 추가
addToCart('티셔츠');
addToCart('바지');

console.log(cart); // ['티셔츠', '바지']

• 상황 설명: 사용자가 '티셔츠'와 '바지'를 장바구니에 추가하면, addToCart 함수를 통해 배열에 추가하여 장바구니를 관리합니다.

예제 2: 점수 계산

학생의 점수를 배열로 저장하고 평균 점수를 계산할 수 있습니다.

let scores = [90, 85, 78];

// 평균 점수 계산
let total = 0;
for (let score of scores) {
  total += score;
}
let average = total / scores.length;

console.log(average); // 84.33333333333333

• 상황 설명: 각 학생의 점수를 배열로 저장하고, 반복문을 통해 평균 점수를 계산하여 출력합니다.

5. 흔한 실수와 주의사항

실수 1: 인덱스 초과

• 잘못된 코드:

let colors = ['빨강', '파랑'];
console.log(colors[2]); // undefined

• 올바른 코드:

let colors = ['빨강', '파랑'];
console.log(colors[1]); // '파랑'

• 설명: 배열의 인덱스는 0부터 시작하므로, 존재하지 않는 인덱스에 접근하면 undefined를 반환합니다.

실수 2: 배열 길이 변경

• 잘못된 코드:

let numbers = [1, 2, 3];
numbers.length = 2;
console.log(numbers); // [1, 2]

• 올바른 코드:

let numbers = [1, 2, 3];
numbers.pop(); // 마지막 요소 제거
console.log(numbers); // [1, 2]

• 설명: 배열의 길이를 직접 변경하면 데이터 손실이 발생할 수 있습니다. 배열의 메서드를 사용하여 안전하게 요소를 제거해야 합니다.

6. 정리

• 배열은 여러 값을 순서대로 저장할 수 있는 데이터 구조입니다.
• 인덱스를 사용하여 배열의 각 요소에 접근할 수 있습니다.
• 실무에서 배열은 데이터 관리, 계산 등 다양한 용도로 사용됩니다.
• 배열의 길이를 직접 변경하기보다는 메서드를 사용하여 관리해야 합니다.
• 다음에 학습하면 좋은 주제: 배열 메서드 (예: map, filter, reduce)와 객체(Object)입니다.