본문 바로가기
Front-End/JavaScript

[JavaScript] forEach문 도대체 이 녀석은 뭘까 ?

by 민바이민 2021. 1. 15.

JavaScript

앞의 포스팅(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

댓글