codecademy_Learn JavaScript (7) Iterators

lilyoh·2020년 6월 29일

Introduction

프로그래밍에서 '함수'는 '추상화'를 가능하게 해준다
'베이킹을 했어' 라는 건, '밀가루를 반죽하고 빵을 구워서 베이킹을 했어'의 추상화된 버전인 것처럼
countToThree() 라는 함수는 이 함수가 '1에서 3까지 수를 세는 작업을 한다'는 것을 추상화하여 보여준다

Abstraction allows us to write complicated code in a way that’s easy to reuse, debug, and understand for human readers

Higher-Order Function 은 다른 함수를 인자로 받는 함수를 말한다
이 함수는 출력값으로 함수를 리턴할 수도 있다
higher order function 을 사용함으로써 추상화를 거듭할 수 있다

higher order function 은 고차함수 라고 한다는데
지금은 어려우니 나중에 더 자세하게 공부하기

Functions as Data

자바스크립트에서 함수는 다른 데이터 타입들처럼 여겨진다
함수를 변수에 할당할 수 있다

자바스크립트에서 함수는 first class object = property 와 method 를 가진다
함수가 가지는 property 와 method 확인!

자바스크립트에서 우리는 함수를 호출할 수도 있지만
다른 데이터 타입처럼 쓸 수도 있다!

Functions as Parameters

함수를 다른 함수의 파라미터로 전달할 수도 있다
higher order function 은
1. 함수를 파라미터로 받아들이거나
2. 함수를 리턴하거나
3. 둘 다 할 수 있는
함수를 말한다

다른 함수의 파라미터(parameter)로 전달되어서 호출되는 함수를 '콜백함수(callback function)'라고 한다
콜백함수라고 부르는 이유는 - higher order function 의 실행되는 과정에서 call 되기 때문

함수를 인자로 전달할 때는 호출하지 않은 상태에서 전달한다
괄호를 생략하고 전달!

익명함수!!! anonymous function
1. 익명함수도 함수의 인자가 될 수 있고
2. 바로 호출할 수 있다

timeFuncRuntime(() => {
  for (let i = 10; i>0; i--){
    console.log(i);
  }
});

Introduction to Iterators

배열 안의 엘리먼트들을 하나씩 호출하여 확인할 때
우리는 for loop 을 사용했다
그런데 built-in array method 를 사용하면 더 쉬움
iteration 을 쉽게 해주는 이런 메소드를
iteration method 혹은 iterator 라고 함

The .forEach() Method

배열의 각각 엘리먼트들에 대해서 같은 코드를 실행하는 것
execute the same code for each element of an array

arrow function syntax 사용

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

callback function 으로 사용하기 이전에 함수 정의

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

groceries.forEach(printGrocery);

The .map() Method

함수를 실행해서 새로운 배열을 리턴한다
이 때 기존 배열은 수정되지 않고 그대로 남고
새로운 배열이 만들어지는 것

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]

The.filter() Method

필터 메소드도 새로운 배열을 생성
필터 메소드 안의 콜백함수 결과는 true / false 가 된다
true 인 엘리먼트들만 새로운 배열의 엘리먼트가 된다

const words = ['chair', 'music', 'pillow', 'brick', 'pen', 'door']; 

const shortWords = words.filter(word => {
  return word.length < 6;
});

The .findIndex() Method

콜백함수 조건에 맞는 첫 번째 엘리먼트를 출력
만약 조건에 맞는 엘리먼트가 없을 경우에 -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;
});