[JavaScript] 07. Iterators 반복자

하나의 함수는 간결하게 작성되어 하나의 일을 중점적으로 합니다. 이 함수를 매개변수로 받거나, 값을 반환하는 경우를 고차함수라고 합니다. 이러한 고차함수를 이용하여 배열의 각 요소들을 효과적으로 방문하는 반복자가 있습니다.

이번 시간에는 배열의 각 함수에 효과적으로 접근할 수 있는 반복자를 배워보겠습니다. 조건에 맞는 요소만을 반환하거나 각 값을 변경하는 등의 반복자는 코드를 설계할 때 굉장히 중요합니다.

---

📌 Higher-Order Functions / 고차함수

📚 Introduction / 소개

하나의 함수에서 다른 함수를 인수로 받거나 반환하는 함수를 고차함수라고 합니다. 

간결하게 불필요한 세부 사항을 줄이고 핵심 개념만을 전달하는 방법을 "추상화"라고 합니다. 이번 단원에서는 함수를 작성하여 프로그래밍에서 추상화하는 방법을 배웁니다. 

---

📚 Functions as Data / 데이터로서의 함수

자바스크립트의 함수는 다른 언어들처럼 변수에 함수를 할당허가 새 변수에 다시 할당할수도 있습니다.

 

예시 코드를 보며 확인해보겠습니다.

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

현재 함수를 불러오기 위해서는 굉장히 긴 이름을 호출해야합니다. 만약 이 함수를 반복해서 호출해야한다면 불필요한 작업을 여러 번 해야합니다.

const busy = announceThatIAmDoingImportantWork;
busy(); // This function call barely takes any space!

그렇다면 이 코드처럼 변수에 함수를 다시 할당하여 함수의 이름을 짧게 하도록 만들 수 있습니다. busy 함수는 참조합니다. 메모리에 있는 주소와 메모리에 있는 주소를 찾을 수 있기에 busy 함수는 announceThatIAmDoingImportantWork 함수와 같은 장소를 가리킵니다.

 

자바스크립트의 함수는 모두 객체로 이루어져있습니다. 객체에 대한 개념은 다음 포스트에서 다루도록 하겠습니다. 지금까지 본 다른 객체처럼 length 메서드를 가집니다. 

---

📚 Functions as Parameters / 매개변수로서의 함수

자바스크립트에서의 함수는 다른 함수의 매개변수로서도 전달 될 수 있습니다. 고차함수는 한 함수가 다른 함수를 매개 변수로 사용하거나, 다른 함수를 반환할 수 있습니다. 함수를 매개변수 혹은 반환값으로 사용하는 함수를 고차함수(higher-order function), 인수로 전달되는 함수를 콜백 함수(callback function) 이라고 합니다.

 

함수를 인수로 전달할 때 함수 자체를 넘겨주므로 함수가 호출되지는 않습니다. 콜백 함수를 사용하면 괄호 없이 함수 이름을 입력하여 함수 자체를 전달합니다.

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!';
}
 
console.log(higherOrderFunc(anotherFunc));
// Output: I just invoked anotherFunc as a callback function!

• higherOrderFunc 는 단일 매개변수를 받는 고차함수를 작성했습니다.
• 마지막으로 전달된 콜백 함수의 이름을 알려주도록 .name 성질을 사용했습니다.
• anotherFunc 함수를 통해 반환된 문자열을 higherOrdefFunc 에 전달하였습니다.

---

📌 Iterators 

📚 Introduction to Iterators

배열의 각 항목을 접근하기 위해서 for 문의 인덱스 번호를 사용해 보았습니다. 그러나 만약 인덱스 변수가 일정하게 증가하지 않거나 다른 중지 조건을 사용해야할 때는 배열의 각 원소에 접근할 수 있는 방법이 마땅치 않습니다

이 때 사용하는 것이 반복자(반복 메서드) 입니다. 반복자는 요소를 조작하고 값을 반환하기 위해 배열을 호출하는 메서드입니다. 

---

📚 The .forEach() Method / forEach() 메서드

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

