[Javascript] 07. Itereators

7. Itereators

7-1. Higher-Order-Functions

고차함수는 다른 함수를 인수로 받거나 반환값을 함수로 내보내는 함수입니다.

---

7-1-1. Functions as Data

Javascript 함수는 언어의 다른 데이터 유형처럼 작동합니다. 변수에 함수를 할당할 수 있고 새로운 변수에 재할당할 수 있습니다.

const announceThatIAmDoingImportantWork = () => {
    console.log("I’m doing very important work!");
};

코드의 예시를 보면 함수의 이름이 길어 코드의 가독성을 해칩니다. 이럴 때 위에 설명에서 말했던 것처럼 함수를 변수에 할당하는 방법을 사용하면 됩니다.

const busy = announceThatIAmDoingImportantWork;
 
busy();

busy는 원래 함수인 announceThatIAmDoingImportantWork를 참조하는 변수입니다. 기존의 함수인 announceThatIAmDoingImportantWork와 busy는 같은 주소를 가리킵니다. 따라서 busy를 괄호를 이용하여 busy()로 기존의 함수를 호출할 수 있습니다.
기존의 함수를 새로운 변수에 할당을 하고자 했을 때 괄호없이 할당 해줘야 합니다. 함수 그 자체를 할당을 하고 싶은 것이지 괄호를 이용을 해서 할당을 하게 되면 함수의 반환값을 할당받게 됩니다.

Javascript는 퍼스트 클래스 객체입니다. 이는 다른 객체들과 마찬가지로 속성과 메서드를 갖습니다. 아래 링크를 통해 더 자세히 볼 수 있습니다.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function

Function - JavaScript | MDN

7-1-2. Functions as Parametes

Javascript의 함수는 다른 유형의 데이터처럼 동작하기에 함수를 매개변수로 전달할 수 있습니다. 함수를 매개변수로도 전달할 수도 있고 함수를 반환을 할 수도 있습니다. 매개변수를 통해서 함수 외부에서 함수를 인수로 받은 함수를 고차함수, 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백함수라고 부릅니다. 고차함수를 호출한 상태에서 다른 함수를 인수로 전달했을 때 괄호없이 함수의 이름만으로 전달합니다. 괄호있이 함수를 전달하게 되면 함수를 전달하는 것이 아니라 함수의 반환값을 전달하게 될 것입니다.

const higherOrderFunc = param => {
  param();
  return `I just invoked ${param.name} as a callback function!`
}
 
const anotherFunc = () => {
  return 'I\'m being invoked by the higher-order function!';
}
 
higherOrderFunc(anotherFunc);

위의 예시를 보면 고차함수 higherOrderFunc()을 작성한 것으로 함수를 인수로 받아들여 콜백함수를 호출을 한 후, 콜백함수의 이름을 포함한 문장을 반환합니다. 이후에 anotherFunc을 인수를 받아 higherOrderFunc 함수를 호출을 했습니다.

higherOrderFunc(() => {
  for (let i = 0; i <= 10; i++){
    console.log(i);
  }
});

익명 함수도 함수의 인수로 넘겨서 사용할 수 있습니다. 위 코드는 익명함수를 higherOrderFunc() 함수의 인수로 사용된 예시입니다. 

---

7. Itereators

7-2. Itereators

우리는 반복을 할 때 보통 for루프를 사용합니다.
하지만 여러 내부 배열 메서드를 사용하면 더 쉽게 반복을 사용할 수 있습니다.

---

7-2-1. The .forEach() Method

.forEach()는 배열의 요소 각각에 대한 동일한 코드를 실행시키는 메서드입니다. 

출처 Codecademy

• groceries 배열에서 .forEach()를 호출합니다.
• .forEach()는 콜백함수를 인수를 취합니다. 콜백함수란 인수로 다른 함수에 전달이 되는 함수입니다.
•  .forEach() 배열을 통해 반복이 되며, 배열의 각 요소에 콜백함수를 실행합니다. 현재 배열의 요소가 콜백함수에 대한 인수로 전달됩니다. 
• .forEach()의 반환값은 항상 undefined입니다.

.forEach()를 사용하는 다른 방법으로 화살표  함수 구문을 이용해서 사용할 수 있습니다.

groceries.forEach(groceryItem => console.log(groceryItem));

콜백함수를 미리 정의하는 방법으로도 사용할 수 있습니다.

function printGrocery(element){
  console.log(element);
}
 
groceries.forEach(printGrocery);

