[codecademy JavaScript] 8장. lterators

8-1-1. 고차함수 [데이터로서의 기능]

자바스크립트에서 함수는 다른 데이터 유형처럼 작동한다. 다른 언어와 달리 함수가 일종의 값으로 취급된다는 뜻이다.

var a = function() {}

위 코드를 보면 함수가 값으로 쓰였다는 것을 이해할 수 있다. 함수의 정의가 변수 a에 할당되었으며 함수가 값으로 쓰였다. 즉, 함수를 변수에 할당할 수 있고, 새로운 변수에 다시 할당할 수도 있다. 이를 활용하여 코드를 보다 간결하게 작성할 수 있다.

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

위 코드는 호출할 때마다 announceThatIAmDoingImportantWork라는 긴 함수 이름을 적어 호출해야함으로 코드의 가독성을 낮춘다.

const busy = announceThatIAmDoingImportantWork;
busy();

위 코드처럼 함수를 변수에 할당한다면 announceThatIAmDoingImportantWork 대신 busy()로 함수를 호출할 수 있다. 또, 자바스크립트에서 함수는 퍼스트 클래스 객체이므로 다른 객체와 마찬가지로 속성과 메서드를 가질 수 있다.

 

 

8-1-2. 고차함수 [매개변수로서의 기능]

함수가 값으로 취급된다는 특성을 이용하여 함수의 인자로 함수를 전달할 수 있다. 이렇게 함수를 인자로 받거나 또는 함수를 반환함으로써 작동하는 함수를 고차함수라고 부른다. 이때 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백함수라고 부른다. 매개변수로 넘겨받은 함수는 넘겨받고, 때가 되면 나중에 호출한다는 것이다. 콜백함수를 사용할 때에는 호출하는 것이 아닌 함수 자체를 전달하는 것이므로 괄호 없이 작성한다.

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);

위 코드에서 anotherFunc()를 인수로 받은 higherOrderFunc()이 고차함수이다. 인수가 된 anotherFunc()는 콜백함수가 된다. higherOrderFunc() 함수 내부에서 anotherFunc()을 호출하기 때문에 인수로 anotherFunc()를 넘길 때에는 괄호를 붙이지 않는다.

 

---

 

8-2-1. 반복자 [.forEach() 메서드]

자바스크립트 내장 배열 메서드를 반복 메서드 혹은 반복자라고 한다. 반복자는 요소를 조작하고 값을 반환하기 위해 배열 내부의 요소를 순회하는 객체이다.

.forEach()는 반복적인 기능을 수행할 때 사용하는데, 배열의 각 요소에 대해 동일한 코드를 실행한다. 인덱스가 2씩 증가하는 등의 변칙 없이 배열 내 모든 요소들이 콜백을 호출한다. 즉, 예외를 발생시키지 않으면 중간에 반복을 종료할 수 없다.

const groceries = [‘brown sugar’, ‘salt’, ‘cranberries’, ‘walnuts’];
groceries.forEach(function(groceryItem){
  console.log(‘ – ’ + groceryItem);
});

위 코드는 식료품 목록을 콘솔에 기록한다. groceries.forEach()가 groceries 배열에서 forEach메서드를 호출한다. .forEach()는 콜백함수를 인수로 취하며 배열을 반복하고 각 요소에 대해 콜백함수를 실행한다. 각 실행 중 현재 요소가 콜백함수에 대한 인수로 전달된다.

 

 

8-2-2. 반복자 [.map() 메서드]

.map()은 .forEach()와 마찬가지로 배열의 각 요소를 순회하며 콜백 함수를 실행한다. 그러나 콜백함수의 인수를 사용하여 새 배열을 반환하는 것에서 차이가 있다.

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

numbers 배열의 각 요소에 10을 곱하는 행위를 반복하고 반환되는 값을 콜백함수에 전달한다. 전달된 값들은 새 배열로 bigNumbers에 저장된다.

 

 

8-2-3. 반복자 [.filter () 메서드]

.filter()는 .map()과 마찬가지로 새 배열을 반환한다. 그러나 원래 배열에서 특정 요소를 거른 후 요소 배열을 반환하는 것에서 차이가 있다. 주로 특정 조건을 만족하는 새로운 배열을 만들 때 사용한다.

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

words 배열에서 글자 수가 6보다 적은 요소를 반환하는 행위를 반복하고 반환되는 값을 콜백함수에 전달한다. 전달된 값들은 새 배열로 shortWords에 저장된다.

 

 

8-2-4. 반복자 [.findIndex () 메서드]

.findIndex()는 콜백함수의 조건을 만족하는 배열의 첫 번째 요소 인덱스를 반환한다. 배열의 어떤 요소도 조건을 만족하지 않으면 -1을 반환한다.

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

jumbledNums 배열에서 10보다 작은 요소를 검사한다. 해당 조건에 대해 만족하는 첫 번째 요소의 인덱스를 lessThanTen 변수에 반환한다.

 

 

8-2-5. 반복자 [.reduce () 메서드]

.reduce()는 배열 요소에 대해 함수를 반복 실행하고, 하나의 결과값을 반환한다. 배열의 각 요소에 대해 함수를 실행하고 누적된 값을 출력할 때 용이하다.

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

.reduce()가 배열을 통해 반복되면 콜백함수의 반환값이 accumulator이 되고, currentValue는 루프 프로세스에서 현재 요소의 값을 취한다. 즉, 위 코드에서 세 번 반복이 시행되는데 accumulator는 1, 3, 7로 변화하고 currentValue는 2, 4, 10으로 변화하여 17이 반환된다.

 

 

 

동동