JavaScriptで名・姓・任意のミドルネームからフルネームを組み立てる方法

課題

3つの文字列を受け取るJavaScript関数を作成します。1つ目の引数は「名(first name)」、2つ目の引数は「姓(last name)」、そして3つ目の引数として任意(オプション)の「ミドルネーム」を渡します。

この関数は、受け取った情報をもとに完全な氏名(フルネーム)を組み立てて返す必要があります。ポイントは、ミドルネームが渡されなかった場合でも正しく動作することです。

解決のアプローチ

ここでは次の手順で処理を行います。

1. ミドルネーム引数が未定義(undefined)の場合は空文字列に置き換えます。
2. 名・ミドルネーム・姓を配列に格納します。
3. filter(Boolean)を使って、空文字列などの falsy な値を配列から除外します。
4. join(' ')で要素を半角スペース区切りで連結し、フルネームとして返します。

filter(Boolean)は、配列内の undefined や ''(空文字列)といった falsy な値を自動的に取り除いてくれるため、ミドルネームの有無にかかわらず余分なスペースが入らないのが利点です。

コード例

const firstName = 'Vijay';
const lastName = 'Raj';

const constructName = (firstName, lastName, middleName) => {
    if (!middleName) {
        middleName = '';
    };
    let nameArray = [firstName, middleName, lastName];
    nameArray = nameArray.filter(Boolean);
    return nameArray.join(' ');
};

console.log(constructName(firstName, lastName));

出力結果

コンソールには次のように出力されます。

Vijay Raj

応用：デフォルト引数を使ったより簡潔な書き方

ES6以降ではデフォルト引数を利用できるため、if文によるチェックを省略してさらに簡潔に記述できます。

const constructName = (firstName, lastName, middleName = '') =>
  [firstName, middleName, lastName].filter(Boolean).join(' ');

このように書くことで、コードの意図が明確になり、可読性も向上します。実際の開発現場でも、表示用の氏名整形などでよく使われるパターンです。