JavaScript | Array Methods 3

Array methods의 마지막입니다.

앞서 작성한 Array Methods 1과 Array Methods 2에 이어 이번엔 Array 객체의 iteration methods를 알아보겠습니다.

iteration methods는 배열을 순회하면서 주어진 명령을 수행하며 대부분 callback 함수를 받아 각 element들에게 적용하는 구조로 이뤄져 있습니다.

여기서 callback이란, 다른 코드의 인수로서 넘겨주는 실행 가능한 코드를 말합니다. callback을 넘겨받는 코드는 이 callback을 필요에 따라 즉시 실행할 수도 있고, 아니면 나중에 실행할 수도 있습니다.¹

그러면 메소드들을 보기에 앞서 몇 가지 주의사항을 알아보겠습니다.

먼저 메소드들을 호출하는 시점에 배열의 length가 기억되기 때문에 순회를 끝내지 않은 도중에 배열에 새로운 element가 추가되더라도 callback이 방문하지 않습니다.

또한 iteration methods는 모두 immutable하기 때문에 아무리 함수를 호출해도 원본 배열은 변형되지 않습니다.

Iteration Methods

• Array.prototype.keys()
• Array.prototype.values()
• Array.prototype.entries()
• Array.prototype.find()
• Array.prototype.findIndex()
• Array.prototype.every()
• Array.prototype.some()
• Array.prototype.forEach()
• Array.prototype.map()
• Array.prototype.reduce()

keys / values

Array.prototype.keys()

각 인덱스를 키 값으로 가지는 새로운 Array Iterator 객체를 반환합니다.

Array.prototype.values()

각 인덱스에 대한 값을 가지는 새로운 Array Iterator 객체를 반환합니다.

Array.prototype.entries()

각 인덱스에 대한 키/값 쌍을 가지는 새로운 Array Iterator 객체를 반환합니다.

Array Iterator객체는 next() 메소드로 순환할 수 있으며 next()는 done:boolean과 value:any를 포함하는 객체를 반환합니다.

done은 false값을 갖다가 next()가 Array Iterator를 모두 순환하면 true가 되며, value에 keys(), values(), entries() 메소드들이 각각 가져오는 값들이 저장됩니다.

또한 spread operator를 이용하여 key나 entry를 배열로 만들 수도 있습니다.

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

let key = arr.keys();
key.next();           // {value: 0, done: false}
key.next();           // {value: 1, done: false}

let val = arr.values();
val.next();           // {value: 5, done: false}
val.next();           // {value: 4, done: false}

let entry = arr.entries();
entry.next();         // {value: [0, 5], done: false}
entry.next();         // {value: [1, 4], done: false}

let zeroToTen = [...Array(11).keys()];    // [0, 1, ... , 9, 10]

find / findIndex

Array.prototype.find(callback(element[, index[, array]])[, thisArg])

배열에서 callback 함수가 true를 반환하도록 하는 element 중 맨 처음에 위치한 element의 값을 반환합니다.

Array.prototype.findIndex(callback(element[, index[, array]])[, thisArg])

배열에서 callback 함수가 true를 반환하도록 하는 element가 처음으로 등장하는 위치를 반환합니다.

let arr = [1, 2, 3, 4, 5];
arr.find(e => e > 3);         // 4
arr.findIndex(e => e > 3);    // 3

every / some

Array.prototype.every(callback(element[, index[, array]])[, thisArg])

배열의 모든 element들에 대해서 callback 함수가 true를 반환한다면 every()는 true를 반환합니다.

Array.prototype.some(callback(element[, index[, array]])[, thisArg])

배열의 어떤 element들에 대해서 callback 함수가 ture를 반환한다면 some()은 true를 반환합니다.

쉽게 말해, every()는 callback 함수에 있는 테스트를 모두 통과해야만 true를 반환하고 하나라도 통과하지 못하면 false를 반환합니다.

반대로 some()은 callback 함수에 있는 테스트를 하나라도 통과하면 true를 반환하고 모두가 통과하지 못하면 false를 반환합니다.

let nums = [1, 2, 3, 4, 5];
let odds = [1, 3, 5, 7, 9];
let evens = [2, 4, 6, 8, 10];

nums.every(e => e % 2);     // false
odds.every(e => e % 2);     // true

nums.some(e => e % 2);      // true
evens.some(e => e % 2);     // false

forEach

Array.prototype.forEach(callback(currentValue[, index[, array]])[, thisArg])

주어진 callback 함수를 배열의 각 element에 대해서 실행하며 undefined를 반환합니다.

currentValue는 처리할 현재 요소이고 index는 currentValue의 인덱스 입니다. 그리고 array는 forEach()를 호출한 배열이며 thisArg는 callback을 실행할 때 this로 사용할 값입니다.

let arr = [1, 2, 3, 4, 5];
arr.forEach(e => console.log(e));
// 1
// 2
// 3
// 4
// 5

map

Array.prototype.map(callback(currentValue[, index[, array]])[, thisArg])

배열의 각 element에 대해서 주어진 callback 함수를 실행한 결과를 모아 새로운 배열을 반환합니다.

let arr = [1, 2, 3, 4, 5];
arr.map(e => e * 2);      // [2, 4, 6, 8, 10]

reduce

Array.prototype.reduce(callback(acc, cur[, idx[, scr]])[, init])

배열의 각 element에 대해서 주어진 reducer 함수인 callback을 실행하고, 하나의 결과값을 반환합니다.

reducer 함수 callback은 네 가지 parameter를 갖습니다.

1. acc reducer 함수의 누적값
2. cur 순회 중인 배열의 현재 값
3. idx 배열의 인덱스
4. scr 함수를 호출한 배열

callback 함수의 리턴값은 다음 cur을 처리할 때의 acc값이 됩니다. 그렇게 acc에는 callback을 호출할 때마다의 리턴값이 누적되고 이것이 reduce()의 최종 리턴값이 되는 것입니다.

또한 init을 통해 acc의 초기값을 설정할 수 있으며 init이 없을 시, acc의 초기값은 reduce()를 호출한 배열의 첫 번째 element의 값이 됩니다.

참고로, Array.prototype.reduceRight(callback(acc, cur[, idx[, scr]])[, init]) 함수를 사용한다면 배열의 끝에서부터 앞으로 도달하는 순서로 진행합니다.

let arr = [1, 2, 3, 4, 5];
arr.reduce((acc, cur) => acc * cur);      // 120

let pairs = [['a', 'alpha'], ['b', 'beta']];
pairs.reduce((acc, cur) => {
  acc[cur[0]] = cur[1];
  return acc;
}, {});       // {a: "alpha", b: "beta"}

References

Array - JavaScript | MDN

1. 콜백 - 위키백과, 우리 모두의 백과사전 ↩

Back to top ↑