map(), filter(), forEach()용 PolyFill.

여러분, 안녕하세요! 잘 지내고 계시길 바랍니다.

목차

기능?

JavaScript로 함수를 작성하는 방법은 무엇입니까?

고차 함수?

1차 함수?

pollyfill이란 무엇입니까?

지도, 필터, forEach용 Pollyfill

pollyfill에 대해 쓰기 전에 function, Higher order function, First order function에 대해 설명하겠습니다.



그것에 뛰어 들자 ...

자바스크립트에서 함수란?

JavaScript의 기능은 코드(Statement)의 빌딩 블록입니다.
반복 없이 JavaScript 프로그램에서 재사용할 수 있는 특정 작업을 담당합니다. (이 함수를 사용하려는 위치에서 호출해야 합니다.)

입력(인수)으로 어떤 값을 취하고 호출 후에 어떤 값을 반환합니다.

JavaScript에서 함수를 작성하는 세 가지 방법이 있습니까?

함수 선언

JavaScript에서 함수를 선언하는 전통적인 방법입니다. 함수 키워드로 시작하고 함수 이름 다음에 괄호를 붙인 다음 중괄호를 사용합니다.

// Function declaration

function add(x, y) {        
    console.log(x + y);
}

// Function invocation 
add(2, 3);

함수 표현

함수는 JavaScript에서 일급 시민입니다.
JavaScript에서 함수는 다른 변수처럼 취급됩니다.

// Single line of code
let add = (x, y) => x + y;

console.log(add(3, 2));

함수 표현식에서 함수에 매개변수가 둘 이상인 경우 매개변수와 함께 괄호를 사용해야 합니다. 그리고 코드에 여러 줄이 있는 경우 표현식에 return 키워드를 사용해야 합니다.

// Multiple line of code

const great = (x, y) => {
  if (x > y) {
    return 'a is greater';
  } else {
    return 'b is greater';
  }
};

console.log(great(3, 5));

이제 Higher order Function과 First order function에 대해 알아봅시다.

JavaScript 고차 함수에서 함수를 인수로 사용하거나 함수를 반환하는 것을 고차 함수라고 합니다.
반면에 프리미티브나 객체만을 인자로 받아 프리미티브나 객체만을 반환하는 함수를 1차 함수라고 합니다.

//returning a function
function nums(x, y) {
  return function sum() {
    return `The sum is ${x + y}`;
  };
}

const getSum = nums(3, 5);

console.log(getSum());

//function as a parameter
function message (name) {
  console.log(`Hello ${name}`)
}

function greet (name, cb) {
  cb(name)
}

greet("Pritam", message)

filter(), map(), reduce(), forEach 등과 같은 함수는 모두 JavaScript의 고차 함수의 예입니다. 배열과 함께 사용됩니다.

이제 pollyfill로 이동하겠습니다.

폴리필

A Pollyfill is a piece of code used to provide modern functionality to older browser that do not natively .

오래된 브라우저가 최신 기능을 지원하지 않는다고 가정해 보겠습니다.

지원하지 않는 브라우저 폴백입니다.

map() 함수에 대한 첫 번째 pollyfill을 작성해 봅시다.
그 전에는 배열로 수행하는 작업에 대해 알고 있습니다.

지도()

map() 함수/메서드는 배열의 각 요소에 대해 한 번씩 콜백 함수를 호출합니다.

또는

map() 메서드는 배열을 반복하고 콜백 함수를 사용하여 배열 요소를 수정합니다. 새 배열을 반환합니다. 원래 배열을 변경하지 않습니다.

맵의 콜백 함수에는 현재 요소, 인덱스 및 원래 배열의 세 가지 인수가 있습니다.

예시

const array = [3, 6, 9, 1, 2];
const newArray = array.map((num) => num * 3);
console.log(newArray);

지도용 폴리필()

Array.prototype.myMap = function (callback) {
  let newArray = [];

  for (let i = 0; i < this.length; i++) {
    newArray.push(callback(this[i], i, this));
  }

  return newArray

};

const result = array.map((num) => num * 3);
console.log(result);

// Here, this keyword reference to parent array.

각각()

forEach 메소드는 배열의 각 요소에 대해 한 번씩 콜백 함수를 호출합니다. 새 배열을 반환하지 않습니다. 대부분 배열 요소를 반복하기 위해 for 루프를 사용합니다.

const array = [3, 6, 9, 1, 2];

array.forEach((num) => {
  console.log(num); // 3, 6, 9, 1, 2

});

forEach()용 폴리필

Array.prototype.myForEach = function (callback) {
//Since forEach does not return array
  for (let i = 0; i < this.length; i++) {
    callback(this[i], i, this); 
  }
};

array.myForEach((num) => console.log(num));

필터()

필터 메소드는 제공자 기능에 의해 구현된 테스트를 통과하는 모든 요소가 포함된 새 배열을 리턴합니다. 그것은 돌연변이하지 않습니다
원래 배열.

const array = [3, 6, 9, 1, 2];
const result = array.filter((num) => num> 3)
console.log(result) // [6, 9]

필터용 폴리필

Array.prototype.myFilter = function (callback) {
  let newArray = [];

  for (let i = 0; i < this.length; i++) {
    if (callback(this[i], i, this)) {
      newArray.push(this[i]);
    }
  }

  return newArray;
};

const result = array.myFilter((num) => num > 3);
console.log(result); // [6, 9]

Array.prototype이란 무엇입니까?

JavaScript 배열 프로토타입 생성자는 Array() 개체에 새 메서드와 속성을 추가하는 데 사용됩니다.

읽어 주셔서 감사합니다...