JavaScript Iterators

<.forEach()>
화살표 함수 구문 사용하기
groceries.forEach(groceryItem => console.log(groceryItem));
혹은
콜백 함수로 사용할 함수 미리 정의하기
function printGrocery(element){
  console.log(element);
}
예
const fruits = ['mango', 'papaya', 'pineapple', 'apple'];

fruits.forEach(fruit => 
  console.log(`I want to eat a ${fruit}.`))
 
groceries.forEach(printGrocery);
// 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.
 다른 예
  const artists = ['Picasso', 'Kahlo', 'Matisse', 
  'Utamaro'];

  artists.forEach(artist => {
    console.log(artist + ' is one of my favorite artists.');
  }); // Output:
      Picasso is one of my favorite artists.
      Kahlo is one of my favorite artists.
      Matisse is one of my favorite artists.
      Utamaro is one of my favorite artists.
      
<.map()> - 새로운 배열 반환
const numbers = [1, 2, 3, 4, 5];

const squareNumbers = numbers.map(number => {
  return number * number;
});

console.log(squareNumbers);
// Output: [ 1, 4, 9, 16, 25 ]
다른 예
const numbers = [1, 2, 3, 4, 5]; 
 
const bigNumbers = numbers.map(number => {
  return number * 10;
});

console.log(numbers); // Output: [1, 2, 3, 4, 5]
console.log(bigNumbers); // Output: [10, 20, 30, 40, 50]
다른 예
const animals = ['Hen', 'elephant', 'llama', 'leopard', 'ostrich', 'Whale', 'octopus', 'rabbit', 'lion', 'dog'];

const secretMessage = animals.map(animal => animal[0]);
console.log(secretMessage.join(''));
// Output: HelloWorld
혹은
const bigNumbers = [100, 200, 300, 400, 500];

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

<.filter()> - 원래배열에서 특정요소 필터링 후 배열 반환
const things = ['desk', 'chair', 5, 'backpack', 3.14, 100];

const onlyNumbers = things.filter(thing => {
  return typeof thing === 'number';
});
console.log(onlyNumbers);
// Output: [ 5, 3.14, 100 ]
다른 예
const words = ['chair', 'music', 'pillow', 'brick', 'pen', 'door']; 
 
const shortWords = words.filter(word => {
  return word.length < 6;
});

console.log(words); // Output: ['chair', 'music', 'pillow', 'brick', 'pen', 'door']; 
console.log(shortWords); // Output: ['chair', 'music', 'brick', 'pen', 'door']
혹은
const randomNumbers = [375, 200, 3.14, 7, 13, 852];

const smallNumbers = randomNumbers.filter(num => {return num < 250;})
또 다른 예
const favoriteWords = ['nostalgia', 'hyperbole', 'fervent', 'esoteric', 'serene'];

const longFavoriteWords = favoriteWords.filter(word => {
  return word.length > 7 ;
})
마지막 예
const words = ['unique', 'uncanny', 'pique', 'oxymoron', 'guise'];

const interestingWords = words.filter((word) => { return word.length > 5 
});

<.findIndex()> - 배열에서 엘리먼트 위치 찾을 떄
const jumbledNums = [123, 25, 78, 5, 9]; 
 
const lessThanTen = jumbledNums.findIndex(num => {
  return num < 10;
});

console.log(lessThanTen); // Output: 3 

console.log(jumbledNums[3]); // Output: 5

const greaterThan1000 = jumbledNums.findIndex(num => {
  return num > 1000;
});
 
console.log(greaterThan1000); // Output: -1
(충족안하면, 배열에 없으면!)
마지막 예
const animals = ['hippo', 'tiger', 'lion', 'seal', 'cheetah', 'monkey', 'salamander', 'elephant'];

const foundAnimal = animals.findIndex(animal => 
{return animal === 'elephant';
});

const startsWithS = animals.findIndex(animal => 
{
  return animal[0] === 's'?
  true : false
});

<.reduce()> 
- 배열의 엘리먼트 반복 후 단일 값 반환해 배열 줄임
const numbers = [1, 2, 4, 10];
 
const summedNums = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue
})
 
console.log(summedNums) // Output: 17
이렇게도
const numbers = [1, 2, 4, 10];
 
const summedNums = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue
}, 100)  // <- Second argument for .reduce()
 
console.log(summedNums); // Output: 117
마지막 예
const newNumbers = [1, 3, 5, 7];

const newSum = newNumbers.reduce((accumulator, currentValue) => { 
  console.log('The value of accumulator: ', accumulator);
console.log('The value of currentValue: ', currentValue);
return accumulator + currentValue;
},10);

console.log(newSum); 
// Output:
The value of accumulator:  10
The value of currentValue:  1
The value of accumulator:  11
The value of currentValue:  3
The value of accumulator:  14
The value of currentValue:  5
The value of accumulator:  19
The value of currentValue:  7
26

<.some()> - true/false
const words = ['unique', 'uncanny', 'pique', 'oxymoron', 'guise'];

console.log(words.some(word => {
  return word.length < 6;
})); // Output: true

<.every()> -true/false
 const words = ['unique', 'uncanny', 'pique', 'oxymoron', 'guise'];

console.log(interestingWords.every((word) => {
   return word.length > 5
  } )); // Output: true
  
*마지막 정리*
const cities = ['Orlando', 'Dubai', 'Edinburgh', 'Chennai', 'Accra', 'Denver', 'Eskisehir', 'Medellin', 'Yokohama'];

const nums = [1, 50, 75, 200, 350, 525, 1000];

//  Choose a method that will return undefined
cities.forEach(city => console.log('Have you visited ' + city + '?'));

// Choose a method that will return a new array
const longCities = cities.filter(city => city.length > 7);

// Choose a method that will return a single value
const word = cities.reduce((acc, currVal) => {
  return acc + currVal[0]
}, "C");

console.log(word)

// Choose a method that will return a new array
const smallerNums = nums.map(num => num - 5);

// Choose a method that will return a boolean value
nums.some(num => num < 0);