TIL 21.05.17

Jaemin Jung·2021년 5월 17일

CODESTATES Today I learned

Today I Learned

목록 보기

21/62

오늘한일

오늘은 콜백함수에 대해서 익숙해지는 시간이었다.
section1에서 콜백함수에 대해 잘 이해하였으나,
내가 잘못안건가 오늘 수행한 과제에서는 많이 헷갈렸다.
오늘은 콜백함수에 대해서 깊게 이해해보자

Achievement Goals

(이해한대로 작성하였기에 틀릴수도 있습니다. 계속 공부하며 수정해 나가겠습니다.)

callback을 이용한 비동기 함수의 전달 방법에 대해 이해하고 있다.
method chaining (Array의 map, filter 등을 연결해서 쓰는 법)을 할 수 있다.

동기/비동기 프로그래밍 개념

동기 프로그래밍 : 코드가 반드시 작성된 순서 그대로 실행되는것
비동기 프로그래밍 : 코드가 꼭 순차적으로 실행하지는 않는것

예를들어서 아래 집안일 list대로 집안일을 할때,

빨래 세탁기에 돌리기 -> 빨래널기

저녁밥 쌀 불리기 -> 밥짓기

찬장 먼지 털기

청소기 돌리기

비동기는 1번,2번이 진행되는동안 3번,4번을 완료한뒤 1번,2번을 완료하는것이고,

동기는 1번을 진행후 빨래널기까지 끝나야 2번을 진행하고, 그다음 3번, 4번 순서대로 완료하는것이다.

Callback 함수

Callback 함수를 매우 간단하게 정의하다면 다른 함수에 인자로 전달되는 함수를 말한다.

function double(num) {
  return num * 2;
}

function doubleNum(func, num) {
  return func(num);
}

위와같이 함수 doubleNum의 첫 번째 인자 func에 함수가 들어올 경우
함수 func는 함수 doubleNum의 Callback 함수이다.

Callback 함수로 Array 메소드 구현하기 과제

Array 메소드중 .filter() 메소드에 대해서 Callback 함수를 이용해 구현해보았다.

//데이터의 요소를 하나씩 함수에 전달하는 함수
_.each = function (collection, iteratee) {// 데이터자료, 반복시킬 작업
    if (Array.isArray(collection)) {// 데이터자료가 배열일 경우
    for (let i = 0; i < collection.length; i++) {
      iteratee(collection[i], i, collection);
      // 인자로 받은 작업에 전달인자로 배열의 각 요소, 인덱스, 자료형을 전달하여 무엇이든 접근할 수 있게 한다.
    }
  } else {
    for (let key in collection) {// 데이터자료가 객체일 경우
      iteratee(collection[key], key, collection);
      // 인자로 받은 작업에 전달인자로 객체의 각 속성값, 키, 자료형을 전달하여 무엇이든 접근할 수 있게 한다.
  }
};

구현해낸 each함수를 filter 내부에서 실행시켜 각 요소를 전달하도록 한다.

_.filter = function (arr, test) {// 배열과 각요소에 행동할 함수를 인자로 받는다.
  // TODO: 여기에 코드를 작성합니다.
  let result = [];// .filter() 메소드는 각 요소에 작업이 이루워진 새로운 배열을 리턴한다.

  _.each(arr, function (item) {// 인자로 받은 함수를 연결해줄 함수를 each함수에 전달함
    if (Boolean(test(el))) {// 실행시킨 결과에 대해 truthy한 결과면 새로운 배열에 결과 전달
      result.push(item);
    }
  });

  return result;// 작업이 끝난후 배열 리턴
};