こんにちは、ひげぶろです。
今回はJavascriptのlengthプロパティについて解説していきます。
lengthってどういう時に使うの？
使い方や応用について詳しく知りたい
こういった悩みを解決します。
lengthは文字列の長さや、配列の要素数を取得することができます。
この特性を利用して、他の関数と組み合わせて使用することで表現の幅が広がります。
例えば、「デザイン」という文字を1つずつ分割し、それぞれにCSSでアニメーションを実装し文字に動きをつける、といったことも可能です。
上記の実装を試みる場合、もちろん他の関数の知識も必要ですがlengthもしっかりと関わってきます。
そんな縁の下の力持ち的なlengthについて解説していきます。
ひげぶろ簡単な例文を使用して解説していきます
lengthでできること
役割についてざっと見ていきましょう。lengthは主に（変数名や配列名等）.lengthと記述することで変数名や配列名等に含まれている要素数や文字数を取得します。
文字数の取得
const atr = 'おはよう';
console.log(atr.length);
//コンソールに「４」が出力される上記の場合、文字列「おはよう」が4文字ですので「4」と出力されます。
配列の要素数の取得
const arry = [1,2,3,4,5];
console.log(arry.length);
//コンソールに「5」が出力される。上記の場合、配列の数が「5」ですので「5」と出力されます。
要素数を変更できる
const arry = ['日本','ブラジル','アルゼンチン','ベルギー','イタリア'];
arry.length = 2;
console.log(arry);
//コンソールに「日本」、「ブラジル」が出力される。上記の場合、3行目で配列の要素を2つ取得する指示を与えています。
ここの数字が3であれば、「日本」、「ブラジル」、「アルゼンチン」が出力されます。
このように要素数を変更することが可能です。
ループでの使用（for文）
const arry = [1,2,3,4,5];
for (let i = 0; i < arry.length; i++) {
console.log(arry[i]);
}
//コンソールに「1,2,3,4,5」と出力される3行目のループ処理の中で、配列名＋.lengthと指示することで、 この部分に配列に格納されている値が取得されてきます。それらをループで１つずつ出力しています。
lengthの注意点
ですので、オブジェクトを扱う際は注意してください。例えば以下の例です。
const acount = {
name : '佐藤',
age : 20,
gender : '男'
}
console.log(acount.length);
//「undefined」と出力されるこのように「undefined」という未定義値が出力されます。
ですので、オブジェクトを習得する場合は別途Object.keys()というメソッドを使用します。
ひげぶろObject.keys()に関してはまた別の記事で解説します
まとめ
lengthプロパティの挙動について解説いたしました。
非常にシンプルな分、よく出てくるプロパティでもあるのでここでしっかりと挙動を把握しておきましょう
lengthプロパティでできること
- 文字列から文字数の取得
- 配列の要素数を取得
- 取得する配列の要素数の変更
- for文のループ中に使用することができる
lengthプロパティの注意点
- オブジェクトは取得できない
- オブジェクトを取得する場合は別途Object.keys()メソッドを使用
冒頭にも書きましたが、lengthは非常にシンプルな分登場回数も多いです。
他のプロパティやメソッド等組み合わせで表現の幅も広がってきますので、実際に書いてみて色々試してみてください。
当ブログでは、Webサイト制作の学習にUdemyやオンラインスクールのテックアカデミーをオススメしています。
どちらも実際に受講しましたが、特にUdemyではJavascriptに特化した講義が非常に実践向きで現在でも役に立っていると感じています。
【JavaScript＆CSS】ガチで学びたい人のためのWEB開発徹底実践（フロントエンド編）
最後までお読みいただきましてありがとうございました。
