[배열] 10. for...of 반복문

// for...of
let influencer = ['suwonlog','small.tiger','Minam.ludens', 'CU_convenience24']

for (let i = 0; i < influencer.length; i++){
	console.log(influencer[i]);
}

for...of 반복문이 아니더라도 순서대로 인덱스가 있는 배열의 특징과 length 프로퍼티를 잘 활용하면 단순히 for문으로도 배열의 길이만큼 반복을 하면서 각 요소들을 다룰 수 있지만 for...of 반복문을 활용하면 훨씬 더 간결하게 코드를 작성할 수가 있습니다.

for (변수 of 배열){
 동작부분;
}

for...of의 구조는 객체를 반복할 때 사용했던 for...in문의 구조와 비슷하게 생겼는데 for 키워드 다음에 소괄호를 열어 변수를 선언한 다음 of를 써주고 그 다음 배열을 넣어주면 됩니다. for in 문과 다른 점은 배열부분에 객체가 들어가고 변수의 프로퍼티 네임이 할당되는 것과 달리 for ...of문은 배열의 요소가 할당이 된다는 것입니다.

for (let element of influencer) {
	console.log(element);
}

그렇기 때문에 이 구조를 가지고 위에 있는 for문과 똑같이 동작하게 하기 위해서는 이렇게 만들어 볼 수 있습니다.

일단 코드가 훨씬 간결해 진 것을 확인할 수 있습니다.

 

이렇게 하면 변수 i를 만들어서 배열의 길이를 조건식으로 확인하고 인덱스로 활용한 다음에 1씩 증가시켜 주는 과정이 필요없고 배열의 길이만큼 반복하는데 반복될 때마다 이 배령의 요소가 변수에 하나씩 할당됩니다.

 

배열의 각 요소를 대상으로 반복적인 작업을 수행할 때는 이렇게 간결하게 for...of문을 활용하는 것도 좋을 것 같습니다.

for (let index in influencer){
	console.log(influencer[index];)
}

참고로 배열도 하나의 객체이기 때문에 배열에 for...in문을 사용하는 것도 가능합니다. for...in문은 앞의 변수에 프로퍼티 네임이 들어가기 때문에 배열의 경우에는 인덱스가 들어갑니다. 이렇게 활용하면 요소를 찾아낼 수 있고 저장하면 for...in문도 똑같이 동작하는 것을 확인할 수 있습니다.

 

그런데 for...in문은 모든 프로퍼티들을 가지고 반복하는 동작이기 때문에 지금 보기에는 의도한 대로 동작하는 것처럼 보일 수 있지만 사실 조금 특별한 환경에서는 배열에 for...in문을 사용할 경우에 배열의 메소드나 또는 배열이 가지고 있는 length 프로퍼티 같은 것들이 변수에 할당될 가능성이 있습니다.

for...in문은 사실상 일반적인 객체에 조금 더 최적화되어 있기 때문에 배열에는 사용하지 않는 것이 좋습니다. 배열에 인덱스를 조금 더 활용하고 싶다면 for문을 활용하는 것이 조금 더 안전한 코드를 작성하는데 도움이 됩니다.