JavaScript 배열 메서드 간단히 설명 (예시 포함)

Source: Dev.to

위에 제공된 소스 링크 외에 번역할 텍스트가 포함되어 있지 않습니다. 번역이 필요한 전체 내용을 알려주시면 한국어로 번역해 드리겠습니다.

소개

배열은 하나의 변수에 여러 값을 저장하는 데 사용됩니다.

const fruits = ["Apple", "Banana", "Mango"];

하지만 배열 안에 있는 항목을 추가, 제거 또는 변경하려면 어떻게 해야 할까요?
JavaScript는 이러한 작업을 쉽게 할 수 있도록 배열 메서드 집합을 제공합니다.
가장 중요한 메서드들을 단계별로 배워봅시다.

1. 요소 추가 및 제거

push() – 끝에 추가

배열의 끝에 새 요소를 추가합니다 (원본 배열을 변형합니다).

const fruits = ["Apple", "Banana"];
fruits.push("Mango");

console.log(fruits);
// ["Apple", "Banana", "Mango"]

pop() – 끝에서 제거

배열의 마지막 요소를 제거합니다 (원본 배열을 변형합니다).

const fruits = ["Apple", "Banana", "Mango"];
fruits.pop();

console.log(fruits);
// ["Apple", "Banana"]

unshift() – 앞에 추가

배열의 시작 부분에 새 요소를 추가합니다 (원본 배열을 변형합니다).

const fruits = ["Banana", "Mango"];
fruits.unshift("Apple");

console.log(fruits);
// ["Apple", "Banana", "Mango"]

shift() – 앞에서 제거

배열의 첫 번째 요소를 제거합니다 (원본 배열을 변형합니다).

const fruits = ["Apple", "Banana", "Mango"];
fruits.shift();

console.log(fruits);
// ["Banana", "Mango"]

2. 배열 복사 및 수정

slice() – 배열의 일부 복사

원본 배열을 변경하지 않고 선택된 요소를 포함하는 새로운 배열을 반환합니다.

구문

array.slice(startIndex, endIndex);

• startIndex → 시작 위치 (포함)
• endIndex → 종료 위치 (포함 되지 않음)

예제 1 – 일부 슬라이스

const numbers = [10, 20, 30, 40];
const result = numbers.slice(1, 3);

console.log(result);
// [20, 30]

왜? 인덱스 1(값 20)에서 시작해 인덱스 3(값 40) 전까지 멈춥니다.

예제 2 – 전체 배열 복사

const numbers = [1, 2, 3];
const copy = numbers.slice();

console.log(copy);
// [1, 2, 3]

이는 원본 배열의 얕은 복사를 생성합니다.

splice() – 어디서든 추가 또는 제거

배열의任意 위치에서 요소를 추가, 제거 또는 교체할 때 사용합니다(원본 배열을 변형시킵니다).

구문

array.splice(startIndex, deleteCount, item1, item2, ...);

• startIndex → 시작 위치
• deleteCount → 제거할 요소 개수
• item1, item2, … → (선택) 추가할 요소들

요소 제거

const numbers = [1, 2, 3, 4];
numbers.splice(1, 2); // 인덱스 1에서 시작해 2개의 요소 제거

console.log(numbers);
// [1, 4]

요소 추가

const numbers = [1, 4];
numbers.splice(1, 0, 2, 3); // 인덱스 1에서 시작해 0개 제거, 2와 3을 추가

console.log(numbers);
// [1, 2, 3, 4]

중요 규칙: splice()는 startIndex 위치에 항목을 삽입합니다; 해당 인덱스에 있던 기존 요소와 그 뒤의 요소들은 오른쪽으로 이동합니다. 인덱스 뒤에 삽입되는 것이 아니라는 점을 기억하세요.

3. 검색 방법

includes() – 값이 존재하는지 확인

const fruits = ["Apple", "Banana"];
console.log(fruits.includes("Apple")); // true

true 또는 false를 반환합니다.

indexOf() – 위치 찾기

const fruits = ["Apple", "Banana"];
console.log(fruits.indexOf("Banana")); // 1

요소의 인덱스를 반환하며, 찾지 못하면 -1을 반환합니다.

find() – 첫 번째 일치 요소 찾기

조건을 만족하는 첫 번째 요소를 반환하고, 일치하는 것이 없으면 undefined를 반환합니다.

Syntax

array.find(function(element) {
  return condition;
});

Example

