{"componentChunkName":"component---src-templates-blog-post-js","path":"/javascript/es6-for-of-루프/","result":{"data":{"site":{"siteMetadata":{"title":"Bottlehs Tech Blog","description":"웹·앱·AI 개발자 전병훈(bottlehs)의 기술 블로그. AI·LLM, JavaScript·Vue, Spring Boot, 알고리즘, 블록체인 실무 가이드를 다룹니다","siteUrl":"https://www.bottlehs.dev","author":{"name":"Jeon Byung Hun","summary":"개발을 즐기는 bottlehs - Engineer, MS, AI, FE, BE, OS, IOT, Blockchain, 설계, 테스트"},"social":{"github":"bottlehs","codepen":"bottlehs"}}},"markdownRemark":{"id":"620d93f2-583b-5bcd-8acb-872e7cacf330","excerpt":"ES6 For ... Of 루프 기존 자바스크립트에서는 for, for..in 루프만 사용할 수 있었는데, for..of는 iterator 형태로 순환할 수 있는 기능을 제공한다. iterator는 어떤 데이터 집합을 순서대로 접근할 때 사용된다. for..of 는 Symbol…","html":"

\"ES6

\n

기존 자바스크립트에서는 for, for..in 루프만 사용할 수 있었는데, for..of는 iterator 형태로 순환할 수 있는 기능을 제공한다.

\n

iterator는 어떤 데이터 집합을 순서대로 접근할 때 사용된다. for..of 는 Symbol.iterator를 호출 하는데 배열과 문자열은 이 속성을 제공하고 있다. 즉, 배열을 순서대로 순회하며, 문자열은 문자를 하나씩 접근하게 된다. 또한, 사용자 정의 iterator을 커스텀 객체에 만들 수도 있다.

\n
let coffee = [10, 20, 30, 40, 50]\n\nfor (let value of coffee) {\n  console.log(value)\n}\n\n// 출력 결과\n10\n20\n30\n40\n50
\n
for (let char of \"coffee\") {\n  console.log(char)\n}\n\n// 출력 결과\n\"c\"(\"o\")(\"f\")(\"f\")(\"e\")(\"e\")
\n

DOM에 접근하여 반복된 리스트를 가져오는데 유용할 수 있다.

\n
;<ul>\n  <li>americano</li>\n  <li>espresso</li>\n</ul>\n\nlet nodes = document.querySelectorAll(\"li\")\nfor (let node of codes) {\n  console.log(node.textContent)\n}\n\n// 출력 결과\namericano\nespresso
\n

document.querySelectorAll(\"li\")는 li 엘리먼트를 모두 찾아 노드에 설정하는 것이고, 이러한 노드 리스트는 iterator 형태로 순환이 가능하기에 for..of 루프를 활용할 수 있다.

\n

한편, 오브젝트의 경우, iterator 형태로 순환할 수 없지만, Object keys 메서드를 활용해 이를 구현한다.

\n
const coffee = {\n   americano: \"아메리카노\",\n   espresso: \"에스프레소\"\n}\n\nconst keys = Object.keys(coffee)\nfor (let key of keys) {\n   console.log(key, coffee[key])\n}\n\n// 출력 결과\namericano 아메리카노\nespresso 에스프레소
\n

Object.keys를 활용하면 오브젝트에서 프로퍼티 키를 배열로 반환하게 된다. 이 배열은 iterator 형태로 순환이 가능하기 for..of 루프를 통해 해당 프로퍼티 값을 구한다.

","tableOfContents":"","wordCount":{"words":124},"fields":{"slug":"/javascript/es6-for-of-루프/","image":"/assets/es6.png","faq":[]},"frontmatter":{"title":"ES6 For ... Of 루프","date":"2020년 11월 24일","dateISO":"2020-11-24T19:22:59.726Z","updatedISO":null,"category":"javascript","description":"기존 자바스크립트에서는 for, for..in 루프만 사용할 수 있었는데, for..of는 iterator 형태로 순환할 수 있는 기능을 제공한다. iterator는 어떤 데이터 집합을 순서대로 접근할 때 사용된다. for..of 는 Symbol.iterator를 호출 하는데 배열과 문자열은 이 속성을 제공하고 있다. 즉, 배열을 순서대로 순회하며, 문자열은 문자를 하나씩 접근하게 된다. 또한, 사용자 정의 iterator을 커스텀 객체에 만들 수도 있다.","tags":["For ... Of 루프","ES6","ECMA2015","JS"]}}},"pageContext":{"slug":"/javascript/es6-for-of-루프/","previous":{"fields":{"slug":"/javascript/es6-spread-rest-연산자/"},"frontmatter":{"title":"ES6 Spread & Rest 연산자","tags":["ES6","Spread","Rest","JavaScript","ECMAScript6"]}},"next":{"fields":{"slug":"/javascript/es6-프라미스-promise/"},"frontmatter":{"title":"ES6 프라미스(Promise)","tags":["프라미스(Promise)","ES6","ECMA2015","JS"]}}}},"staticQueryHashes":["213619243","3262363727"]}