이것이 제가 5세 아이에게 고차 배열 방법을 설명하는 방법입니다.

나는 항상 느리게 배우는 사람이었고, 정말.. 새로운 개념을 빨리 이해하는 것이 어렵고 혼자가 아니라고 생각하고 싶습니다. 제가 배우기 시작했을 때 가장 어려웠던 것 중 하나는 DOM 조작이었습니다. 농담이 아닙니다. DOM을 배워야 했을 때 프로그래밍 자체를 포기할 뻔했습니다. 나는 웹 개발이 나에게 적합하지 않다고 확신했습니다. 다음 I-am-good-for-nothing 순간은 JavaScript의 고차 배열 메서드와 함께 왔습니다. 나는 그것들이 너무 복잡해 보였기 때문에 그냥 버렸고 좋은 MDN 문서를 읽는 데 좋은 시간을 보냈지 만 머리를 감쌀 수 없었습니다.

이러한 개념을 설명하는 대부분의 자습서에서 복잡한 전문 용어를 사용하는 이유를 이해합니다. 아마도 이러한 방법에 도달할 때쯤이면 JavaScript 기술에 대해 이미 잘 알고 있지만 일부 사람들(나 같은 하하하 :__)에게는 그 '초보자의 단계'를 지나치지 못한 것 같은 두려움을 느끼게 합니다.

이 방법을 배우는 데 시간을 보낸 후 나는 그것들을 매우 자주 사용한다는 것을 알게 되었고 거짓말하지 않을 것입니다. 나는 이 방법을 좋아하고 많은 사람들이 그 방법이 얼마나 복잡해 보이는지 때문에 겁을 먹는 것 같습니다. 매우 도움이 됩니다. 다음은 맵 및 필터 방법에 대한 간단한 설명입니다.

지도 방법

이것은 모든 방법 중에서 내가 가장 좋아하는 방법이며 배열의 항목을 변경하려는 매우 간단한 접근 방식에서 작동합니다. 지도 함수에 배열을 공급할 때마다 배열의 각 요소에 대해 특정 작업을 수행한 다음 새롭고 개선되고 수정된 배열을 반환합니다. map 메서드는 배열의 요소에 어떤 변화를 줄 것인지를 정의하는 또 다른 함수를 사용합니다. 이것이 위협적으로 들리면 시각적 데모입니다.



이 함수의 구문은 매우 간단합니다. 매핑하려는 배열을 지정하고 함수에 전달하기만 하면 됩니다. 그게 다야. 지도 함수는 배열을 반환한다는 점을 명심하십시오.

const myAmazingArray = ['1','3','5','7'];
function MultiplyByTwo(number){
    return number*2;

};
const myNewAmazingArray = myAmazingArray.map(MultiplyByTwo);

필터 방법

필터 방식을 체라고 생각하면 낡고 지루한 체 대신 프로그래밍이 가능한 체이며 제공되는 조건에 따라 필터 기능을 조정할 수 있습니다. 우유와 시리얼을 함께 섞었다고 가정해 봅시다. 루프 루프와 라이스 크리스피를 섞었는데 이제 라이스 크리스피를 먹고 싶지 않아서 걸러내기로 결정했습니다. 쌀 크리스피를 걸러냅니다.

따라서 방법의 원래 아이디어에 연결하면 필터 방법은 배열을 가져 와서 배열의 특정 요소를 필터링해야하는지 확인하는 기능을 실행합니다 (씨리얼이 froot 루프인지 쌀 바삭한지 확인하는 체와 같은) ) 그런 다음 새 필터링된 배열을 반환합니다.



구문은 Map 메서드와 유사합니다. 이 메서드는 배열에서 작동하며 다음과 같은 함수를 사용합니다.

const FrootLoopAndRiceCrispyMilk = ['froot loops','rice crispies','rice crispies','froot loops']
function programmableSieve(cereal){
    // telling my sieve to only look for froot loops
   return cereal==='froot loops' 

}
const filteredCereal=  FrootLoopAndRiceCrispyMilk.filter(programmableSieve);

여기서 먼저 배열을 선언한 다음 froot 루프만 원하기 때문에 쌀 크리스피를 필터링하므로 필터 메서드가 마법을 수행하고 필터링된 배열을 반환합니다.

이 두 가지 방법에 대해 더 잘 이해하셨기를 바랍니다. 곧 이에 대해 더 자세히 다룰 예정입니다. 제안 사항이 있으면 아래에 드롭하세요.

읽어 주셔서 감사합니다!