[Codecademy-JavaScript] 8장 ITERATORS

[8-A. HIGHER-ORDER FUNCTIONS]

higher-order-function (고차함수) 는 함수를 매개변수로 받아들이거나 함수를 반환하는 함수입니다.

 

8-A-1. Function 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는 같은 주소를 가리킵니다. 그렇게 busy는 함수에 원래 부여했던 이름처럼 사용할 수 있습니다.

 

8-A-2. Function as Parameters

parameter(매개변수)는 함수에 전달되는 데이터의 자리표시자 입니다. 자바스크립트에서 함수는 모든 유형의 데이터로 작동할 수 있기 때문에 다른 함수의 매개변수로서도 작동할 수 있습니다. 함수를 받아들이거나 함수를 반환하는 함수를 고차함수라고 하며, 매개변수로서 사용된 함수를 콜백함수라고 합니다.

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는 하나의 매개변수를 가지는 함수 입니다. 함수 안에서 param()이 호출되고 전달된 콜백함수의 이름을 출력하는 것으로 문장을 반환합니다. 아래로는 함수 내부에서 쓰일 함수 anotherFuncfmf 정의하고, 마지막 문장에서 함수 higherOrderFunc가 함수 anotherFunc를 인수로 받아 함수를 호출합니다.

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

위의 예시는 익명의 함수를 매개변수로 받는 고차함수로, 이름이 없는 익명의 함수도 인수로 받아 사용할 수 있습니다.

 

[8-B. ITERATORS]

Iterator는 반복을 도와주는 자바스크립트의 내장된 배열 메소드로, 배열의 요소를 조작하고 그 값을 반환하기 위해 배열에서 호출되는 메소드입니다.

 

8-B-1. The .forEach() Method

.forEach() 메소드는 배열의 각 요소에 대한 같은 코드를 실행합니다. 

• groceries.forEach()는 groceries 배열에 forEach 매서드를 호출합니다.
• .forEach()는 콜백 함수를 인수로 가집니다.
• .forEach()는 배열을 반복하고 각 요소에 대한 콜백 함수를 실행합니다. 각 실행 중에 현재 요소는 콜백 함수에 대한 인수로 전달됩니다.
• forEach()에 대한 반환 값은 항상 undefined입니다.

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

forEach() 콜백을 전달하는 또 다른 방법으로 위의 화살표 함수 구문이 있습니다.

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

 또한 위처럼 함수를 콜백함수로 이용하기 전에 미리 함수로 정의할 수 있습니다.

 

8-B-2 The .map() Method

.map() 메소드가 배열에 호출되면, 콜백함수를 인수로 가지고 새로운 함수를 반환합니다.

const numbers = [1, 2, 3, 4, 5]; 
 
const bigNumbers = numbers.map(number => {
  return number * 10;
});

• numbers는 숫자들의 배열입니다.
• bigNumbers는 numbers에 대한 .map()의 호출 반환값들을 저장합니다.
• numbers.map은 numbers 배열의 요소들을 반복하며 콜백 함수에 그 요소들을 전달합니다.
• return number * 10 코드는 배열의 각 요소마다 실행되며 이를 통해 numbers 배열의 각 요소들은 10배가 되어 새로운 배열에 저장이 됩니다.
• *numbers는 바뀌지 않았으며, bigNumbers는 새로운 배열입니다.

console.log(numbers); // Output: [1, 2, 3, 4, 5]
console.log(bigNumbers); // Output: [10, 20, 30, 40, 50]

콘솔을 통해 출력하면 다음과 같은 결과가 나타납니다.

 

8-B-3. The .filter() Method

.filter() 메소드는 .map() 메소드와 동일하게 새로운 배열을 만들지만, 특정한 기준에 따라 모든 배열을 확인하고 기준에 true가 되는 요소를 반환합니다.

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

• words는 문자열 요소의 배열이다.
• shortWords는 .filter() 메소드로 부터의 요소들을 반환할 새로운 배열입니다.
• 콜백 함수는 화살표 함수로 쓰였으며, word라는 하나의 매개변수를 가집니다. words 배열의 각 요소들은 인수로서 함수에 전달될 것입니다.
• word.length < 6 는 콜백함수의 조건이며, 6보다 짧은 길이의 요소들은 shortWords에 저장될 것입니다.

console.log(words); // Output: ['chair', 'music', 'pillow', 'brick', 'pen', 'door']; 
console.log(shortWords); // Output: ['chair', 'music', 'brick', 'pen', 'door']

콘솔을 통해 출력하면 다음과 같은 결과가 나타납니다.

 

8-B-4. The findIndex() Method

.findIndex() 메소드는 콜백함수의 조건을 만족시키는 배열의 첫번째 요소의 인덱스 값을 반환합니다. 만약 조건을 만족시키는 것이 아무것도 없으면 -1을 반환합니다.

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

• jumbledNums는 숫자 요소를 가지는 배열입니다.
• lessThanTen는 .findIndex()로 호출되어 반환되는 요소를 저장하는 새로운 변수입니다.
• 콜백 함수는 num이라는 매개변수를 가지는 화살표 함수이고, jumbledNums 배열의 각각의 요소들은 이 함수의 인수로서 전달됩니다.
• num < 10는 요소들이 확인되는 조건으로, .findIndex() 메소드는 이 조건에 처음으로 true로 판명되는 요소의 인덱스 값을 반환할 것입니다.

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

콘솔을 통해 출력하면 다음과 같은 결과가 나타납니다.

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

만약 위의 코드처럼 조건에 부합하는 요소가 없다면 -1의 값을 반환합니다.

 

8-B-5. The .reduce() Method

.reduce() 메소드는 배열을 반복하면서 배열의 요소의 값을 가져가고 후에 하나의 값을 반환합니다.

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

• numbers는 숫자를 포함하는 배열입니다.
• summedNums는 numbers의 배열의 .reduce()로 호출되는 반환 값을 저장하는 변수입니다.
• numbers.reduce()는 numbers 배열에 .reduce() 메소드를 호출하고 인수로서 콜백 함수로 가져갑니다.
• 콜백함수는 두개의 매개변수로 accumulator and currentValue 가집니다. Accumulator의 값은 배열의 첫번째 요소값으로 시작하고, currentValue는 두번째 요소값으로 시작합니다.
• .reduce() 메소드로 배열이 반복되는 것을 통해 accumulator는 콜백 함수의 반환값이 되고, currentValue는 반복되는 과정의 현재 요소값을 갖습니다.

다음과정의 값을 표로 정리하면 다음과 같습니다.

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

.reduce() 메소드는 아래처럼 시작 값을 설정할 수도 있습니다.

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

 

8-B-6. Iterator Documentation

더욱 많은 배열 메소드는 아래의 링크를 통해서 확인 가능합니다!

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