.map ()과 같은 고차 함수는 JavaScript에서 어떻게 내부적으로 작동합니까?


17

오늘날 모든 사람들은 코드를 적게 작성하여 유망한 결과를 얻기 위해 이러한 종류의 고차 함수 를 사용하려고합니다 . 그러나 이러한 기능이 내부적으로 어떻게 작동하는지 궁금합니다.

내가 같은 것을 쓰면

var numbers = [16, 25, 36];
var results = numbers.map(Math.sqrt);
console.log(results); // [4, 5, 6]

'number'배열의 각 요소가 하나씩 반복되는 것을 알고 있지만 어떻게 해야합니까?

검색을 시도했지만 아직 만족스러운 답변을 얻지 못했습니다.


10
AZ_

mapArray 유형에 추가 된 함수 입니다. 이 함수는 함수를 매개 변수로 취한 다음 배열을 반복하면서 호출됩니다. 함수 호출의 반환 값은 배열로 반환됩니다.
ssc-hrep3

map은 기본적으로 배열을 반복하는 foreach와 같이 작동합니다. 즉, 배열의 모든 요소를 ​​하나씩 가져 와서 주어진 명령 / 작업을 각 요소에 적용 한 다음 새 배열로 푸시합니다.
Adnan Tariq

답변:


23

.map콜백을 수락하고 배열의 모든 항목에 대해 콜백을 호출하고 값을 새 배열에 할당하는 메소드 일뿐입니다. 특별한 점은 없습니다. 스스로 쉽게 구현할 수도 있습니다.

Array.prototype.myMap = function(callback) {
  const newArr = [];
  for (let i = 0; i < this.length; i++) {
    newArr.push(callback(this[i], i, this));
  }
  return newArr;
}

var numbers = [16, 25, 36];
var results = numbers.myMap(Math.sqrt);
console.log(results); // [4, 5, 6]

완전히 사양을 준수하기 위해, 당신은 것 또한 필요 (가) 것을, 무엇보다도, 확인하는 this물체가 그이다 callback호출, 그리고에 .call전달 된 두 번째 매개 변수와 콜백 myMap가있는 경우, 그러나 그 세부 사항은 아니다 고차 함수를 처음 이해하는 데 중요합니다.


8
이것은 나에게 다른 대답을 생각 나게한다 …
Bergi

7

모든 공급 업체가 사양에 따라 구현해야한다고 생각합니다.

실제 구현, 예를 들어 V8은 약간 복잡 할 수 있습니다 . 시작에 대해서는 이 답변 을 참조하십시오 . github에서 v8 소스를 참조 할 수도 있지만 단 한 부분 만 이해하기 쉽지 않을 수 있습니다.

위의 답변에서 인용 :

여기 V8 개발자. "builtins"에 대한 여러 가지 구현 기술이 있습니다. 일부는 C ++로 작성되고 일부는 Torque로 작성되며 일부는 CodeStubAssembler라고하며 일부는 직접 어셈블리로 작성됩니다. 이전 버전의 V8에서는 일부가 JavaScript로 구현되었습니다. 이러한 각 전략에는 고유 한 장점이 있습니다 (코드 복잡성, 디버깅 가능성, 다양한 상황에서의 성능, 이진 크기 및 메모리 소비). 또한 코드가 시간이 지남에 따라 발전해 온 역사적 이유가 항상 있습니다.

ES2015 사양 :

  1. 하자 O BE ToObject ( 값을).
  2. ReturnIfAbrupt ( O ).
  3. 하자 BE ToLength (가져 오기를 ( O , "length")).
  4. ReturnIfAbrupt ( len ).
  5. IsCallable ( callbackfn )이 false 인 경우 TypeError 예외를 발생시킵니다.
  6. thisArg 가 제공된 경우 TthisArg로하십시오 . 그렇지 않으면 T정의되지 않습니다 .
  7. 하자 BE ArraySpeciesCreate ( O , ).
  8. ReturnIfAbrupt ( A ).
  9. k 를 0으로 하자 .
  10. k < len 동안 반복
    1. 하자 Pk의이 ToString (수 K ).
    2. 하자 kPresent이 HasProperty (수 O , Pk의 ).
    3. ReturnIfAbrupt ( kPresent ).
    4. 경우 kPresent는 것입니다 진정한 다음,
      1. 하자 kValue가 가져 오기 (수 O , 는 PK ).
      2. ReturnIfAbrupt ( kValue ).
      3. 하자 mappedValue은 전화 (수 callbackfn , TkValue , K , O »).
      4. ReturnIfAbrupt ( mapedValue ).
      5. 하자 상태가 CreateDataPropertyOrThrow (수 , Pk의 , mappedValue ).
      6. ReturnIfAbrupt ( status ).
    5. k 를 1 씩 증가시킵니다 .
  11. A를 반환 합니다.

2
궁금합니다. 사양 <li> list-style-type은 Chrome 또는 FF에서 복사 할 수 없습니다. 수동으로 숫자를 쓰셨습니까? 아니면 더 좋은 방법이 있습니까?
CertainPerformance

5
@CertainPerformance LOL. 소스, HTML에서 마크 다운 온라인 도구로 HTML을 복사합니다.
sabithpocker
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.