[クリアコードJavaScript]パート2:変数の処理

前にアップロードしたREACT講義と同様に、各章のCLINCODE JavaScript講義をもとに、プロジェクトで私が作成したコードを逐一修正します.
このプロジェクトではvarは使用されず、あまり修正されず、一時変数部分を少し修正しただけですが、コードを読むと大規模な手術が必要であることがわかり、、、🛠(過去を反省しましょう)

varを無効にする

varとlet&constの違いは?

var
1.繰り返し宣言可能

scopeを繰り返し使用すると、scope以外の値に汚染されます.

    var global = '전역'
    
    if(global ==='전역'){
    	var global = '지역'		//지역
        }
	console.log(global)		//지역

let & const
1.繰り返し不可宣言

letは宣言後に割り当てることができますが、constは同時に宣言して割り当てる必要があります.

ブロック単位の領域変数およびグローバル変数.

letよりconst
->constは再割り当てできないので、オブジェクトや配列を操作するときに問題はありません!

    let global = '전역'
    
    if(global ==='전역'){
    	let global = '지역'		//지역
      }
	console.log(global)			//전역

グローバルスペースの使用を最小化

グローバルスペース?
:ブラウザは、ウィンドウ、ノードを最上位スペースとして使用します.jsの意味はglobalです.
:ファイルが異なる場合でも、グローバルスペース内のファイルにアクセスできるため、問題が発生する確率が高い.
:特にvarを使用する場合、グローバルスペースに格納されます.

ソリューション
1.グローバル変数は作成されません.
2.変数をゾーン変数として使用します.
3.window、globalを操作しません.
->気になるのは、window.スクロールなどの関数を使ってもいいですか?
4.const、letを使用します.
5.IIFE、module、closure等によるスキャン.
(後ろの部分)

一時変数の削除

問題はどこですか?
1.一時変数が発生すると、開発者は一時変数CRUDの誘惑に陥りやすい
2.一時変数にはコマンド式の論理が充満しており、どこでエラーが発生したかをデバッグするのは難しい.
3.1番と同じであるため、連携時に追加コードを作成するリスクが増大する.
->1つの関数に1つのロールしかありません.

ソリューション
1.分割関数
2.一時変数を返さず、直接値そのものを返す
3.map, filter,reduce ... 等高差関数の使用
4.宣言形式でコードを記述する
(後半)

コード

//나쁜 예시
const selectStepData = data => {
    let dataset =
      (step === "row-btn1" && data[0]) ||
      (step === "row-btn2" && data[1]) ||
      (step === "row-btn3" && data[2]) ||
      (step === "row-btn4" && data[3]);
    return dataset;
  };

//썩 좋은 예시는 아닌거같지만(내가 짠 코드) 
//이런식으로 임시 변수를 없애고 바로 리턴하는게 좋다고하셨다.
 const selectStepData = data => {
    return (
      (step === "row-btn1" && data[0]) ||
      (step === "row-btn2" && data[1]) ||
      (step === "row-btn3" && data[2]) ||
      (step === "row-btn4" && data[3])
    );
  };

->この部分を聞いて驚いたのは、一時変数を加えることがもっと明確だと思います.しかし,一時変数の使用による側方シフトは全く考慮されていない.😱 △これはjs入門者がよく犯す間違いだそうです.추상화、1함수 1역할、선언형は心に銘記すべきである.

混同を避ける

何が

Hoistingですか?
:実行時に宣言を最上位レベルに移動します.=>予期せぬ実行結果

ソリューション
1.varを無効にする(constを使用)
2.関数も円弧化されているので、関数式を使用します.
3.変数宣言時に

を同時に割り当てる

例
constを使用した関数の作成と割り当て

const sum = function(){
	return 1+2;
}