Javascript forEach 배열의 요소를 순서대로 처리

코딩배우기

Javascript forEach 배열의 요소를 순서대로 처리

탁이 2021. 6. 22. 10:39

Array 객체의 forEach 메소드를 사용하면 배열에 포함되는 요소를 차례로 꺼내 콜백 함수에 전달하여 처리 할 수 있습니다. 이번 포스트에서는 JavaScript 배열의 요소를 순서대로 검색하는 방법을 설명하겠습니다.

forEach 메소드 사용
배열의 반복에서 forEach 메소드와 for 문의 차이

forEach 메소드 사용

Array 객체의 forEach 메소드를 사용하면 배열에 포함되는 요소를 차례로 꺼내 작성한 콜백 함수 전달하여 처리 할 수 있습니다. 형식은 다음과 같습니다.

배열 이름 .forEach (콜백 함수 (요소 값))
배열 이름 .forEach (콜백 함수 (요소 값 요소의 인덱스))
배열 이름 .forEach (콜백 함수 (요소 값 요소의 인덱스 배열))

forEach 메서드는 배열에 포함되는 요소를 처음부터 순서대로 꺼내 콜백 함수를 호출합니다. 콜백 함수는 현재 배출 된 요소의 값 요소의 인덱스, 그리고 배열 자체를 인수 해 불려갑니다. 인수의 요소의 인덱스 및 배열은 필요 없으면 생략 가능합니다. 다음 예제를보십시오.

let number = ['일', '이', '삼'];

fruit.forEach (function (element) {
  console.log (element);
});

>> 일
>> 이
>> 삼

배열에 포함 된 요소의 값 인 '일', '이', '삼'를 차례로 꺼내 forEach 메소드의 인수에 작성한 콜백 함수를 호출합니다. 또한 콜백 함수는 화살 함수식을 사용하여 다음과 같이 설명 할 수 있습니다.

let number = ['일', '이', '삼'];

fruit.forEach (element => console.log (element));

>> 일
>> 이
>> 삼

요소에 값 이외에 요소의 인덱스와 배열을 콜백 함수의 인수로 받아 처리하는 경우는 다음과 같습니다.

let number = ['일', '이', '삼'];
fruit.forEach(function (element, index, array) {
    console.log('Index:' + index);
    console.log('Element:' + element);
    console.log('Array:' + array);
});

>> Index : 0
>> Element : 일
>> Array : 일, 이, 삼
>> Index : 1
>> Element : 이
>> Array : 일, 이, 삼
>> Index : 2
>> Element : 삼
>> Array : 일, 이, 삼

배열의 반복에서 forEach 메소드와 for 문의 차이

배열의 요소를 차례로 꺼내 처리하는 방법으로 forEach 메소드를 사용 이외에 for 문이나 for ... ob을 사용할 수 있습니다. 먼저 forEach 메소드를 사용하는 경우는 다음과 같이 설명 했는데요.

let alpha = ['일', '이', '삼'];

alpha.forEach (function (element) {
  console.log (element);
});

>> 일
>> 이
>> 삼

for 문을 사용하면 인덱스를 반복 처리로 변화시켜 배열의 요소를 순서대로 확인하여 처리합니다.

let alpha = ['일', '이', '삼'];

for (let i = 0; i <alpha.length; i ++) {
  console.log (alpha [i]);
}

>> 일
>> 이
>> 삼

for ... ob 문장을 배열에 사용하면 배열의 요소를 차례로 꺼내 변수에 저장합니다.

let alpha = ['일', '이', '삼'];

for (let element of alpha) {
  console.log (element);
}

>> 일
>> 이
>> 삼

어떤 형식으로도 같은 결과가됩니다. 그러나 배열 요소의 인덱스가 연속하지 않고 중간에 존재하지 않는 요소가있는 경우에는 다른 결과입니다. forEach 메소드는 존재하지 않는 요소에 대해서는 아무것도 행해지 지 않는 반면 for 문에서는 존재하지 않는 요소에 대해서도 같은 방식으로 처리합니다.

let alpha = ['일', '이', '삼'];

alpha.forEach (function (element) {
  console.log (element);
});
>> 일
>> 이
>> 삼

for (let i = 0; i <alpha.length; i ++) {
  console.log (alpha [i]);
}
>> 일
>> 이
>> undefined
>> undefined
>> 삼

for (let element of alpha) {
  console.log (element);
}
>> 일
>> 이
>> undefined
>> undefined
>> 삼

또한 forEach 메소드를 사용하는 경우 break 문을 사용할 수 없기 때문에 반복 도중에 멈출 수 없습니다. for 문이나 for ... ob 문장의 경우는 break 문을 사용하여 반복을 중단시킬 수 있습니다. 다음 예제에서는 for ... ob 문에서 break 문을 사용하고 있습니다.

let alpha = ['일', '이', '삼'];

for (let element of alpha) {
  console.log (element);
  if (element === '이') {
    console.log ( 'End');
    break;
  }
}
>> 일
>> 이
>> End

사용되는 용도에 따라 배열에 대한 반복 처리 방법을 선택해서 사용하면 되겠습니다.

저작자표시 비영리 변경금지

현재글Javascript forEach 배열의 요소를 순서대로 처리

탁이로그