TransWikia.com

javascriptでrejectを実装する方法

スタック・オーバーフロー Asked on September 1, 2021

filterの使い方を勉強する過程で、reject課題実装でつまづいています。
rejectはfilterとは違う動作をする。関数がTrueを返した場合は、結果の配列に含まないようにする必要がある。filterを使用して実装する。

一緒に付いている例もいまいち分かりません。15より上の数がreturnされるような気がするのですが、そもそも下記のコード動くはrejectが定義されていないと出ます。そこを定義しなければいけないのはわかるのですが、混乱しています。

var numbers = [10, 20, 30];
var lessThanFifteen = reject(numbers, function(number){
 return number > 15;
});
lessThanFifteen;
結果:[10]

下記が正解なのですが、構文がやはり分からないです。

function reject(array, iteratorFunction) {
  return array.filter((element) => {
      return !iteratorFunction(element);
  });
}

iteratorFunctionこれは無名関数のようなものですか。
!iteratorFunctionの前にあるビックリマークがおそらくFalseの場合にリターンを意味すると思うのですが、これはiteratorFunction(element)を実行して返ってくる変数に対して行われているんですか?

コードの参照先
https://www.udemy.com/course/javascriptes6/

2 Answers

そもそも下記のコード動くはrejectが定義されていないと出ます。

私の環境では下記のようにすれば問題なく動いています。

function reject(array, iteratorFunction) {
  return array.filter((element) => {
      return !iteratorFunction(element);
  });
}

var numbers = [10, 20, 30];
var lessThanFifteen = reject(numbers, function(number){
 return number > 15;
});
lessThanFifteen;

下記が正解なのですが、構文がやはり分からないです。
iteratorFunctionこれは無名関数のようなものですか。

おそらく構文がわかっていないのでなく、無名関数が理解できていないようです。
ご質問内の無名関数は

function(number){
 return number > 15;
}

(element) => {
      return !iteratorFunction(element);
}

です。

無名関数は匿名関数とも呼ばれるので、両方のワードで検索すると理解がもっと進むかと思います(以降で簡単に無名関数の説明をします)。

多くの入門書では関数に名前を付けて定義しています。

function hoge() {
  // なにか処理
}

↑このような感じです(この関数の名前はhoge)。しかし関数の作り方は名前を付けなくてもできます。

function() {
  // なにか処理
}

↑無名関数。function()の間に名前が書いてありませんから、名前はありません。名前がないのでこれが無名関数です。

さて、ではなぜ無名関数を使うのでしょうか。JavaScriptのような関数型言語のパラダイム(考え方)を取り入れた言語では、「関数に関数が渡せる」ということがとても重要な考え方のひとつとなります。こういったものを「高階関数」といいます。

ご質問のコード内では

function(number){
 return number > 15;
}

という実引数が、reject関数のiteratorFunction仮引数に渡ってきているのです。
実際にこの無名関数が実行されるのは return !iteratorFunction(element); の行が評価されるタイミングです。

名前を付けた関数をreject関数に渡すことも可能ですが、名前をいちいちつけるのは手間なので、無名関数として渡すテクニックが多く見受けられます。

関数型言語、高階関数、無名関数といったテクニックをマスターするのはすぐにできることではありません(おそらくもっとシンプルな例をたくさん試すのが良いと思います)。
英語ですが、Can Your Programming Language Do This? – Joel on Software はこれらの関数言語型のアプローチの理解の助けになりますので、読了されることをおすすめします。

上記を踏まえたうえでもう一度

iteratorFunctionこれは無名関数のようなものですか。

について短く回答すると、iteratorFunctionには無名関数の処理が渡ってきていますが、無名関数ではありません。という回答になります。

そして

!iteratorFunctionの前にあるビックリマークがおそらくFalseの場合にリターンを意味すると思うのですが、これはiteratorFunction(element)を実行して返ってくる変数に対して行われているんですか?

! は真偽値を反転させるためのものなので、「Falseの場合にリターンを意味する」というような場合わけはありません。リターンの役割を担っているのはreturn自体です。真偽値の反転はiteratorFunction(element)の返り値に対して行われています。

Correct answer by shingo.nakanishi on September 1, 2021

こんにちわ。array.filterを用いた、rejectという関数を実装例にしたがって実装せよという課題なのでしょうか?

実装例からrejectは一番目の引数に配列、二番目に関数(array.filterが使用する)をうけとるということがわかります。

ここでまずあなたが関数の概念を理解してるか再確認してください。関数の引数にはオブジェクトでも無名関数でも受け取ることができます。
次にarrray.filterは入力された配列の要素を評価関数で評価しマッチしないものを取り除いた新しい配列を作成するものです。

!とか不等号とかは先の方のコメント通りの意味です。
演算子は把握しないとプログラムの作成は大変です。
でも正直課題の回答としては問題をややこしくしてるだけで
個人的には難ありと思いました

実際はrejectなんて関数作らなくてもnumbers.filterしてしまえば、スッキリしますね。問題を理解したらnumbers.filterで処理する例を検討されてはどうでしょうか。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Answered by Kouki.W on September 1, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP