[JS] 반복문 종류 총 정리

AREUM·2022년 12월 24일

Javascript이론

목록 보기

5/10

내가 알아보고 공부한 반복문들의 종류들을 적어보도록 하겠다.

대부분 for문은 배열과 한 쌍이다.
비동기적인 방법을 사용해 api의 정보들을 json 형식으로 가져와 반복문으로 배열들의 요소에 접근, 순회, 호출을 해오기 때문에 그 값을 화면에 보여지게 만드는 것이다.

for문

가장 기본적인 방법이다.

const arr = ['하나', 2, 'Three', 4, 5, true];
for (let i = 0; i < arr.length; i++) {
 	console.log( `${i} : ${arr[i]}` ); 
}

for문은 반복횟수를 명확히 알고 있을때 주로 사용한다.
실행속도가 중요한 부분이면 for문이 사용된다. ( 가장 빠르다. )
ES5에 forEach 메소드가 추가되고 ES2015에 for..of구문이 추가된 후에는 잘 사용되지 않는다고 한다.
🌟🌟🌟 인덱스에만 접근을 한다 했을 때 사용한다고 한다.

❗️주의 해야 할 점❗️
변수 선언 시 const를 사용하면 값을 변경할 수 없으므로, 에러가 발생하게 된다.

while문

for문은 배열에 많이 사용되지만,
🌟🌟🌟 while문은 조건에 따라 반복횟수를 결정해야할때 주로 사용된다.
멈출 수 있는 무한반복문을 사용하는 경우에 조건이 true일 때 반복문이 실행된다.
( 무한 루프나 특정 조건에 만족할 때까지 반복해야하는 경우 )

for .. in문

객체( Object )의 프로퍼티 키 열거 전용

const obj = {
	name: 'eille',
  	age: 30
}

for (const key in obj) {
	// 반복 실행 코드 ...
  	console.log( `${key} : ${obj[key]}` )
  	// name : eille 
  	// age : 30
}

순서가 딱히 중요하지 않는 배열이나 객체를 반복, 순회하는데에 사용됩니다.
객체의 속성을 확인 할 수 있다는 특징을 가지고 있다.
디버깅에 도움이 된다.

❗️ 주의할 점 ❗️
정상적으로 실행되지만, 배열은 for..in문에 사용할 경우 두가지 주의사항이 있다.
1. 배열에 반복문을 사용하는 경우
( for..in문은 for..of문 보다 처리속도가 훨씬 느리다 )
2. 배열의 요소에 일관성 없는 데이터가 존재하는 경우

🌟 객체의 프로퍼티의 key, value에 접근 한다고 한다면,
for..in 보다는 Object.keys(), Object.value(), Object.entries()를 사용하는 것이 좋을거 같다.

for .. of문

iterable( 이터러블 ) 순회 전용

🌟🌟🌟 배열의 value값에 접근할 때 사용된다.
for..of문은 본문에서 continue, break, yield 제어흐름을 사용 가능하다
for..of문은 외부에 선언된 변수의 값을 덮어씐다.
덮어씌기를 원치 않는다면 for..of문 내부에 사용되는 변수의 키워드를 let으로 선언해야한다.

for..of문의 기본 문법이다.

const arr = [10, 20, 30];
for ( const item of arr ) {
	console.log(item)	// 10, 20, 30 출력된다.
}

iterable 이라는 단어가 생소 하다.
이 참고문서1, 참고문서2를 확인 했고, 이부분은 따로 공부하고 정리하면서 올려보도록 해야겠다.

반복 가능한 객체 목록 ( Object 해당 ❌ )

배열
문자열
Set 객체와 Map 객체
NodeList

( ❗️ 반복적이지 않는 요소가 for..of 문을 사용할 경우 TypeError 발생 ❗️ )

: iterable은 반복 가능이라는 뜻을 가지고 있다.
/* iterable 패턴 */ 이라는 것이 있는데 찾아보니 구현방법은 노출이 되지 않고,
하나의 집합체안에 들어있는 모든 항목에 접근할 수 있게 해 주는 방법을 제공해 주는 패턴이라고 한다.
집합체내에서 어떻게 처리되는지는 몰라도 그 안에 들어있는 항목들에 대해 반복적으로 작업할 수 있는 것이라고 한다.
class기반 인거 같고 **프로토타입**을 집중공약으로 공부해봐야 겠다.
Generator 함수 `yield`를 이용한 표현식을 이용해 반복적인 객체를 만들어서 **모듈화**하고 비동기 작업을 할 때도 유용한 것 같다.

갑자기 생각이 났는데,
전에 프로젝트를 하다가 index와 value의 접근하려고 for..of를 사용했던 적이 있는데, iterable 관련 TypeError에러가 발생했었다.
그래서 forEach와 for를 사용하는 방법을 찾아서 해결하였다.

그 때는 알지 못했지만 지금 추가적으로 알게 된 점 으로, 만약 for..of문으로 배열 인덱스를 사용하는 방법을 굳이 굳이 찾자면 있지 않을까 ? 해서 구글링을 해보았다.
그 방법을 알게되었다.
예제로 한번 보자.

const arr = ['하나', 2, 'Three', 4, 5, true];

/* keys */
const keyArr = arr.keys();
for(const k of keyArr) {
	console.log(`[${k}] = ${keyArr[k]}`);
}

/* entries */
const entriesArr = arr.entries();
for(const [index, e] of entriesArr) {
	console.log(`[${index}] = ${e}`); 
}

배열의 key, value에 접근이 가능한 메소드를 알게 되었다.
Array.prototype.keys() Array.prototype.entries()를 활용하는 방법이다.

👉🏻 이터레이터를 반환하는 두 메소드를 통해 for..of에서도 간접적으로 index를 사용할 수 있다.

그냥 궁금증이 있어서 알아보았고, 그냥 for문, forEach()를 사용하자.

forEach

forEach의 문법은 이렇다. 메소드 형식으로 사용된다.

array.forEach( callback ( currentElement, index, array ) { } );

최대 3개의 인수를 가지는 콜백함수가 존재한다.
: 배열을 순회하면서 배열의 인덱스가 필요한 경우에 사용된다.

매개변수

currentElement: 현재 배열의 요소
index: 현재 배열 요소의 인덱스
array: 반복되는 배열(forEach문을 호출한 배열)

const arr = ['하나', 2, 'Three', 4, 5, true];

arr.forEach(function(item){
	arrCopy.push(item);
});

❗️forEach 특징❗️

🌟🌟🌟 함수를 넘겨서 사용할 때 forEach가 사용된다.

forEach문은 인덱스를 접근할 수 있는 방법이 존재한다.
또 다른 차이점은 forEach문 첫 번째 인수인 현재 배열의 요소는 로컬 범위(Local Scope)이다.
외부와 내부에 선언된 값은 저장소가 다르다.
forEach문 외부에서 선언된 변수의 값은 변경되지 않는다.

이해가 어렵다면 for..of의 특징과 비교하면 이해가 된다.

💡 총 정리 💡

속도는 빠른순으로 for 👉🏻 forEach 👉🏻 for of 순이다.
이 블로그를 보면 이렇게 속도가 나오는 예시를 볼 수 있다.

for 👉🏻 인덱스에만 접근을 한다 했을 때 사용
while 👉🏻 조건에 따라 반복횟수를 결정 해야할 때
for..in 👉🏻 객체( Object ) 의 key접근
for..of 👉🏻 value에 접근 ( 각 요소 반복, String에서도 가능 )
4-1. Array.entries()와 같이 사용 👉🏻 index, value을 받을 때
forEach 👉🏻 함수 넘겨서 사용할 때