UX·UI - FrontEnd Dev. Story

프론트엔드/Javascript

[Javascript] 반복문 for() / for in() / forEach()로 구문/문법 표현하기

클로이겅쥬 2019. 12. 20. 13:48
반응형

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()로도 표현 가능하다.

 

 

 

 

 

 

반응형