자바스크립트에서 배열과 객체 값 나열하기

for...of를 이용하자.

배열과 객체 내에서 값을 꺼내야 할 순간은 많습니다. 하나만 꺼내면 될 때는 인덱스나 키 값을 넣어서 갖고오면 되지만 전체나 또는 어떤 조건으로 값을 추려내야 할 때는 반복문을 통해 값을 갖고옵니다. 

let arrs = ["arr1","arr2", "arr3", "arr4"];
for(let i=0; i<arrs.length;i++){
  console.log(arrs[i]);
};

소스코드를 실행하면 arrs에 담겨있는 값들이 모두 콘솔창에 나타난 것을 확인할 수 있습니다. 물론 위의 예시처럼 for문만 이용해도 안의 값을 다 가져올 수 있지만, 초기화, 조건, 값 증가 등 필수적인 부분들이 있고, 중첩되어 있을 땐 이런 부분들이 더 복잡하게 느껴지기 때문에 배열, 객체 등에서 값을 나열하거나 순회할 필요가 있을 땐 for ...of문을 사용하는 것이 좋습니다.

배열에서 for...of문 사용하기

let arrs = ["arr1","arr2", "arr3", "arr4"];
for(let arr of arrs){
  console.log(arr);
};

맨 위의 소스코드를 for...of문으로 변경시켰습니다. 결과값은 동일합니다. for문에 있던 초기화나 조건, 값 증가 같은 요소들이 모두 사라지고 of를 통해 배열(예시에서는 arrs를 뜻함)의 값을 순서대로 받아와서 arr이라는 변수를 선언하고 거기에 넣었습니다. 그리고 arr을 이용해서 배열의 데이터를 제어하면 됩니다. 

let arrs = ["김수한무","거북이", "두루미", "삼천갑자", "동방삭"];
for(let arr of arrs){
  if(arr.length<4){
    continue;
  }
  console.log(arr);
};

위의 코드를 실행하면 콘솔창엔 어떤 값들이 나타날까요? 네! "김수한무"와 "삼천갑자"라는 결과값이 나옵니다. 여기서 중요한건 continue를 사용했다는 것입니다. 반복을 중지시킬 때 break와 continue를 사용한다고 했었죠? for...of에서도 사용가능하다는 것을 기억해주세요.

for...of문은 break, continue, return 구문과 함께 사용할 수 있습니다.

객체에서 for...of문 사용하기

let objs = {"노트북":"100만원", "데스크톱":"121만원", tv:"67만원"};
for(let obj of Object.keys(objs)){
  console.log(obj + " : " +objs[obj]);
};

objs라는 객체에는 키에는 가전제품의 이름이 있고, 값에는 그 가전제품의 가격이 저장되어 있습니다. 객체의 값들을 for ...of로 나열하려면 우선 Object.keys()를 통해 객체의 키 값을 배열로 만든 후에 그 배열을 이용해서 객체의 값에 접근할 수 있습니다. 

공감은 제작자에게 큰 힘이 됩니다.