[클린코드 자바스크립트] Section 2 : 변수 다루기

전에 올린 리액트 강의와 마찬가지로 클린코드 자바스크립트 강의를 한 챕터씩 듣고 정리한 내용을 바탕으로, 프로젝트에서 내가 짰던 코드를 하나씩 고쳐보려한다.

이번 프로젝트에서 var는 사용하지 않아서, 크게 고칠 부분은 없었고 임시 변수 부분만 살짝 고쳤는데 코드를 읽어보니 대대적인 수술이 필요할듯하다,,,🛠(과거의 나 반성해)

var 사용하지 않기

var와 let&const 차이?

• var
  1. 중복 선언 가능
  2. 스코프에서 재사용할 경우 스코프 밖의 값 까지 오염됨.

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

• let & const
  1. 중복 선언 불가능
  2. let은 선언 후 할당이 가능하지만 const는 선언과 할당이 한번에 이루어져야함.
  3. 블록 단위로 지역변수, 전역변수 역할을 잘 하고 있음.
  4. let 보다는 const를 사용하자
     -> const는 재할당만 불가능한것이므로, 객체나 배열을 조작할 때는 아무런 문제가 없다!

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

전역 공간 사용 최소화하기

• 전역 공간?
  : 최상위 공간으로 브라우저에서는 window, node.js에서는 global을 뜻한다.
  : 어디서나 접근이 가능하며, 파일이 달라도 전역 공간 안에 있는 건 접근이 가능하기 때문에 문제가 생길 확률이 높음.
  : 특히 var를 사용할 경우 전역 공간에 저장됨.
• 해결 방안
  1. 전역변수를 만들지 않는다.
  2. 변수는 지역변수로 만들어서 사용한다.
  3. window, global을 조작하지 않는다.
  -> 궁금한 점 : window.scroll 같은 함수는 사용해도 되는 것인가?
  4. const, let을 사용한다.
  5. IIFE, module, closure등을 활용해 스코프를 나눈다.
  (뒷 내용에서 다루는 부분)
  

임시 변수 제거하기

• 무엇이 문제인가?
  1. 임시 변수가 생기면 개발자가 임시변수를 CRUD할 유혹에 빠지기 쉬움
  2. 임시변수는 명령형으로 가득한 로직을 가지고 있어서 어디서 어떻게 잘못됐는지 디버깅하기가 힘듦.
  3. 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역할, 선언형을 가슴에 새겨 넣어야겠다.

호이스팅 피하기

• 호이스팅이란?
  : 런타임시 선언을 최상단으로 끌어올리는 것. => 예측하지 못한 실행 결과가 노출됨
• 해결방안
  1. var사용하지 않기(const 사용하기)
  2.함수도 호이스팅 되므로, 함수 표현식을 사용하기
  3.변수 선언시 할당까지 함께 하기
• 예시
  const로 함수를 만들고 할당하기

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