不要なインデントを削除することでコードをクリーンアップ🧹

インデントコードは、通常コンパイラに役に立ちませんが、人間がコードをより簡単に読むのを大いに助けます.しかし、必要な空白よりも多くの字下げを追加するif 例えば、RAID -は、コードを読むのが難しくなるかもしれません.ここでは、コードをインデントすることを避けるために使用できる1つのテクニックの概要を示します.
以下の簡単な関数の例を見てみましょうgetUserImages , これはユーザのイメージをAPIから取り出し、何らかの方法でデータをマップする.

const getUserImages = async (userId) => {
    if (userId) {
        const getImagesResponse = await apiClient.getImages(userId);

        if (getImagesResponse.ok) {
            const images = getImagesResponse.value;

            if (images) {
                const mappedImages = mapImages(images);
                return mappedImages;
            }
        }
    }
};

それは多くのインデントです😬. このように書かれた複雑なコードは、どのように複雑に従うかを想像することができます.より多くのインデントでは、ある行が属するコードのブロックを追跡するのが難しくなります.
良いニュースは、我々はこのインデントの多くを避けることができるということです!この場合、対応しないのでかなり簡単ですelse ブロック我々は、単にif 条件が満たされない場合は、文を返します.
ここではgetUserImages このテクニックを使う

const getUserImages = async (userId) => {
    if (!userId) {
        console.log("No userId provided");
        return;
    }

    const getImagesResponse = await apiClient.getImages(userId);

    if (!getImagesResponse.ok) {
        console.error("Error getting images!");
        return;
    }

    const images = getImagesResponse.value;

    if (!images) {
        console.log("User has no images");
        return;
    }

    const mappedImages = mapImages(images);
    return mappedImages;
};

我々は“フラット”コードを少し平らにして読みやすくしました.初期の警備員のように注意してください!images それの下に多くのコードがないならば、非常に役に立ちません、しかし、再び、これは単純な例です.
このテクニックは、コードの複数のネストされたブロックを持つかもしれない他の場所にも適用できますfor ループ

const processList = (list) => {
    for (let i = 0; i < list.length; i++) {
        if (i % 2 === 0) {
            if (list[i]) {
                // ... Do something
                // ... Do more things
                // ... Do even more things
            }
        }
    }
};

私はすぐにネストif このような文は通常読みにくいです.内部のコードif 文は4回インデントされる1つのレベルのインデントさえ削除すると、

const processList = (list) => {
    for (let i = 0; i < list.length; i++) {
        if (i % 2 !== 0) {
            continue;
        }

        if (list[i]) {
            // ... Do something
            // ... Do more things
            // ... Do even more things
        }
    }
};

このテクニックは、コードのインデントされた行を読むために常にハードをリファクタするために使用することはできません.しかし、可能であれば、このようにコードに不要なインデントを取り除くことは、あなた自身と将来の開発者にとってより読みやすく、保守可能にするには長い道のりをたどるでしょう.

つながりましょう
あなたがこのポストが好きであるならば、私とつながってください、そしてGitHub ! また、subscribe to my mailing list そして、私から最新の内容とニュースを得てください.