일반 배열에 대한 루프문 조회 (loop iterator)

황제낙엽 2023.03.01 08:03 조회 수 : 3

sitelink1  
sitelink2  
sitelink3  
sitelink4  
extra_vars4  
extra_vars5  
extra_vars6  

배열을 순회할 일이 많다

특히 json을 다룰 경우

그래서 for/in , for/of , forEach 에 대해 조사했다

 

서버로부터 boxes 라는 json 배열 문자열을 전달받는다

{"boxes":[{"name":"기본박스","items":[],"seq":1},{"name":"실온실","items":[{"qty":1,"name":"당근","seq":4},{"qty":5,"name":"사과","seq":5}],"seq":2},{"name":"냉장실","items":[{"qty":8,"name":"사과","seq":2}],"seq":3},{"name":"냉동실","items":[],"seq":4},{"name":"다용도실","items":[],"seq":5},{"name":"작은냉동실","items":[{"qty":1,"name":"소고기","seq":1}],"seq":6},{"name":"장난감함","items":[{"qty":1,"name":"퐁당핑","seq":3}],"seq":7}]}

 

전달받은 json 문자열(resMsg)을 js 에서 다음과 같이 파싱한다

let boxesJo = JSON.parse(resMsg)["boxes"];

 

이후 다음의 코드들은 모두 boxesJo 를 조회하며 Box Card 를 생성한다

 

[A] for in

for (idxb in boxesJo) {

    createBoxcard(boxesJo[idxb].name, null, boxesJo[idxb].items);

}

 

[B] for of

for (box of boxesJo) {

    createBoxcard(box.name, null, box.items);

}

 

[C] forEach

boxesJo.forEach(box => {

    createBoxcard(box.name, null, box.items);

});

 

for/in 과 for/of 의 차이점은 for/in 은 배열의 index 를 반환하고 for/of 는 배열내의 아이템 자체(오브젝트)를 반환한다

for/in 을 사용할 용도는 iterator 형태의 배열을 순회하기보다는 그냥 오브젝트 자체가 가진 속성들(Attributes)들을 순회할때 사용한다

 

가령 boxesJo.attr1 = "TEST"; 을 추가하고 for/in 을 순회하면 box 목록에는 "attr1" 도 포함되어 있게 된다

다음의 코드 예제를 다시 살펴보자

 

Object.prototype.objCustom = function () {};

Array.prototype.arrCustom = function () {};

 

let iterable = [3, 5, 7];

iterable.foo = "hello";

 

for (let i in iterable) {

  console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"

}

 

for (let i of iterable) {

  console.log(i); // logs 3, 5, 7

}

 

이 게시물을
목록
쓰기 태그