JavaScript) 배열 메서드 : forEach / map / filter / find / reduce 정리

1. 화살표 함수(Arrow Function)

1-1. 기본 함수 선언 방식

function func() {
	console.log('func()');
}
func();

: 전통적인 함수 선언 방식

1-2. 즉시 실행 함수 (IIFE)

(function func() {
	console.log('(func())');
})();

: 함수 선언과 동시에 실행되는 패턴

: 특정 코드 블록을 즉시 실행하고 싶을 때 사용

1-3. 익명 함수 표현식

const func = function () {
	console.log('function ()');	
};
func();

: const를 사용하여 함수를 변수에 할당하는 방식

1-4. 화살표 함수(Arrow Function)

const func = () => {
	console.log('function ()');	
};
func();

: function 키워드 없이 =>를 사용해 선언

: { } 중괄호를 생략하면 자동으로 return 된다.

1-5. 매개변수가 있는 화살표 함수

const func = (num) => console.log("num = ", num);
func(3);

: 중괄호 {}를 사용하면 return을 명시해야 한다.

---

2. forEach() - 배열 순회

: forEach()는 배열의 각 요소를 순회하며 특정 작업을 수행할 때 사용

2-1. 기존 for문 활용

const list = [11, 22, 33, 44, 55];

for (let i = 0; i < list.length; i++) {
	console.log(list[i]);
}

2-2. forEach() 사용

list.forEach(function (number, index) {
	console.log(index, number);
});

첫 번째 매개변수: 현재 요소 값

두 번째 매개변수: 현재 요소의 인덱스

2-3. 화살표 함수로 변환

list.forEach((number, index) => console.log(index, number));

: 더 간결해지긴 한다.

---

3. map() - 배열 변환

: map()은 배열의 각 요소를 변환하여 새로운 배열을 반환할 때 사용

3-1. 기존 방식

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

let newArr = maplist.map(function (n) {
	return n % 2 === 0 ? "짝수" : "홀수";
});
console.log(newArr); // ['홀수', '짝수', '홀수', '짝수', '홀수']

3-2. 화살표 함수 적용

let newArr = maplist.map(n => n % 2 === 0 ? "짝수" : "홀수");
console.log(newArr);

3-3. 요소를 변경하여 새로운 배열 만들기

let doubleArr = maplist.map(n => n * 3);
console.log(doubleArr); // [3, 6, 9, 12, 15]

: 기존 배열 요소에 연산을 적용하여 새로운 배열을 반환

---

4. filter() - 특정 조건의 요소만 남기기

: filter()는 조건을 만족하는 요소만 남긴 새로운 배열을 반환

4-1. 짝수만 남기기

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

let newlist = filterlist.filter(n => n % 2 === 0);
console.log(newlist); // [2, 4]

4-2. 객체 배열에서 특정 조건 필터링

const testJson = [
	{ "name": "홍길동", "salary": 14000 },
	{ "name": "성춘향", "salary": 15000 },
	{ "name": "일지매", "salary": 20000 }
];

const highSalary = testJson.filter(e => e.salary > 15000);
console.log(highSalary);

: salary가 15,000 이상인 데이터만 남기기!

---

5. find() - 조건을 만족하는 첫 번째 요소 찾기

: find()는 filter()와 유사하지만, 첫 번째로 조건을 만족하는 요소 하나만 반환한다.

5-1. 첫 번째 3보다 큰 숫자 찾기

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

const findNum = findlist.find(element => element > 2);
console.log(findNum); // 3

: filter()와 달리 find()는 조건을 만족하는 첫 번째 요소만 반환

5-2. 객체 배열에서 특정 요소 찾기

let market = [
	{ "id": 10, "name": "potato", group: "vegetable" },
	{ "id": 12, "name": "apple", group: "fruit" },
	{ "id": 13, "name": "grape", group: "vegetable" },
	{ "id": 15, "name": "banana", group: "fruit" }
];

let item = market.find(item => item.id === 12);
console.log(item); // { "id": 12, "name": "apple", group: "fruit" }

: 여기서 let으로 선언한 item이랑 find 조건 안에 item은 전혀 상관없는 변수다!!!

: find 안에 item은 콜백 함수 내부에서만 사용되는 지역 변수

 

: find() 함수 내부의 item은 콜백 함수의 매개변수이므로 market 배열을 순회하면서 각 요소를 나타낸다.

: 하지만, find()의 반환값이 item이라는 변수에 저장될 때, 그때부터 let item이 전역적으로 사용될 수 있는 변수가 된다.

---

6. reduce() - 값 축약(누적 연산)

: reduce()는 배열을 순회하며 누적값을 만들어가는 메서드

6-1. 숫자 배열 합산

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

const sum = arr.reduce((accumulator, currentValue) => {
	return accumulator + currentValue;
}, 0); // 초기값 0
console.log(sum); // 15

: accumulator는 누적값이며, currentValue는 현재 요소 값

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

const reduceList = arr.reduce((accumulator, currentValue, index, array) => {
    console.log("accumulator:", accumulator);
    console.log("currentValue:", currentValue);
    console.log("index:", index);
    console.log("array:", array);
    return accumulator + currentValue;
}, 0);	// <- 초기값

console.log("최종 결과:", reduceList);

accumulator : 이전 단계까지 계산된 누적 값

currentValue : 현재 처리 중인 요소 값

index : 현재 요소의 인덱스

array : reduce()를 실행하는 원본 배열

6-2. 객체 배열에서 특정 값 합산

const friends = [
	{ "name": "홍길동", "age": 24, "eng": 90 },
	{ "name": "성춘향", "age": 15, "eng": 100 },
	{ "name": "일지매", "age": 22, "eng": 85 }
];

const totalEng = friends.reduce((acc, item) => acc + item.eng, 0);
console.log(totalEng); // 275

: 모든 객체의 eng 값을 더한 총합을 구한다.

acc : 이전까지의 총 eng 점수

item : 현재 배열 요소

item.eng : 현재 요소의 eng 점수

0 : 초기 acc 값

이해를 돕기위해..!

reduce() 형식

array.reduce((accumulator, currentValue) => {...}, 초기값);

매개변수	의미
accumulator (acc)	이전까지의 계산 결과(누적 값)
currentValue (item)	현재 배열 요소
초기값	reduce()의 accumulator 초기값

---

메서드	주요 기능	반환값
forEach()	배열 순회 (단순 반복)	없음
map()	요소 변환 (새로운 배열 반환)	새로운 배열
filter()	조건에 맞는 요소만 남김	새로운 배열
find()	조건에 맞는 첫 번째 요소 찾기	단일 요소
reduce()	배열 값을 누적하여 결과 반환	단일 값