[JavaScript] onclick="window['funcName']" 의미와 뜻, 원리

간혹 이렇게 생긴 이벤트 핸들러를 본다.

<button onclick="window['displayFruits']();">run</button>

내가 알던 보통 모양새는 이렇다.

<button onclick="displayFruits();">run</button>

이 둘은 차이가 뭘까?

window['displayFruits']();

 

이건 뭐하자는 뜻일까?

스크립트 태그 안에 아래와 같은 배열을

각각 변수 안에 넣어두자.

<script>
    const colorList = ['red', 'green', 'yellow'];
    var fruitList = ['apple', 'melon', 'banana'];
</script>

크롬을 실행하고 개발자 도구를 열어서 콘솔에 window를 출력해 보자.
그 안을 펼쳐 보면 window가 들고 있는 여러 가지 데이터들을 들여다볼 수 있다.
자세히 찾아 보면 window 가 'fruitList' 는 들고 있고, 
'colorList' 는 들고 있지 않다는 걸 알 수 있다.

 

그럼 이 fruitList 에 접하는 방법은 window 안에서 
'fruitList'라는 key로 value 를 받아오면 될 거라고 짐작할 수 있다.

window['fruitList']

예상대로 'fruitList'는 출력되는 걸 볼 수 있고, 
'colorList'는 찾을 수 없다는 메세지가 나온다.

fruitList와 colorList 사이에 이런 다른점이 생기는 이유는
변수를 선언하는 키워드가 다르기 때문이다.

JavaScript에서는 var / const / let 등의 키워드로 변수를 선언한다.
기능이 살짝씩 다른데, scope도 다르다.
var는 함수 스코프고, const와 let은 블록 스코프다.
var가 스코프가 더 크다고 생각하면 된다.

<script> 태그 바로 아래에 선언한다면
var 로 선언한 변수는 window가 들고 있게 된다.


변수뿐 아니라 함수도 마찬가지다.
script 태그 바로 아래에 함수를 선언했다면
window 가 이 함수를 들고 있는다.

<script>
    function displayFruits() {
        const fruitList = ['apple', 'melon', 'banana'];
        fruitList.forEach(function(item, index) {
            console.log(item);
            
        });
    };
</script>

위와 같이 script 태그 바로 아래에 함수를 선언한다.
그리고 개발자 도구 console에서 확인해 보면
window가 이 함수를 들고 있다는 걸 알 수 있다.

아까 출력해 봤던 'fruitList' 변수와 마찬가지로,
window가 들고 있는 데이터는 키값으로 접근할 수 있다.

window['displayFruits']

자, 이제 처음으로 돌아가 보자.
우리는 아래와 같은 이벤트 핸드러를 낯설어 했다.

<button onclick="window['displayFruits']();">run</button>

이제 조금 감이 잡힌다.
버튼을 클릭하면 window라는 객체에 접근하여
'displayFruits'라는 이름의 데이터를 꺼내 오고,
그 함수를 실행하겠다는 뜻이다.

 

-220716