Section 2 - Unit 3 [비동기]

정호재·2023년 1월 18일

코드스테이츠

목록 보기

12/37

체크포인트

내장 매소드 구현 및 사용 방법 실습

_.each = function (collection, iteratee) {
  // TODO: 여기에 코드를 작성합니다.
  if(Array.isArray(collection)){

    for(let i =0;i<collection.length ;i++){
      iteratee(collection[i],i,collection);
    }
  }else{
    let arr = Object.keys(collection);

    for(let i =0;i<arr.length ;i++){
      iteratee(collection[arr[i]],arr[i],collection);
    }
  }
}

each 구현의 경우 배열과 객체가 들어왔을 때, 인자를 다르게 밖에 옳바르게 동작하도록 구현

_.filter = function (arr, test) {
  // TODO: 여기에 코드를 작성합니다.
  let result = [];
   
  _.each(arr, function (n){ // arr.filter(fuction(n){ test })의 동작을 생각하며 이해
    test(n) ? result.push(n):false;
  })
     
  return result;
};

filter의 경우 콜백 함수의 결과에 따라 true로 통과되는 요소만 걸러 새로운 배열에 담도록 구현

_.map = function (arr, iteratee) {
  // TODO: 여기에 코드를 작성합니다.
  // _.map 함수는 매우 자주 사용됩니다.
  // _.each 함수와 비슷하게 동작하지만, 각 요소에 iteratee를 적용한 결과를 리턴합니다.
  let result = [];

  _.each(arr,function (n){
    result.push(iteratee(n));
  })
  return result;
};

each를 사용해 요소를 받고 콜백 함수에 해당 요소를 넘겨 반환 되는 결과값을 새로운 배열에 담도록 구현

_.reduce = function (arr, iteratee, initVal) {
  // TODO: 여기에 코드를 작성합니다.
  let result = 0;
  let index = 0;

  result = initVal;
  
  _.each(arr, function (n){
    let acc;
    
    if(initVal === undefined && index === 0)
    {
      acc = arr[0];
    }else{
      acc = iteratee(result,n,index,arr)
    }
    
    result = acc
    index++;
  })
  return result;
};

each를 사용해 초기값이 주어지지 않은 경우에는 배열의 첫번째 값을 초기값으로 설정하고 콜백 함수를 통해 배열의 정보를 요약하도록 구현
each를 통해 정리한 콜백함수의 인자를 좀 더 이해하고 구현해서, 인덱스 변수를 따로 지정하는 것이 아닌, 해당 요소의 인덱스를 바로 받아오도록 구현하는 것이 더 클린한 코드임 => function (value, index)( 더 보고 이해할 것 )

동기 & 비동기

동기: JS에서는 특정 코드가 동작을 마친후 다음 코드가 실행되는 순차적인 코드진행의 특징을 의미
비동: JS에서는 특정 코드의 동작을 마치기전에 다음 코드들을 실행하는 비순차적인 코드진행의 특징을 의미

비동기의 이해 목표

[part 1]

Promise 실행 함수가 가지고 있는 두 개의 파라미터 resolve 와 reject 는 각각 무엇을 의미하나요?
- resolve: 비동기 작업이 성공적으로 이루어짐
- reject: 비동기 작업이 실패함
resolve, reject함수에는 전달인자를 넘길 수 있습니다. 이때 넘기는 전달인자는 어떻게 사용할 수 있나요?
- resolve의 경우 호출의 결과 값을 .then 매소드를 통해 가져오고 해당 값을 .then 매소드의 콜백 함수의 인자값으로 넘겨 콜백함수를 실행하는 방법으로 사용
- reject의 경우 호출의 결과 값을 .catch 매소드를 통해 가져오고 해당 값을 .catch 매소드의 콜백 함수의 인자 값으로 넘겨 콜백 함수를 실행하는 방법으로 사용

new Promise()를 통해 생성한 Promise 인스턴스에는 어떤 메서드가 존재하나요? 각각은 어떤 용도인가요?
- .then: resolve를 정상 호출한 경우 실행한 결과값을 반환된 promise 내부 프로포티인 result를 가져와 .then의 콜백함수의 인자로 활용
- .catch: reject가 정상 호출된 경우 실행한 결과값을 반환된 promise 내부 프로포티인 result를 가져와 .then의 콜백함수의 인자로 활용
- .finally: 호출된 함수와 상관없이 항상 접근해 값을 가져오 활용할 수 있게 해줌
Promise.prototype.then 메서드는 무엇을 리턴하나요?
- resolve 호출의 결과값을 result에 담은 promise
Promise.prototype.catch 메서드는 무엇을 리턴하나요?
- reject 호출의 결과값을 result에 담은 promise
Promise의 세 가지 상태는 각각 무엇이며, 어떤 의미를 가지나요?
- pending : new Promise()가 실행된 직후의 상태로, promise 생성 후 아무것도 처리되지 않은 상태
- fullfilled : resolve가 호출되었으며 성공적으로 비동기 작업이 이루어진 상태
- rejected : reject가 호출되었으며 비동기 작업이 실패한 상태
await 키워드 다음에 등장하는 함수 실행은 어떤 타입을 리턴할 경우에만 의미가 있나요?
- await뒤에 붙은 비동기 작업의 결과로 result를 담은 promise이 반환 될때
await 키워드를 사용할 경우, 어떤 값이 리턴되나요?
- await뒤에 붙은 비동기 작업의 결과로 result를 담은 promise이 반환 될때 까지 대기한 후 반환 후 다음 작업이 실행됨

[part 2]

Promise.all 의 전달인자는 어떤 형태인가요?
- 비동기 작업을 처리할 promise들을 담고있는 순회 가능한 객체(배열)
Promise.all 을 사용할 경우에 then 메서드의 매개변수는 어떠한 형태인가요?
- 각 비동기처리 과정을 통해 resolve 호출의 결과값을 result에 담았고 result 값을 처리된 비동기 작업의 인덱스 위치에 요소로 가지는 배열
Promise.all 에 두 개의 Promise 요청이 전달되고, 만일 그중 하나가 rejected 상태가 되는 경우, then 메서드, catch 메서드 중 어떤 메서드를 따라갈까요?
- 해당 promise 내부의 reject가 실행되고 결과 값을 result에 담은 후 해당 promise 반환하고 Promise.all 전체가 거부됨, 따라서 이후의 다른 promise는 실행되지 않음
- 이후 reject 상태의 promisedp result에 담긴 값을 콜백함수의 인자값으로 받아 동작하는 .catch가 실행됨(reject 상태기 때문)