자바스크립트 배열 메서드 다시보기

자바스크립트 배열 메서드에 대해서 확인하는 포스팅입니다.

1. 서론: 자바스크립트 메서드란?

자바스크립트에서 메서드는 객체, 배열, 문자열, 함수 등 다양한 데이터 타입과 함께 사용되며, 특정 작업을 수행하기 위한 함수입니다 자주 사용되는 메서드는 데이터를 처리하거나 변형하고, 웹 애플리케이션에서 중요한 역할을 담당합니다.

1. map()

동작 원리

map()은 배열의 각 요소에 대해 콜백 함수를 호출하고 그 결과를 새로운 배열로 반환합니다. 기존 배열은 immutable하게 유지됩니다. map()을 사용하면 원본 배열은 변경되지 않으며 각 요소에 대해 변환된 값을 모은 새로운 배열을 반환합니다.

내부 동작

map()은 내부적으로 배열의 길이를 유지하며, for 루프를 통해 각 요소를 순회하면서 콜백을 적용합니다.
콜백 함수는 3개의 인자를 받습니다: currentValue (현재 요소), index (요소의 인덱스), array (원본 배열)
콜백의 리턴 값은 새로운 배열의 해당 인덱스에 삽입됩니다.

언제 사용해야 하나?

배열의 각 요소를 변환해야 할 때 사용합니다.
예를 들어, 리액트에서 컴포넌트 리스트를 렌더링할 때 자주 사용합니다.

const users = [
  { id: 1, name: "Alice", age: 25 },
  { id: 2, name: "Bob", age: 30 },
  { id: 3, name: "Charlie", age: 35 },
];
 
function UserList() {
  return (
    <div>
      {users.map((user) => (
        <div key={user.id}>
          <h2>{user.name}</h2>
          <p>Age: {user.age}</p>
        </div>
      ))}
    </div>
  );
}

2. filter()

동작 원리

filter()는 배열의 각 요소에 대해 주어진 조건을 만족하는지 평가하고 그 조건을 만족하는 요소들만을 모아서 새로운 배열을 반환합니다. 원본 배열은 변경되지 않습니다.

내부 동작

filter()는 for 루프를 통해 배열을 순회하며, 각 요소에 대해 조건을 검사합니다.
콜백 함수는 true 또는 false를 반환해야 하며, true인 요소만 새로운 배열에 포함됩니다.

언제 사용해야 하나?

배열에서 특정 조건을 만족하는 요소만을 선택하고 싶을 때 사용합니다.
데이터베이스나 API에서 반환된 데이터를 필터링하는데 자주 사용됩니다.

const users = [
  { name: "Alice", age: 30 },
  { name: "Bob", age: 20 },
  { name: "Charlie", age: 25 },
];
const adults = users.filter((user) => user.age >= 21);

3. reduce()

동작 원리

reduce()는 배열의 모든 요소를 하나의 값으로 축약합니다. 축약하는 과정에서 누적된 값과 배열의 현재 요소를 사용하여 값을 계속 갱신합니다.

내부 동작

reduce()는 accumulator와 currentValue라는 두 가지 주요 매개변수를 사용합니다.
reduce()는 초기값을 인자로 받습니다. 만약 초기값이 제공되지 않으면 배열의 첫 번째 요소가 초기값으로 설정됩니다.

언제 사용해야 하나?

배열의 값을 하나로 축약해야 할 때 사용됩니다. 예를 들어 합계 계산 배열을 객체로 변환 또는 다차원 배열을 평탄화 할 때 자주 사용됩니다.

const numbers = [10, 20, 30, 40, 50];
const sum = numbers.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  0
);
 
const fruits = ["Apple", "Banana", "Orange"];
const fruitObject = fruits.reduce((acc, fruit, index) => {
  acc[index] = fruit;
  return acc;
}, {});
 
const nestedArray = [
  [1, 2],
  [3, 4],
  [5, 6],
];
const flattenedArray = nestedArray.reduce((acc, val) => acc.concat(val), []);

4. forEach()

동작 원리

forEach()는 배열의 각 요소에 대해 한 번씩 콜백 함수를 실행합니다. forEach()는 배열을 변환하거나 값을 반환하지 않고 단순히 사이드 이펙트를 발생시키는 작업을 수행할 때 사용됩니다.

