초보자를 위한 자바스크립트 배열 메서드 완벽 가이드

사진: Unsplash의Tolga Ahmetler

초보자를 위한 자바스크립트 배열 메서드 완벽 가이드

안녕하세요! 오늘은 자바스크립트에서 가장 많이 사용되는 배열 메서드들에 대해 쉽게 설명해드리려고 합니다. 특히 map(), filter(), reduce() 등의 메서드는 현대 자바스크립트 프로그래밍에서 매우 중요한 역할을 하는데요, 천천히 하나씩 알아보도록 하겠습니다! 😊

목차

1. map() 메서드
2. filter() 메서드
3. reduce() 메서드
4. slice()와 offset 개념
5. 실전 예제

map() 메서드

map()이란?

map()은 배열의 각 요소를 변환하여 새로운 배열을 만들 때 사용합니다. 원본 배열은 그대로 유지되며, 각 요소를 원하는 형태로 변경할 수 있습니다.

기본 문법

const 새로운배열 = 배열.map((요소, 인덱스, 배열) => {
    return 변환된요소;
});

간단한 예제

// 숫자 배열의 각 요소를 2배로 만들기
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// 객체 배열에서 특정 속성만 추출하기
const users = [
    { id: 1, name: '김철수', age: 20 },
    { id: 2, name: '이영희', age: 25 },
    { id: 3, name: '박민수', age: 30 }
];
const names = users.map(user => user.name);
console.log(names); // ['김철수', '이영희', '박민수']

filter() 메서드

filter()란?

filter()는 배열에서 특정 조건을 만족하는 요소들만 추출하여 새로운 배열을 만들 때 사용합니다.

기본 문법

const 새로운배열 = 배열.filter((요소, 인덱스, 배열) => {
    return 조건식; // true 또는 false를 반환
});

간단한 예제

// 짝수만 필터링하기
const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]

// 성인만 필터링하기
const users = [
    { name: '김철수', age: 17 },
    { name: '이영희', age: 25 },
    { name: '박민수', age: 15 }
];
const adults = users.filter(user => user.age >= 18);
console.log(adults); // [{ name: '이영희', age: 25 }]

reduce() 메서드

reduce()란?

reduce()는 배열의 모든 요소를 하나의 값으로 줄일 때 사용합니다. 예를 들어, 배열의 합계나 평균을 구할 때 유용합니다.

기본 문법

const 결과 = 배열.reduce((누적값, 현재요소, 인덱스, 배열) => {
    return 다음누적값;
}, 초기값);

간단한 예제

// 배열의 합계 구하기
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 15

// 객체 배열의 나이 평균 구하기
const users = [
    { name: '김철수', age: 20 },
    { name: '이영희', age: 25 },
    { name: '박민수', age: 30 }
];
const averageAge = users.reduce((acc, cur) => acc + cur.age, 0) / users.length;
console.log(averageAge); // 25

slice()와 offset 개념

slice()란?

slice()는 배열의 특정 부분을 추출하여 새로운 배열을 만들 때 사용합니다. 시작 인덱스(offset)와 끝 인덱스를 지정하여 배열을 자를 수 있습니다.

offset이란?

offset은 '위치'나 '거리'를 나타내는 용어입니다. 배열에서는 시작 위치로부터 얼마나 떨어져 있는지를 나타냅니다. 예를 들어, offset이 2라면 배열의 처음부터 2개의 요소를 건너뛴 위치를 의미합니다.

기본 문법

const 새로운배열 = 배열.slice(시작인덱스, 끝인덱스);
// 끝인덱스는 선택사항이며, 포함되지 않습니다.

간단한 예제

const fruits = ['사과', '바나나', '오렌지', '포도', '키위'];

// 인덱스 1부터 3까지 추출 (끝 인덱스는 포함되지 않음)
console.log(fruits.slice(1, 3)); // ['바나나', '오렌지']

// 인덱스 2부터 끝까지
console.log(fruits.slice(2)); // ['오렌지', '포도', '키위']

// 마지막 두 요소 가져오기 (음수 인덱스 사용)
console.log(fruits.slice(-2)); // ['포도', '키위']

페이지네이션 예제

const items = ['아이템1', '아이템2', '아이템3', '아이템4', '아이템5', 
               '아이템6', '아이템7', '아이템8', '아이템9', '아이템10'];

function getPage(items, pageNumber, itemsPerPage) {
    const offset = (pageNumber - 1) * itemsPerPage;
    return items.slice(offset, offset + itemsPerPage);
}

