반응형
1. for() 반복문
let array = ['포도', '사과', '바나나', '망고'];
for(let i = 0; i < array.length; i++) {
console.log(array[i]); // 포도, 사과, 바나나, 망고
}
2. for in()
자바스크립트는 배열이나 객체를 더욱 쉽게 다룰 수 있도록 for in 반복문을 제공한다.
위 for 문의 예제는 아래와 같이 바꿔 사용할 수도 있다.
let array = ['포도', '사과', '바나나', '망고'];
for( let i in array ) {
console.log(array[i]); // 포도, 사과, 바나나, 망고
}
3. forEach()
foreach 반복문은 오직 Array 객체에서만 사용가능한 메서드입니다. (ES6부터는 Map, Set 등에서도 지원됩니다)
배열의 요소들을 반복하여 작업을 수행할 수 있고 foreach 구문의 인자로 callback 함수를 등록할 수 있고, 배열의 각 요소들이 반복될 때 이 callback 함수가 호출됩니다. callback 함수에서 배열 요소의 인덱스와 값에 접근할 수 있습니다.
let items = ['item1', 'item2', 'item3'];
items.forEach(function(item) {
console.log(item); // 출력 결과: item, item2, item3
});
형태 : targetArr.forEach(callback(currentValue,index,array),thisArg)
- callback 함수는 3가지 인수를 받을 수 이 있으며 필수 요소는 currentValue(처리할 현재 값)이다.
index, array, thisArg는 생략 가능.
- Array.prototype.forEach() 즉, 배열 메소드로서, 배열의 각 요소에 주어진 함수(callback)를 한번씩 실행한다.
- undefined를 반환한다.
- forEach() 자체는 배열을 변경하지 않는다. (=immutable, 메모리 영역에서 변경 불가)
단, callback 함수에 작성된 코드에 따라 배열 변경 가능.
- for 반복문으로 표현할 수 있다면 forEach()로도 표현 가능하다.
반응형
'프론트엔드 > Javascript' 카테고리의 다른 글
[Javascript] 자바스크립트 기초 배열 문법 활용하기 (0) | 2019.12.24 |
---|---|
[Javascript] 자바스크립트 변수 / 변수명 활용하기 (0) | 2019.12.24 |
[Javascript] 이벤트 버블링(bubbling)과 캡처링(capturing) 차이점 (0) | 2019.12.19 |
[Javascript] strict mode를 사용해야 하는 이유 (0) | 2019.12.19 |
프론트앤드가 알아야 할 용어들 :: 라이브러리 / 프레임워크 / API / UI / UX (0) | 2019.12.17 |