[Clean Code JS] section 2: 6~7. scope (let&const)

Section 2 : 변수다루기

#06. function scope & block scope

- TDZ

- 레퍼런스에러 

- var vs let vs const : scope 차이

: 재할당 (*전역공간까지 영향을 받는지를 따져야 한다)

 

*var : 함수단위 스코프(function scope)라서 if문 사용시 블록단위로 바꾸지 않는 이상 if문 바깥쪽에서도 if문의 영향을 받는다.

*let & const : 블럭단위 스코프(block scope), 재할당

var global = '전역';

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

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

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

 //////////////////////////////////
 
 const global = '전역';
{
 	const global = '지역'	
    
    console.log(global);	//지역
 }
 console.log(global);		//지역

 

const : 선언+할당 후 재할당할 시 에러발생

const 로 선언과 할당 후  xx.property = '값'를 통해 바꿀 수 있다.

배열은 xx.push({

    property : '값'

})

 

본연 객체와 배열과 같은 레퍼런스 객체들을 조작할때는 이상이 없음

 

 

#07. 전역 공간 사용 최소화

- Lint

- 자바스크립트 생태계

- 전역공간 ?

 

Window(브라우저 환경)  & global (NodeJs 환경)

API : window + "." / window.setTimeout / window.setInterval / alert

 

console에 console.log(window) 치면 API가 나온다.

console.log(global) 치면 Uncaught ReferenceError: global is not defined   at <anonymous>:1:13 에러

>>global은 NodeJS 환경

 

최상위 공간 = 전역공간

 

전역공간을 침범하면 안되는 이유를 알면 된다!

 

몽키패치 : 언어에 영향을 주는 환경

index.js

console.log(globalVar);

console.log(window.globalVar);

 

index2.js

console.log(globalVar);

 

둘다 같은 방식으로 접근이 가능하다 >>> 위험을 초래

코드가 겹칠 수 있는 상황이 발생한다(전역공간에서 사용한다면)

 

//이해가 안된다...

 

window.setTimeout(() => {

console.log('1초');

} ,1000);

 

브라우저 web API

 

console.dir();  

window.foo = '값'; 

console.log(window.foo) : window 환경 어디서든 찍어볼 수 있음

window.foo로 setTimeout()에서도 접근이 가능하다.

 

위의 에러를 피할 수 있는 방법!

 

1. IIFE(즉시실행함수)

2. Module

3. Closure

4. const, let

 

 

정리

 

- 전역공간사용을 최소화 why(어디서나 접근이 가능해, 런타임 환경에서 분리되지 않아, 스코프 분리는 매우 위험)

- 방법 : 전역변수 만들지 않기, 지역변수만 만들기, window와 global영역을 조작하지 않기, const&let으로 사용하기, IIFE, Module, Closure 처럼 스코프를 나누기