// 한 페이지당 3개의 아이템씩 보여주기
console.log('1페이지:', getPage(items, 1, 3)); 
// ['아이템1', '아이템2', '아이템3']

console.log('2페이지:', getPage(items, 2, 3)); 
// ['아이템4', '아이템5', '아이템6']

console.log('3페이지:', getPage(items, 3, 3)); 
// ['아이템7', '아이템8', '아이템9']

실제 활용 예시: 데이터 테이블

const users = [
    { id: 1, name: '김철수', email: 'kim@example.com' },
    { id: 2, name: '이영희', email: 'lee@example.com' },
    { id: 3, name: '박민수', email: 'park@example.com' },
    { id: 4, name: '정수연', email: 'jung@example.com' },
    { id: 5, name: '강지원', email: 'kang@example.com' }
];

class DataTable {
    constructor(data, itemsPerPage = 2) {
        this.data = data;
        this.itemsPerPage = itemsPerPage;
    }

    getPageData(pageNumber) {
        const offset = (pageNumber - 1) * this.itemsPerPage;
        return {
            items: this.data.slice(offset, offset + this.itemsPerPage),
            totalPages: Math.ceil(this.data.length / this.itemsPerPage),
            currentPage: pageNumber
        };
    }
}

const table = new DataTable(users);

// 1페이지 데이터 가져오기
console.log(table.getPageData(1));
/* 출력:
{
    items: [
        { id: 1, name: '김철수', email: 'kim@example.com' },
        { id: 2, name: '이영희', email: 'lee@example.com' }
    ],
    totalPages: 3,
    currentPage: 1
}
*/

주의사항

1. slice()는 원본 배열을 변경하지 않고 새로운 배열을 반환합니다.
2. 끝 인덱스는 결과에 포함되지 않습니다.
3. 음수 인덱스를 사용하면 배열의 끝에서부터 계산합니다.
4. offset 계산 시 항상 0부터 시작하는 것을 기억해야 합니다.

실전 예제

예제 1: 장바구니 총액 계산하기

const cart = [
    { name: '노트북', price: 1200000, quantity: 1 },
    { name: '마우스', price: 35000, quantity: 2 },
    { name: '키보드', price: 98000, quantity: 1 }
];

const totalPrice = cart.reduce((acc, item) => {
    return acc + (item.price * item.quantity);
}, 0);

console.log(`총 결제금액: ${totalPrice}원`); // 총 결제금액: 1368000원

예제 2: 학생 성적 분석하기

const students = [
    { name: '김철수', score: 85 },
    { name: '이영희', score: 92 },
    { name: '박민수', score: 78 },
    { name: '정수연', score: 95 }
];

// 90점 이상인 학생 이름 추출하기
const highScorers = students
    .filter(student => student.score >= 90)
    .map(student => student.name);

console.log('우수 학생:', highScorers); // 우수 학생: ['이영희', '정수연']

// 평균 점수 계산하기
const averageScore = students
    .reduce((acc, student) => acc + student.score, 0) / students.length;

console.log(`평균 점수: ${averageScore}점`); // 평균 점수: 87.5점

메서드 체이닝

위의 메서드들은 함께 연결해서 사용할 수 있습니다. 이를 '메서드 체이닝'이라고 합니다.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const result = numbers
    .filter(num => num % 2 === 0) // 짝수만 선택
    .map(num => num * 2) // 각 숫자를 2배로
    .reduce((acc, num) => acc + num, 0); // 모든 숫자 더하기

console.log(result); // 60

주의사항

1. 모든 배열 메서드는 원본 배열을 변경하지 않고 새로운 배열을 반환합니다.
2. 화살표 함수를 사용하면 코드를 더 간단하게 작성할 수 있습니다.
3. 메서드 체이닝을 사용할 때는 각 단계가 어떤 결과를 반환하는지 잘 생각해야 합니다.

마무리

이상으로 자바스크립트의 주요 배열 메서드들에 대해 알아보았습니다. 이러한 메서드들을 잘 활용하면 코드를 더 간결하고 읽기 쉽게 작성할 수 있습니다. 처음에는 어려워 보일 수 있지만, 직접 여러 번 사용해보면서 익숙해지시면 됩니다.

더 많은 예제가 필요하시다면 댓글로 남겨주세요! 😊

#JavaScript #배열메서드 #프로그래밍 #코딩공부