자바스크립트 반복문

저번에 블로그를 작업하면서 발생했던 Next.js 의 On-Demend-Revalidation 관련 이슈를 경험하면서 반복문에 대해서 포스팅을 진행해야겠다는 생각이 들어 간단하게 정리 해보려고 한다.

for

for 문은 다른 언어에도 사용되는 가장 기본적인 반복문이다.

조건문이 false 가 될 때까지 반복하며, 증감문을 통해 초기문의 값을 변경시켜 반복문을 종료시키는 과정으로 진행된다.

기본 예제 코드에는 증감문에 i++ 을 적용하여 모든 값을 실행하게 되어있지만 i += 2 를 통해 2의 배수 간격으로도 반복문을 실행시킬 수도 있다.

continue 를 통해 코드 실행을 생략할 수 있고 break 를 통해 반복문을 종료할 수 있다.

while 문은 조건문이 true 인 경우에 실행된다.

while 문 밖에 조건문에서 사용되는 변수(n)를 생성한 다음 while 문을 실행하면서 n 의 값을 변경해주면 조건문 값이 false 로 변경되어 반복문을 종료할 수 있다.

while 문도 break 를 통해 반복문을 종료할 수 있다.

do…while 문은 while 과 비슷하지만 while 문과 다르게 무조건 한번은 실행된 뒤에 조건문을 체크한다.

do…while 문도 break 를 통해 반복문을 종료할 수 있다.

for…in 문은 객체를 순회하는 경우 사용한다.

for…in 을 통해 프로퍼티의 key 값과 해당 key 값에 해당하는 value 값을 가져올 수 있다.

또한 프로토타입 체인을 통해 상속받은 항목들도 포함해서 순회한다.

forEach() 메서드은 배열을 순회하는 경우 사용된다.

일반적으로 배열을 순회할 수도 있지만 forEach() 메서드의 2번째 인자에 this 를 사용할 값을 적용하여 사용할 수도 있다.

map() 메서드는 배열을 순회할 때 사용된다.

for 문, forEach 문과 비슷한 것 같지만, map() 메서드는 콜백함수의 return 값을 통해 새로운 배열을 생성한다는 차이점이 있다.

또한 기준이 되는 배열을 통해 값을 변경하여 새로운 배열을 생성할 수도 있다.

map() 메서드도 2번째 인자에 this 로 사용할 값을 적용하여 사용할 수 있다.

for…of 문은 반복 가능한 객체(iterable, 이터러블)를 순회하는 경우 사용된다.

간단하게 이터러블을 설명하자면 이터레이터를 반환하는 Symbol.iterator 라는 메서드를 프로토타입을 통해 상속받거나 직접 구현해서 추가하는 것을 통해 객체 안에 Symbol.iterator 메서드가 존재하는 객체를 의미한다.

Array, String, Map, Set 등의 반복 가능한 객체인 이터러블 객체를 순회할 수 있다.

💡

jsben 사이트에서 테스트를 진행하였습니다.

실행을 여러번 할 때마다 약간의 차이는 있지만 평균적으로 while, do…while, for 문이 가장 빨랐고 for…in 이 가장 느린 것을 확인할 수 있었다.

간단하게나마 자바스크립트에서 사용되는 반복문에 대해서 정리를 해봤다.

정리를 하면서 여러 가지 반복문이 헷갈렸던 부분들에 대해서 어느 정도 해결이 된 것 같다.

그리고 map() 메서드 이외에도 filter() 나 reduce() 메서드가 존재하지만 추후 ES6 배열 메서드 관련해서 따로 포스팅을 진행할 것이기 때문에 해당 포스팅에서는 정리하지 않았다. 배열 메서드 포스팅에서도 성능 체크를 해볼 계획이다.

참고