[Javascript] forEach/for..in/for..of/for 구문

 

forEach함수의 구문

배열의 반복이며, 배열에서만 사용할 수 있는 메서드이다. forEach()는 배열의 처음부터 마지막 요소까지 반복하여 실행하고 인자로 콜백함수를 받아온다. 주어진 콜백함수를 배열 요소 각각에 실행하는 순회방법이 있다. 하지만 forEach()함수는 보통 map()함수와 함께 가장 널리 사용되는 순회방법 중 하나이다.

var arr = ["1", "2", "3"];

// ES6의 화살표 함수를 이용하면 코드를 아주 간결하게 만들 수 있습니다.(가장 자주 쓰는 형태)
arr.forEach(item => {
	// item 변수는 배열 각각의 요소들을 순환합니다.
	console.log(item);
});

// forEach 함수의 원형 그대로 사용하기
arr.forEach(function(item, index, arr2) {
	// item : 배열 각각의 요소
	// index : 배열 인덱스
	// arr2 : 배열 자체(반복문 돌리는 배열을 통째로 참조해야할 경우 사용)
});

 

forEach예제)

 

HTML / CSS

<style>
    * {padding: 0; margin: 0; box-sizing: border-box;}
    a {text-decoration: none; color: inherit;}
    li {list-style: none;}

    .gnb > ul {display: flex;}
    .gnb > ul > li {padding: 0 10px;}
    .gnb > ul > li a {display: inline-block; background: #ccc; border: 1px solid #333; padding: 10px 30px; margin-bottom: 10px;}
    .sub{display: none; transition: 0.3s;}
    .sub.on {display: block;}
  </style>


<div class="wrap">
    <nav class="gnb">
      <ul>
        <li class="open"><a href="#">메뉴1</a>
          <ul class="sub">
            <li class="slideMenu">메뉴1내용</li>
            <div class="close">X</div>
          </ul>
        </li>
        <li class="open"><a href="#">메뉴2</a>
          <ul class="sub">
            <li class="slideMenu" >메뉴2내용</li>
            <div class="close">X</div>
          </ul>
        </li>
        <li class="open"><a href="#">메뉴3</a>
          <ul class="sub">
            <li class="slideMenu">메뉴3내용</li>
            <div class="close">X</div>
          </ul>
        </li>
      </ul>
    </nav>
  </div>

window.onload = function() {
  const Gnb = document.querySelectorAll(".gnb>ul>li");
  console.log(Gnb);
  Gnb.forEach((item)=>{
    console.log(item);
    const open = item.querySelector('.open>a');
    const sub = item.querySelector('.sub');
    const close = item.querySelector('.close');

    open.addEventListener('click', () => {
      sub.classList.toggle('on'); //open이라는 클래스를 눌러서 안에 콘텐츠sub를 없앨 수 있음
    });
  
    close.addEventListener('click', () => {
      sub.classList.toggle('on'); // //열린 콘텐츠sub클래스를 눌러서 안에 콘텐츠sub를 사라지게 할 수 있음
      });
  });
};

for..in함수의 구문

for..in문은 객체의 속성을 반복하기 위해 열거형과 함께 사용되며 ES6에 도입되었다.

var arr = ["1", "2", "3"];
for (var item in arr) {
	// item : 배열 각각의 요소
}

for함수의 구문

var arr = ["1", "2", "3"];
for (var i = 0; i < arr.length; ++i) {
	// index를 지정하는 전통적인 for문
}

for..of함수의 구문

for..of문 또한 ES6에 도입되었으며, 반복 가능한 객체만 사용할 수 있다.

반복 가능한 객체 목록 - 배열 / 문자열 / Set 객체 / map객체 / NodeList

반복적이지 않은 요소를 넣을 경우, TypeError가 발생함

let arr = [10, 20, 30];
for (let item of arr) {
	// item: 배열 각각의 요소
}

---

 

 

forEach로 예제 풀어보기

1) 배열 요소 출력하기

const numbers = [1,2,3,4,5];

numbers.forEach(function(number){
	console.log(number);
});

 

2) 배열 요소를 합산하기

const numbers = [1,2,3,4,5];
    let sum = 0;
    numbers.forEach(function(number){
      sum += number;
    });
    console.log(sum)

1+2+3+4+5

3) 특정 조건을 만족하는 배열 요소

const numbers = [10, 25, 30, 45];

let foundNumber = null;

numbers.forEach(function(number) {
    if (number > 30) {
        foundNumber = number;
    }
});

console.log(foundNumber); // 출력: 45

 

4) 배열 요소들을 문자열로 변환하여 새로운 배열 생성

const names = ['Alice', 'Bob', 'Charlie'];
const greetings = [];

names.forEach(function(name) {
    greetings.push(`Hello, ${name}!`);
});

console.log(greetings); // 출력: ['Hello, Alice!', 'Hello, Bob!', 'Hello, Charlie!']

 

5) 배열 요소들의 특정 속성을 변경하기

const people = [
    {name: 'Alice', age: 30},
    {name: 'Bob', age: 25},
    {name: 'Charlie', age: 35}
];

people.forEach(function(person) {
    person.age += 5; // 모든 사람의 나이를 5살씩 증가시킴
});

console.log(people);
/* 출력:
    [
        {name: 'Alice', age: 35},
        {name: 'Bob', age: 30},
        {name: 'Charlie', age: 40}
    ]
*/

---

for, forEach의 차이점

-동기와 비동기 : for문은 동기방식이기 때문에 오류가 생기면 위치 이후의 작업이 동작하지 않고 멈춘다. 반면 forEach문은 비동기 방식이기 때문에 멈추지 않고 동작함

 

-성능차이 : forEach문은 향상된 for문이라고 칭하며, 가변적인 배열이나 리스트 크기를 구할 필요가 없어 복잡한 반복문에 적합하고, 인덱스를 생성하는 for문보다 속도가 빠르다.

 

-forEach의 단점 : 반복문 내에서 배열이나 리스트 값을 수정/추가가 불가능하며 읽기 전용으로 불러오기 때문에 데이터 수정이 불가능하다. 또한 배열을 역순으로 탐색할 수 없고 순서대로 정보를 가져오기 때문에 역순으로 가져올 방법이 없다는 단점이 있다.