[JS] 클린코드 - 변수

let

const - 블록 단위 스코프, TDZ => 안전하게 코드를 작성

 

var - 함수 스코프

var는 재할당 , 재선언(중복선언)이 가능하다. => 위험하다.

let, const는 재선언이 불가능하다.

 

let은 재할당은 가능하지만

const는 재할당이 불가능합니다.

 

 

<- 해당코드에서

전역 공간에 있는 스코프까지

오염이 된 것을 확인할 수 있다.

이유 :  if문이기 때문에!

var는 함수단위

if문은 함수가 아니기때문에 오염이 된다.

=> 블록 단위로 바꾸어 오염을 방지! 안전한 코드작성

 

 

 

 

객체를 재할당하면 오류가 발생한다.

객체를 재할당 하지 않아도 객체의 값을 변경할 수 있다.

배열도 마찬가지!

=> const는 재할당만 금지된다. 본연의 객체, 배열같은 레퍼런스 객체들을 조작할 수 있다!

 

 

자바스크립트의 특성!

1. 자바스크립트에서는 파일을 나눈다고 해서 스코프가 나뉘지 않습니다.

2. 예약어를 재선언해도 오류가 나지 않습니다.

브라우저 웹api이기때문에 자바스크립트로 코딩을 하는 코드를 작성하는 단계에서는 개입이 없다.

3. for문에서 var를 사용할때, 임시적인 변수이지만 전역변수로 선언된다. (var 함수단위이기때문..)

 

 

Q. 그렇다면 왜 전역 공간왜 사용하면 안될까? 왜 최소화해서 사용해야 될까?

이유 : 

전역공간(최상위공간) : global(node.js), window(브라우저 환경)로 나눠져 있습니다.

A. 어디서나 접근이 가능하기 때문에, 스코프 분리가 위험하기 때문에

그러므로 우리는

1. 전역변수 x , 지역변수를 사용하고

2. window, global을 조작하지 않으며

3. const, let을 사용하고

4. IIFE, Module, Closure를 통해 스코프를 나누기

 

임시변수

: scope 안에서 전역변수처럼 활용되는 변수 -> 수정될 위험이 있음

 

잘못된 예 :

올바른 예:

임시변수를 만들고 나서 임시변수를 통해서 CRUD 유혹에 빠지게 된다.

위의 함수의 경우 생명주기가 간단하기 때문에, 바로 반환하는 방법으로 임시변수를 제거한다.

 

 

만약 추가 기능 구현이 필요할때(기획, 마케팅 수정 등)가 있다.

이때 A. 함수를 추가로 생성하냐? B. 함수를 유지보수하냐? 두 가지 방법이 있다.

 

아래 코드는 시간과 함께 문자열 '월, 일, 시' 를 표시하도록 업데이트한 코드이다.

구버전:

신버전:

임시변수를 제거해야하는 이유 1. 명령형으로 가득한 로직 2. 어디서 어떻게 잘못됬는지 알기 어려움(디버깅이 힘듦) 3. 추가적인 코드를 작성하도록 유혹함 - "함수는 하나의 일만!" 규칙에 위배됨. => 유지보수가 어려워지기때문!

해결책  1. 함수를 나누기 - "함수는 하나의 일만!" 2. 바로 반환하기 3. 고차함수 사용하기(map, filter, reduce)

기존

클린코드

 

 

호이스팅을 주의하자!

<- 옆의 코드를 풀어서 쓴 것 var는 함수 스코프! 선언전에 미리 할당을 했기때문에 'undefined' 출력

 

변수 그리고 함수도 호이스팅된다!

var sum;

console.log(sum) // 3
console.log(typeof sum) // function

function sum(){
	return 1+2;
}

그렇기 때문에 var보단 const로 작성해야한다.

함수표현식 : 익명함수를 하나 만들어 변수에 할당하는 것

ex ) const sum = function (){

　　　return 1+2;

}

 

호이스팅 : 런타임시 선언이 최상단으로 끌어올려짐.

그렇기때문에 코드를 작성할때 예측하지 못한 문제(몽키패치)로 어려움을 겪는다.

해결방법 : let, const로 변수를 선언하자, 또한 함수도 호이스팅이 되기때문에 함수 표현식으로 작성하는 것이 좋다!