JS : 변수 배치가 내 코드를 손상시키는 이유는 무엇입니까?

Question

버튼을 클릭하면 active 상태로 바뀌는 시스템을 시도하고 있습니다. 그런 다음 화면의 다른 버튼을 클릭하면 "활성"인 경우 일반 이벤트 대신 다른 이벤트가 발생합니다.

나는 작동하게 만들었지 만, 나는 혼란 스럽다. 이 작업 코드 :

dom.el("skill").onclick = active; 

function active(){ 
    active = true; 
} 

var active = false; 

문제를 해결 목록의 맨 아래에있는 전역 변수 active을 배치,하지만 난 처음에 작동하지 않았다 맨 위에, 그것을했다.

var active = false; 

dom.el("skill").onclick = active; 

function active(){ 
    active = true; 
} 

왜이 기능이 작동하지 않습니까? 나에게 그들은 서로 다른 순서로 실질적으로 동일하다.

Answer 1

"호이 스팅 (hoisting)"이라는 용어를 확인하십시오. 이것은 함수 선언이 올라가서 맨 위로 이동하기 때문입니다. 초기화는 호이스트되지 않으므로, var active = false은 사용자가 놓은 위치에 그대로 있습니다.

첫 번째 경우 함수 선언이 먼저 발생하고 함수를 onclick 처리기로 설정합니다.

두 번째 경우에는 false을 처리기로 설정합니다.

변수와 함수에 다른 이름을 사용하는 것이 좋습니다.

Answer 2

var active = false; dom.el("skill").onclick = function(){ active = true; } 

따라서 어떻게해야합니까? 함수와 부울에 동일한 변수를 사용하는 것은 경우에 따라 작동하지만 좋은 스타일은 아닙니다. 그냥 해달라고.