프론트엔드 개발일지 #39 - 배열 메서드 복습

조아라·2024년 11월 3일
0
post-thumbnail

forEhch

반복문을 대신해서 사용하는 메서드

//function forEach(predicate,thisArg){
//	for(let i = 0; i < a.length; i++){
//		predicate(a[i], i);
//	}
//}

a=[10,11,12,13,14,15];
a.forEach(function(v:배열의 요소, i:인덱스){
		console.log(v, i, this);
},[1, 2]);
// 10 0 [1,2]
// 11 1 [1,2]
// 12 2 [1,2]
// 13 3 [1,2]
// 14 4 [1,2]
// 15 5 [1,2]

map

기존의 배열에서 기존의 배열 길이 그대로 새로운 배열을 만들어줌

//function map(predicate, thisArg){
//	for(let i = 0; i < a.length; i++) {
//		list.push(predicate(a[i], i));
//	}
// 	return list;	
//}

a=[10, 11, 12, 13, 14, 15];
let answer = a.map(function(v, i){
  if(v % 2 === 0) {
	return v;
 }
//	return v*v;
,[1, 2]);
console.log(answer);
//짝수로 조건문을 주면 원본 배열과 길이가 같아야하니까
//홀수는 undefined로 나온다.
//[10, undefined, 12, undefined, 14, undefined]

filter

기존의 배열에서 콜백 함수가 참을 return한 요소만 새로운 배열을 만들어줌 (기존 배열의 길이와 다를 수 있다.)

//function filter(predicate, thisArg){
// 	let list = [];
//	for(let i = 0; i < a.length; i++) {
//		if(predicate(a[i], i){
//			list.push(a[i]);
//		}
//	}
// 	return list;	
//}

a=[10, 11, 12, 13, 14, 15];
let answer = a.filter(function(v, i){
	if(v % 2 === 0) {
	return v;
	}
}, [1,2]);
console.log(answer);
//[10, 12, 14]
//map처럼 undefined 나오지않고 새로운 길이의 새로운 배열이 나옴

reduce

배열을 생성하는게 아니라 값을 생성해서 return

//function reduce(predicate, val){
//	let result=val;
//	for(let i = 0; i < a.length; i++) {
//		result = predicate(result, a[i]);
//	}
// 	return result;	
//}


a=[1,2,3,4,5];
let answer = a.reduce(function(acc:콜백함수 인자, v:value){
	return acc + v;
}, 0);
console.log(answer);
// 0 + 1
// 1 + 2
// 3 + 3
// 6 + 4
// 10 + 5
// 15

사실 그냥 기계적으로 사용 했는데 이렇게 원리를 이해하려고 하고서
써보니까 훨씬 더 이해하기 쉬웠다 🤔

profile
끄적 끄적 배운 걸 적습니다 / FRONT-END STUDY VELOG

0개의 댓글

관련 채용 정보