[JavaScript Essential] 변수 유효 범위 및 호이스팅

변수유효범위 (Variable Scope)

// var, let, const

---

| 1) let, const (블록레벨)

fuction scope() {
  	if(true) {
      	const a =123
        console.log (a)
    }
}

scope();

위와 같은 함수가 있다고 가정했을 때, 함수를 호출해보면 콘솔창에 '123'이라는 값이 출력 될 것이다.

그러나

fuction scope() {
  	if(true) {
      	const a =123
    }
   console.log (a)
}

scope();

위와같이 if 블록 밖에 console.log(a) 를 입력한다면 🚨 Error🚨가 발생하게 된다.

'a'라는 변수는 자신이 동작 할 수 있는 유효한 범위를 가지기 때문이다.

	if (true) {  ----
  	let a = 123      |블록레벨
    }            ----

다음과 같이 변수가 선언 되어져 있는 그 범위의 중괄호 부분을 블록레벨이라하고, 이 블록레벨 이 변수의 유효범위 이다.

---

| 2) var (함수레벨)

var 라는 키워드를 사용하면 함수레벨 범위를 가지게된다.
따라서 함수 내부 어디에서도 사용이 가능해지기 때문에 의도하지 않은 범위에서 변수가 사용 되기도 한다.

---

호이스팅 (Hoisting)

함수의 선언부가 유효범위 최사단으로 끌어올려지는 현상을 호이스팅 (Hoisting) 이라 한다.

| 1) 불가능한 예

const a=7
double ()

const double = function () {
console.log (a*2)
}

🙅‍♂️다음과 같이 함수표현을 사용할 때는 불가하다.

| 2) 가능한 예

const a=7
double ()

fuction double() {
  console.log(a*2)
}

🙆‍♀️ 다음과 같이 함수선언 을 사용할 때 가능하다.

---

즉, 함수의 선언이 함수를 호출하는 부분보다 밑에 선언 되어 있어도 호이스팅이라는 현상에 의해 문제없이 실행된다.

위와같은 호이스팅은 함수의 길이가 길어질때 사용하면 유용하다.