start.js에서 변수 선언에 대한 질문입니다.

Question

안녕하세요. start.js에서 변수를 선언하실 때 어떤 변수 ex) const main = document . querySelector ( "#main" ); const qna = document . querySelector ( "#qna" ); 는 start.js 제일 위로 뽑아서 선언을 해주시는데 어떤 변수 ex1) answer . addEventListener ( "click" , function (){ var children = document . querySelectorAll ( '.answerList' ); for ( let i = 0 ; i < children . length ; i ++){ children [ i ]. disabled = true ; children [ i ]. style . display = 'none' ; } goNext (++ qIdx ); }, false ) } 혹은 ex2) function goNext ( qIdx ) { var q = document . querySelector ( '.qBox' ); q . innerHTML = qnaList [ qIdx ]. q ; for ( let i in qnaList [ qIdx ]. a ){ addAnswer ( qnaList [ qIdx ]. a [ i ]. answer , qIdx ); } } goNext함수의 q 혹은 children 같은 변수들은 함수 안에 넣어주시는 것을 봤습니다. 혹시 변수를 선언할 때 규칙(?) 같은 것들이 있는지 알려주시면 감사하겠습니다.

판다코딩 · Answer

변수의 유효범위에 대하여 의문점을 가지고 계시는 것 같습니다. 변수는 선언된 함수 내에서만 사용할 수 있습니다. 가령 세번째 사진에서의 변수 q는 goNext함수에서만 유효합니다. 다른 함수에서는 변수q를 사용할 수 없습니다. 이처럼, 일반적으로 변수는 필요한 함수 내부에서 선언하는 것이 원칙입니다. 하지만 첫번째 사진의 main이나 qna같은 변수는 사용하는 함수가 많습니다. 많은 함수들이 전역으로 사용할 수 있도록 파일의 최상단에 선언한 것입니다.