var let 그리고 제이쿼리 질문드립니다

Question

선생님들 안녕하세요for( ) 안의 i를 var로 선언하면콘솔창에서 안의 i가 7로 출력이 되었습니다반면에for( ) 안의 i를 let으로 선언하면콘솔창에서 안의 i가 1로 출력이 되었습니다혹시 이런 차이가 생기는 이유를 가르쳐주시면 정말 감사하겠습니다그림에서 코드, 콘솔창, 뷰 3가지로 나뉘어져 있습니다뷰에서는 입력창 2개가 있는데 각각 id가 #wordNm1 #wordNm2 입니다인터넷에서 var와 let에 따른 글로벌, 블록, 함수 스코프 차이도 검색해봤는데, 이해가 어려워서 질문드리게 되었습니다긴 질문을 읽어주셔서 감사합니다

songline · Accepted Answer

var은 함수 스코프(함수 몸체로만 변수 범위 및 수명이 구분됨)를 따르고, let은 블록 스코프(꼭 함수가 아니더라도 { }로 감싸진 구역이라면 if문이나 for문의 몸체도 스코프로 취급해서 나가면 유효하지 않음)를 따릅니다.var은 함수 스코프를 따르므로 아래 케이스에서 for문의 모든 반복에 사용된 변수 i는 모두 같은 변수 i 입니다. 반면 let은 블록 스코프를 따르므로 let i로 선언한 변수 i는 매 반복마다 스코프 범위가 종료되어 분리되므로 각 반복에서 사용되는 변수 i는 이름은 같지만 실제로는 전혀 다른 변수입니다.추가로 javascript는 렉시컬 스코프라는 것을 따릅니다. 간단히 얘기하면 함수 호출 시 상위 요소의 변수에 접근하는 처리가 존재한다면 어떤 상위 요소의 변수를 취할지는 선언 시점에 정해진다는 것입니다. jQuery 문장에서 콜백으로 넣어준 함수를 보면 변수 i를 취하고 있습니다. 하지만 함수 내부나 인수들을 봐도 변수 i가 무엇인지는 선언되지 않았죠. 그러면 보다 상위 스코프에서 i라는 변수가 무엇인지를 찾게 되는데, 이 때 찾는 위치가 해당 콜백을 실행했을 $(&#34;...&#34;)이 아니라, 해당 함수를 선언하고 정의했던 위치, 즉 for문에서 찾게 되는 것입니다.여기서 var로 선언한 경우 for문의 모든 i 변수가 동일한 변수이므로 1씩 증가하다가 7이 되는 시점에 for문이 종료되므로 다시 참조하면 i의 값은 7로 나옵니다. 반면 let의 경우 매 반복마다 i라는 이름을 가진 변수를 새로 만드는 꼴이기 때문에 i &#61;&#61;&#61; 1 이던 변수 i는 끝까지 값이 1인 상태로 남고 새로운 변수가 만들어지므로, 렉시컬 스코프에 따라 그 시점의 변수 i를 참조하고 있는 익명함수를 실행하면 결과값도 1로 나오게 됩니다.기타, #wordNm 에서는 둘 다 문제 없이 나오는 것은 &#34;#wordNm&#34; &#43; i로 반복문을 돌면서 그 즉시 연산한 결과값을 대입해주었기 때문입니다. a &#61; 3, b &#61; a &#43; 2, a &#61; 7; 한다고 b 값이 5에서 9가 되지 않는 이유와 같죠.

자읭식과읭 · Answer

아 hoisting 뭐 이런거랑 관련이 있긴 한데 옛날 js이 안 좋을 때의 유물로 모던 js를 쓰는 현대에서는 앞으로 평생 var 를 쓸일이 없다는 것만 알고 있어요

var let 그리고 제이쿼리 질문드립니다

2개의 답변

Q&A 목록