안녕하세요~ 경제적 자유입니다.
오늘은 JavaScript의 forEach, map, filter, reduce 배열 메서드를 리뷰해보려고 합니다.
OverView
배열은 쉽게 말하면 여러 개의 데이터를 순서대로 담아두는 상자입니다.
예를 들어 사람 이름을 하나만 저장한다면 변수 하나로 충분합니다.
추가로 더 자세히 공부하고 싶다면 아래 MDN 문서를 참고해보세요.
개념 설명
1. 배열이란?
배열은 여러 개의 값을 순서대로 저장하는 자료구조입니다.
const people = ["상구", "민수", "지영"];
여기서 중요한 포인트는 순서입니다.
배열은 값을 저장할 때 각각의 값에 번호를 붙입니다. 이 번호를 인덱스(index) 라고 합니다.
JavaScript 배열의 인덱스는 0부터 시작합니다.
2. push()란?
push()는 배열의 맨 뒤에 값을 추가하는 메서드입니다.
const people = ["상구", "민수"];
people.push("지영");
console.log(people); // ["상구", "민수", "지영"]
push()는 원본 배열을 직접 바꿉니다.
3. pop()이란?
pop()은 배열의 마지막 값을 제거하고, 제거한 값을 반환하는 메서드입니다.
const people = ["상구", "민수", "지영"];
const removedPerson = people.pop();
console.log(removedPerson); // 지영
console.log(people); // ["상구", "민수"]
pop()도 원본 배열을 직접 바꿉니다.
4. shift()와 unshift()란?
shift()와 unshift()는 배열의 앞쪽을 다루는 메서드입니다.
shift()
shift()는 배열의 첫 번째 값을 제거하고, 제거한 값을 반환합니다.
const people = ["상구", "민수", "지영"];
const removedPerson = people.shift();
console.log(removedPerson); // 상구
console.log(people); // ["민수", "지영"]unshift()
unshift()는 배열의 맨 앞에 값을 추가합니다.
const people = ["민수", "지영"];
people.unshift("상구");
console.log(people); // ["상구", "민수", "지영"]
5. for문과 for...of로 배열
배열은 여러 값을 담고 있기 때문에, 보통 반복문과 함께 자주 사용합니다.
기본 for문
const people = ["상구", "민수", "지영"];
for (let i = 0; i < people.length; i++) {
console.log(people[i]);
}
기본 for문은 인덱스가 필요할 때 유용합니다.
const people = ["상구", "민수", "지영"];
for (let i = 0; i < people.length; i++) {
console.log(`${i}번 인덱스: ${people[i]}`);
}for...of
for...of는 배열의 값을 하나씩 꺼내서 사용할 때 편합니다.
const people = ["상구", "민수", "지영"];
for (const person of people) {
console.log(person);
}
인덱스가 필요 없다면 for...of가 더 읽기 쉽습니다.
배열에 for...in
for...in은 객체의 key를 순회할 때 주로 사용합니다.
배열에서도 동작은 하지만, 배열에는 보통 for, for...of, forEach()를 사용하는 편이 좋습니다.
const people = ["상구", "민수", "지영"];
for (const index in people) {
console.log(index); // 0, 1, 2
}
for...in은 값이 아니라 key, 즉 인덱스를 가져옵니다.
배열의 값을 바로 다루고 싶다면 for...of가 더 자연스럽습니다.
6. forEach()란?
forEach()는 배열의 각 요소를 하나씩 꺼내서 특정 작업을 실행하는 메서드입니다.
const people = ["상구", "민수", "지영"];
people.forEach(function (person) {
console.log(person);
});
화살표 함수로도 자주 씁니다.
const people = ["상구", "민수", "지영"];
people.forEach((person) => {
console.log(person);
});
7. map()이란?
map()은 배열의 각 요소를 하나씩 변환해서 새로운 배열을 만드는 메서드입니다.
const people = ["상구", "민수", "지영"];
const result = people.map((person) => {
return `${person}님`;
});
console.log(result); // ["상구님", "민수님", "지영님"]
중요한 점은 map()은 원본 배열을 직접 바꾸지 않는다는 것입니다.
8. filter()란?
filter()는 배열에서 조건에 맞는 요소만 골라서 새로운 배열을 만드는 메서드입니다.
const scores = [40, 70, 90, 100];
const passedScores = scores.filter((score) => {
return score >= 60;
});
console.log(passedScores); // [70, 90, 100]
filter()도 원본 배열을 직접 바꾸지 않습니다.
const scores = [40, 70, 90, 100];
const passedScores = scores.filter((score) => {
return score >= 60;
});
console.log(scores); // [40, 70, 90, 100]
console.log(passedScores); // [70, 90, 100]
9. reduce()란?
reduce()는 배열의 여러 값을 하나의 결과로 누적해서 만드는 메서드입니다.
배열을 왼쪽부터 하나씩 돌면서 결과를 계속 쌓아가는 메서드
예를 들어 숫자 배열의 합계를 구해보겠습니다.
const numbers = [10, 20, 30];
const total = numbers.reduce((acc, cur) => {
return acc + cur;
}, 0);
console.log(total); // 60
여기서 acc는 누적값입니다.
cur는 현재 값입니다.
마지막의 0은 초기값입니다.
10. find()와 findIndex()란?
find()는 조건에 맞는 첫 번째 요소를 찾아 반환합니다.
const users = [
{ id: 1, name: "상구" },
{ id: 2, name: "민수" },
{ id: 3, name: "지영" },
];
const user = users.find((user) => {
return user.name === "상구";
});
console.log(user); // { id: 1, name: "상구" }
조건에 맞는 값이 없으면 undefined를 반환합니다.
const users = [
{ id: 1, name: "상구" },
{ id: 2, name: "민수" },
];
const user = users.find((user) => {
return user.name === "철수";
});
console.log(user); // undefined
findIndex()는 조건에 맞는 요소의 인덱스를 반환합니다.
const users = [
{ id: 1, name: "상구" },
{ id: 2, name: "민수" },
{ id: 3, name: "지영" },
];
const index = users.findIndex((user) => {
return user.name === "민수";
});
console.log(index); // 1
조건에 맞는 값이 없으면 -1을 반환합니다.
11. includes()란?
includes()는 배열 안에 특정 값이 있는지 확인하는 메서드입니다.
const people = ["상구", "민수", "지영"];
console.log(people.includes("상구")); // true
console.log(people.includes("철수")); // false
반환값은 true 또는 false입니다.
12. slice()란?
slice()는 배열의 일부를 잘라서 새로운 배열로 반환하는 메서드입니다.
const people = ["상구", "민수", "지영", "철수"];
const result = people.slice(1, 3);
console.log(result); // ["민수", "지영"]
console.log(people); // ["상구", "민수", "지영", "철수"]
slice(1, 3)은 인덱스 1부터 인덱스 3 전까지 가져옵니다.
즉, 인덱스 3은 포함하지 않습니다.
13. splice()란?
splice()는 배열에서 요소를 삭제, 교체, 추가할 수 있는 메서드입니다.
중요한 점은 splice()는 원본 배열을 직접 바꾼다는 것입니다.
const people = ["상구", "민수", "지영"];
people.splice(1, 1);
console.log(people); // ["상구", "지영"]
splice(1, 1)의 의미는 다음과 같습니다.
people.splice(시작인덱스, 삭제할개수);
즉, 인덱스 1부터 1개를 삭제하라는 뜻입니다.
삭제하기
const people = ["상구", "민수", "지영"];
people.splice(1, 1);
console.log(people); // ["상구", "지영"]
교체하기
const people = ["상구", "민수", "지영"];
people.splice(1, 1, "철수");
console.log(people); // ["상구", "철수", "지영"]
인덱스 1의 "민수"를 삭제하고, 그 자리에 "철수"를 넣었습니다.
추가하기
const people = ["상구", "지영"];
people.splice(1, 0, "민수");
console.log(people); // ["상구", "민수", "지영"]
splice(1, 0, "민수")는 인덱스 1 위치에 아무것도 삭제하지 않고 "민수"를 추가한다는 뜻입니다.
14. sort()란?
sort()는 배열을 정렬하는 메서드입니다.
const people = ["지영", "상구", "민수"];
people.sort();
console.log(people); // ["민수", "상구", "지영"]
문자열 정렬은 비교적 자연스럽게 보입니다.
하지만 숫자 정렬에서는 주의가 필요합니다.
const numbers = [10, 2, 30, 1];
numbers.sort();
console.log(numbers); // [1, 10, 2, 30]
기본 sort()는 요소를 문자열처럼 비교해서 정렬하기 때문입니다.
그래서 숫자를 오름차순으로 정렬하려면 비교 함수를 넣어야 합니다.
const numbers = [10, 2, 30, 1];
numbers.sort((a, b) => {
return a - b;
});
console.log(numbers); // [1, 2, 10, 30]
내림차순은 반대로 작성하면 됩니다.
const numbers = [10, 2, 30, 1];
numbers.sort((a, b) => {
return b - a;
});
console.log(numbers); // [30, 10, 2, 1]15. join()이란?
join()은 배열의 요소들을 하나의 문자열로 합치는 메서드입니다.
const people = ["상구", "민수", "지영"];
const result = people.join(", ");
console.log(result); // 상구, 민수, 지영
괄호 안에는 요소 사이에 넣을 구분자를 작성합니다.
const people = ["상구", "민수", "지영"];
console.log(people.join("")); // 상구민수지영
console.log(people.join(" / ")); // 상구 / 민수 / 지영
console.log(people.join("님, ")); // 상구님, 민수님, 지영
마무리
오늘은 JavaScript의 배열과 배열 메서드에 대해 정리했습니다.
배열은 여러 데이터를 순서대로 관리하는 자료구조이고, 배열 메서드는 그 데이터를 추가, 삭제, 변환, 필터링, 누적하는 도구입니다.
특히 map, filter, reduce는 실무에서도 자주 사용되기 때문에 천천히 여러 예제로 익숙해지는 것이 좋습니다.
공부화이팅!
'웹 개발 > Javascript' 카테고리의 다른 글
| [JavaScript(14)] includes()로 문자열 안에 글자 찾기? 문자열 이해하기 (0) | 2026.05.31 |
|---|---|
| [JavaScript(13)] 몫은 어떻게 구해요? 숫자형(Number)쉽게 정리하기 (0) | 2026.05.31 |
| [JavaScript(12)] 생성자 함수? 객체 리터럴과의 차이 (0) | 2026.05.31 |
| [JavaScript(11)] 가비지 컬렉션, 메모리는 언제 사라질까? (0) | 2026.05.31 |
| [JavaScript(10)] 객체 복사(Object.assign()과 structuredClone()) (0) | 2026.05.31 |