javascript 최적 반복문 패턴 for, while, for..in, for...of, foreach

javascript 최적 반복문 패턴 for, while, for..in, for...of, foreach

 

javascript 최적 반복문 패턴에 대해 알아보겠습니다.

 

일반적으로 반복문은 for를 사용하며, 아래와 같이 사용합니다.

 

const array = [1,2,3,4,5];
for(let i=0; i<array.length; i++){
	console.log(array[i]);
}

 

이는 반복할 때 마다 array.length에 접근하게 되어 속도 저하를 야기할 수 있습니다.

이를 개선하기위해 for문 내 변수를 선언하여 length로 초기화하고 사용할 수 있습니다.

 

const array = [1,2,3,4,5];
for(let i=0, n=array.length; i<n; i++){
	console.log(array[i]);
}

 

이렇게 하면 length를 한번만 구하고 반복문 동안 이 변수에 접근하여 속도를 개선 할 수 있습니다.

하지만 여기에도 추가적인변수가 활용되며(n),

일반적인 반복분은 length보다 0과 비교하는 것이 속도 측면에서 우수하기 때문에 한번 더 개선이 가능합니다.

 

const array = [1,2,3,4,5];
for(let i=array.length; i--;){
	console.log(array[i]);
}

 

이렇게 하면 0과 비교하고, n 변수를 사용하지 않기 때문에 최적의 속도를 낼 수 있습니다.

이를 while문을 사용하게 되면 아래와 같이 작성할 수 있습니다.

 

const array = [1,2,3,4,5];
let i = array.length;
while(i--){
	console.log(array[i]);
}

 

개인적으로는 while문 보다는 개선된 for문이 가독성 측면에서 좋아보이네요.

 

또한 javascript 에서는 for..in문과 for..of, foreach문을 제공합니다.

 

for...in과 for...of의 차이는 아래와 같습니다.

 

for...in 은 '객체'의 모든 열거 가능한 속성에 대해 반복

for...of 는 'Collection' 전용, 모든 객체가 아닌 Symbol.iterator 속성이 있는 컬렉션 요소에 대한 반복

 

for...in은 위의 설명과 같이 모든 열거 가능한 속성에 대해 반복합니다.예를들어, 아래와 같이 배열이 있을 때 배열의 값만 출력하고 싶은데 추가된 속성이 있으면내가 원치 않는 값이 출력되게 됩니다.

 

const numArray = [1,2,3,4,5];
numArray.addAttr = "style";
for(let i in numArray){
	console.log(i);
}

for(let i of numArray){
	console.log(i);
}

 

 

for...in은 i값이 배열의 index + 속성명까지, for...of는 i값이 배열의 값이 출력되는 차이를 보실 수 있습니다.

데이터타입도 문자와 숫자로 다르죠.

 

결론적으로 for...in문은 '객체' 의 반복이 필요한 경우, (hasOwnProperty를 통해 확인로직 필수!)

for...of문은 객체를 제외한 Array, Map, Set, String, TypedArray, arguments 등의 루프에 사용합니다.

 

for...in, for...of의 자세한 차이와 foreach 함수에 대해서는 아래의 Link를 참고하세요!

 

Link : https://aljjabaegi.tistory.com/354

자바스크립트 javascript for in , for of 의 차이

 

Link : https://aljjabaegi.tistory.com/314

javascript forEach 함수에 대해 알아보자. 자바스크립트 forEach 함수

 

결론적으로 단순 반복문을 사용할 때는 0으로 수렴하도록 구현을 하고

Object의 반복은 for...in

Colletion의 반복은 for...of

배열의 callback 함수가 필요하다면 foreach를 사용하는 것이 올바른 사용법이라고 할 수 있겠네요.