t8.dev

🇺🇸

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

公開日:2021/07/12
更新日:2021/08/22

はじめに

心理学を使ったTODOアプリを開発している、@takasqrです。

心理学を使ったTODOアプリ | todo8

心理学を使ったTODOアプリ | todo8

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

unshiftメソッドとは何か

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

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

という特徴があります。

unshiftメソッドの書き方

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

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

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

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

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

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

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

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

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

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

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

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

実行すると、

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

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

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

unshiftの戻り値について

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

例えば、

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

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

console.log(returnValue);

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

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

> 5

unshiftの使い道

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

さいごに

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

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

const returnValue = fruits.unshift();

console.log(returnValue);
> 3

関連記事

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

オススメ記事

5年間ほぼ毎日プログラミングの勉強をするためにやったこと
論文と本から学ぶ、プログラミング独学のコツ
目標達成率を高める if thenプランニングとは!?【本とアプリも紹介】