JavaScriptで配列の最初の要素を取得する方法

JavaScriptでは、シンプルなforループとif〜else条件を組み合わせることで、配列の最初の要素を取得することができます。

基本的なロジックは次のとおりです。まず、配列の長さ（length）が1より大きいかどうかを判定します。条件を満たさない場合は配列に要素が存在しないため、else側の処理に進み、変数にundefinedを設定したうえで、コンソールにその旨のメッセージを出力します。一方、配列に要素が存在する場合は、先頭インデックスの値を変数に代入し、breakによってループを終了させてから、結果をコンソールに出力します。

サンプルコード

var studentDetails =
[
    {
        "firstName": "John"
    },
    {
        "firstName": "David"
    },
    {
        "firstName": "Bob"
    },
    {
        "firstName": "Mike"
    },
    {
        "firstName": "Carol"
    }
]
var firstObjectValue = "";
if (studentDetails.length > 1) {
    for (var index = 0; index < studentDetails.length; index++) {
        firstObjectValue = studentDetails[index].firstName;
        break;
    }
} else {
    firstObjectValue = undefined;
}
if (firstObjectValue != undefined)
    console.log(firstObjectValue);
else
    console.log("There is no element in the array");

上記のプログラムを実行するには、次のコマンドを使用します。

node fileName.js

ここでは、ファイル名をdemo184.jsとしています。

実行結果

このプログラムを実行すると、次のような出力が得られます。

PS C:\Users\Amit\javascript-code> node demo184.js
John

補足：よりシンプルな書き方

実務では、配列の先頭要素をもっと簡潔に取得することもできます。例えば、インデックスを直接指定するstudentDetails[0]や、ES2022で導入されたstudentDetails.at(0)を使えば、ループ処理を記述する必要はありません。また、要素が1つだけの場合にも対応できるよう、判定条件はlength > 0とするのが一般的です。これらの方法では配列が空の場合にundefinedが返されるため、必要に応じて存在チェックを行うとより安全です。