티스토리 뷰
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()를 통해 객체의 키 값을 배열로 만든 후에 그 배열을 이용해서 객체의 값에 접근할 수 있습니다.
공감은 제작자에게 큰 힘이 됩니다.
'Frontend-dev > HTML-CSS-JS' 카테고리의 다른 글
조건 연산자(삼항 연산자)와 if else문 (0) | 2018.02.19 |
---|---|
자바스크립트 논리 연산자(AND, OR, NOT) (0) | 2018.02.19 |
break와 continue를 통해 반복문 종료하기 (0) | 2018.02.18 |
자바스크립트의 반복문 (0) | 2018.02.17 |
자바스크립트의 조건문 (0) | 2018.02.17 |