30. 배열 메서드

2026년 4월 14일

자바스크립트

🛠️ 1. 요소를 자유자재로: 추가·제거 및 추출

단순한 추가/제거를 넘어 배열의 중간을 도려내거나 특정 부분만 복사할 때 사용합니다.

메서드	역할	특징
`splice`	요소 추가, 삭제, 교체	만능 도구. 기존 배열을 직접 수정(Mutate)합니다.
`slice`	특정 범위 복사	기존 배열을 건드리지 않고 새로운 배열을 반환합니다.
`concat`	배열 병합	여러 배열이나 값을 하나로 합친 새 배열을 만듭니다.

splice(start, deleteCount, ...items): 인덱스 start부터 deleteCount개를 지우고 그 자리에 새로운 items를 넣습니다. 삭제된 요소는 배열로 반환됩니다.
slice(start, end): 인덱스 start부터 end 직전까지 복사본을 만듭니다. 인자 없이 slice()만 호출하면 배열의 전체 복사본(Shallow copy)을 만드는 데 유용합니다.

🔍 2. 원하는 데이터 찾기: 검색 메서드

배열 안에 특정 값이 있는지, 어디에 있는지, 혹은 조건에 맞는 객체가 있는지 찾을 때 사용합니다.

indexOf / includes: 단순한 값을 찾을 때 사용합니다. (includes는 NaN도 체크 가능!)
find / findIndex: 조건 함수를 만족하는 첫 번째 요소나 그 인덱스를 반환합니다. (객체 배열에서 유용)
filter: 조건 함수를 만족하는 모든 요소를 모아 새로운 배열로 반환합니다.

🔄 3. 데이터 가공의 핵심: 변환 메서드

가장 '모던 자바스크립트'다운 코드를 작성할 수 있게 해주는 핵심 도구들입니다.

map (가장 많이 쓰임)

배열의 각 요소를 함수에 넣어 나온 결과값들을 모아 새로운 배열을 만듭니다. 원본은 유지됩니다.

sort(fn)

배열을 정렬합니다. 주의: 기본적으로 요소를 문자열로 취급하여 정렬하므로, 숫자 정렬 시에는 반드시 정렬 함수((a, b) => a - b)를 넘겨야 합니다.

split & join

split: 문자열을 구분자 기준으로 쪼개 배열로 만듭니다.
join: 배열 요소를 구분자로 이어 붙여 문자열로 만듭니다.

🧮 4. 최강의 도구: reduce

배열을 기반으로 단 하나의 결과값(숫자, 객체, 다른 배열 등)을 도출할 때 사용합니다. '누산기(Accumulator)' 개념이 핵심입니다.

// 모든 요소의 합 구하기
let arr = [1, 2, 3, 4, 5];
let result = arr.reduce((sum, current) => sum + current, 0);

🎙️ 기술 면접 대비 (Interview Questions)

Q1. `forEach`와 `map`의 결정적인 차이는 무엇인가요? (중급)

답변: 둘 다 배열의 모든 요소를 순회하지만, map은 콜백 함수의 반환값들을 모아 새로운 배열을 반환하는 반면, forEach는 단순히 각 요소에 대해 함수를 실행할 뿐 아무것도 반환하지 않습니다. 따라서 데이터를 변형하여 새 배열을 얻고 싶을 때는 map을, 단순히 출력이나 부수 효과(Side effect)를 원할 때는 forEach를 씁니다.

Q2. `arr.sort()`를 인자 없이 실행했을 때 `[1, 2, 15]`는 어떻게 정렬되나요? (기초)

답변: [1, 15, 2] 순으로 정렬됩니다. sort()는 기본적으로 요소를 문자열로 변환하여 사전 편집 순(Unicode order)으로 비교하기 때문에, "15"의 첫 글자인 "1"이 "2"보다 앞에 오게 됩니다. 이를 해결하려면 (a, b) => a - b 같은 비교 함수를 제공해야 합니다.

Q3. `filter`와 `find`의 차이점은 무엇인가요? (중급)

답변: find는 조건을 만족하는 첫 번째 요소를 찾는 즉시 순회를 멈추고 그 값을 반환(없으면 undefined)하지만, filter는 조건을 만족하는 모든 요소를 찾아 배열 형태로 반환(없으면 빈 배열)합니다.

