“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
forEach문 이해하기
[데이터불러오기] 파트에서 배운 forEach문을 공부해 보려고 합니다.
forEach문은 JavaScript에서 배열(array)에 포함된 각 요소(element)에 대해 반복적으로 작업을 수행하는 메서드입니다.
for문
for(let i=0; i<배열명.length; i++){
console.log(i);
} // 간단한 예시입니다.▼
forEach문
배열명.forEach(function(i){
console.log(i);
});▼
화살표forEach문
배열명.forEach(i => {
console.log(i);
});
forEach문 만드는 법
arr.forEach(callback(currentValue [, index [, array]])[, thisArg])arr : 작업을 수행할 배열명
callback : 배열의 각 요소에 대해 실행할 함수
currentValue : 현재 배열 요소의 값(내가 정하는 값)
index(선택적) : 현재 배열 요소의 인덱스
array(선택적) : 배열자체
thisArg(선택적) : callback 함수 내에서 this로 사용될 값
forEach문 : 배열이 가지고 있는 요소들을 한번씩 반환하여 반복을 시켜주는 것
예문
배열의 모든요소를 콘솔에 출력 하시오
const arr = [1, 2, 3, 4, 5];
arr.forEach(function(element) {
console.log(element);
});
forEach문은 콜백 함수를 사용하여 배열의 각 요소를 처리하므로, 반복작업을 처리하는 데 유용한 메서드 입니다.
> 일반적인 for문보다 forEach문이 내장함수 이기 때문에 속도가 더 빠르다고 합니다.
컬러 박스 만들기
<head>
<style>
/* 의 너비 높이 지정 */
#color_box {
width: 400px;
height: 300px;
}
</style>
</head>
<body>
<h2 id="title">컬러풀한 박스 만들기</h2>
<article id="mission">
4개의 div를 이용하여 4가지 색깔을 가진 박스를 만들어 보자.
<br />
</article>
<article id="color_box">
<div style="background-color:#b7e3e4;"></div>
<div style="background-color:#f03f35;"></div>
<div style="background-color:#167c80;"></div>
<div style="background-color:#f9f7e8;"></div>
</article>
</body>style속성을 변경해 주는 문제입니다.
const box = document.querySelector('#color_box');
if(box){
Array.from(box.children).forEach(el => el.style.cssText += 'width: 50%; height: 50%; float: left;');
}
참조:https://meanbymin.tistory.com/57