forEach() 사용예시

어제 forEach() 를 알게 되었고 오늘 개념정리를 하는데, 비동기함수? 콜백함수? 이런것들이 나왔다.

코드스테이츠 캘린더를 보니 후에 비동기함수, 콜백함수를 배우게 된다.

그때 개념 정리하기로 하고 우선 활용할 수 있게 사용법정리만 해두기로 했다.

 

우선 forEach는 Array객체에서만 사용가능한 메서드이다.

 

forEach는 반복문과 같은데 같은내용을 forEach로, 반복문으로 작성해보자.

 

forEach()과 반복문 비교

//forEach사용
let i = ['a','b','c','d']

function writing(i){
console.log(i)
}

i.forEach(writing)
//writing(i[0]), writing(i[1]), writing(i[2]), writing(i[3]) 이 차례대로 실행되어
//console.log('a'),console.log('b'),console.log('c'),console.log('d')가 실행된다.

//-----------
//-----------
//반복문사용
let a = ['a','b','c','d']

for(let i = 0; i<a.length;i++){
console.log(a[i])
}

좌)forEach사용,  우)반복문사용

 

forEach를 이용하여 여러개의 버튼에 이벤트 추가하기

    
    <script>
        const btns = document.querySelectorAll('button')

        function onClickBtn(item){
            function changeBackColor(){
                document.body.style.backgroundColor = item.value
                //btns[0]이 매개변수가 되었으므로 item = btns[0]이다.
                //배경색을 btns[0].value로 바꾼다는 뜻. 
                //아래 스크린샷 참고 body태그에 btn1의 value ='blue'이다.
            }

            item.addEventListener('click',changeBackColor)
            
        }


        btns.forEach(onClickBtn)
        //btns[0]이 onClickBtn()의 인자가 된다.(btns[0]부터 btns[2]까지 차례대로
        //btns[0] = <button id="btn1" value="blue"> blue </button>
    </script>