【JavaScript入門】lengthで文字列や配列の長さを取得する方法

こんにちは、フリーランスの湯浅です。今回は、lengthプロパティについて詳しく学習していきます！

一般的に、JavaScriptで扱うlengthプロパティは、文字列や配列などで使われることが多いのですが、それ以外にも有効に活用できるプロパティであることをご存知でしょうか？

どのような「値」を取得できるのかを知っていると、プログラミングの効率がアップして、余計なコードを書く必要もなるくなるので非常に便利です！

そこでこの記事では、

というように、実際の開発現場でよく使われる基本的な内容から応用的な活用技まで、注意するべきポイントも含めてサンプルコードと一緒に解説していきますので、ぜひ参考にしてみてください！

「length」とは？

それでは、まずlengthについて基本的な知識から学習をしていきましょう。lengthは、主に文字列の長さや配列の要素数を取得することができるプロパティになります。

例えば、文字列の長さを取得できれば最大文字数を設定して、超えた場合に注意を促すということが簡単に実現します。さらに、関数の引数を取得するような応用技も可能なので、マスターすれば確実にレベルアップできるでしょう。

本記事では、lengthの基本から活用技まで体系的に学べるように構成しているので参考にしてみてください！

文字列の「length」使い方

この章では、文字列型における「length」について基本的な使い方を学びましょう。一般的な構文から文字列の長さを取得する方法や数値の扱い方について学びます。

文字列型における基本的な構文と書き方

まずは、文字列型で「length」を使うための書き方を見ていきましょう。基本的には、文字列に対して「length」を実行するだけで利用できるので簡単です。

//文字列にそのままlengthを使う
文字列.length

//変数に代入した文字列にlengthを使う
var str = '文字列';
str.length;

このように、文字列へ直接lengthを指定して使う場合と、変数に代入して使う方法が考えられます。どちらも同じ結果となり、文字数を取得することができます。

文字数は「半角・全角」関係なく、それぞれ1文字でカウントされるので覚えておきましょう！

lengthで文字列の長さを取得する方法

それでは、実際のプログラミング手法について見ていきましょう。簡単な文字列の文字数を取得するには次のように記述します。

var str = 'こんにちは';

console.log( str.length );

実行結果

5

このサンプルのように、文字列にlengthを使うと全体の文字数を取得できます。「こんにちは」という文字列は5文字なので、実行結果には「5」という数値が出力されているわけです。

数値型(Number)を扱う場合の注意点

次に、数値を扱う場合の特性について紹介しておきます。先に結論を言うと、数値に「length」は利用できません。「length」は、あくまで文字列や配列のために用意されているプロパティだからです。

しかしながら、数値に文字列を組み合わせれば利用することが出来るのです。次のサンプル例を見てください！

var str = 12345 + '文字列';

console.log( str.length );

実行結果

8

このサンプルでは、数値データの末尾に文字列という文字を連結しています。これにより、数値を含めて全体的に文字列の扱いになるのです。

そのため、lengthプロパティが利用できるようになり、結果として「8」が出力されています。このような文字列における「連結」については、次の記事で基本から応用技まで解説しているのでぜひ参考にしてみてください！

配列の「length」使い方

この章では、配列型における「length」について基本的な使い方を学びましょう。一般的な構文から配列の要素を取得する方法や要素数の変更などについて学びます。

配列型における基本的な構文と書き方

まずは、配列型で「length」を使うための書き方について見ていきましょう。基本的には、配列に対して「length」を実行するだけで利用できます。

var array = 配列;

array.length;

このように、配列へ直接lengthを指定して使うことができます。取得できる数値は、配列の要素数となっておりどのくらい要素が格納されているのかを確認できます。

lengthで配列の要素数を取得する方法

それでは、実際のプログラミング手法について見ていきましょう！簡単な配列の要素数を取得するには次のように記述します。

var array = ['リンゴ', 'ブドウ', 'メロン', 'イチゴ'];

console.log( array.length );

実行結果

