{"id":327,"date":"2026-05-17T05:52:41","date_gmt":"2026-05-16T21:52:41","guid":{"rendered":"https:\/\/junai.ai\/blog\/js-arrays-9\/"},"modified":"2026-05-17T07:11:39","modified_gmt":"2026-05-16T23:11:39","slug":"js-arrays-9","status":"publish","type":"post","link":"https:\/\/junai.ai\/blog\/js-arrays-9\/","title":{"rendered":"\ubc30\uc5f4 \ub2e4\ub8e8\uae30 \u2014 push\u00b7map\u00b7filter\u00b7reduce (\uae30\ucd08 9\ud3b8)"},"content":{"rendered":"\n<!-- WordPress REST API \ubc1c\ud589\uc6a9 HTML (\uc790\ub3d9 \uc0dd\uc131) -->\n<!-- WP-FEATURED-MEDIA-ID: 535 -->\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 9\ud3b8 \/ 26\ud3b8<\/span>\n  <h1>\ubc30\uc5f4 \ub2e4\ub8e8\uae30 \u2014 push\u00b7map\u00b7filter\u00b7reduce<\/h1>\n  <p class=\"sub\">\ub9e4\uc77c \uc4f0\ub294 \ubc30\uc5f4 \uba54\uc11c\ub4dc 7\uac1c\uc640 \ud568\uc218\ud615 \ud328\ud134\uc758 \uae30\ubcf8.<\/p>\n  <div class=\"meta\"><span>\uae30\ucd08<\/span><span>\uc77d\ub294 \uc2dc\uac04 7\ubd84<\/span><span>2026-05-17<\/span><\/div>\n  <img decoding=\"async\" src=\"https:\/\/junai.ai\/blog\/wp-content\/uploads\/2026\/05\/hero-180.jpg\" alt=\"\ubc30\uc5f4\uc774 map filter reduce \ub97c \uac70\uccd0 \ubcc0\ud658\ub418\ub294 \ud750\ub984 \uc77c\ub7ec\uc2a4\ud2b8\">\n<\/header>\n\n<div class=\"container\">\n<article>\n\n<p>\ubc30\uc5f4\uc740 JS \uc5d0\uc11c \uac00\uc7a5 \uc790\uc8fc \ub9cc\ub098\ub294 \uc790\ub8cc\uad6c\uc870\uc785\ub2c8\ub2e4. ES5 \uc774\uc804\uc5d0\ub294 for \ub8e8\ud504\ub85c \uc77c\uc77c\uc774 \ub3cc\ub838\uc9c0\ub9cc, \uc9c0\uae08\uc740 <strong>\ud568\uc218\ud615 \uba54\uc11c\ub4dc<\/strong> \u2014 map\u00b7filter\u00b7reduce \uac00 \ud45c\uc900. 9\ud3b8\uc740 \ub9e4\uc77c \uc4f0\uac8c \ub420 7\uac1c\ub97c \uace8\ub77c \uc815\ub9ac\ud569\ub2c8\ub2e4.<\/p>\n\n<h2>\ubcc0\ud615(mutate) vs \uc0c8 \ubc30\uc5f4 \u2014 \uac00\uc7a5 \ud070 \ubd84\uae30<\/h2>\n\n<div class=\"tablewrap\">\n<table>\n  <thead>\n    <tr><th>\ubd84\ub958<\/th><th>\uba54\uc11c\ub4dc<\/th><th>\ubc18\ud658<\/th><\/tr>\n  <\/thead>\n  <tbody>\n    <tr><td data-label=\"\ubd84\ub958\">\uc6d0\ubcf8 \ubcc0\uacbd \u26a0\ufe0f<\/td><td data-label=\"\uba54\uc11c\ub4dc\">push, pop, shift, unshift, splice, sort, reverse<\/td><td data-label=\"\ubc18\ud658\">\ubcc0\uacbd\ub41c \uc6d0\ubcf8 \uc77c\ubd80 \ub610\ub294 \uae38\uc774<\/td><\/tr>\n    <tr><td data-label=\"\ubd84\ub958\">\uc0c8 \ubc30\uc5f4 \u2705<\/td><td data-label=\"\uba54\uc11c\ub4dc\">map, filter, slice, concat, flat, toSorted(ES2023)<\/td><td data-label=\"\ubc18\ud658\">\uc0c8 \ubc30\uc5f4<\/td><\/tr>\n    <tr><td data-label=\"\ubd84\ub958\">\ub2e8\uc77c \uac12<\/td><td data-label=\"\uba54\uc11c\ub4dc\">find, findIndex, includes, some, every, reduce<\/td><td data-label=\"\ubc18\ud658\">\uac12\/boolean\/\ub204\uc801<\/td><\/tr>\n  <\/tbody>\n<\/table>\n<\/div>\n\n<div class=\"warnbox\">\n  <p><strong>\uc2e4\uc218 1\ubc88\uc9c0.<\/strong> React\u00b7\uc0c1\ud0dc \uad00\ub9ac\uc5d0\uc11c\ub294 \uc6d0\ubcf8 \ubcc0\uacbd \uba54\uc11c\ub4dc\uac00 \ud568\uc815\uc785\ub2c8\ub2e4. <code>state.push(x)<\/code> \uac00 \ud654\uba74 \ub9ac\ub80c\ub354\ub97c \uc548 \uc77c\uc73c\ud0a4\uc8e0. <strong>\uc0c8 \ubc30\uc5f4 \uba54\uc11c\ub4dc<\/strong>\ub098 spread(<code>[...arr, x]<\/code>) \ub97c \uc4f0\uc138\uc694. ES2023 \uc758 <code>toSorted<\/code>\/<code>toReversed<\/code>\/<code>with<\/code> \ub294 sort\/reverse \uc758 \ubd88\ubcc0 \ubc84\uc804.<\/p>\n<\/div>\n\n<h2>map \u2014 \ubcc0\ud658<\/h2>\n\n<pre><code>const nums = [1, 2, 3, 4];\n\n\/\/ \ub450 \ubc30\ub85c\nconst doubled = nums.map(n =&gt; n * 2);    \/\/ [2, 4, 6, 8]\n\n\/\/ \uac1d\uccb4 \ubcc0\ud658\nconst users = [{name: \"A\", age: 30}, {name: \"B\", age: 25}];\nconst names = users.map(u =&gt; u.name);     \/\/ [\"A\", \"B\"]\n\n\/\/ \uc778\ub371\uc2a4\ub3c4 \ubc1b\uae30\nnums.map((n, i) =&gt; `${i}: ${n}`);         \/\/ [\"0: 1\", \"1: 2\", ...]<\/code><\/pre>\n\n<h2>filter \u2014 \uac70\ub974\uae30<\/h2>\n\n<pre><code>nums.filter(n =&gt; n &gt; 2);          \/\/ [3, 4]\nnums.filter(n =&gt; n % 2 === 0);    \/\/ [2, 4]\n\n\/\/ Boolean \ud544\ud130\ub9c1 \u2014 null\/undefined\/0\/\"\" \ubaa8\ub450 \uc81c\uac70\nconst arr = [1, null, 2, undefined, 3, \"\", 4, 0];\narr.filter(Boolean);              \/\/ [1, 2, 3, 4]<\/code><\/pre>\n\n<div class=\"databox\">\n  <p><strong>map + filter \uccb4\uc774\ub2dd.<\/strong> &#8220;\ubcc0\ud658\ud55c \ub2e4\uc74c \uac70\ub978\ub2e4&#8221; \uac00 \uc790\uc8fc \ub098\uc635\ub2c8\ub2e4. <code>users.map(u =&gt; u.age).filter(a =&gt; a &gt;= 18)<\/code> \uac19\uc740 \ud328\ud134. \ud55c \uc904\ub85c \uc758\ub3c4\uac00 \ubcf4\uc785\ub2c8\ub2e4.<\/p>\n<\/div>\n\n<h2>reduce \u2014 \ub204\uc801<\/h2>\n\n<pre><code>\/\/ \ud569\uacc4\nconst sum = nums.reduce((acc, n) =&gt; acc + n, 0);   \/\/ 10\n\n\/\/ \ucd5c\ub313\uac12\nconst max = nums.reduce((acc, n) =&gt; n &gt; acc ? n : acc, -Infinity);\n\n\/\/ \uadf8\ub8f9\ud654 (\uac1d\uccb4\ub85c)\nconst users = [\n  {name: \"A\", role: \"admin\"},\n  {name: \"B\", role: \"user\"},\n  {name: \"C\", role: \"admin\"},\n];\nconst grouped = users.reduce((acc, u) =&gt; {\n  (acc[u.role] ??= []).push(u);\n  return acc;\n}, {});\n\/\/ { admin: [A, C], user: [B] }\n\n\/\/ ES2024: Object.groupBy \uac00 \uc0c8\ub85c \ud45c\uc900\ud654\nconst grouped2 = Object.groupBy(users, u =&gt; u.role);<\/code><\/pre>\n\n<div class=\"warnbox\">\n  <p><strong>reduce \uc758 \ud568\uc815.<\/strong> \ub450 \ubc88\uc9f8 \uc778\uc790(\ucd08\uae30\uac12) \ub97c \ube60\ub728\ub9ac\uba74 \uccab \uc6d0\uc18c\uac00 \ub204\uc801\uac12\uc774 \ub418\uc5b4 \uc778\ub371\uc2a4\uac00 1\ubd80\ud130 \uc2dc\uc791. \ube48 \ubc30\uc5f4\uc5d0 reduce \ud638\ucd9c\ud558\uba74 TypeError. <strong>\ud56d\uc0c1 \ucd08\uae30\uac12\uc744 \uba85\uc2dc<\/strong>\ud558\uc138\uc694.<\/p>\n<\/div>\n\n<h2>find \u00b7 findIndex \u00b7 includes \u2014 \uac80\uc0c9<\/h2>\n\n<pre><code>\/\/ \uc870\uac74 \ub9de\ub294 \uccab \uc6d0\uc18c (\uc5c6\uc73c\uba74 undefined)\nusers.find(u =&gt; u.name === \"A\");          \/\/ {name: \"A\", ...}\nusers.findIndex(u =&gt; u.name === \"A\");     \/\/ 0\nusers.findLast(u =&gt; u.age &gt; 18);          \/\/ \ub9c8\uc9c0\ub9c9 \ub9e4\uce58\n\n\/\/ \ub2e8\uc21c \ud3ec\ud568 \uac80\uc0ac\nnums.includes(3);                          \/\/ true\nnums.indexOf(3);                           \/\/ \uc778\ub371\uc2a4 \ub610\ub294 -1\n\n\/\/ \uac1d\uccb4 \ubc30\uc5f4\uc758 includes \ub294 \ucc38\uc870 \ube44\uad50 (\uc548 \ub428) \u2192 find\/some \uc0ac\uc6a9<\/code><\/pre>\n\n<h2>some \u00b7 every \u2014 \ub17c\ub9ac<\/h2>\n\n<pre><code>nums.some(n =&gt; n &gt; 3);       \/\/ true (\ud558\ub098\ub77c\ub3c4)\nnums.every(n =&gt; n &gt; 0);      \/\/ true (\uc804\ubd80)\n[].every(...)                 \/\/ true \u2190 \ube48 \ubc30\uc5f4\uc740 \ud56d\uc0c1 every == true<\/code><\/pre>\n\n<h2>spread \u00b7 \uad6c\uc870 \ubd84\ud574 \u00b7 \ubc30\uc5f4 \ubcf5\uc81c<\/h2>\n\n<pre><code>\/\/ \ud3b4\uae30 (concat \ub300\uccb4)\nconst a = [1, 2], b = [3, 4];\nconst c = [...a, ...b];                   \/\/ [1,2,3,4]\nconst d = [0, ...a, 99, ...b];            \/\/ [0,1,2,99,3,4]\n\n\/\/ \uc595\uc740 \ubcf5\uc81c (push \uc548\uc804)\nconst copy = [...nums];\n\n\/\/ \uad6c\uc870 \ubd84\ud574\nconst [first, second, ...rest] = nums;    \/\/ 1, 2, [3, 4]\nconst [, , third] = nums;                 \/\/ 3 (\uc55e \ub458 skip)\n\n\/\/ \uac1d\uccb4 \ubc30\uc5f4 \u2192 \ub450 \uadf8\ub8f9\nconst adults = users.filter(u =&gt; u.age &gt;= 18);\nconst minors = users.filter(u =&gt; u.age &lt; 18);\n\/\/ ES2024 \ud6c4\ubcf4: Array.prototype.partition (\uc81c\uc548 \ub2e8\uacc4)<\/code><\/pre>\n\n<h2>flat \u00b7 flatMap \u2014 \uc911\ucca9 \ud3bc\uce58\uae30<\/h2>\n\n<pre><code>[1, [2, 3], [4, [5, 6]]].flat();         \/\/ [1,2,3,4,[5,6]]\n[1, [2, 3], [4, [5, 6]]].flat(2);        \/\/ [1,2,3,4,5,6]\n[1, [2, 3], [4, [5, 6]]].flat(Infinity); \/\/ \ub2e4 \ud3b4\uae30\n\n\/\/ map + flat \ud569\uce5c \uac83 (\uc790\uc8fc \uc500)\nconst tags = [\"a,b\", \"c\", \"d,e,f\"];\ntags.flatMap(s =&gt; s.split(\",\"));         \/\/ [\"a\",\"b\",\"c\",\"d\",\"e\",\"f\"]<\/code><\/pre>\n\n<h2>sort \u2014 \ud56d\uc0c1 \ube44\uad50 \ud568\uc218\uc640 \ud568\uaed8<\/h2>\n\n<pre><code>\/\/ \u274c \uc778\uc790 \uc5c6\uc73c\uba74 \ubb38\uc790\uc5f4 \ubcc0\ud658 \ud6c4 \ube44\uad50\n[10, 2, 30, 4].sort();                   \/\/ [10, 2, 30, 4] \u2192 [\"10\",\"2\",\"30\",\"4\"] sort\n                                          \/\/ \u2192 [10, 2, 30, 4]  \u2190 \ubb38\uc790\uc5f4 \uc815\ub82c\n\n\/\/ \u2705 \ube44\uad50 \ud568\uc218 \uba85\uc2dc\n[10, 2, 30, 4].sort((a, b) =&gt; a - b);    \/\/ [2, 4, 10, 30]\n[10, 2, 30, 4].sort((a, b) =&gt; b - a);    \/\/ \ub0b4\ub9bc\ucc28\uc21c\n\n\/\/ \uac1d\uccb4 \uc815\ub82c\nusers.sort((a, b) =&gt; a.age - b.age);\n\n\/\/ \uc6d0\ubcf8 \ubcf4\uc874 (ES2023)\nconst sorted = users.toSorted((a, b) =&gt; a.age - b.age);<\/code><\/pre>\n\n<div class=\"cta\">\n  <h3>10\ud3b8 \u2014 \uac1d\uccb4 \ub2e4\ub8e8\uae30<\/h3>\n  <p>\uac1d\uccb4 \ub9ac\ud130\ub7f4\u00b7\uad6c\uc870 \ubd84\ud574\u00b7Object.keys\/values\/entries \uc758 \ud575\uc2ec \ud328\ud134.<\/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: 8\ud3b8 \ud568\uc218 \u00b7 \ud604\uc7ac: <strong>9\ud3b8 (\uae30\ucd08)<\/strong> \u00b7 \ub2e4\uc74c \u2192 10\ud3b8 \uac1d\uccb4 \u00b7 \uc9c4\ud589: <strong>9\/26<\/strong>\n<\/div>\n\n<\/article>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\ubc30\uc5f4 \uba54\uc11c\ub4dc 7\uac1c\uc640 \ud568\uc218\ud615 \ud328\ud134(map\u00b7filter\u00b7reduce \uc678). 26\ud3b8 \uad50\uc7ac 9\ud3b8.<\/p>\n","protected":false},"author":1,"featured_media":535,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[],"class_list":["post-327","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\/327","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=327"}],"version-history":[{"count":3,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/327\/revisions"}],"predecessor-version":[{"id":561,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/327\/revisions\/561"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media\/535"}],"wp:attachment":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media?parent=327"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/categories?post=327"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/tags?post=327"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}