[JS] for문으로 배열 만들기

배열을 이용해서 배열만들기를 for문으로 해보았다.

foreach로 가능하지 않을까 했는데 안될거같아서 for문으로했는데 

이 글적다가 foreach로 가능한 방법이 생각났다.

 

 

간단하게 코딩 상황설명 :

아래처럼 .item을 가진 div들중에 .option을 포함하는 .item만 모은 배열을 만들고 싶었는데

코드에 이미 .option를 가진 div리스트의 배열이 있어서

그 배열을 사용해서 .option을 포함하는 .item 리스트 배열을 만들기위해 for문을 썻다.

<div class="item">
	<div class="option"></div>
</div>

<div class="item">
	<div></div>
</div>

<div class="item">
	<div></div>
</div>

<div class="item">
	<div class="option"></div>
</div>

 

for문으로 배열만들기

let optionList = document.querySelectorAll('.option');
    let itemList = [];
    for(let i = 0; i<optionList.length; i++) {
        itemList[i] = optionList[i].closest(".item");
    }

 

foreach로 배열만들기

let optionList = document.querySelectorAll('.option');
    let itemList = [];
    let i = 0;
    optionList.forEach(element => {
    	itemList[i] = element.closest(".item");
        i++;
    })

for문을 더 많이써서 익숙해서 그런지 모르겠지만.. 난 이번경우엔 for문이 더 이쁜거같다..

 

 

참고한 검색리스트

forEach 공식문서

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Array.prototype.forEach() - JavaScript | MDN

 

위 공식문서에서 화살표함수를 쓰는것같길래.. 살짝 보고왔다.. 아직 화살표함수를 잘 쓰지않아서 익숙하지않다. 간결하고 예뻐보이는데 정확히 모르니까 조금씩 읽으면서 적절히 사용할수있도록 공부중..

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions

화살표 함수 - JavaScript | MDN

 

참고한 글 : 배열 생성의 다양한 방법을 볼 수 있어 좋았다.

https://gent.tistory.com/294

[JavaScript] 자바스크립트 배열(Array) 생성 및 사용법 쉽게 정리