4

このサンプルでは、配列に格納されている要素数が4個あるというのが出力結果から分かりますね。この例のように、要素数が少ない配列データであればlengthを使わなくても数えられるでしょう。

しかしながら、要素数が1000を超えるようなものや動的に変化するような配列だとlengthが重要になります。

要素数をlengthで変更する方法

次に、lengthを使った要素数の変更方法について見ていきましょう！

実は、配列の場合はlengthに値を代入することで、要素数を自由に変更することができるのです。次のサンプル例を見てください！

var array = ['リンゴ', 'ブドウ', 'メロン', 'イチゴ'];

//要素数を3に変更する
array.length = 3;

console.log( array );

実行結果

["リンゴ", "ブドウ", "メロン"]

この例では、元の配列に対して途中で「length = 3」と記述することで、要素数を変更しています。そのため、自動的に末尾の「イチゴ」というデータが削除されているわけですね。

逆に、「length = 5」にして要素数を増やした場合はどうなると思いますか？こちらも次のサンプルを見てください！

var items = ['リンゴ', 'ブドウ', 'メロン'];

//要素数を5に変更する
items.length = 5;

console.log( items );

実行結果

Array(5) ["リンゴ", "ブドウ", "メロン"]

この例では、配列の要素数を「5」と設定しており、実行結果を見ると5個の要素に増えているのが分かります。追加された要素は未定義のため「undefined」が格納されていることに注意しましょう。

ちなみに、lengthの値はプラスの値のみ設定可能で、マイナスを設定するとエラーになります。

関数の「length」使い方

lengthで引数の数を取得する方法

今度は、関数におけるlengthプロパティの扱い方について学習していきましょう！

関数で「length」を使うと、その関数で定義されている「引数」がいくつあるのかを取得することが出来るのが特徴です。例えば、「引数」を持つ一般的な関数の定義は次のようになります。

function value(引数, 引数, 引数・・・) 

    //何らかの処理

}

次のサンプルは、引数を持つ関数にlengthプロパティを使用した例です。

function value( item1, item2, item3, item4 ) {

}

console.log( value.length );

出力結果は…

4

となります。このサンプルのように、関数に「length」を使うと引数の数を取得することが可能で、結果的に4つの引数が存在することが分かりますね。

これにより、引数の数で条件分岐なども出来るようになるので、活用次第では強力なプロパティになるでしょう。

オブジェクトの「length」

この章では、オブジェクト(連想配列)の扱いについて学習をしていきます。オブジェクトの特性や標準メソッドを活用した要素数の取得方法を学びます。

オブジェクトが持つ特性について

まずは、簡単なオブジェクトを作ってみましょう。次のサンプル例を見てください！

var obj = {
  name: '太郎',
  age: 30,
  location: '日本'
}

この例では、「name / age / location」という3つのプロパティを持ったオブジェクトを作りました。このオブジェクトに対してlengthを使うとどうなるでしょうか？

console.log( obj.length );

実行結果

undefined

実行結果に注目してください！

オブジェクトに対してlengthを使うと、結果はundefinedになるのです。つまり、lengthによる要素数を取得することができないので、何らかの代替手段が必要というわけですね。

「Object.keys()」を使った要素数の取得方法

冒頭でも解説しましたが、lengthは基本的に「文字列・配列」に対して利用できるプロパティでした。そこで、オブジェクトの要素を配列データとして取得できるObject.keys()を活用してみましょう！

次のサンプル例をみてください！

var value = Object.keys( obj );

console.log( value.length );

この例では、Object.keys()の引数にオブジェクトを指定することで配列として受けとります。あとは、配列型としてlengthを実行すればオブジェクトの要素数を取得できるというわけです。

まとめ

今回は、さまざまなケースにおけるlengthプロパティについて学習しました。ポイントをもう一度おさらいしておきましょう！

これらの内容を踏まえて、実際に自分でもコードを書きながら、ぜひ自分のプログラムにも取り入れるようにしてみてください！