シェル(@takasqr)のブログ

javascriptのpushメソッドをわかりやすく説明する

はじめに

javascriptのpushメソッドについて噛み砕いて説明します。

この記事を書いた人

@takasqr アプリケーション開発が大好きなエンジニア。Vue、Swift、Electrom などでアプリを作って公開している。AWS や Firebase などのクラウドサービスも好き。

作ったアプリKeyScript

pushメソッドとは何か

pushはjavascriptのメソッドです。 どのようなメソッドかというと、

  • 配列の最後に要素を追加する
  • 追加した後の配列の要素数を返す

という特徴があります。

pushメソッドの書き方

pushメソッドは下のように書きます。

[配列].push([追加したい値1], [追加したい値1])

pushは配列の最初に追加する

配列とはひとまとまりのデータを一つの変数に格納するためのデータの型です。

const fruits = ['apple', 'banana', 'pear', 'melon', 'watermelon'];

のような感じで表現します。

pushメソッドは配列の最後に要素を追加します。

例えば、下のようなコードがあったとします。

const fruits = ['apple', 'banana', 'pear'];

console.log('pushメソッド実行前')
console.log(fruits);

fruits.push('watermelon', 'melon');

console.log('pushメソッド実行後')
console.log(fruits);

実行すると、

> "pushメソッド実行前"
> Array ["apple", "banana", "pear"]
> "pushメソッド実行後"
> Array ["apple", "banana", "pear", "watermelon", "melon"]

このように値が返ってくると思います。

"watermelon""melon"が最後に増えていますね。

pushの戻り値について

戻り値とは、メソッドが実行された後に返される値のことです。

例えば、

const fruits = ['apple', 'banana', 'pear'];

const returnValue = fruits.push('watermelon', 'melon');

console.log(returnValue);

のような感じで書きます。 例ではpushメソッドの戻り値をreturnValueに入れて、出力しています。

要素を追加した後の要素数である5が出力されると思います。

> 5

pushの使い道

配列の最後に値を追加する時に使うことができます。

さいごに

引数を設定しなくてもエラーにはなりませんが、配列には何も追加されません。

const fruits = ['apple', 'banana', 'pear'];

const returnValue = fruits.push();

console.log(returnValue);
> 3