forEach() 함수 사용하기

forEach()함수

배열 함수 forEach()는 for문에서 사용하던 순번과 배열의 크기 변수를 사용하지 않는다. 배열의 처음부터 마지막 순번까지 모두 작업하는 경우 forEach()문을 사용하는 것이 간편하다. 하지만 특정 순번에서만 배열 값을 사용하거나 변경해야 하는 상황이라면 for문을 사용해야 한다.

 

예제코드

App.js

import React from 'react';
import './App.css';
import ForEach from './R014_ForEach';

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>css 적용하기</p>
      <ForEach/>
    </div>
  );
}

export default App;

R014_ForEach.js

import React, {Component} from "react";

class R014_ForEach extends Component {

  componentDidMount() {
    var For_Arr = [3,2,8,8];
    var For_newArr = [];

    for (var i = 0; i < For_Arr.length; i++){
      For_newArr.push(For_Arr[i]);
    }
    console.log("1. For_newArr : ["+For_newArr+"]");

    var ForEach_Arr = [3,3,9,8];
    var ForEach_newArr = [];
    ForEach_Arr.forEach((result) => {
      ForEach_newArr.push(result);
    })
    console.log("2. ForEach_newArr : ["+ForEach_newArr+"]");
  }

  render(){
    return(
      <h2>[THIS IS ForEach]</h2>
    )
  }
}

export default R014_ForEach;

 

코드 해설

• for문에서는 순번 변수(i)와 배열의 크기(For_Arr.length)가 필요하다.
  • 순번을 0부터 1씩 증가시킨다.
  • 배열의 크기보다 1이 작은 값이 될 때까지 새로운 함수(For_newArr)에 기존 함수 값을 넣는다.(push)
• forEach 함수에서는 순번과 배열의 크기 정보를 사용하지 않는다.
  • 0부터 배열의 크기만큼 반복하며 순서대로 배열 값을 반환한다.
  • 반복문이 실행될 때마다 콜백 함수로 결괏값(result)을 받아 새로운 함수(ForEach_newArr)에 넣는다.

실행결과