비동기, 고차함수, 콜백,

---

비동기  

 

자바스크립트는 동기적인 친구이다.

 

코드 작성 순서대로 작동하기 때문 / 호이스팅: var, function 선언들이 제일 위로 올라가는 것

 

예시: setTimeout() -> 정해진 시간 후에 콜백함수를 부름

setTimeout(function() {  // 1초 후에 2를 출력해줘
	console.log('2');
}, 1000)

콜백은 무조건 비동기적인 것인가 ? No!

 

Synchronous callback(동기적 실행)

 

function printImmediately(print) {
	print();
}
printImmediately(() => console.log('happy'));
// Asynchronous callback

 

함수의 선언이니 제일 위로 호이스팅 된다!

 

Asynchronous callback(언제 실행될지 알 수 없는 실행)

 

function printWithDelay(print, timeout) {
	setTimeout(print, timeout);
}
printWithDelay(() => console.log('async callback'), 2000);

이 경우도 함수 선언이기 때문에 제일 위로 호이스팅 된다! But,,

브라우저에 요청하기 때문에 비동기적으로 실행된다 :)

 

class UserStorage {
    loginUser (id, password, onSuccess, onError) {
        setTimeout( () => {
            if (
                (id === 'seungho' && password === 'lee') ||
                (id === 'coding' && password === 'nice')
            ) {
                onSuccess(id);
            } else {
                onError (new Error('not found'))
            }

        }, 2000);
    }

    getRoles (user, onSuccess, onError) {
        setTimeout(() => {
            if (user === 'seungho') {
                onSuccess({name: 'seungho', role: 'admin'});
            } else {
            onError(new Error('no access'))
            }
        }, 1000) 
    }
}

const userStorage = new UserStorage();
const id = prompt('enter your id');
const password = prompt('enter your password');
userStorage.loginUser(
    id, 
    password, 
    user => {
        userStorage.getRoles(
            user, 
            userWithRole => {
                alert(`Hello ${userWithRole.name}, you have a ${userWithRole.role} role`)
            },
            error => {
                console.log(error)
            }
        )
    },
    error => {console.log(error)
    }
);

 

 

고차 함수의 생성 원리   

 

forEach 구현 (배열인 경우, 객체인 경우 나눠서 생각!)

 

_.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)
    }
  }
};

 

filter 구현 (filter란 원론적으로 들어간다면 forEach로 돌면서 조건에 맞는 아이템들을 넣어준다고 생각하기!)

 

_.filter = function (arr, test) {
  let result = []
  
  _.each(arr, function (item) {
    if (test(item)) {
      result.push(item)
    }
  }); return result;
  
};

 

reject 구현

 

// _.reject는 _.filter와 정반대로 test 함수를 통과하지 않는 모든 요소를 담은 새로운 배열을 리턴.
_.reject = function (arr, test) {
  let result = [];

  return _.filter(arr, function(item) { // filter와 정반대여야 해서 거른 아이템에 !해준다
    return !test(item)
  })​

 

 

unique 구현

 

// _.uniq는 주어진 배열의 요소가 중복되지 않도록 새로운 배열을 리턴

_.uniq = function (arr) {
  let result = [];

  for (let i = 0; i < arr.length; i++) {
    if (_.indexOf(result, arr[i]) === -1) {
      result.push(arr[i])
    }
  }
  return result
};

 

 

map 구현 ( forEach와 비슷하지만, 각 요소에 iteratee를 적용한 결과를 리턴한다 )

 

_.map = function (arr, iteratee) {
  let result = [];
  _.each(arr, function (item) {
    result.push(iteratee(item))
  });
  return result
};

 

reduce 구현 (**)

 

_.reduce = function (arr, iteratee, initVal) {
  let result = initVal; // 초기값을 할당해준다.

  _.each(arr, function(el, idx) { // forEach를 통해 반복한다
    if (result === undefined) {   // 초기값 유무로 나눠주고
      result = el
    }
    else {  		//// 초기값이 있는 경우 iteratee를 통해 적용한 값을 넣어준다
      result = iteratee(result, el, idx, arr)	
    }
  })
  return result
};

 

 

---