forEach

📌 forEach는 무엇일까?

반복문 for의 고차함수라고 보면 된다. 개발을 하다보면 for문과 if 함수를 함께 자주 사용하고 있는데, 이러한 방법은 조건문이나 반복문의 로직을 쉽게 읽히지 않을 때가 있다.

이를 보완하기 위해서 필요한 것은 forEach!
forEach 메서드는 자신의 내부에서 반복하며 자신을 불러낸 배열을 알아서 순회해준다!
즉, 더 간편하게 반복문을 실행할 수 있다는 생각이 들었다.

아래는 같은 결과값을 각각 for과 forEach로 표현한 것이다.

const arr = [10,20,30]
const num = []; 

//for 구문 
for(i=0; i<arr.length; i++){
	num.push(arr[i]*2);
}
console.log(num); //[20,40,60]

//forEach 구문 
arr.forEach(e => num.push(e*2))
console.log(num);//[20,40,60]

forEach는 콜백함수로 전달받아 반복 호출하는 방식인데,
예시의 배열은 요소가 3개라서 3번의 콜백함수를 불러온다.

📌 forEach의 자세한 구조 분석

const num = [1,2,3]

//arrow Function 형태
num.forEach((item,index,arr) => {arr[index] = item ** 2;};)
console.log(num);// [1,4,9]


//일반 fucntion
num.forEach(funciotn(item,index,arr){
    arr[index] = item ** 2;  
})
console.log(num);// [1,4,9]

1) item: forEach를 호출한 배열의 요소값
2) index: forEach를 호출한 배열의 인덱스
3) arr: forEach를 호출한 배열

📌 Array.prototype.forEach.call(배열,(e))

문제 1 ) p 태그를 누르면 문구와함께 경고창의 띄워라

기본 for 구문 풀이

    <p>1. 오늘 저녁에는 부대찌게를 끓여 먹겠다.<button type="button">삭제</button></p>
    <p>2. 후식으로 슈팅스타를 먹겠다.<button type="button">삭제</button></p>
    <p>3. 자기 전에 반드시 내일 아침 메뉴를 생각해두겠다.<button type="button">삭제</button></p>

<script>      
const txts = document.querySelectorAll('p');      
for(let i = 0; i <txts.length; i++){
	txts[i].addEventListener('click',(event) => {
    alert(event.target.textContent.slice(0,-2));
    })
}
</script>

forEach문의 문제

mdn 문서를 보면 Array.prototype.forEach라고 적혀있다. 그러나 forEach는 nodelist나 HTMLcollection에 모두 사용할 수 있다. 이런 forEach가 ie 지원에 호환문제가 있다. 물론 바벨 라이브러리 등을 이용하면 쉽게 호환하는 방법도 있지만, Array.prototype.forEach.call 를 사용해서 문제를 해결할 수도 있다.

const txts = document.querySelectorAll('p'); 

Array.prototype.forEach.call(txts,(item) => {
	item.addEventListener('click',(event) => {
    alert(event.target.textContent.slice(0,-2));
})

이 방법은 txts에 원래 forEach가 있는 것처럼 해준다. 프로토타입은 메소드의 저장공간으로 보면되는데, 객체와 연결해주는 역할을 한다.

📌 for...of (문제1과 연결)

문제2 ) 버튼을 누르면 컴펌 창이 뜨고, 확인인을 누르면 p 태그를 삭제해라

for (const item of btns) {
	item.addEventListener('click',(event) => {
	let result =  confirm('삭제할래?');
// 이거 안해주면 버블링하면서 위의 p의 alert를 실행
event.stopPropagation();
if(result){
	item.parentElement.remove();
}
})
}

txts.remove()를 하면 안되는 이유는 txts는 노드리스트라서 여러 노드들을 다 지목하고 있음!
그래서 정확히 버튼인지 p인지 가르키는 대상을 알 수 없어서 parentElement로 정확하게 짚어줘야 함.

confrim의 확인 버튼은 true, 취소는 false다.