JS-DOM 변수의 유효범위(scope), 호이스팅

변수의 유효범위(scope)

1. 전역변수(window전역에 동작이 됨), 글로벌변수 라고도 함
   • 코드블록 밖에서 선언된 변수
   • 해당코드 전역에 걸쳐서 접근 가능
   • 여러개의 서로다른 함수들이 같은 값을 공유해야 될 때 전역변수 사용
   • 전역변수가 많아지면 전역변수 오염이 발생(꼭 필요한 경우에만 사용)
2. 지역변수(코드블록 안),로컬변수 라고 도 함
   • 코드블록 안에서 선언된 변수
   • 해당 코드블록 안에서만 접근 가능
   • 변수값이 해당 코드블록 안에서만 전용으로 써야될 때 사용
3. 호이스팅
   • 블록 안에서 선언된 지역변수가 코드블록 바깥으로 끌어 올라가 지면서, 강제로 전역변수화 되는 현상
4. ES5버젼에서의 var 변수 선언방식의 호이스팅 문제 해결법

ex)

function test(){
	var num = 5;
	console.log(num);
}
test();
//콘솔창에 5가 출력이 됨.

코드블록 안쪽에서 선언된 변수는 해당 코드 안에서만 변수를 읽을 수 있음
ex)

function test(){
	var num = 5;
	console.log(num);
}
test();

console.log(num);
//콘솔창에 5가 출력이 됨.
//맨밑줄의 함수 밖의 콘솔로그는 에러가 출력됨(num is not defined)

위의 경우 바깥에서도 num 값을 사용하고싶다면
->선언을 코드블록 바깥에서 하면 됨
ex)

// num을 null로 줬다가, function test()를 거쳐, null이 5로 변경되고 마지막줄의 num=5 가 콘솔로 찍히게 되는 것
var num = null;

function test(){
	var num = 5;
	console.log(num);
}
test();

console.log(num);

---

호이스팅

ex) 아래의 경우, 콘솔창이 0,1,2,3이 아닌 3만 계속 찍힌다.
이유는?

var 를 사용했을 때, i에 0,1,2,3이라는 값을 담아놨다가 마지막에 3이라는 값이 전역에 등록되면서 3이라는값이 모든 event문에 연결이 되어버려서(지역변수가 전역으로 바뀌면서) 버튼1,2,3을 눌러도 3이 출력되는 결과가 발생.

<ul>
  <li>button1</li>
  <li>button2</li>
  <li>button3</li>
</ul>

const btns = document.querySelectorAll("ul li");

for(var i=0; i<btns.length; i++){
	btns[i].addEventListener("click", () => {
      console.log(i);
    })
}

ES5버젼에서 호이스팅 문제 해결법

즉시실행함수를 사용하여, 안쪽에있는 코드를 캡슐화 시킨다.

const btns = document.querySelectorAll("ul li");

for(var i=0; i<btns.length; i++){
  	((index)=>{
      btns[index].addEventListener("click", () => {
      	console.log(index);
      })
    })(i)

}