[TIL] iterators

1. .forEach() method

.forEach()는 세 가지 사용법이 있다.

(1)

const fruits = ['mango', 'papaya', 'pineapple', 'apple'];

fruits.forEach(function(item) {
  console.log(`I want to eat a ${item}`);
});

/* output: 
I want to eat a mango
I want to eat a papaya
I want to eat a pineapple
I want to eat a apple */

fruits 배열에서 forEach 메소드를 호출하고,
forEach()는 콜백 함수의 인수를 받아 배열을 반복한다.

(2) arrow 함수 사용하기

const fruits = ['mango', 'papaya', 'pineapple', 'apple'];

fruits.forEach(item => console.log(`I want to eat a ${item}`));

/* output: 
I want to eat a mango
I want to eat a papaya
I want to eat a pineapple
I want to eat a apple */

(3) 콜백함수 미리 정의하기

const fruits = ['mango', 'papaya', 'pineapple', 'apple'];

function printFruits(item) {
  console.log(item);
}

fruits.forEach(printFruits);

/* output:
mango
papaya
pineapple
apple
*/ 

2. .map() method

.map()은 forEach()와 유사하지만 새 배열을 return한다는 차이점이 있다.

const bigNumbers = [100, 200, 300, 400, 500];

const smallNumbers = bigNumbers.map(num => num / 100);
console.log(sumallNumbers);

//output: [ 1, 2, 3, 4, 5 ]

3. .filter() method

.filter() 는 .map()처럼 새 배열을 return하지만, 원래 배열에서 특정 요소를 필터링한 후 반환하는 차이점이 있다.

const animals = ['cat', 'camel', 'tiger', 'lion', 'rabbit'];

const animal = animals.filter(item => item.length < 5);

console.log(animal);

//output:  ["cat", "lion"]

4. .findIndex() method

.findIndex() 는 배열에서 요소의 위치를 찾을 때 사용하며, true로 평가되는 첫 번째 요소의 인덱스가 return 된다.

만약 true가 되는 요소가 없다면 -1을 return한다.

const numbers = [123, 25, 87, 4, 8];

const Findnum = numbers.findIndex(num => num < 10);

console.log(Findnum); // output: 3

const bignumber = numbers.findIndex(num => num > 1000);
console.log(bignumber); // output: -1

만약 여기서 3번째 인덱스의 값이 궁금하다면

console.log(numbers[3]) // output: 4

5. .reduce() method

.reduce()는 배열의 요소를 반복한 뒤 누계된 단일 값을 return하여 배열을 줄여줌

const number = [1, 2, 4, 10];

const sum = numbers.reduce((acumulator, currentValue) => {
  return accunulator + currentValue
});

console.log(sum) // output: 17

Iteration	accumulator	currentValue	returnvalue
first	1	2	3
second	3	4	7
third	7	10	17

.reduce()는 두번째 매개변수를 통해 초기값을 설정할 수도 있다.

const number = [1, 2, 4, 10];

const sum = numbers.reduce((acumulator, currentValue) => {
  return accunulator + currentValue
}, 100);

console.log(sum) // output: 117

Iteration	accumulator	currentValue	returnvalue
first	100	1	101
second	101	2	103
third	103	4	107
fourth	107	10	117

추가 참고 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Iteration_methods