const numbers = [5, 10, 15, 20];
const result = numbers.find(function(num) {
  return num > 10;
});

console.log(result);
// 15

중요: find()는 일치하는 요소를 찾는 즉시 검색을 중단합니다.

4. 반복 메서드

forEach() – 배열 순회

제공된 함수를 배열의 각 요소마다 한 번씩 실행합니다. 새 배열을 반환하지 않으며, 콜백 내부에서 직접 수정하지 않는 한 원본 배열도 변경되지 않습니다.

구문

array.forEach(function(element, index, array) {
  // 실행할 코드
});

• element → 현재 값
• index (선택) → 요소의 위치
• array (선택) → 전체 배열

예제 1 – 간단한 순회

const numbers = [1, 2, 3];
numbers.forEach(function(num) {
  console.log(num);
});

출력

1
2
3

예제 2 – 인덱스와 함께

const fruits = ["Apple", "Banana", "Mango"];
fruits.forEach(function(fruit, index) {
  console.log(index, fruit);
});

출력

0 Apple
1 Banana
2 Mango

중요 규칙: forEach()는 배열 전체를 순회하고 undefined를 반환하며 절대로 새 배열을 만들지 않습니다.

이 메서드들은 일상적인 JavaScript 프로그래밍에서 가장 많이 사용되는 배열 작업을 다룹니다. 즐거운 코딩 되세요!

JavaScript 배열 메서드 요약

map() – 새 배열 만들기

map() 메서드는 다음 용도로 사용됩니다:

• 배열의 각 요소를 변환하기
• 새 배열을 반환하기
• 절대 원본 배열을 변경하지 않음

구문

array.map(function (element, index, array) {
  return newValue;
});

• element → 현재 값
• index → 위치 (선택 사항)
• array → 전체 배열 (선택 사항)

예시 1

const numbers = [1, 2, 3];

const doubled = numbers.map(function (num) {
  return num * 2;
});

console.log(doubled);
// [2, 4, 6]

무슨 일이 일어났나요?

map()은 반환된 모든 값을 새 배열에 모읍니다.

중요 규칙

• map()은 항상 새 배열을 반환합니다.
• return 문이 필수입니다.
• 원본 배열을 수정하지 않습니다.

예시 2 – 화살표 함수 (현대적 방식)

const numbers = [1, 2, 3];

const doubled = numbers.map(num => num * 2);

console.log(doubled);
// [2, 4, 6]

filter() – 조건에 따라 필터링

filter() 메서드는 다음 용도로 사용됩니다:

• 조건에 맞는 요소만 선택하기
• 새 배열을 반환하기
• 절대 원본 배열을 변경하지 않음

구문

array.filter(function (element, index, array) {
  return condition;
});

• 조건이 true이면 → 요소가 유지됩니다
• 조건이 false이면 → 요소가 제거됩니다

예시 1 – 기본 예시

const numbers = [1, 2, 3, 4];

const even = numbers.filter(function (num) {
  return num % 2 === 0;
});

console.log(even);
// [2, 4]

짝수만 남습니다.

중요 규칙

• filter()는 항상 새 배열을 반환합니다.
• 반환되는 요소가 적어질 수도, 빈 배열이 될 수도 있습니다.

예시 2 – 화살표 함수

const numbers = [5, 10, 15, 20];
const greaterThan10 = numbers.filter(n => n > 10);

console.log(greaterThan10);
// [15, 20]

reduce() – 모든 값을 하나로 결합

reduce() 메서드는 다음 용도로 사용됩니다:

• 배열의 모든 요소를 가져와서
• 단일 값으로 결합하기

숫자, 문자열, 객체, 혹은 다른 배열을 반환할 수 있습니다.

구문

array.reduce(function (accumulator, currentValue) {
  return updatedValue;
}, initialValue);

• accumulator → 단계별로 결과를 저장함
• currentValue → 현재 반복 중인 요소
• initialValue → 시작값 (선택 사항이지만 권장)

예시 1 – 모든 숫자 더하기

const numbers = [1, 2, 3, 4];
const total = numbers.reduce(function (sum, num) {
  return sum + num;
}, 0);

console.log(total);
// 10

예시 2 – 숫자 곱하기

const numbers = [2, 3, 4];
const result = numbers.reduce(function (total, num) {
  return total * num;
}, 1);

console.log(result);
// 24

빠른 비교 표

이 표는 메서드가 배열을 수정하는지 새 배열을 반환하는지 빠르게 이해하는 데 도움이 됩니다.