자바스크립트 반복문을 알고 있나요?

반복문 이란?

반복문은 같은 동작을 여러번 실행하기 위해 사용하는 것입니다. 반복문을 사용하게 된다면 불필요하게 여러 명령을 만들 필요 없이 반복 실행을 시킬 수 있습니다. 그만큼 소스도 깔끔해지고 실행도 빨라진답니다.

 

1. for문

자바스크립트에서 제일 많이 사용하는 for문은 조건에 들어가는 값이 일정하게 커지면서 명령을 반복 실행할 때 사용합니다. for 문에서는 몇 번 반복했는지 기록 하기 위해 카운터를 사용하고 for문으 첫 번째 항에서 카운터 변수를 지정합니다.

 

기본형 : ( 초깃갑; 조건; 증가식) {....}

 

여기서 초깃값은 몇번 반복할지 지정하기 위해 카운터 변수를 사용합니다. 초깃값은 0이나 1부터 시작합니다. 

조건은 문장을 반복하기 위해 체크할 조건 부분입니다. 이 조건을 만족해야 for 문에 있는 명령을 반복할 수 있습니다.

증가식은 문장을 실행한 후 카운터 변수를 증가 시키는 부분입니다. 보통 카운터 값을 하나 더 증가시키는 용도로 사용하고 있습니다.

 

2.forEach 문

forEach 문은 for문에서 좀 더 편리한 사용을 위해서 사용하는 것입니다.

 

for(const key in 객체){...반복 수행 코드...}

단순히 배열의 요소에서는 큰 차이를 나타낼 수는 없습니다. 하지만 프로그램 중에서 배열의 길이가 바뀌어 정확하게 배열의 크기르르 알 수 없을 때, 또는 배열의 요소를 가져와서 함수를 실행해야 할 때 편리하게 사용할 수 있습니다. 이 때 함수를 쉽게 이해하자면 '함수는 여러 명령을 묶어 놓은것'이라고 생각할 수 있습니다. arr.forEach()의 인자로 함수를 전달하면 배열의 모든 요소를 순회할 때, 함수의 인자로 요소를 전달합니다.

 

 

3.for...in 문

for문과는 전혀 다른 형태의 반복문입니다. for...in문은 반복해서 객체의 값을 가져와서 처리할 수 있게 합니다. 배열도 객체이므로 배열에 for...in문을 사용합니다. for...in 문은 객체의 키만 가져 올 수 있으며 값에 접근하기 위해서는 [ ] 대괄호를 사용합니다.

 

for (변수 in 객체) {객체 모든 열거 할 수 있는 프로퍼티의 개수 만큼 반복적으로 실행하고자 하는 실행문; } 

 

 

4.for...of 문

문자열이나 배열과 같은 반복 가능 자료에서 사용하는 반복문입니다.  forEach문을 사용해서 작성했던 소스 코드를 다음과 같이 for...of 문으로도 작성할 수 있습니다. 

 

 for(const item of 이터러블){...반복 수행 코드...}

이미지출저  

 

for문을 이용하여 짝수 홀수 구분 해보기

처음 화면을 킬 때 등장하는 숫자를 입력하세요 창을 열 수 있었던 코드입니다.

이 프로그램에서 제일 먼저 확인해 봐야 할것은 사용자가 [취소]버튼을 클릭했는지 확인하고 클릭하지 않을 경우에 짝수인지 홀수인지 체크를 해야 하는데요 

 

프롬포트 창에서 [취소] 버튼을 클릭하면 변수에는 null이 저장됩니다. null이 아닌경우 사용자 입력값을 숫자로 변환합니다.

그리고 숫자가 짝수인지 홀수인지 구분하는 방법은 숫자를 2로 나누고 나머지가 0인지 여부를 체크하고 if문자 조건문을 작성하면 됩니다.