[Javascript] 원본 배열을 반복적으로 참조하는 Array 메소드( 배열 고차함수 )

 

 

🎡 Array.prototype 메소드

 

모든 Array 인스턴스는 Array.prototype으로부터 메소드와 프로퍼티를 상속받습니다.

이렇게 상속받은 Array.prototype 메소드는 크게 다음과 같이 구분할 수 있습니다.

 

1. 원본 배열을 변경하는 메소드

2. 원본 배열은 변경하지 않고 참조만 하는 메소드

3. 원본 배열을 반복적으로 참조하는 메소드

 

 

 

 

---

 

💖 자바스크립트 원본 배열을 반복적으로 참조하는 Array.prototype  메소드

 

 

메소드	설명
forEach()	해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행함.
map()	해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 그 실행 결과를 새로운 배열로 반환함.
filter()	해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 그 결괏값이 true인 요소들만을 새로운 배열에 담아 반환함.
every()	해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 그 결괏값이 모두 true일 때에만 true를 반환함.
some()	해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 그 결괏값이 하나라도 true이면 true를 반환함.
reduce()	해당 배열의 모든 요소를 하나의 값으로 줄이기 위해, 두 개의 인수를 전달받는 콜백 함수를 실행함. (배열의 첫 번째 요소부터 시작함.)
reduceRight()	해당 배열의 모든 요소를 하나의 값으로 줄이기 위해, 두 개의 인수를 전달받는 콜백 함수를 실행함. (배열의 마지막 요소부터 시작함.)
entries()	배열 요소별로 키와 값의 한 쌍으로 이루어진 새로운 배열 반복자 객체(Array Iterator Object)를 배열 형태로 반환함.
keys()	배열 요소별로 키(key)만 포함하는 새로운 배열 반복자 객체를 배열 형태로 반환함.
values()	배열 요소별로 값(value)만 포함하는 새로운 배열 반복자 객체를 배열 형태로 반환함.
find()	검사를 위해 전달받은 함수를 만족하는 배열 요소의 값을 반환함. 만족하는 값이 없으면 undefined를 반환함.
findIndex()	검사를 위해 전달받은 함수를 만족하는 배열 요소의 인덱스를 반환함. 만족하는 값이 없으면 -1을 반환함.

 

 

 

 

---

 

✨ 원본 배열을 반복적으로 참조하는 메소드

다음 메소드는 원본 배열을 변경하지 않고, 반복적으로 참조만 하는 메소드입니다.

 

1. forEach()

2. map()

3. filter()

4. every()

5. some()

6. reduce()

7. reduceRight()

8. entries()

9. keys()

10. values()

 

 

 

 

---

 

📑 배열 고차함수

 

🔊 forEach() 

.forEach( (item, index, thisArr) => {
   ...
})

 

for문을 대체하는 고차 함수.

반복문을 추상화하여 구현된 메서드이고 내부에서 주어진 배열을 순회하면서 연산을 수행

 

[파라미터]

- item : 배열요소값

- index : 배열 인덱스

- thisArr : 참조한 배열

 

 

 

const numberArr = [1, 2, 3, 4, 5];
let total = 0;

numberArr.forEach((item) => {
total += item;
});

console.log(total); // 15

 

 

 

---

 

🔊 map() 

.map( (currentValue, index, array) => {
   ...
}, thisArg)

 

forEach 같이 순회하면서, 콜백함수에서의 실행결과를 리턴한 값으로 이루어진 배열을 만들어 반환합니다.

 

 

[파라미터]

- currentValue : 현재 배열요소값
- index : 배열 인덱스
- array : 참조한 배열
- thisArg : 콜백함수에서 this로 사용할 값

 

 

[리턴값]

반환 타입은 찾은 요소의 타입 / 없다면 undefinded

 

const numberArr = [1, 2, 3, 4, 5];
const numberMapArr = numberArr.map((item) => {
return (item % 2 === 0) ? 'even' : 'odd'; // 연산한 결과값을 넣어 배열 반환
});

console.log(numberMapArr); // ['odd', 'even', 'odd', 'even', 'odd']

 

🔊 forEach()와 map()의 차이​

두 메서드 모두 배열을 순회하는 것은 동일하지만,
forEach()의 경우 각 요소를 참조한 연산이 이루어지고
map()의 경우엔 각 요소를 다른 값으로 맵핑한 새로운 배열이 반환되는 점에 차이가 있습니다.​

정리하면 forEach()는 for문을 대체하여 사용하고 map()은 연산의 결과로 새로운 배열을 생성하고자할 때 사용됩니다.

 

 

 

---

 

🔊 filter() 

 

.filter( (element, index, array) => {
   ...
}, thisArg)

 

주어진 배열을 순회하면서 콜백 함수의 반환값이 true에 해당하는 요소로만 구성된 새로운 배열을 생성하여 반환합니다.

한마디로 find()의 찾아서 값을 반환하는 기능과 map()의 배열생성 기능의 융합 버젼입니다.

 

 

[파라미터]

- element : 현재 배열요소값
- index : 배열 인덱스
- array : 참조한 배열
- thisArg : 콜백함수에서 this로 사용할 값

 

 

[리턴값]

테스트를 통과한 요소로 이루어진 새로운 배열 / 어떤 요소도 테스트를 통과하지 못했으면 빈 배열을 반환합니다.

const numberArr = [1, 2, 3, 4, 5];
const numberFilterArr = numberArr.filter((item) => {
return item % 2 === 0; // 해당조건에 부합으면 item을 넣어 배열 반환
});

