[JavsScript] Array 순회 메서드 정리

✅ 들어가며

알고리즘 스터디를 하면서 내가 Array등의 자료형을 순회할 때 for, while, map등과 같은 전형적인 방법만을 사용한다는 것을 발견했다. 

물론 다양한 방법을 구사하지 않아도 알고리즘 문제에서는 동일한 시간복잡도로 내가 원하는 방향을 구현할 수 있다면 상관없다. 

 

하지만 협업의 상황에서는 여러 사람들이 다양하고 간결한 메서드 사용을 선호하며 이는 가독성 향상에 긍정적이다.  때문에 각 메서드를 이해하고 정리해서 친숙해질 필요가 있겠다고 느꼈다. 

 

주요 메서드를 정리하고 간략한 예시를 제시한다.

 

---

🔸 arr.map

각 배열 요소에 대해 작업 수행해서 새 배열을 반환한다. 기존 배열은 바꾸지 않는다. 

매개변수 중 currentValue 는 필수이나, 나머지는 옵셔널하다. 

//구문
arr.map(callback(currentValue[, index[, array]])[, thisArg])

//일반적으로 아래와 같은 형태 
arr.map((value, index, array )=> {
    ...
})


//아래와 같이 callback의 각 매개변수를 활용해서 여러 조건을 걸 수 있다.
let nums = [50, 10, 40, 20, 30];

const numOver30 = nums.filter(function (value, index, array) {
  return value > 30 && index>=2 && array[index+1]==20;
});

console.log(numOver30) //[40]

 

Array.prototype.map() - JavaScript | MDN

 

🔸 arr.forEach

for문과 동일하다. 각 요소에 대해 함수를 실행한다.

매개변수 중 currentValue 는 필수이나, 나머지는 옵셔널하다.

//구문
forEach(callbackFn)
forEach(callbackFn, thisArg)

