(31) JavaScript - 배열(Array) / for...of 반복문

index가 있는 배열의 특징과 length 프로퍼티를 잘 활용하면 

단순히 for문으로도 배열의 길이만큼 반복을 하면서 각 요소들을 다룰 수 있기는하지만

for of 반복문으로 일반적인 for문보다 훨씬 더 간결하게 배열을 다룰 수있다.

        let members = ['행섭', '양천', '찌듕', '힝카인', '데셔', '스기따라','넌적혈구']

        //단순 for문으로 작성 할 때
        for(let i = 0; i < members.length; i++){
            console.log(members[i]);
        }

 

 

for...of 반복문

객체를 반복할 때 사용했던 for...in문의 구조와 비슷하게 생겼는데

for...in문은 객체가 들어가고 변수의 프로퍼티 네임이 할당되어있지만 of문은 배열의 요소가 할당된다. ▼

	//for...in
	for (변수 in 객체) {
	동작부분
	}     
        
        //for...of
        for(변수 of 배열){
            동작부분;
        }

▲ for...of는 소괄호를 열어서 변수를 선언한 다음 of를 써주고 그 다음 배열을 넣어준다.

 

단순 for문으로 작성할 때와 비교를 해보면..▼

        let members = ['행섭', '양천', '찌듕', '힝카인', '데셔', '스기따라','넌적혈구']
		
        //단순 for문으로 작성 할 때
        for(let i = 0; i < members.length; i++){
            console.log(members[i]);
        }

        //for...of문으로 작성 할 때
        for (let element of members){
            console.log(element);
        }

▲ 딱 봐도 훨씬 간결해보인다.

단순 for문으로 작성하면 변수i를 만들어서 배열의 길이를 조건식으로 확인하고 

index로 활용한 다음에 1씩 증가시켜주는 과정이 필요가 없다.

그냥 이 배열에 길이만큼 반복하는데 반복될 때마다 배열의 요소가 'element' 변수에 하나씩 할당되는 것이다.

실행해보면 단순 for문과 of문이 동일하게 배열의 요소를 출력되는 것을 볼 수 있다.

                                                                                                                                           

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

참고로 배열도 하나의 객체라고 했었기에 배열에 for...in문을 사용하는 것도 가능하긴하다.▼

        //단순 for문으로 작성 할 때
        for(let i = 0; i < members.length; i++){
            console.log(members[i]);
        }      

        //for...of문으로 작성 할 때
        for (let element of members){
            console.log(element);
        }

      
        //for...in문으로 작성 할 때
        for(let index in members) {
            console.log(members[index]); 
        }

▲ for...in문은 앞의 변수에 프로퍼티 네임이 들어가니까 배열의 경우에는 index가 들어간다.

이렇게 활용하면 요소를 찾아낼 수 있긴한데..

 

for...in문은 모든 프로퍼티들을 가지고 반복하는 동작이기 때문에

지금 당장은 의도한대로 동작하는 것처럼 보이긴 하지만

배열에 for...in문을 사용할 경우 배열의 메소드나 아니면

배열이 가지고 있는 length 프로퍼티 같은 것들이 변수에 할당될 가능성이 있다.

 

그래서 for...in문은 사실상 일반적인 객체에 좀 더 최적화되어 있기 때문에 배열에는 사용하지 않는 것이 좋다.

 

---

★GtiHub 주소 (for...of문)

https://github.com/SeopE9611/JavaScript_soloPlay/blob/main/Basic/8-%EA%B0%9D%EC%B2%B4/10.for...of%EB%B0%98%EB%B3%B5%EB%AC%B8.html

JavaScript_soloPlay/Basic/8-객체/10.for...of반복문.html at main · SeopE9611/JavaScript_soloPlay

 

★Notion 주소 (for...of 예제)

https://purrfect-gargoyle-935.notion.site/for-of-112e9530b3e181c5ae29c04d5afc3d82?pvs=4

for…of 문 (투표 집계) | Notion