{"id":319,"date":"2026-05-17T05:40:41","date_gmt":"2026-05-16T21:40:41","guid":{"rendered":"https:\/\/junai.ai\/blog\/js-loops-7\/"},"modified":"2026-05-17T07:11:38","modified_gmt":"2026-05-16T23:11:38","slug":"js-loops-7","status":"publish","type":"post","link":"https:\/\/junai.ai\/blog\/js-loops-7\/","title":{"rendered":"\ubc18\ubcf5\ubb38 \u2014 for\u00b7while\u00b7for of\u00b7for in (\uae30\ucd08 7\ud3b8)"},"content":{"rendered":"\n<!-- WordPress REST API \ubc1c\ud589\uc6a9 HTML (\uc790\ub3d9 \uc0dd\uc131) -->\n<!-- WP-FEATURED-MEDIA-ID: 533 -->\n<div style=\"max-width:800px;margin:0 auto;\">\n<style>\n\/* js-textbook \u2014 PostgreSQL \uad50\uc7ac \ub3d9\uc77c \ud314\ub808\ud2b8 *\/\n:root {\n  --color-primary: #336791;\n  --color-accent: #60a5fa;\n  --color-bg: #fafafa;\n  --color-bg-card: #ffffff;\n  --color-text: #1e293b;\n  --color-text-muted: #64748b;\n  --hero-start: #0f172a;\n  --hero-end: #336791;\n  --font-body: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;\n  --size-body: 17px;\n  --line-height: 1.75;\n}\n* { box-sizing: border-box; }\n.container { max-width: 760px; margin: 0 auto; padding: 0 22px 80px; }\n.hero { background: linear-gradient(135deg, var(--hero-start) 0%, var(--hero-end) 100%); color: #fff; padding: 72px 22px 56px; text-align: center; }\n.hero .badge { display: inline-block; background: rgba(96,165,250,0.18); color: var(--color-accent); padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: 0.5px; margin-bottom: 18px; }\n.hero h1 { margin: 0 0 18px; font-size: 36px; line-height: 1.3; letter-spacing: -0.3px; }\n.hero p.sub { margin: 0 auto; max-width: 580px; font-size: 17px; color: #bfdbfe; }\n.hero img { width: 100%; max-width: 720px; height: auto; margin: 36px auto 0; display: block; border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); }\n.meta { display: flex; gap: 14px; justify-content: center; margin-top: 20px; font-size: 13px; color: #93c5fd; flex-wrap: wrap; }\n.meta span::before { content: \"\u00b7\"; margin-right: 14px; color: #1e3a8a; }\n.meta span:first-child::before { content: \"\"; margin: 0; }\narticle { background: var(--color-bg-card); margin-top: -36px; padding: 44px 28px; border-radius: 14px; box-shadow: 0 2px 18px rgba(0,0,0,0.06); }\narticle p { margin: 0 0 18px; }\nh2 { font-size: 28px; line-height: 1.35; letter-spacing: -0.3px; margin: 48px 0 18px; padding-bottom: 10px; border-bottom: 2px solid var(--color-primary); }\nh2:first-of-type { margin-top: 8px; }\nh3 { font-size: 21px; line-height: 1.4; margin: 30px 0 12px; color: var(--color-primary); }\ncode { background: #f1f5f9; color: #0f172a; padding: 2px 6px; border-radius: 4px; font-family: 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 0.92em; }\npre { background: #0f172a; color: #e2e8f0; padding: 18px 20px; border-radius: 10px; overflow-x: auto; font-size: 14.5px; line-height: 1.65; margin: 18px 0; }\npre code { background: transparent; color: inherit; padding: 0; }\nul, ol { margin: 0 0 18px; padding-left: 24px; }\nli { margin-bottom: 8px; }\nstrong { color: #0f172a; }\n.databox { background: #eff6ff; border-left: 4px solid var(--color-primary); padding: 18px 20px; border-radius: 6px; margin: 22px 0; }\n.databox p { margin: 0 0 8px; }\n.databox p:last-child { margin: 0; }\n.databox strong { color: var(--color-primary); }\n.warnbox { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border-left: 4px solid #d97706; padding: 18px 20px; border-radius: 6px; margin: 22px 0; }\n.warnbox strong { color: #92400e; }\n.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 22px 0; }\ntable { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--color-bg-card); }\nth, td { padding: 11px 12px; text-align: left; border-bottom: 1px solid #e2e8f0; vertical-align: top; }\nth { background: #f1f5f9; font-weight: 700; color: #0f172a; }\ntd:first-child, th:first-child { font-weight: 700; }\n.cta { background: linear-gradient(135deg, #336791 0%, #60a5fa 100%); color: #fff; padding: 30px 24px; border-radius: 12px; margin-top: 44px; text-align: center; }\n.cta h3 { color: #fff; margin: 0 0 10px; }\n.cta p { margin: 0; color: #dbeafe; }\n.series-nav { background: #eff6ff; padding: 18px 22px; border-radius: 10px; margin-top: 24px; font-size: 14.5px; color: var(--color-text-muted); }\n.series-nav strong { color: var(--color-primary); }\n@media (max-width: 480px) {\n  .hero { padding: 52px 18px 44px; }\n  .hero h1 { font-size: 26px; }\n  .hero p.sub { font-size: 15px; }\n  article { padding: 28px 18px; border-radius: 10px; }\n  h2 { font-size: 22px; }\n  h3 { font-size: 18px; }\npre { font-size: 13px; padding: 14px 16px; }\n}\n@media (max-width: 560px) {\n  .tablewrap table, .tablewrap thead, .tablewrap tbody, .tablewrap tr, .tablewrap th, .tablewrap td { display: block; width: auto; }\n  .tablewrap thead { display: none; }\n  .tablewrap tr { margin: 0 0 14px; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }\n  .tablewrap td { border: none; border-bottom: 1px solid #f1f5f9; padding: 9px 14px; }\n  .tablewrap td:first-child { background: #eff6ff; font-weight: 800; font-size: 15.5px; }\n  .tablewrap td:last-child { border-bottom: none; }\n  .tablewrap td[data-label]::before { content: attr(data-label) \" \u2014 \"; font-weight: 700; color: var(--color-primary); }\n}\n<\/style>\n<header class=\"hero\">\n  <span class=\"badge\">\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uad50\uc7ac \u00b7 7\ud3b8 \/ 26\ud3b8<\/span>\n  <h1>\ubc18\ubcf5\ubb38 \u2014 for\u00b7while\u00b7for of\u00b7for in<\/h1>\n  <p class=\"sub\">\ubc18\ubcf5 4\uac00\uc9c0\uc640 break\/continue. for&#8230;of vs for&#8230;in \ud568\uc815.<\/p>\n  <div class=\"meta\"><span>\uae30\ucd08<\/span><span>\uc77d\ub294 \uc2dc\uac04 6\ubd84<\/span><span>2026-05-17<\/span><\/div>\n  <img decoding=\"async\" src=\"https:\/\/junai.ai\/blog\/wp-content\/uploads\/2026\/05\/hero-178.jpg\" alt=\"\uc5ec\ub7ec \uc885\ub958\uc758 JS \ubc18\ubcf5\ubb38 \uc2dc\uc791\u00b7\uc885\ub8cc \ud750\ub984\uc774 \uadf8\ub9bc\uc73c\ub85c \uc815\ub9ac\ub41c \uc77c\ub7ec\uc2a4\ud2b8\">\n<\/header>\n\n<div class=\"container\">\n<article>\n\n<p>\uac19\uc740 \uc77c\uc744 \uc5ec\ub7ec \ubc88 \u2014 JS \uac00 \uadf8\uac78 \ud45c\ud604\ud558\ub294 \ub3c4\uad6c\ub294 4\uac00\uc9c0\uc785\ub2c8\ub2e4. <strong>for<\/strong>, <strong>while<\/strong>, <strong>do\u2026while<\/strong>, \uadf8\ub9ac\uace0 ES6 \uc758 <strong>for\u2026of<\/strong>\u00b7<strong>for\u2026in<\/strong>. 9\ud3b8(\ubc30\uc5f4) \uc758 map\/filter\/forEach \ub3c4 \uc0ac\uc2e4\uc740 &#8220;\ud568\uc218\ud615 \ubc18\ubcf5&#8221; \uc774\uc9c0\ub9cc, 7\ud3b8\uc740 \uae30\ubcf8 4\uac00\uc9c0\ub97c \uc815\ub9ac\ud569\ub2c8\ub2e4.<\/p>\n\n<h2>\uace0\uc804 for \u2014 \ud69f\uc218\uac00 \uba85\ud655\ud560 \ub54c<\/h2>\n\n<pre><code>for (let i = 0; i &lt; 5; i++) {\n  console.log(i);   \/\/ 0, 1, 2, 3, 4\n}\n\n\/\/ \uac70\uafb8\ub85c\nfor (let i = 9; i &gt;= 0; i--) { ... }\n\n\/\/ \ub450 \uce78\uc529\nfor (let i = 0; i &lt; 100; i += 2) { ... }\n\n\/\/ \ubcc0\uc218 \ub450 \uac1c\nfor (let i = 0, j = 10; i &lt; j; i++, j--) { ... }<\/code><\/pre>\n\n<div class=\"warnbox\">\n  <p><strong>let \uac00 \uc544\ub2c8\ub77c var \uba74 \ud568\uc815.<\/strong> <code>for (var i ...)<\/code> \ub294 i \uac00 \ud568\uc218 \uc2a4\ucf54\ud504\ub77c\uc11c \ud074\ub85c\uc800 \uc548\uc5d0\uc11c \uc758\ub3c4\uc640 \ub2e4\ub974\uac8c \ub3d9\uc791\ud569\ub2c8\ub2e4. 3\ud3b8\uc758 \uad8c\uc7a5\ub300\ub85c <strong>\ud56d\uc0c1 let<\/strong> \uc744 \uc4f0\uc138\uc694.<\/p>\n<\/div>\n\n<h2>while \u00b7 do\u2026while \u2014 \uc870\uac74\uc774 \ud575\uc2ec\uc77c \ub54c<\/h2>\n\n<pre><code>\/\/ while \u2014 \uc870\uac74\uc744 \uba3c\uc800 \ud655\uc778\nlet count = 0;\nwhile (count &lt; 3) {\n  console.log(count);\n  count++;\n}\n\n\/\/ do\u2026while \u2014 \ucd5c\uc18c 1\ubc88 \uc2e4\ud589 \ud6c4 \uc870\uac74 \ud655\uc778\nlet answer;\ndo {\n  answer = prompt(\"y\/n?\");\n} while (answer !== \"y\" &amp;&amp; answer !== \"n\");<\/code><\/pre>\n\n<p>do\u2026while \uc740 &#8220;\ucd5c\uc18c \ud55c \ubc88\uc740 \uc2e4\ud589, \uadf8 \ub2e4\uc74c \uc870\uac74 \ud655\uc778&#8221; \u2014 \uc785\ub825 \ubc1b\uae30 \uac19\uc740 \ud328\ud134\uc5d0 \uc790\uc5f0\uc2a4\ub7fd\uc2b5\ub2c8\ub2e4. \uadf8 \uc678\uc5d0\ub294 while \ub610\ub294 for \uac00 \ub354 \ud754\ud569\ub2c8\ub2e4.<\/p>\n\n<h2>for\u2026of \u2014 \uac12\uc744 \uc21c\ud68c (\ubc30\uc5f4\u00b7\ubb38\uc790\uc5f4 \ub4f1 iterable)<\/h2>\n\n<pre><code>const fruits = [\"apple\", \"banana\", \"cherry\"];\n\nfor (const fruit of fruits) {\n  console.log(fruit);   \/\/ \"apple\", \"banana\", \"cherry\"\n}\n\n\/\/ \ubb38\uc790\uc5f4\ub3c4 iterable\nfor (const ch of \"\uc548\ub155\") {\n  console.log(ch);      \/\/ \"\uc548\", \"\ub155\"\n}\n\n\/\/ Map\u00b7Set \ub3c4 \uac00\ub2a5\nconst set = new Set([1, 2, 3]);\nfor (const v of set) { ... }\n\n\/\/ \uc778\ub371\uc2a4\uac00 \ud544\uc694\ud558\uba74 entries()\nfor (const [i, fruit] of fruits.entries()) {\n  console.log(i, fruit);   \/\/ 0 apple, 1 banana, ...\n}<\/code><\/pre>\n\n<p>\uc785\ubb38 \ub2e8\uacc4\uc5d0\uc11c \uac00\uc7a5 \uc790\uc8fc \uc4f0\uac8c \ub420 \ubc18\ubcf5\ubb38\uc785\ub2c8\ub2e4. <code>const<\/code> \ub85c \ubc1b\uc544\ub3c4 \ub9e4 \ubc18\ubcf5\ub9c8\ub2e4 \uc0c8 \ubcc0\uc218\ub77c\uc11c \uc548\uc804.<\/p>\n\n<h2>for\u2026in \u2014 \ud0a4(\uc18d\uc131 \uc774\ub984) \ub97c \uc21c\ud68c (\uac1d\uccb4\uc6a9)<\/h2>\n\n<pre><code>const user = { name: \"\uc900\uc131\", age: 39, role: \"admin\" };\n\nfor (const key in user) {\n  console.log(key, user[key]);\n  \/\/ \"name\" \"\uc900\uc131\"\n  \/\/ \"age\" 39\n  \/\/ \"role\" \"admin\"\n}<\/code><\/pre>\n\n<div class=\"warnbox\">\n  <p><strong>for\u2026in \uc758 \ud568\uc815.<\/strong> \u2460 \uc21c\ud68c \uc21c\uc11c\uac00 \ud56d\uc0c1 \ubcf4\uc7a5\ub418\uc9c0\ub294 \uc54a\uc2b5\ub2c8\ub2e4(\uc22b\uc790 \ud0a4 \uba3c\uc800 \ub4f1). \u2461 <strong>\ubc30\uc5f4\uc5d0 \uc4f0\uba74 \uc548 \ub428<\/strong> \u2014 \ud504\ub85c\ud1a0\ud0c0\uc785 \uccb4\uc778\uc758 \uc18d\uc131\uae4c\uc9c0 \ub530\ub77c\uc624\uace0, \uc778\ub371\uc2a4\uac00 \ubb38\uc790\uc5f4\ub85c \uc634. \ubc30\uc5f4\uc740 \ud56d\uc0c1 <code>for\u2026of<\/code> \ub098 <code>forEach<\/code>. \u2462 \uac1d\uccb4 \uc790\uae30 \uc18d\uc131\ub9cc \ubcf4\ub824\uba74 <code>Object.keys()<\/code> + for\u2026of \uac00 \ub354 \uc548\uc804.<\/p>\n<\/div>\n\n<h2>for of vs for in \u2014 \ud55c \ud45c\ub85c<\/h2>\n\n<div class=\"tablewrap\">\n<table>\n  <thead>\n    <tr><th><\/th><th>for\u2026of<\/th><th>for\u2026in<\/th><\/tr>\n  <\/thead>\n  <tbody>\n    <tr><td data-label=\"\">\ub300\uc0c1<\/td><td data-label=\"of\">iterable(\ubc30\uc5f4\u00b7\ubb38\uc790\uc5f4\u00b7Map\u00b7Set)<\/td><td data-label=\"in\">\uac1d\uccb4\uc758 enumerable \ud0a4<\/td><\/tr>\n    <tr><td data-label=\"\">\ubc18\ud658<\/td><td data-label=\"of\">\uac12(value)<\/td><td data-label=\"in\">\ud0a4(key, \ubb38\uc790\uc5f4)<\/td><\/tr>\n    <tr><td data-label=\"\">\ubc30\uc5f4\uc5d0<\/td><td data-label=\"of\">\uad8c\uc7a5<\/td><td data-label=\"in\">\uae08\uc9c0<\/td><\/tr>\n    <tr><td data-label=\"\">\uac1d\uccb4\uc5d0<\/td><td data-label=\"of\">\ubc14\ub85c \uc548 \ub428 (Object.entries \ud544\uc694)<\/td><td data-label=\"in\">\uac00\ub2a5\ud558\uc9c0\ub9cc Object.keys \uad8c\uc7a5<\/td><\/tr>\n    <tr><td data-label=\"\">\uc21c\uc11c \ubcf4\uc7a5<\/td><td data-label=\"of\">\uc608 (iterable \uc21c\uc11c)<\/td><td data-label=\"in\">\uc544\ub2c8\uc624 (\ub300\uccb4\ub85c \uc0bd\uc785 \uc21c)<\/td><\/tr>\n  <\/tbody>\n<\/table>\n<\/div>\n\n<h2>break \u00b7 continue \u2014 \ud750\ub984 \uc81c\uc5b4<\/h2>\n\n<pre><code>\/\/ break \u2014 \ubc18\ubcf5 \uc989\uc2dc \uc885\ub8cc\nfor (let i = 0; i &lt; 100; i++) {\n  if (i === 5) break;\n  console.log(i);   \/\/ 0,1,2,3,4\n}\n\n\/\/ continue \u2014 \ub2e4\uc74c \ubc18\ubcf5\uc73c\ub85c (\ud604\uc7ac \ubc18\ubcf5\uc758 \ub098\uba38\uc9c0 skip)\nfor (let i = 0; i &lt; 5; i++) {\n  if (i % 2 === 0) continue;\n  console.log(i);   \/\/ 1,3\n}\n\n\/\/ \uc911\ucca9 \ubc18\ubcf5\ubb38\uc5d0\uc11c \ub77c\ubca8 (\ub4dc\ubb3c\uac8c)\nouter: for (let i = 0; i &lt; 3; i++) {\n  for (let j = 0; j &lt; 3; j++) {\n    if (i === 1 &amp;&amp; j === 1) break outer;\n  }\n}<\/code><\/pre>\n\n<h2>\ud568\uc218\ud615 \ub300\uc548 \u2014 map\u00b7filter\u00b7forEach (9\ud3b8 \uc608\uace0)<\/h2>\n\n<pre><code>\/\/ \uba85\ub839\ud615 for (\ubc30\uc5f4\uc744 \ub450 \ubc30\ub85c)\nconst doubled = [];\nfor (const n of nums) doubled.push(n * 2);\n\n\/\/ \ud568\uc218\ud615 map (\uac19\uc740 \uacb0\uacfc, \ub354 \uae54\ub054)\nconst doubled = nums.map(n =&gt; n * 2);\n\n\/\/ \uba85\ub839\ud615 (\uc9dd\uc218\ub9cc)\nconst evens = [];\nfor (const n of nums) if (n % 2 === 0) evens.push(n);\n\n\/\/ \ud568\uc218\ud615 filter\nconst evens = nums.filter(n =&gt; n % 2 === 0);<\/code><\/pre>\n\n<div class=\"databox\">\n  <p><strong>\uc2e4\uc804 \uc120\ud0dd.<\/strong> \u2460 \uc0c8 \ubc30\uc5f4 \ub9cc\ub4e4\uae30 \u2192 map\/filter (\uc120\uc5b8\uc801, \uc758\ub3c4 \uba85\ud655). \u2461 \ud569\u00b7\ud3c9\uade0\u00b7\ucd5c\ub313\uac12 \u2192 reduce. \u2462 \ub2e8\uc21c \ucd9c\ub825\/\uc0ac\uc774\ub4dc \uc774\ud399\ud2b8 \u2192 forEach \ub610\ub294 for\u2026of. \u2463 \uc911\uac04\uc5d0 \uba48\ucdb0\uc57c \ud568 \u2192 for\u2026of + break (forEach \ub294 break \ubabb\ud568). 9\ud3b8\uc5d0\uc11c \uae4a\uac8c.<\/p>\n<\/div>\n\n<div class=\"cta\">\n  <h3>8\ud3b8 \u2014 \ud568\uc218 \uc120\uc5b8\u00b7\ud45c\ud604\uc2dd\u00b7\ud654\uc0b4\ud45c<\/h3>\n  <p>function\u00b7() => \uc758 \ubaa8\ub4e0 \ubcc0\ud615, this \uc758 \ucc28\uc774\ub294 22\ud3b8\uc5d0\uc11c.<\/p>\n<\/div>\n\n<div class=\"series-nav\">\n  <strong>\ud83d\udcda \uc27d\uac8c \ubc30\uc6b0\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uad50\uc7ac<\/strong><br>\n  \uc774\uc804: 6\ud3b8 \uc870\uac74\ubb38 \u00b7 \ud604\uc7ac: <strong>7\ud3b8 (\uae30\ucd08)<\/strong> \u00b7 \ub2e4\uc74c \u2192 8\ud3b8 \ud568\uc218 \u00b7 \uc9c4\ud589: <strong>7\/26<\/strong>\n<\/div>\n\n<\/article>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\ubc18\ubcf5\ubb38 4\uac00\uc9c0\uc640 break\/continue. for of vs for in. 26\ud3b8 \uad50\uc7ac 7\ud3b8.<\/p>\n","protected":false},"author":1,"featured_media":533,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[],"class_list":["post-319","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-basic"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/319","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/comments?post=319"}],"version-history":[{"count":3,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/319\/revisions"}],"predecessor-version":[{"id":559,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/319\/revisions\/559"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media\/533"}],"wp:attachment":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media?parent=319"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/categories?post=319"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/tags?post=319"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}