자바스크립트 반복문 알아보기

 

반복문이란

반복문은 말그대로 같은 동작을 여러 번 실행하기 위해 사용하는 문입니다.

반복문을 사용하면 불필요하게 여러 명령을 늘어놓지 않아도 명령을 반복 실행할 수 있습니다.

특정 구문을 여러번 반복해서 처리하는 방법을 이야기 합니다.

이를 구현하기 위해 자바스크립트에서는 for 나 while 문이 존재합니다.

 

for문

javascript에서 가장 많이 사용하는 반복문은 for문 입니다.

for문은 자체적으로 초기식, 표현식, 증감식을 가지고 있습니다. 

for문은 조건에 들어가는 값이 일정하게 커지면서 명령을 반복 실행할 때 편리합니다. 

기본형
for (초기식; 조건식; 증감식){
	조건식의 결과가 참인 동안 반복적으로 실행하고자 하는 실행문
}

ex)
for (i=0; i<10; i++){
	console.log(i) 
}

* (주의) 변수 선언 시, const를 쓰면 값 변경이 불가하여 에러가 발생하니 주의하여야 합니다.

 

forEach문

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

프로그램 중에서 배열의 길이가 바뀌어 정확하게 배열의 크기를 알 수 없을 때. 또는 배열의 요소를 가져와서 함수를 실행할 때 forEach문을 편리하게 사용할 수 있습니다.

일반적인 for문보다 forEach문이 내장함수 이기 때문에 속도가 더 빠릅니다.

 

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

배열명.forEach(function(i){
	console.log(i);
});

예시)
const colors = ['red', 'green', 'blue'];

colors.forEach(function(color) {
  console.log(color);
});

// 출력: red, green, blue

 

for...in문

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

for in문에는 주의 사항이 있습니다.

1.배열에 반복문을 사용하는 경우 for...in문은 for...of문보다 처리 속도가 훨씬 느립니다.

2.배열의 요소에 일관성 없는 데이터가 존재하는 경우

 

객체의 모든 프로퍼티를 순회할 때는 for...in문 사용
for (const/let 프로퍼티 key를 나타낼 변수 선언 in 객체이름)

이미지 출처

 

for...of문

for of문은 문자열이나 배열과 가은 반복 가능자료에서 사용하는 반복문입니다. 

반복 가능한 객체(iterable)를 순회할 수 있도록 해줍니다.

Array, Map, Set, arguments 등이 해당됩니다.

variable :: 해당 객체의 값
object :: 반복문을 수행할 객체

이미지 출처