내부 동작

forEach()는 for 루프와 비슷하게 배열의 각 요소를 순회하며 콜백 함수를 실행합니다.
반환 값을 사용하지 않으며, 루프를 중단할 방법이 없습니다. (return, break 불가)

언제 사용해야 하나?

배열 요소에 대해 부수적인 작업(예: DOM 조작, 로그 출력)을 수행할 때 사용합니다.

const numbers = [1, 2, 3, 4];
numbers.forEach((num, index) => {
  console.log(`Index ${index}: ${num}`);
});

5. find()

동작 원리

find()는 배열에서 조건을 만족하는 첫 번째 요소를 반환합니다. 조건을 만족하는 요소가 없으면 undefined를 반환합니다.

내부 동작

find()는 배열을 순회하며 첫 번째로 조건을 만족하는 요소를 찾으면 즉시 반환하고 순회를 종료합니다.
콜백 함수가 true를 반환하는 순간, find()는 해당 요소를 반환합니다.

언제 사용해야 하나?

배열에서 조건을 만족하는 단 하나의 요소만 찾고 싶을 때 사용합니다.

const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 3, name: "Charlie" },
];
const user = users.find((user) => user.id === 2);

6. some() / every()

동작 원리

some(): 배열의 일부 요소가 조건을 만족하면 true를 반환합니다. 하나라도 조건을 만족하면 순회를 멈추고 true를 반환합니다.
every(): 배열의 모든 요소가 조건을 만족하면 true를 반환합니다. 하나라도 조건을 만족하지 않으면 즉시 false를 반환합니다.

언제 사용해야 하나?

some(): 배열에 조건을 만족하는 요소가 하나라도 있는지 확인할 때 사용합니다.
every(): 배열의 모든 요소가 조건을 만족하는지 확인할 때 사용합니다.

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

const hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven); // true

const allEven = numbers.every(num => num % 2 === 0);
console.log(allEven); // false

7. concat()

동작 원리

concat()은 두 개 이상의 배열을 하나의 배열로 병합합니다. 원본 배열은 불변이며 새로운 배열이 반환됩니다. 배열이 아닌 값도 병합할 수 있습니다.

내부 동작

concat()은 원본 배열을 복사한 다음, 추가된 배열 또는 값을 복사하여 새로운 배열을 반환합니다.
참조형 데이터(예: 객체)를 병합할 때는 얕은 복사가 이루어집니다.

언제 사용해야 하나?

두 배열을 병합하거나, 배열에 새로운 값을 추가할 때 사용합니다. 원본 배열을 유지하면서 새로운 배열을 만들고자 할 때 적합합니다.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const merged = arr1.concat(arr2);

8. slice()

동작 원리

slice()는 배열의 일부분을 추출하여 새로운 배열로 반환합니다. 원본 배열은 변경되지 않습니다.

내부 동작

slice(start, end)는 start에서부터 end 전까지의 요소를 추출합니다. start와 end는 음수일 경우, 배열의 끝에서부터 계산됩니다. end가 생략되면 배열의 끝까지 슬라이스합니다.

####언제 사용해야 하나?

배열의 특정 부분을 추출할 때 사용합니다. 원본 배열을 수정하지 않고 필요 없는 요소를 제외한 새로운 배열을 만들고 싶을 때 유용합니다.

const numbers = [1, 2, 3, 4, 5];
const subArray = numbers.slice(1, 4);

9. splice()

동작 원리

splice()는 배열에서 요소를 추가, 삭제하거나 교체할 때 사용합니다. 배열의 원본이 변경되며 삭제된 요소들을 배열로 반환합니다.

내부 동작

splice(start, deleteCount, item1, item2, ...)는 start 인덱스에서 deleteCount만큼의 요소를 삭제하고 그 자리에 새로운 요소들을 삽입합니다. 삭제된 요소들을 배열로 반환하며 원본 배열은 수정됩니다.

언제 사용해야 하나?

배열의 중간에 요소를 삽입하거나 삭제하고 싶을 때 유용합니다. 원본 배열을 수정하는 경우 사용됩니다.

const numbers = [1, 2, 3, 4, 5];
const removed = numbers.splice(2, 2, 10, 11);

JavaScript 배열 MDN