console.log(numberArr); // [1, 2, 3, 4, 5]
console.log(numberFilterArr); // [2, 4]

 

 

 

---

 

🔊 every() 

.every( (currentValue, index, array) => {
   ...
}, thisArg)

 

배열안의 모든 요소가 주어진 함수(조건)을 모두 통과하면 true, 한 요소라도 통과하지 못하면 false를 출력합니다.

빈 배열을 함수에 적용시키면 무조건 true를 반환합니다.

​

이와같이 every이라는 이름은, 함수(조건)에 부합한 갯수가 every이면 true라는 뜻에서 비롯됩니다.

 

 

[파라미터]

- currentValue : 현재 배열요소값
- index : 배열 인덱스
- array : 참조한 배열
- thisArg : 콜백함수에서 this로 사용할 값

 

 

[리턴값]

callback이 어떤 배열 요소라도 대해 참인 값을 반환하는 경우 true, 그 외엔 false.

const array1 = [1, 30, 39, 29, 100, 13];

const isBelowThreshold = (currentValue) => currentValue < 40;

console.log(array1.every(isBelowThreshold));
// expected output: false이다.
// array1요소 중 100이 조건에 맞지 않기 때문이다.

 

 

 

---

 

🔊 some() 

 

.some( (currentValue, index, array) => {
   ...
}, thisArg)

 

include()의 콜백함수 버젼. 확장판 입니다.

include는 값이 있냐에 따른 bool이면, some은 함수의 조건에 따른 bool.

​

배열의 요소들을 주어진 함수(조건)을 통과하는데 한개라도 통과되면 true, 다 아닐때에는 false를 출력합니다.

빈 배열로 함수(조건)을 통과하면 무조건 false를 출력합니다.

​

이와같이 some이라는 이름은, 함수(조건)에 부합한 갯수가 some이면 true라는 뜻에서 비롯됩니다.

 

 

[파라미터]

- currentValue : 현재 배열요소값
- index : 배열 인덱스
- array : 참조한 배열
- thisArg : 콜백함수에서 this로 사용할 값

 

 

[리턴값]

callback이 어떤 배열 요소라도 대해 참인 값을 반환하는 경우 true, 그 외엔 false.

 

 

const array = [1, 3, 5];

// checks whether an element is even
const even = (element) => element % 2 === 0;

console.log(array.some(even));
// expected output: false이다.
// 그 이유는 array의 3개의 요소 모두 2로 나눌때 나머지가 0이 아니기 때문이다.

 

 

 

 

---

 

🔊 reduce() 

 

.reduce( (accumulator, currentValue, index, array) => {
   ...
}, initialValue)

 

이전 콜백 함수의 실행된 반환값을 전달 받은 연산의 결과값이 반환합니다.

acc서부터 시작해서 배열값cur을 순회하며 acc+=cur을 실행합니다.

사실상 forEach,map,filter기능을 reduce로 모두 쓸순 있긴 하다.

[파라미터]

- accumulator : 누산기. 순회하면서 계속 더해해서 합쳐지는 값
- currentValue : 현재 값
- index : 배열 인덱스
- array : 참조한 배열
- initialValue : 콜백 최초 호출에서 acc 누산기에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용. 빈 배열에서 초기값 없이 호출하면 에러.

 

 

[리턴값]

누적 계산의 결과값(Array를 하나의 단일 값으로 줄이는 용도)

🔊 reduce()함수 호출시 initialValue 값이 없는 경우
- accumulator : 배열의 첫번째 값
- currentValue : 배열의 두번째 값
​
🔊 reduce()함수 호출시 initialValue 값이 있는 경우
- accumulator : initialValue가 지정한 값
- currentValue : 배열의 첫번째 값

 

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

const sum = numberArr.reduce((previousValue, currentValue, currentIndex, thisArray) => {
console.log('Current Index: ' + currentIndex + ' / Previous Value: ' + previousValue
+ ' / Current Value: ' + currentValue);
return previousValue + currentValue; // 연산한 결과값을 누산기previousValue에 넣어 최종값을 얻는다.
}, 0);

console.log('Sum: ' + sum);

/*
Current Index: 0 / Previous Value: 0 / Current Value: 1
Current Index: 1 / Previous Value: 1 / Current Value: 2
Current Index: 2 / Previous Value: 3 / Current Value: 3
Current Index: 3 / Previous Value: 6 / Current Value: 4
Current Index: 4 / Previous Value: 10 / Current Value: 5
Sum: 15
*/

 

 

 

 

---

 

🔊 reduceRight() 

 

.reduceRight( (accumulator, currentValue, index, array) => {
   ...
}, initialValue)

 

reduceRight() 메소드는 reduce() 메소드와 같은 방식으로 실행되며, 배열의 마지막 요소부터 줄이기 시작합니다.

 

 

[파라미터]

- accumulator : 누산기. 순회하면서 계속 더해해서 합쳐지는 값
- currentValue : 현재 값
- index : 배열 인덱스
- array : 참조한 배열
- initialValue : 콜백 최초 호출에서 acc 누산기에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용. 빈 배열에서 초기값 없이 호출하면 에러.

 

 

[리턴값]

reduce와 배열의 값들을 내침차순으로 접근한다는 부분만 다를뿐 원리는 똑같다.

 

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

function sumOfValues(x, y) {
    return x - y;
}

arr.reduceRight(sumOfValues); // 5 - 4 - 3 - 2 - 1 = -5