코딩 입문한지 얼마안된 초보입니다. (자바스크립트 클로저에 대한 질문)

Question

안녕하세요. 디자인 전공으로 종사하다가 코딩쪽으로 스펙업을 하고 싶어서 입문하게된 코린이입니다.독학으로 자바스크립트 공부중인데요chtatGPT라는 정말 좋은 선생님이 생겨서 공부하기 정말 좋은 시대라고 생각하고 공부 하고 있습니다.입문한지는 며칠안되어서 너무 기본적인 것일 수도 있겠지만..챗지피티로 물어봐도 이랬다 저랬다 답변이 계속 바뀌는 질문이라 ㅠㅠ 여기에 올려봅니다.클로저를 공부하고 있고, 그 개념에 대해서는 대략적으로 이해를 했습니다.문제는 클로저를 응용하는 코드의 예시에서인데요,첫 번째 - 클로저를 사용하지 않았을 때두 번째 - 클로저를 사용하였을 때이 코드입니다.오히려 두 번째인 클로저를 사용하였을 때 부분은 이해를 했습니다만...문제는 첫 번째에서인데요. 첫 번째에서도 값이 5가 5번 나오는건 이해했어요!! 근데...첫 번째 코드에 대해 지피티에게 물어보니 클로저가 있다고 이야기를 하더라고요?클로저를 사용하지 않았을 때의 예시인데 클로저가 있다라..(여기서 부터 혼란..)그래서 정말 클로저가 안에 있느냐 물었을 때,챗지피티- 아니다 잘못 말했다, 클로저가 없다. 라고 말했다가 또 다시 물어보면 있다고 하고 ㅠㅠ없는게 맞는거 같긴한데..근데 제가 잘못 이해하고 있는 건진 모르겠지만 아래 코드에서 보면for(var i &#61; 0; i < 5; i&#43;&#43;){arr[i] &#61; function(){return i;}for문도 엄밀히 말하면 함수이지 않나요?for문 안에 function(내부함수)가 있는거니 for문이 외부함수가 되니엄밀히 따지면 이것도 클로저인게 아닌가..?? 싶어서요.. (혼란)클로저가 아니겠죠..? i가 외부 함수의 선언시 지역변수를 기억하고 있는게 아니니까요...웬만한건 계속 보다보면 이해가 되는데 이부분은 보면 볼수록 혼란만 더해지네요 ㅠㅠㅠㅠㅠㅠ이상한거 물어봐서 죄송합니다 ㅠㅠ

엡실론 · Answer

둘 다 클로저는 있습니다. 아래쪽은 클로저를 하나 더 사용한 거죠.function 내의 i 값은 실제로는 function 외부의 변수죠. 이런식의 작동이 가능하게끔 함수와 외부 환경이 엮인게 클로저입니다. 위의 예제도 클로저를 쓰고 있습니다. 그게 아니면 function에서 i를 사용할 수 가 없죠.자바스크립트는 해당 변수 자체를 참조하기 때문에 변수의 값이 바뀌면 함수가 만들어졌을 때 변수의 값이 아니라 변경된 값이 사용되는 거고, 그래서 아래 예제 처럼 하나 더 레이어를 둬서 변수 값을 고정시키는 거죠.

yangbuk84 · Answer

for 는 문입니다.함수는 js에서는 값이구요.해당 1번 코드에서는 포문 안 쪽이 스코프가 잡히고 그 스코프 안에 잡힌 i 를 바라보고 있는데 아래 포문 실행시점에는 그 스코프의 i는 5가 되어있으니 다섯번 5가 출력되는거고2 번 코드에서는 즉시실행함수에 그 당시의 i를 소비함으로써 즉시실행함수 안쪽의 함수가 값을 갖고 있는 채로 어레이에 할당이 된 거고요.설명하신 걸로 봐서 렉시컬 컨텍스트와 실행 컨텍스트도 아직 모르시는 것 같은데 한 번 찾아보시길https://kwangsunny.tistory.com/m/37

vrerv · Answer

둘다 클로져입니다. 글로져는 외부변수를 함수내에서 사용하면 생성됩니다.1번 케이스도, i 를 var 대신 let 으로 선언했다면, 원하는대로 작동됩니다.var 는 ES6 이전방식 변수 선언으로 함수범위나, 전역 범위로만 적용됩니다. let, const 는 블록단위로 적용됩니다.https://www.vrerv.com/blog/javascript-variables/const arr = [] for(let i = 0; i < 5; i++) { arr[i] = function() { return i } } for (const index in arr) { console.log(arr[index]()) }

코딩 입문한지 얼마안된 초보입니다. (자바스크립트 클로저에 대한 질문)

3개의 답변

기술 목록