【JavaScript入門】applyって何だ?callとの違いまで徹底解説

こんにちは! ライターのナナミです。

JavaScriptを使っていて、同じ処理だから使いまわしたいコードがあったりしますよね。
そんな時は関数を定義していると思います。

その関数の使い方にapplyというメソッドを使う方法があるのはご存知でしょうか?

applyって何?
applyは知ってるけど、使い方がわからない…

今回はそんな方必見!
関数を呼び出すapplyメソッドについて解説していきます。

この記事は下記の流れで進めていき、疑問をどんどん解消していきますね。

【基礎】applyとは何か
【基礎】applyの使い方
【基礎】applyの活用方法
【発展】applyとcallの違い

applyに似たメソッド、callとの違いまでバッチリ解説していきます。

applyの活用方法を覚えて、より関数を使い回せるようになっちゃいましょう!

applyとは?

applyとは、定義した関数を呼び出すことができるメソッドです。

呼び出す際に、関数の処理の対象となる要素を指定することができます。
つまり、<div>要素に処理を行ないたい場合は、applyで<div>を指定するのです。

さらに、呼び出した関数で使う引数もapplyの中で指定することができます。

これにより、関数の中で対象を決める必要がなくなるので、いろんなところで関数を使いまわすことができます。

applyの特徴は、呼び出した関数内で使う引数(applyの第二引数)は配列のみが使えるという点です。

つまり配列を使う関数を呼び出す時に使うメソッドということですね。

applyの使い方

applyは下記のように記述することで使うことができます。

実際に使ってみると、下記のようになります。

実行結果

関数の中でループ処理をして、数字をコンソールに表示してみました。

第二引数を変えれば、別の数字に変更することも可能です。

実行結果

apply活用方法

applyを使えば、同じ処理を別々の要素、別々の値で指定することができるので、関数が使える幅を広げることができますね

例えば、サイト上で同じデザインだけど値が違う表が複数必要…という時、下記のように関数を用意して使いまわすことが可能です。

See the Pen apply by 河野七海 (@kouno73) on CodePen.0

他にも配列を使う関数を使いまわす時には、applyが大活躍してくれることでしょう!

applyとcallの違い

applyと同じく、関数を呼び出すメソッドにcallというメソッドがあります。

関数を呼び出すことには変わりないのですが、第二引数が全然違うのです。

そう、callの第二引数は配列ではないのです。

関数に引数を指定する際、決まって必要なものは明示的に指定しておきますよね。
callはそのような、呼び出す関数の引数の数が決まっている時に使用します。

callの場合、第二引数以降は元の関数の引数と同じ数になるのです。

配列を使う関数の場合はapply、そうじゃない場合はcallを使うと覚えておきましょう!

まとめ

いかがでしたか?

applyを使うことで、関数の使いまわしがはかどりますね。
使う場合は、元の関数に配列を使うのかどうか、しっかり確認するようにしましょう。

どんどん関数を使いまわして、楽々なプログラミングを目指してくださいね!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

ナナミ

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説