//일반적인 사용 
arr.forEach((value,index,array)=>{
	//...
)

//아래와 같이 callback의 각 매개변수를 활용해서 여러 조건을 걸 수 있다.
let nums = [50, 10, 40, 20, 30, 50, 20];
let result=[]
let returnArray=nums.forEach(function (value, index, array) {
  if( value > 30 && index>=2 && array[index+1]==20){result.push([value,index])};
});

console.log('result',result) //[[40,2], [50,5]]
console.log('returnArray',returnArray) //array return 없음

 

Array.prototype.forEach() - JavaScript | MDN

 

🔸 arr.filter

callback의 필터 조건을 사용해서 새로운 배열 반환한다. 기존 배열 불변

//구문
filter(callbackFn)
filter(callbackFn, thisArg)

//일반적인 사용 
arr.forEach((value,index,array)=>{
	//...
)

//아래와 같이 callback의 각 매개변수를 활용해서 여러 조건을 걸 수 있다.
let nums = [50, 10, 40, 20, 30, 50, 20];
result=nums.filter(function (value, index, array) {
  return value > 30 && index>=2 && array[index+1]==20
});

console.log(result) //[40,50]


//소수판별 예시

const array = [-3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];

function isPrime(num) {
  for (let i = 2; num > i; i++) {
    if (num % i === 0) {
      return false;
    }
  }
  return num > 1;
}

console.log(array.filter(isPrime)); // [2, 3, 5, 7, 11, 13]

 

Array.prototype.filter() - JavaScript | MDN

 

🔸 arr.reduce

각 배열 요소에 함수를 실행해서 단일값을 반환한다.

    arr.reduce(callback[, initialValue])

 

- 매개변수 

//아래와 같이 accumulator, currentValue, currentIndex 등을 이용해서 다양하게 구현 가능 

//배열의 평균값을 구하는 함수 
let arr = [2, 4, 6, 8, 10, 12, 14, 22, 99, 100];
let arrAverage = arr.reduce((acc, value, index) => {
    let val = acc + value;
    if (index === arr.length - 1) {
        console.log(index)	//마지막 인덱스 기록하기
        val = val / arr.length;
    }
    return val; //return이 다음 반복의 acc의 값으로 들어간다. -> 중요!!! 
}, 0);

console.log(arrAverage); 
//9
//27.7

 

주석에도 언급했듯 callback의 return이 다음 반복의 accumulator의 값으로 들어간다. 

 

Array.prototype.reduce() - JavaScript | MDN

 

🔸 arr.reduceRight

끝 인덱스에서부터 시작한다는 것을 제외하면 reduce와 동일하다.

 

Array.prototype.reduceRight() - JavaScript | MDN

 

🔸 arr.some

배열 안의 요소 중 callback을 한 번이라도 통과하는지 검사한 후 true, false를 반환한다. 

기존배열 변경 없음

// 화살표 함수
some((element) => { /* … */ })
some((element, index) => { /* … */ })
some((element, index, array) => { /* … */ })

// 콜백 함수
some(callbackFn)
some(callbackFn, thisArg)

// 인라인 콜백 함수
some(function (element) { /* … */ })
some(function (element, index) { /* … */ })
some(function (element, index, array) { /* … */ })
some(function (element, index, array) { /* … */ }, thisArg)

 

- 매개변수

let nums = [50, 10, 40, 20, 30, 50, 20];
result=nums.some(function (value, index, array) {
  return value > 30 && index>=2 && array[index+1]==20
});

console.log(result) //true


let nums = [50, 10, 40, 20, 30, 50, 20];
result=nums.some(function (value, index, array) {
  return value > 30 && index>=2 && array[index+1]==20000 //해당 값 아무것도 없음
});

console.log(result) //false

 

🔸 arr.every 

배열 안의 모든 요소가 callback의 조건을 통과하는지 검사한 후 true, false를 반환한다.

기존배열 변경 없음

 

let nums = [50, 10, 40, 20, 30, 50, 20];
result=nums.every(function (value, index, array) {
  return value > 30 && index>=2 && array[index+1]==20
});

console.log(result) //false


result=nums.every(function (value, index, array) {
  return value >=10
});

console.log(result) //true

 

🔸 arr.indexOf(el)

 배열 내에서 요소를 검색하고 해당하는 첫 번째 요소의 위치를 반환 , 없다면 -1을 반환

 두 번째 매변수로 fromIndex를 지정하여 탐색 시작점을 지정할 수 있다. ( 앞-> 뒤 정방향으로 탐색한다.)

indexOf(searchElement)
indexOf(searchElement, fromIndex)

let nums = [50, 10, 40, 20, 30, 50, 20];
string40=nums.indexOf('40')	//-1 => string, number 구분함
num40=nums.indexOf(40)		//2
num20from4=nums.indexOf(20,4)	//6  => (20찾아주세요, 인덱스4 부터 시작해서)

 

Array.prototype.indexOf() - JavaScript | MDN

 

🔸 arr.lastIndexOf(el)

위의 arr.indexOf와 비슷하나, 마지막 요소를 반환하고 역방향으로 탐색한다는 차이가 있음

 

배열 내에서 요소를 검색하고 해당하는 마지막 요소의 위치를 반환 , 없다면 -1 반환

두 번째 매개변수로 fromIndex를 지정하여 탐색 시작점을 지정할 수 있다. ( 역방향으로 탐색한다.)

 

Array.prototype.lastIndexOf() - JavaScript | MDN

 

🔸 arr.find()

조건을 만족하는 첫 번째 요소의 값을 반환

-매개변수

let nums = [50, 10, 40, 20, 30, 50, 20];
result=nums.find(function (value, index, array) {
  return value >=20 && value <=40
});

console.log(result)  //40

 

🔸 arr.findIndex()

조건을 만족하는 첫 번째 요소의 인덱스를 반환

let nums = [50, 10, 40, 20, 30, 50, 20];
result=nums.findIndex(function (value, index, array) {
  return value >=20 && value <=40
});

console.log(result)  //2

 

---

 참고

developer.mozilla.org

 

[JavaScript-13]js에서 배열 메소드들(map, forEach, filter, reduce, some, every)이용해서 함수형 프로그래밍하