JavaScriptで配列を空にする方法を現役エンジニアが解説【初心者向け】

JavaScriptで配列を空にする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

 

目次

• 配列の基本的な使い方
• 配列を空にする方法
• 配列を空にできたのか確認する方法
• 実際に書いてみよう
• まとめ

 

配列の基本的な使い方

配列は[]またはArrayで定義します。

let array1 = ['apple', 'orange', 'grape'];
// 以下も同じ意味になる
let array1 = new Array('apple', 'orange', 'grape');

配列の要素を指し示すにはインデックスを指定します。インデックスは0から始まります。例えば2つ目の要素を指し示すには以下のように記述します。

array1[1];

配列について、詳しくは以下の記事も参考にしてください。

MDN – 配列

 

[PR] コーディングで副業する方法とは

配列を空にする方法

配列を空にするには長さを0にします。

array1.length = 0;

また空の配列を代入する方法もあります。

array1 = [];

こちらは厳密には別の配列（インスタンス）となります。そのため、以下のようにarray1を他の変数に代入していた場合、array1の長さだけが0のままになり、array2の内容と異なることになります。

array2 = array1;
array1 = [];

 

配列を空にできたのか確認する方法

配列を空にできたか確認する場合もlengthを使用します。

if(array1.length == 0) {
  // 配列が空だった場合の処理
}

JavaScriptでは0はfalseを表すため、以下のように記述することもできます。「!」は否定の論理演算子です。

if(!array1.length) {
  // 配列が空だった場合の処理
}

 

実際に書いてみよう

今回のサンプルプログラムでは配列を空にする方法について確認します。実行はChromeブラウザーのデベロッパーツールで行いましょう。

はじめにもととなる配列を定義します。

let array1 = ['apple', 'orange', 'grape'];
console.log('array1:', array1);

実行結果は以下のとおりです。

array1: (3) ["apple", "orange", "grape"]

また、array2にarray1を代入しておきます。

let array2 = array1;

配列の長さを0にして空にしてみましょう。

array1.length = 0;
console.log('array1:', array1);
console.log('array2:', array2);

実行結果は以下のとおりです。

array1: []
array2: []

if文で判定してみます。

if(array1.length == 0){
  console.log('配列は空です。');
}

実行結果は以下のとおりです。

配列は空です。

0がfalseと判定される評価方法も確認してみましょう。

if(!array1.length){
  console.log('配列は空です。');
}

実行結果は先ほどと同様です。

配列は空です。

最後に空の配列を代入する方法を確認してみましょう。

array1 = ['apple', 'orange', 'grape'];
array2 = array1;

array1=[];
console.log('array1:', array1);
console.log('array2:', array2);

実行結果は以下のとおりです。array1は空になりましたが、array2の内容はそのまま残ってしまっていることが分かります。

array1: []
array2: (3) ["apple", "orange", "grape"]

 

まとめ

今回の記事ではJavaScriptで配列を空にする方法を学習しました。

筆者プロフィール

太田和樹（おおたかずき） ITベンチャー企業のPM兼エンジニア 普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。 開発実績：画像認識技術を活用した駐車場混雑状況把握（実証実験）、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント。 地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

 

TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。