JavaScript 입문 : forEach( )함수 메소드

이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 

 

오늘은 자바스크립트 반복문 대신 사용할 수 있는 메소드를 기억해 보고자 합니다. 

 

지난 시간까지 숫자 야구 게임에 대해 공부를 해 보았는데 출제자가 낸 answer의 4자리를 문제를 푸는 사람이 입력한 value 값과 비교한 것이 숫자 야구 게임의 기본이었습니다. 

 

예를 들어 출제자가 낸 정답이 [4, 5, 6, 7]이고 입력한 value 값이 4689 면 1 스트라이크 1볼로 화면에 표시되겠죠.

 

이 부분에 대한 JS 내역은 다음과 같이 만들 수 있을 겁니다. 

상기 코드를 보면 for 문을 이용하여 answer.length 만큼 반복을 통하여 스트라이크와 볼의 갯수를 확인할 수 있습니다.

이 때 사용하는 for문 대신 forEach문으로 사용할 수 있는데 다음과 같이 활용할 수 있습니다.

 

▒ forEach(  )

 

영어 그대로 각각(each)을 for문을 통해 반복한다는 의미로 이해하면 될 듯 합니다. 

forEach(  )의 구성은 다음과 같습니다.

 

forEach((element, index) => {  });

 

즉, 요소와 인덱스로 구분이 되는데 answer = [4, 5, 6, 7]이면 forEach(  )를 사용하면 answer를 다음과 같이 인식합니다. 

(4, 0), (5, 1), (6, 2), (7, 3)

 

즉, 괄호안 앞에 숫자는 요소(element)이고 뒤의 숫자는 인덱스(index)입니다. 이 구조가 for문처럼 반복이 되는 성질을 가지고 있습니다. 

 

forEach를 활용하여 상기 코드를 바꾸면 다음과 같이 나옵니다. 함수메소드이기 때문에 함수 기본형을 사용합니다. 

forEach(  ) 함수 메소드 사용

 

코드를 설명하면 

 

answer에 직접 forEach(  ) 함수메소드를 연결 시킬 수 있는 장점이 있습니다. forEach(  ) 자체 반복 성질이 있기 때문에 for문이 필요 없게 되겠죠.

 

forEach의 기본이 (element, index)로 구성이 되는데 element와 index의 단어는 다른 코드와 중복되지 않게 여러가지로 바꿀 수 있는데 예를 들어 (ele, idx) 등 다양하게 변경이 가능합니다. 단, 해당 위치의 성질은 변하지 않습니다. 

 

indexOf(  )안에는 당연히 element 숫자가 들어가야 하고 strike 또는 ball을 비교하는 경우는 자리수 즉, index를 비교해야 합니다.