foreach는 자바스크립트 배열의 반복메서드이다. 요소의 처음부터 끝까지 순환하며 값에 접근한다. for문과 같이 반복을 위한 코딩의 귀찮은 것들을 줄여준다. foreach 반복문을 사용하면 배열요소의 index, value, array 의 인자값으로 배열의 요소를 쉽게 찾고 데이터를 가공할 수 있다.
자바스크립트 배열 반복 foreach 메서드 사용
Using javascript iteration foreach method
자바스크립트 배열의 값을 가공하는 것은 귀찮기도 하고 번거롭다.
대표적인 반복문인 for 반복문을 사용해도 되지만 문법적으로 귀찮다.
자바스크립트는 반복문을 편하게 할 수 있는 반복 메서드들을 제공한다.
foreach 반복문은 아마 가장 많이 사용하는 것이 아닐까 한다.
foreach 반복 메서드
foreach는 배열을 반복할 때 사용하기에 요긴하다.
배열의 모든 요소를 순환한다.
foreach 메서드에서 제공하는 파라미터는 3가지이다.
value, index, array 이다.
- value : 배열의 요소
- index : 배열 요소의 인덱스
- array : 배열 전체 값
이 들 세가지 요소는 foreach 반복문에서 제공하는 것이기도 하다.
foreach의 사용법은 간단하다.
Array.foreach(fnCallbackMethod);
function fnCallbackMethod(value, index, Array) {
// 코드
}foreach 반복문에 들어가는 인자값은 콜백메서드명이다.
콜백메서드명을 지정하고 콜백메서드를 만들어주면 된다.
콜백메서드에 제공하는 인자값을 작성해 주고 코드를 마들어 주면 된다.
코드 샘플
위의 사용법으로 자바스크립트 예제를 만들어 본다.
배열을 하나 만들고 foreach 반복문을 그대로 사용하면 된다.
콜백메서드명은 자신이 원하는 이름으로 변경해도 된다.
<!DOCTYPE html>
<html>
<body>
<script>
console.log('----------')
let vArray = [9, 80, 700, 6000, 50000];
vArray.forEach(fnLoopArray);
function fnLoopArray(value, index, array) {
console.log(
`index : ${index}, value : ${value}, array : [${array}]`
);
}
console.log('----------')
</script>
</body>
</html>사용법에 나타난 것과 크게 다르지 않다.
결과를 확인하기 위해 자바스크립트 리터럴 문자열을 사용하였다.
결과 화면을 보자.
인덱스나 값이나 배열이나 for 반복문을 사용할 때보다 간략하고 편하다.
'programming > javascript' 카테고리의 다른 글
| 자바스크립트 배열 반복 filter 메서드 사용 Using javascript iteration filter method (0) | 2022.01.10 |
|---|---|
| 자바스크립트 배열 반복 map 메서드 사용 Using javascript iteration map method (0) | 2022.01.08 |
| 자바스크립트 배열 최대값 최소값 구하기 Find Max and Min value in Javascript Array (0) | 2022.01.04 |
| 자바스크립트 숫자 배열 비교 함수 정렬 Sorting Javascript Number Array Compare Function (0) | 2022.01.03 |
| 자바스크립트 숫자 배열 정렬 Sorting Javascript Number Array (0) | 2022.01.02 |
댓글