요약

지금까지 살펴본 배열 메서드를 요약해보도록 합시다.

요소를 더하거나 지우기
- push(...items) – 맨 끝에 요소 추가하기
- pop() – 맨 끝 요소 추출하기
- shift() – 첫 요소 추출하기
- unshift(...items) – 맨 앞에 요소 추가하기
- splice(pos, deleteCount, ...items) – pos부터 deleteCount개의 요소를 지우고, items 추가하기
- slice(start, end) – start부터 end 바로 앞까지의 요소를 복사해 새로운 배열을 만듦
- concat(...items) – 배열의 모든 요소를 복사하고 items를 추가해 새로운 배열을 만든 후 이를 반환함. items가 배열이면 이 배열의 인수를 기존 배열에 더해줌
원하는 요소 찾기
- indexOf/lastIndexOf(item, pos) – pos부터 원하는 item을 찾음. 찾게 되면 해당 요소의 인덱스를, 아니면 1을 반환함
- includes(value) – 배열에 value가 있으면 true를, 그렇지 않으면 false를 반환함
- find/filter(func) – func의 반환 값을 true로 만드는 첫 번째/전체 요소를 반환함
- findIndex는 find와 유사함. 다만 요소 대신 인덱스를 반환함
배열 전체 순회하기
- forEach(func) – 모든 요소에 func을 호출함. 결과는 반환되지 않음
배열 변형하기
- map(func) – 모든 요소에 func을 호출하고, 반환된 결과를 가지고 새로운 배열을 만듦
- sort(func) – 배열을 정렬하고 정렬된 배열을 반환함
- reverse() – 배열을 뒤집어 반환함
- split/join – 문자열을 배열로, 배열을 문자열로 변환함
- reduce(func, initial) – 요소를 차례로 돌면서 func을 호출함. 반환값은 다음 함수 호출에 전달함. 최종적으로 하나의 값이 도출됨
기타
- Array.isArray(arr) – arr이 배열인지 여부를 판단함

sort, reverse, splice는 기존 배열을 변형시킨다는 점에 주의하시기 바랍니다.

지금까지 배운 메서드만으로 배열과 관련된 작업 99%를 해결할 수 있습니다. 이 외의 배열 메서드도 있긴 한데 잠시 언급하고 넘어가겠습니다.

arr.some(fn)과 arr.every(fn)는 배열을 확인합니다.

두 메서드는 map과 유사하게 모든 요소를 대상으로 함수를 호출합니다. some은 함수의 반환 값을 true로 만드는 요소가 하나라도 있는지 여부를 확인하고 every는 모든 요소가 함수의 반환 값을 true로 만드는지 여부를 확인합니다. 두 메서드 모두 조건을 충족하면 true를, 그렇지 않으면 false를 반환합니다.
arr.fill(value, start, end)은 start부터 end까지 value를 채워 넣습니다.
arr.copyWithin(target, start, end)은 start부터 end까지 요소를 복사하고, 복사한 요소를 target에 붙여넣습니다. 기존 요소가 있다면 덮어씁니다.

배열에 관한 모든 메서드는 manual에서 찾아볼 수 있습니다.

배워야 할 메서드 종류가 너무 많아서 이걸 다 외워야 하나라는 생각이 들 수 있는데, 생각보다 쉬우니 너무 걱정하지 않으셨으면 좋겠습니다.

일단은 요약본을 참고해 자주 사용하는 메서드가 무엇인지 정도만 알아두어도 괜찮습니다. 아래 과제를 풀면서 충분히 연습하다 보면 배열 메서드에 대한 경험치가 쌓일 겁니다.

나중에 배열을 이용해 뭔가를 해야 하는데 방법이 떠오르지 않을 때 이곳으로 돌아와 요약본을 다시 보고 상황에 맞는 메서드를 찾으면 됩니다. 설명에 딸린 예시들이 실제 코드 작성 시 도움이 될 겁니다. 이런 과정을 반복하다 보면 특별한 노력 없이도 메서드를 저절로 외울 수 있습니다.