앞의 포스팅(https://meanbymin.tistory.com/46)에서 foreach문을 아주 간단히 설명했다.
허나 나도 제대로 이해를 못하고 정리를 했던 것 같아 다시 한 번 더 정리하고자 이 글을 포스팅한다.
나는 제대로 이해 못했어.
앞에서 말했던 forEach문은
arr.forEach(function(i){ // callback 함수
console.log(i);
})이렇게만 설명을 했었다. 그렇다면 언제쓰이고 왜 사용하는지 알아보자.
1. 왜 사용할까?
우리는 주로 for문을 많이 사용한다. for문의 사용 빈도수는 굉장히 높다. 포문돌려야지 포문돌려야지~ 하는데 이 녀석 생각보다 조건식도 적어야하고 실행문도 적어야하고 귀찮다..
for(let i=0; i<배열명.length; i++){
console.log(i);
} // 간단한 예시입니다.
허나 객체는 객체가 기본적으로 가지고 있는 내장함수가 있는데 그것이 바로 forEach 메소드이다.
1) 코드가 우아해진다.
배열명.forEach(function(i){
console.log(i);
});위와 같은 코드인데 훨씬 간결하게 완성된다.
화살표 함수로도 만들 수 있다.
배열명.forEach(i => {
console.log(i);
});
forEach문 만드는 법
배열명.forEach(요소명 => {
실행문(요소명)
});으로 작성이 된다.
요소명은 내가 정할 수 있으며, 그 배열이 가지고 있는 요소들을 한 번씩 반환하여 반복을 시켜주게 되는것이다.
const arr = ['가','나','다','라'];
arr.forEach(function(item,index,arr2){
console.log(item,index,arr2[index+1]);
}) // 가 0 나 // 나 1 다 // 다 2 라 // 라 3 undefined
2) 속도가 빠르다
일반적인 for문보다 forEach문이 내장함수 이기 때문에 속도가 더 빠르다.
2. 언제 사용할까?
처음 forEach문을 배우고 솔직히 사용해본 적이 없었다. forEach를 써야지라고 생각도 못했을 뿐더러 이해도 제대로 못했으니 쓸 일이 없었겠지....
그러다가 사용한 계기가 있는데, 예시로 들어볼까 한다.
자바스크립트에서 css를 컨트롤할 때 사용했는데, 물론 css에서 수정하면 훨씬 더 빠르지만 예시라고 생각하고 한 번 보도록 하자.
<head>
<style>
/* result의 너비 높이 지정 */
#result {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<h2 id="title">알록달록한 박스를 만들어봅시다</h2>
<article id="mission">
result의 안에 4개의 div를 이용하여 4가지 색깔을 가진 result박스를 만들어 보자.
<br />
</article>
<article id="result">
<div style="background-color:tomato;"></div>
<div style="background-color:turquoise;"></div>
<div style="background-color:beige;"></div>
<div style="background-color:rosyBrown;"></div>
</article>
</body>
위 처럼 js를 이용해서 css style을 변경할 때 사용하였는데, article안에 있는 div의 style 속성을 변경해주어야 한다. 그렇다면 4개의 div를 다뤄야 하니 result라는 객체를 가져와서 그 안에 있는 자식요소의 style을 변경해주면 된다.
const pinkbox = document.querySelector('#result');
if(pinkbox){
Array.from(pinkbox.children).forEach(elem => elem.style.cssText += 'width: 50%; height: 50%; float: left;');
}
이렇게 4(n)개의 요소를 한꺼번에 변경하거나 사용할 때 forEach문을 사용하면 편리하게 사용할 수 있다. 짜잔~
'Front-End > JavaScript' 카테고리의 다른 글
| [JavaScript] DOM 문서 객체 모델 (0) | 2021.01.19 |
|---|---|
| [JavaScript] 내장 객체 (0) | 2021.01.17 |
| [JavaScript] 객체 (Object) (0) | 2021.01.13 |
| [JavaScript] 변수의 범위 (0) | 2021.01.09 |
| [JavaScript] 화살표 함수 (0) | 2020.12.31 |
댓글