Array Method - 이해하기

앞에서 메소드가 어떤 기능을 하는지에 대해 앞에서 알아보았다. 이제 동작원리에 대해 알아보고 메소드 또한 내장된 하나의 함수이기에

_underscore 에 있는 것들을 직접 적어보며 복습해보려고 한다. 기존 메소드와 같은 기능을 수행하는 함수를 직접 작성해본다.

 

underscore = 코딩을 도와주는 자바스크립트 라이브러리로 매우 작은 용량에 여러가지의 function을 제공. 
                       언더스코어 함수중에는 ES5, ES6를 거쳐 내장함수로 이미 지원하는 함수들이 있다.

---

* 주어진 객체나 배열을 collection 으로 ,

  실행할 callback함수를 iterator 라고 칭한다.

---

 

_.each

each 함수에 경우 주어진 collection이 배열/객체인지에 대해 각 요소에 대해 실행할 수 있어야한다.

_.each = function(collection,iterator) {
if(Array.isArray(colletion)){      
// collection이 배열인 경우 각 elements , index , collection을 불러온다.
    for(let i = 0; i < colletion.length; i++){  
       iterator(collection[i],i,collection)
    }
  }
  else if(typeof collection === 'object'){
// collection이 객체인 경우 각 value , key , collection을 불러온다.
    for(let key in collection){
      iterator(collection[key],key,collection)
    }
  }
}

 

---

 

_.filter

filter 함수는 collection의 elements가 주어진 iterator를 통과하는 것만 리턴한다.

_.filter = function(collection,iterator) {
  let result = [];
// iterator를 통과한 것을 모아놓을 배열을 생성
    for(let i = 0; i < collection.length; i++){
      if(iterator(collection[i])){
// iterator를 통과한 것들만 result에 넣음.
        result.push(collection[i])
      }
    }
    return result;
}

 

---

 

_.indexOf

indexOf 함수는 collection 내에서 target으로 정해진 elements의 index를 리턴한다. 없을 경우 -1을 리턴한다.

_.indexOf = function(collection,target){
  for(let i = 0; i < collection.length; i++){
    if(collection[i]===target){
      return i;
    }
  }
  return -1;
}

 

---

 

_.map

map 함수는 collection의 요소에 iterator를 통과한 값을 새 배열로 리턴한다.

_.map = function(collection,iterator) {
  let result = [];
    for(let i = 0; i < collection.length; i++){
      result.push(iterator(collection[i]));
    }
    return result;
}

---

_.reduce
reduce 함수는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다. 누적값을 구할 수 있다.

_.reduce = function(collection,iterator,acc){
  if(acc === undefined){
    acc = collection[0];             
    collection = collection.slice(1);
  // acc(누적값의 첫번째 즉 초기값)가 존재하지 않을 경우 collection의 첫 요소가 acc가 된다.
  // 그대로 계산해버린다면 acc 와 collection[0]이 같은 값으로 두 번 들어가서 collection을 slice 해준다.
  }
  if(acc){
    for(let i = 0; i < collection.length; i++){
      acc = iterator(acc,collection[i]);
    }
  }
  return acc;
}

 

---

 

_.every

every 함수는 collection의 요소가 주어진 iterator를 모두 통과할 때 true, 하나라도 통과하지 못하면 false를 리턴한다.
iterator가 없을 경우 요소 자체의 값을 Boolean으로 판별하여 리턴한다.

_.every = function(collection,iterator){
  for(let i = 0; i < collection.length; i++){
    if(iterator){
      if(iterator(collection[i])===false){
        return false;
      }
    }
    else if(!iterator){
      if(Boolean(collection[i])===false){
       return false;
      }
    }
  }
  return true;
}

 

---

 

_.some

some 함수는 collection의 요소가 주어진 iterator를 하나라도 통과할 때 true, 전부 통과하지 못하면 false를 리턴한다.
iterator가 없을 경우 요소 자체의 값을 Boolean으로 판별하여 리턴한다.

_.some = function(collection,iterator){
  for(let i = 0; i < collection.length; i++){
    if(iterator){
      if(iterator(collection[i])===true){
        return true;
      }
    }
    else if(!iterator){
      if(Boolean(collection[i])===true){
        return true;
      }
    }
  }
return false;
}

 

---

이렇게 기존 메소드 중 자주 쓰이는 것들에 대해 직접 함수를 작성해보니 구조와 작동방식을 이해하는데 큰 도움이 되었다.

MDN 만 봤을 때 그냥 넘어가거나 이해하지 못했던 부분들 또한 많이 받아드릴 수 있었던 시간. 
다음에 이번에 다루지 못한 것들도 정리해볼 예정이다.