[JS] 함수 내부에 외부 변수 값 전달하기

onclick 이벤트를 하나씩 모두 선언하면 복잡하니 한 번에 반복문으로 묶어주려다가 작성한 코드이다.

//post store click event
        var store = document.querySelectorAll(".store");
        
        for ( var i = 0; i < store.length; i++ ){
            
            store[i].onclick = function() {

            store[i].src = "img/stored.png";
            
        	}
        }

문제가 없어 보이고 작동될 것 같은데 왜 안되는지 모르겠다.

 

함수 내부 store[i].src 줄에서 오류가 발생한다.

 

콘솔 창에는

Uncaught TypeError: Cannot set properties of undefined (setting 'src')

라고 떴다.

---

위 코드 블록 마지막 줄 src 앞에 store[0] 으로 직접 숫자를 입력하면 잘 되는데

변수 값은 0인데 왜 안될까 계속 고민하던 중 아차 싶었다.

 

이유는 i 값이 함수를 선언하는 문장인 store[i]까지는 전달이 되지만
store[i].onclick 함수 내부 스코프까지는 i의 범위가 아니기 때문이다.

이후 store[i] 함수 내부에서는 또 다른 스코프의 함수가 있어야 하는 것이다.

외부 변수를 함수 내부 변수로 사용하려 하고 있었다.

---

해결방법

 

그래서 매개변수로 넘긴 변수를 또 함수 내로 어떻게 넘기는가?

 

이렇게 for 문 내부 스코프에 지역 변수를 선언하여 값을 넘겨주면 내부까지 모두 반복문 변수 i 값이 적용된다.

for ( var i = 0; i < store.length; i++ ){

            let h = i;
    
            store[i].onclick = function() {
            
                store[h].src = "img/stored.png";
                
            }
        }

JS ES6 문법에서 간단하게 변수 이름만 선언하고 값을 넘기는 방법이 있었는데 

그것은 아마 객체 내부였던 것 같다. 

 

더 좋은 방법이 있다면 댓글 부탁드립니다 :)