Hoisting(호이스팅), Scope(스코프)

 

 

 

 

Hoisting 

어디에 선언을 했는지와는 상관없이 항상 제일 위로 끌어올려주는 것. 

scope 

어떤 변수에 접근할 수 있는지를 정의하는 것.

전역 스코프와 지역스코프로 나뉘며 지역 스코프는 또 함수 스코프, 블록 스코프로 구분한다. 

 

 

 

  const apple = 'red';

        function print() {
            const lemon = 'yellow'
            console.log(apple);                 // 'red'
        }
        print();
        console.log(lemon);     //Uncaught ReferenceError: lemon is not defined

 

전역 스코프 변수 

 변수가 모든 함수에 속하지 않고 {}괄호안에도 들어있지 않다면 전역 변수라고 한다. 전역 변수를 선언하면 자바스크립트 코드 어디서든 불러서 쓸 수 있다.

전역 변수에서 변수 선언을 할 수 있어도 하지 않는 것이 권장된다. 두 개 이상의 변수들이 같은 이름을 가지게 되어 네이밍 충돌이 발생할 확률이 높기 때문이다. 전역 변수 사용을 지양해야 한다. 

 

 만약 var를 사용한다면 같은 변수를 사용할 경우 두번째로 선언한 변수가 앞의 변수를 덮어쓰게 되지만 자바스크립트 es6부터 변경된 let과 const를 사용하게 된다면 동일한 이름의 변수를 선언할 경우 에러가 난다. 

 

 

 

       function print() {
            let lemon = 'yellow'
            lemon = 'sour'
            console.log(apple);                 // 'sour'
        }
        print();

 

지역 스코프 변수

 코드 내에 특정한 구역에서만 변수를 사용한다.

 

함수스코프

 함수 내에서 변수를 선언했을 때, 함수 안에서만 이 변수에 접근할 수 있다.  함수의 외부에서는 함수 안의 변수에 접근할 수 없다. 

 

 

블록 스코프

 변수를 {} 괄호 안에 선언했을 때, 괄호 안에서만 그 변수에 접근할 수 있다. 

사실 블록 스코프는 함수 스코프의 부분집합이다. 보통 화살표 함수로 축약을 할 때가 아니면 보통 함수도 {} 괄호 안에서 작성이 되기 때문이다.

하지만 ES5 버전 이하에서 사용되는 var는 블록 스코프가 없다.

 

 

 

호이스팅 

 function 키워드와 함께 선언된 함수들은 항상 현재 스코프의 가장 상단으로 호이 스팅 된다. 

하지만 만약 함수 표현식으로 작성이 된 경우 함수는 호이 스팅 되지 않는다.  

헷갈릴 수 있으니 항상 함수는 사용 전에 선언하는 것을 권장한다.

 

 

 

 

 

---

 

 

추가적으로 클로저에 대해 간단히 설명하자면 ,

함수 안의 함수, 즉 안쪽 함수가 클로저이다. 일반적으로 함수를 반환시키기 위해 클로져를 만든다. 반환된 클로져를 이용하여 바깥 함수의 변수들을 사용할 수 있다. 

 

 

 

 

---

 

유튜버 드림 코딩 엘리님의 영상을 기반으로 공부한 것을 정리한 내용입니다.