[JavaScript] var / const / let 와 scope 끄적끄적

...끄적끄적...

var는 더 이상 지양해야한다. 

let 함수 스코프로 함수 내에서만 유효 유동적인 값

const 한번 선언 후 고정 재할당이 안됨. let을 보완.'

 

전역 스코프 (global scope)

변수가 함수 바깥이나 중괄호 바깥에 선언되면 전역 스코프로 소스 코드 모든 곳에서 해당 변수를 사용할 수 있습니다.

심지어 함수 내에서도... (전역 변수 == 독약)

(

전역 스코프는 프로그램을 쉽게 만드는 유혹이 있습니다.

프로젝트가 좀만 커지면 전역 변수는 독약!!!

소스코드 모든 부분에서 전역 변수를 건드릴 수 있기 때문에

버그 발생 시 어떤 변수를 건드렸는 지 찾기 힘들어집니다.

)

 

지역 스코프(local scope)

코드의 특정 부분에서만 사용할 수 있는 변수. 

JS에서는 함수 스코프/ 블록 스코프가 이 지역 스코프에 해당합니다.

 

1. 함수 스코프(function scope)

함수 내에 변수를 선언하면 그 변수는 오직! 함수 내부에서만 접근할 수 있습니다. 함수 바깥에서는 접근 불가!

function hi(){
	const hello = 'welcome to my hi function'
    console.log(hello)
}

hi() // 'welcome my hi function'
console.log(hello) // 에러 발생!.. hello is not defined hi 함수 안의 세계의 변수 hello에 접근 불가!
 

2. 블록 스코프 (block scope)

중괄호{} 내부에서 const , let으로 변수 선언 시 그 변수들은 해당 중괄호 내부에서만 접근할 수 있다!

뭐 사실 함수 스코프도 이 블록 스코프에 포함하는 걸 다들 눈치 챘을 것 같네요 ㅎㅎ

 

 

함수 호이스팅

함수 선언식(function declaration)으로 함수를 작성하면,함수 최상단으로 호이스팅되어 코드 어디에서든 호출!

say(); //ho! 
// 선언도 전에 호출 됬지만 자바스크립트 코드를 해석하면서 최상단으로 호이스팅되어 호출 성공.

function say(){
	console.log("ho!");
}

 

함수 표현식(function expression)으로 함수를 작성하면, 함수 최상단으로 호이스팅 되지 않습니다.

say() // Cannot access 'say' before initialization
const say = function(){
	console.log("ho!")
}

함수 선언식은 지양! 혼란을 피하기 위해 함수를 호출하기 전에 선언해야합니다. 

 

네스티드 스코프(Nested scopes)

 

함수 A가 다른 함수 B안에 선언됬으면, 그 내부 함수A는 외부 함수B의  변수에 접근할 수 있습니다! 이런 것을 

렉시컬 스코핑(Lexical scoping)이라고 합니다 하지만 외부 함수B는 내부 함수A의 변수에 접근할 수 없습니다. 

 

function outerA() {
    var outer = "나는 outer!!"; // name is a local variable created by init
    function innerB() { 
    	const inner = "나는 inner!!";
        console.log(outer); 
    }
    innerB();
	// console.log(inner) 하면 inner는 defined되지 않았다고 error!!    
}

outerA();