위의 세 개의 코드는 모두 동일한 작업을 수행합니다. 세가지 예시 중 하나를 선택하여 콜백함수를 반복자에 대한 인수로 제공할 수 있습니다. 

7-2-2. The .map() Method

.map()는 .forEach()와 원리는 동일하지만 새로운 배열을 반환합니다. 

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]

• numbers 배열에서 .map()을 호출하여 반환값을 bigNumbers에 저장합니다.
• numbers.map은 numbers 배열의 각 요소를 반복하고, 요소를 콜백함수의 인수로 전달합니다.
• return number * 10; 문장을 통해 numbers 배열의 요소에10을 곱하여 새 배열인 bigNumbers에 저장합니다.
  출력값을 보면 기존의 numbers의 요소는 변경되지 않았으며, bigNumber라는 새 배열이 생성이 된 것임을 알 수 있습니다.

7-2-3. The .filter() Method

.filter()는 .map()과 동일하게 새로운 배열을 반환합니다. 하지만, .filter()는 원래 배열에서 특정요소를 필터링을 한 후에 새로운 배열을 반환합니다. 따라서 .filter()에서 콜백함수는 반환값이 true 혹은 false이여야 한다. 콜백함수를 통해 true를 반환했다면 그 요소는 새로운 배열에 추가됩니다. 

const words = ['chair', 'music', 'pillow', 'brick', 'pen', 'door']; 
 
const shortWords = words.filter(word => {
  return word.length < 6;
});

•  words는 문자열을 포함한 배열입니다.
• words에 .filter()를 호출하여 새로운 배열을 반환하여 shortWords에 저장합니다.
• .filter()의 콜백함수를 보면 단일 변수인 word를 가지고 있습니다. words의 각 요소는 콜백함수의 인수로 전달됩니다.
• 콜백함수의 조건은 word.length < 6; 입니다. 즉, words 배열에서 요소의 글자 길이가 6자 미만인 요소를 shortWords 배열에 추가합니다.

7-2-4. The .findIndex() Method

콜백함수에 의해 true로 판정된 최초의 요소의 index값을 반환합니다. 만족하는 값이 없을 경우 -1을 반환합니다.

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

• .findIndex()를 호출하여 반환되는 Index값을 저장하는 lessThanTen 변수를 새로 선언합니다.
•  콜백함수는 단일 매개변수인 num을 가지고 있는 화살표 함수입니다. jumbledNums의 각 요소는 콜백함수의 인수로 전달됩니다.
• num < 10; 로 각 요소를 검사합니다. 이 조건에 대해 첫 번째 true인 요소의 index를 반환합니다.

const greaterThan1000 = jumbledNums.findIndex(num => {
  return num > 1000;
});
 
console.log(greaterThan1000); // Output: -1
});

 

위의 예시와 같이 조건을 충족시키는 요소가 없다면 -1을 반환합니다.

7-2-5. The .reduce() Method

.reduce() 함수는 배열의 모든 요소들을 앞에서부터 순차적으로 콜백함수에 적용시켜 최종 1개의 값을 반환합니다.

const numbers = [1, 2, 4, 10];
 
const summedNums = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue
})
 
console.log(summedNums) // Output: 17

.reduce()를 통해 진행이 되는 동안의 accumulator와 currentValue의 값을 보도록 하자.

출처&nbsp;Codecademy

• numbers는 숫자를  포함하는 배열이고 summedNums은 .reduce()를 호출했을 때 반환되는 값을 저장할 수 있는 변수입니다. 
• numbers.reduce()에서 numbers배열에서 .reduce()를 호출하고 배열의 각 요소를 콜백함수의 인수로 전달합니다.
• 콜백함수를 보면 두 개의 매개변수 accumulator와 currentValue이 있습니다. accumulator 값은 배열의 첫 번째 요소이고 currentValue는 두 번째 요소로 시작됩니다.
• .reduce()이 반복함에 따라 콜백함수의 반환값이 accumulator의 값이 되고, currentValue는 루프과정에서 현재 요소의 값을 가지고 있습니다.

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

.reduce()는 두 번째 매개변수를 사용하여 accumulator의 초기값을 설정할 수 있습니다. 

이 예시도 마찬가지로 .reduce()를 통해 진행이 되는 동안의 accumulator와 currentValue의 값을 보도록 하자.

출처&nbsp;Codecademy

 

7-2-6. Iterator Documentation

더 많은 기본 제공 배열 방법이 있으며, 아래 링크를 통해 확인해 볼 수 있습니다.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Iteration_methods

Array - JavaScript | MDN

---

JAVASCRIPT

Editor : 리미