자바스크립트의 반복문에 대해서

자바스크립트의 반복문에 대해서

 

 

 

 

반목문을 사용하면 

여러번 실행해야할 것들을 줄일 수 있어 

불필요한 명령을 늘어놓지 않아도 됩니다.

그럼 소스도 더욱 깔끔해져서 프로그램 실행도 더 빨라지겠죠?

 

그럼 , for문과 forEach, for in, for of 반복문에 대해 알아보겠습니다.

 

 

 

 

for문

자바스크립트에서 가장 많이 사용하는 반복문은 for문입니다.
for문은 조건에 들어가는 값이 일정하게 커지면서 명령을 반복 실행할 때 편리합니다.

 

for (초깃값; 조건; 증가식) { ... }

 

 

 

1. 초깃값 : 몇 번 반복할지 지정하기 위해 카운터 변수를 사용하는데, 이 항목에서 카운터 변수를 선언하고 초기화합니다. 초깃값은 0이나1부터 시작합니다.
2. 조건 : 문장을 반복하기 위해 체크할 조건 부분입니다. 이 조건을 만족해야 for 문에 있는 명령을 반복할 수 있습니다.
3. 증가식 : 문장을 실행한 후 카운터 변수를 증가시키는 부분입니다. 보통 카운터 값을 하나 더 증가시키는 용도로 사용합니다.

• 순서를 헷갈리기 쉽다
• 초깃값은 처음에 한번만 할당
• 조건 체크와 명령 실행, 증가식을 계속 반복한다고 기억
• length 프로퍼티를 살펴보면 배열에 몇 개의 요소가 있는지 알 수 있음

 

 

 

for문을 사용해 배열값 가져오기

const students = ["Park", "Kim", "Lee", "Kang"];

for (let i = 0; i < students.length; i++) {
	document.wite(`${students[i]}. `);
}

 

 

반복되는 순서를 차례대로 계산해 보면 다음과 같습니다.

할 일	소스	결과
초깃값 실행	i = 0	i = 0
조건 체크	i < students.legth	ture
실행	document.wtite(${students[ i ] . '};	"Park"
카운터 증가	i ++	i = 1
조건 체크	i < students.legth	ture
실행	document.wtite(${students[ i ] . '};	"Kim"
카운터 증가	i ++	i = 2
조건 체크	i < students.legth	ture
실행	document.wtite(${students[ i ] . '};	"Lee"
카운터증가	i ++	i = 3
조건체크	i < students.legth	ture
실행	document.wtite(${students[ i ] . '};	"Kang"
카운터 증가	i ++	i = 4
조건 체크	i < students.legth	false
for문 빠져나옴

 

 

forEach 문

앞에서 for문을 사용해 배열의 값을 가져왔는데, 배열에서는 forEach 문을 사용해서 좀 더 편리하게 반복할 수 있습니다.

• 보기엔 for문가 forEach문 사이에 큰 차이가 없다
• 배열의 길이가 바뀌어 정확하게 배열의 크기를 알 수 없을 때, 또는 배열의 요소를 가져와 함수를 실행해야 할 때 forEach 문을 편리하게 사용할 수 있다.

배열명.forEach(콜백 함수) { ... }

 

 

 

 

 

for...in문

배열에서만 반복되는 반복문이 forEach문이라면 for...in문은 반복해서 객체의 값을 가져와 처리할 수 있게 합니다.

 

• 객체의 키만 가져올 수 있다
• 해당 키의 값에 접근시 대괄호를 사용

for (변수 in 객체) { ... }

 

 

 

 

 

for...of 문

• 문자열이나 배열과 같은 반복 가능
• 앞에서 forEach 문을 사용해서 작성했던 소스 코드를 for...of 문으로도 작성가능

 

 

 

 

 

짝수와 홀수를 구별하는 프로그램

See the Pen Untitled by hyunmijin (@hyunmijin) on CodePen.