再帰関数でデータの整形をしてみたい。

はじめに

あまり使う機会がない再帰関数。（私は...）
今後、使う事があるかもしれないので少し触れてみる事にしました。

再帰関数とは

自分自身を呼び出す処理が書かれている関数。

なるほど、使い方を間違うと無限ループになりそう。

やってみた

// 元となるデータ
const data = [
    {
      id: 1,
      value: 'test01',
      type: 'STRING',
    },
    {
      id: 2,
      value: 'test02',
      type: 'STRING',
    },
    {
      type: 'GROUP',
      layout: [
        {
          id: 3,
          value: 'test03',
          type: 'STRING',
        },
        {
          id: 4,
          value: 'test04',
          type: 'STRING',
        },
      ],
    },
  ];

👆これを👇こうしたい。

// 整形後のデータ
const data = [
    {
      id: 1,
      value: 'test01',
    },
    {
      id: 2,
      value: 'test02',
    },
    {
      id: 3,
      value: 'test03',
    },
    {
      id: 4,
      value: 'test04',
    },
  ];

下記の再帰関数ができました。

const convertFunc = (data) => {
    return data.reduce((previous, current) => {
      if (current.type === 'GROUP') {
      // ここで再帰呼び出し
        previous.push(...convertFunc(current.layout));
      } else {
        previous.push({
          id: current.id,
          value: current.value,
        });
      }

      return previous;
    }, []);
  };
  
  const convertData = convertFunc(data);

もっと良い方法(再帰関数でなくても)、間違えている箇所など
ありましたらぜひコメントなどで教えて下さい。

おわりに

再帰関数にはスタック領域など注意しなければいけない事がありそうです。
引き続き調べてみようと思います。