• groceries 배열에서 forEach 메서드를 호출합니다.
• forEach 함수는 콜백 함수의 인수를 취합니다. (콜백함수는 다른 함수의 인수로 전달되는 함수입니다.)
• forEach 함수를 통해 배열을 반복하고 각 요소에 대해 함수를 실행합니다. 함수가 실해될 때마다 현ㄴ재 요소가 콜백함수의 인수로 전달됩니다.
• forEach 의 반환값은 항상 undefined 입니다.

 

forEach 콜백을 전달하는 다른 방법은 화살표 함수 구분을 이용하는 것입니다. 혹은 콜백 함수로 사용할 함수를 미리 정의할수도 있습니다.

// 화살표 함수
groceries.forEach(groceryItem => console.log(groceryItem));

// 콜백 함수
function printGrocery(element){
  console.log(element);
}
groceries.forEach(printGrocery);

---

📚 The .map() Method / map() 메서드 

두번째 반복자는 map 메서드입니다. map이 배열에서 호루되면 콜백 함수의 인수를 받아 새 배열을 반환합니다.

map 메서드와 forEach 메서드의 주요 차이점은 map 메서드는 새 배열이 반환된다는 것입니다.

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는 숫자의 배열입니다.
• bigNumbers는 map 메서드를 이용해 number의 각 원소에 10이 곱해진 새로운 배열을 반환받습니다.
• numbers 는 변경되지 않았으며, bigNumbers는 새로운 배열을 반환받은 것을 확인할 수 있습니다.

---

📚 The .filter() Method / filter() 메서드

filter 메서드 역시 새 배열을 반환합니다. 그러나 원래 배열에서 특정 조건에 맞는 요소들을 필터링하여 새로운 배열을 반환한다는 점에서 차이점을 보입니다. 

filter 메서에서 콜백 함수는 전달된 요소에 따라 true 혹은 false 를 반환합니다. 콜백함수가 true를 반환하는 요소들은 새로운 배열에 추가됩니다.

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']

• words 는 문자열을 요소로 하는 배열입니다.
• shortWords 에는 words의 각 요소의 길이가 6 미만인 요소들을 새로운 배열로 선언합니다.
• 콜백 함수는 매개변수가 하나인 화살표 함수 입니다. 배열의 각 요소는 함수의 인수로 전달됩니다.
• words의 배열은 값이 변하지 않고, shorWords 에는 조건을 만족하는 요소들만 들어있습니다.

---

📚 The .findIndex() Method / findIndex() 메서드

콜백 함수에 의해 true로 판정된 최초의 요소 인덱스를 반환합니다. 해당하는 요소를 차지 못하면 -1을 반환합니다.

const jumbledNums = [123, 25, 78, 5, 9]; 
 
const lessThanTen = jumbledNums.findIndex(num => {
  return num < 10;
});
console.log(lessThanTen); // Output: 3 

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

• jumbledNums는 숫자를 포함한 배열입니다.
• lessThanTen 은 인덱스 번호를 저장하는 새 변수입니다.
• jumbledNums의 요소 중 10보다 요소가 발견되면 그 인덱스 번호를 반환합니다.
• greaterThan1000은 조건을 만족하는 요소가 없으면 -1이 반환받습니다

---

📚 The .reduce() Method / reduce() 메서드

reduce 메서드는 배열의 모든 요소들을 앞에서부터 순차적으로 메서드를 적용시켜 최종 값을 반환합니ㅏㄷ.

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

Iteration	accumulator	currentValue	return value
First	1	2	3
Second	3	4	7
Third	7	10	17

• numbers 는 숫자를 포함하는 배열입니다.
• summedNums에는 numbers의 각 배열의 반환값을 저장한느 변수입니다.
• reduce 메서드를 사용해 배열의 메서드를 호출하고 콜백함수를 인수로 받습니다.
• 콜백함수에는 두 매개변수 accumulator와 currentValue가 있으며 각 값은 위의 표와 같이 변화합니다.

---

📚 Iterator Documentation / 반복자 문서

자바스크립트에는 이 외의 배열 내장 메서드들이 있습니다. 이 메서드들을 알아보기 위해서는 다음 링크를 방문하면 됩니다. (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Iteration_methods)