{"id":341,"date":"2026-05-17T06:18:42","date_gmt":"2026-05-16T22:18:42","guid":{"rendered":"https:\/\/junai.ai\/blog\/js-objects-10\/"},"modified":"2026-05-17T07:11:40","modified_gmt":"2026-05-16T23:11:40","slug":"js-objects-10","status":"publish","type":"post","link":"https:\/\/junai.ai\/blog\/js-objects-10\/","title":{"rendered":"\uac1d\uccb4 \u2014 \uc18d\uc131\u00b7\uba54\uc11c\ub4dc\u00b7\uad6c\uc870 \ubd84\ud574 (\uae30\ucd08 10\ud3b8)"},"content":{"rendered":"\n<!-- WordPress REST API \ubc1c\ud589\uc6a9 HTML (\uc790\ub3d9 \uc0dd\uc131) -->\n<!-- WP-FEATURED-MEDIA-ID: 536 -->\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 10\ud3b8 \/ 26\ud3b8<\/span>\n  <h1>\uac1d\uccb4 \u2014 \uc18d\uc131\u00b7\uba54\uc11c\ub4dc\u00b7\uad6c\uc870 \ubd84\ud574<\/h1>\n  <p class=\"sub\">\uac1d\uccb4 \ub9ac\ud130\ub7f4 \u00b7 \uc811\uadfc \u00b7 Object.keys\/values\/entries \u00b7 \uad6c\uc870 \ubd84\ud574 \u00b7 spread.<\/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-181.jpg\" alt=\"\uac1d\uccb4 \ud0a4-\uac12 \uc30d\uc774 \uad6c\uc870 \ubd84\ud574\ub418\uc5b4 \ubcc0\uc218\uc5d0 \ub4e4\uc5b4\uac00\ub294 \uadf8\ub9bc\">\n<\/header>\n\n<div class=\"container\">\n<article>\n\n<p>\uac1d\uccb4\ub294 JS \uc758 8\ubc88\uc9f8 \uc790\ub8cc\ud615\uc774\uc790 \uac70\uc758 \ubaa8\ub4e0 \ub370\uc774\ud130\uc758 \ud615\ud0dc\uc785\ub2c8\ub2e4. JSON \uc751\ub2f5\u00b7React props\u00b7\uc124\uc815\u00b7\uc774\ubca4\ud2b8 \uac1d\uccb4 \u2014 \uc804\ubd80 \uac1d\uccb4. 10\ud3b8\uc740 \uac1d\uccb4\ub97c \ub9cc\ub4e4\uace0\u00b7\uc77d\uace0\u00b7\ud569\uce58\uace0\u00b7\uaebc\ub0b4\ub294 \ubaa8\ub4e0 \ud328\ud134\uc744 \ud55c \ubc88\uc5d0 \uc815\ub9ac\ud569\ub2c8\ub2e4.<\/p>\n\n<h2>\uac1d\uccb4 \ub9ac\ud130\ub7f4 \u2014 \uae30\ubcf8\ud615<\/h2>\n\n<pre><code>const user = {\n  name: \"\uc900\uc131\",\n  age: 39,\n  active: true,\n  greet() {                          \/\/ \uba54\uc11c\ub4dc \ub2e8\ucd95\n    return `Hi, ${this.name}`;\n  },\n};\n\nuser.name;                            \/\/ \"\uc900\uc131\" \u2014 dot \uc811\uadfc\nuser[\"age\"];                          \/\/ 39 \u2014 bracket \uc811\uadfc (\ub3d9\uc801 \ud0a4)\nuser.greet();                         \/\/ \"Hi, \uc900\uc131\"\n\n\/\/ \ub3d9\uc801 \ud0a4\nconst key = \"name\";\nuser[key];                            \/\/ \"\uc900\uc131\"\n\n\/\/ \uacc4\uc0b0\ub41c \ud0a4 (computed property name)\nconst prefix = \"user_\";\nconst obj = {\n  [prefix + \"id\"]: 1,\n  [`${prefix}name`]: \"\uc900\uc131\",\n};\n\/\/ { user_id: 1, user_name: \"\uc900\uc131\" }<\/code><\/pre>\n\n<h2>\ub2e8\ucd95 \uc18d\uc131 \u2014 \uac19\uc740 \uc774\ub984\uc774\uba74 \ud55c \ubc88\ub9cc<\/h2>\n\n<pre><code>const name = \"\uc900\uc131\";\nconst age = 39;\n\n\/\/ \uae38\uac8c\nconst user = { name: name, age: age };\n\n\/\/ \ub2e8\ucd95 (ES6+) \u2014 \uac19\uc740 \uc774\ub984\uc774\uba74 \ud55c \ubc88\ub9cc\nconst user = { name, age };\n\n\/\/ \ud568\uc218 \ubc18\ud658\uc5d0\uc11c \uc790\uc8fc\nfunction createUser(name, age) {\n  return { name, age, createdAt: Date.now() };\n}<\/code><\/pre>\n\n<h2>Object.keys \u00b7 values \u00b7 entries<\/h2>\n\n<pre><code>const user = { name: \"\uc900\uc131\", age: 39, role: \"admin\" };\n\nObject.keys(user);     \/\/ [\"name\", \"age\", \"role\"]\nObject.values(user);   \/\/ [\"\uc900\uc131\", 39, \"admin\"]\nObject.entries(user);  \/\/ [[\"name\",\"\uc900\uc131\"], [\"age\",39], [\"role\",\"admin\"]]\n\n\/\/ for...of + entries \ud328\ud134 \u2014 \ud0a4\uc640 \uac12 \uac19\uc774 \uc21c\ud68c\nfor (const [key, value] of Object.entries(user)) {\n  console.log(`${key}: ${value}`);\n}\n\n\/\/ entries \u2192 \uac1d\uccb4 \ubcf5\uc6d0\nObject.fromEntries([[\"a\", 1], [\"b\", 2]]);   \/\/ {a: 1, b: 2}\n\n\/\/ \uc751\uc6a9: \uac12\ub9cc \ubcc0\ud658\nconst upper = Object.fromEntries(\n  Object.entries(user).map(([k, v]) =&gt; [k, String(v).toUpperCase()])\n);<\/code><\/pre>\n\n<h2>\uad6c\uc870 \ubd84\ud574 \ud560\ub2f9 \u2014 \uac1d\uccb4\uc5d0\uc11c \uac12 \uaebc\ub0b4\uae30<\/h2>\n\n<pre><code>const user = { name: \"\uc900\uc131\", age: 39, email: \"x@y.com\", role: \"admin\" };\n\n\/\/ \uae30\ubcf8\nconst { name, age } = user;\nconsole.log(name, age);             \/\/ \"\uc900\uc131\" 39\n\n\/\/ \uc774\ub984 \ubc14\uafb8\uae30\nconst { name: userName, age: userAge } = user;\n\n\/\/ \uae30\ubcf8\uac12\nconst { name, role = \"user\" } = user;\nconst { phone = \"\uc5c6\uc74c\" } = user;     \/\/ phone \ud0a4 \uc5c6\uc73c\uba74 \uae30\ubcf8\uac12\n\n\/\/ \ub098\uba38\uc9c0 \ubaa8\uc73c\uae30\nconst { name, ...others } = user;\n\/\/ others = { age, email, role }\n\n\/\/ \uc911\ucca9 \ubd84\ud574\nconst data = { profile: { city: \"\uc11c\uc6b8\" } };\nconst { profile: { city } } = data;<\/code><\/pre>\n\n<h2>\uad6c\uc870 \ubd84\ud574 + \ud568\uc218 \ub9e4\uac1c\ubcc0\uc218<\/h2>\n\n<pre><code>\/\/ \ub9e4\uac1c\ubcc0\uc218 4\uac1c \ub118\uc73c\uba74 \uac1d\uccb4\ub85c \ubc1b\uace0 \ubd84\ud574\nfunction createPost({ title, body, tags = [], publishAt = Date.now() }) {\n  return { title, body, tags, publishAt };\n}\n\ncreatePost({ title: \"Hello\", body: \"World\", tags: [\"intro\"] });\n\/\/ publishAt \uc740 \uae30\ubcf8\uac12\n\/\/ tags \uc548 \uc8fc\uba74 [] (\uae30\ubcf8\uac12)\n\/\/ \ud638\ucd9c \uc21c\uc11c \uc790\uc720<\/code><\/pre>\n\n<h2>spread \u2014 \uac1d\uccb4 \ubcf5\uc81c\uc640 \ud569\uce58\uae30<\/h2>\n\n<pre><code>\/\/ \uc595\uc740 \ubcf5\uc81c\nconst copy = { ...user };\n\n\/\/ \ud569\uce58\uae30 (\ub4a4\uac00 \uc55e\uc744 \ub36e\uc5b4\uc500)\nconst a = { x: 1, y: 2 };\nconst b = { y: 99, z: 3 };\nconst merged = { ...a, ...b };       \/\/ { x: 1, y: 99, z: 3 }\n\n\/\/ \uc77c\ubd80 \ub36e\uc5b4\uc4f0\uae30 \u2014 React state \uc5c5\ub370\uc774\ud2b8 \ud328\ud134\nconst updated = { ...user, age: 40 };\n\n\/\/ Object.assign \ub3c4 \uac19\uc740 \uc77c (mutate \uc8fc\uc758)\nObject.assign({}, a, b);             \/\/ \uc0c8 \uac1d\uccb4\ub85c \ud569\uce58\uae30 (\uc548\uc804)\nObject.assign(user, { age: 40 });    \/\/ user \uc790\uccb4 \ubcc0\uacbd \u26a0\ufe0f<\/code><\/pre>\n\n<div class=\"warnbox\">\n  <p><strong>spread \ub294 \uc595\uc740 \ubcf5\uc81c.<\/strong> 1\ub2e8\uacc4\ub9cc \ubcf5\uc81c\ub429\ub2c8\ub2e4. \ub0b4\ubd80 \uac1d\uccb4\u00b7\ubc30\uc5f4\uc740 \uac19\uc740 \ucc38\uc870\ub97c \uacf5\uc720 \u2014 \uadf8\uac78 \ubc14\uafb8\uba74 \uc6d0\ubcf8\uc5d0\ub3c4 \uc601\ud5a5. \uae4a\uc740 \ubcf5\uc81c\ub294 <code>structuredClone(obj)<\/code>(\ud604\ub300 API) \ub610\ub294 <code>JSON.parse(JSON.stringify(obj))<\/code>(\ud568\uc218\u00b7undefined\u00b7Date \uc190\uc2e4\ub428).<\/p>\n<\/div>\n\n<h2>\uac1d\uccb4 \ube44\uad50 \u2014 \ucc38\uc870 vs \ub0b4\uc6a9<\/h2>\n\n<pre><code>const a = { x: 1 };\nconst b = { x: 1 };\nconst c = a;\n\na === b;        \/\/ false \u2190 \ub2e4\ub978 \uac1d\uccb4 (\ucc38\uc870 \ub2e4\ub984)\na === c;        \/\/ true  \u2190 \uac19\uc740 \ucc38\uc870\n\n\/\/ \ub0b4\uc6a9 \ube44\uad50 (\uc595\uc740)\nfunction shallowEqual(a, b) {\n  const ka = Object.keys(a), kb = Object.keys(b);\n  if (ka.length !== kb.length) return false;\n  return ka.every(k =&gt; a[k] === b[k]);\n}\n\n\/\/ \uae4a\uc740 \ube44\uad50\ub294 lodash.isEqual \ub610\ub294 \uc9c1\uc811 \uc7ac\uadc0\n\/\/ node 22+ \ub77c\uba74 util.isDeepStrictEqual<\/code><\/pre>\n\n<h2>\uac1d\uccb4 \uba54\uc11c\ub4dc \u2014 \uc790\uc8fc \uc4f0\ub294 4\uac1c<\/h2>\n\n<div class=\"tablewrap\">\n<table>\n  <thead>\n    <tr><th>\uba54\uc11c\ub4dc<\/th><th>\uc6a9\ub3c4<\/th><\/tr>\n  <\/thead>\n  <tbody>\n    <tr><td data-label=\"\uba54\uc11c\ub4dc\">Object.freeze(obj)<\/td><td data-label=\"\uc6a9\ub3c4\">\uc18d\uc131 \ubcc0\uacbd\/\ucd94\uac00 \ub9c9\uae30 (\uc595\uc74c)<\/td><\/tr>\n    <tr><td data-label=\"\uba54\uc11c\ub4dc\">Object.is(a, b)<\/td><td data-label=\"\uc6a9\ub3c4\">=== \uc640 \uac70\uc758 \uac19\uc9c0\ub9cc NaN\/-0 \ucc98\ub9ac \ub2e4\ub984<\/td><\/tr>\n    <tr><td data-label=\"\uba54\uc11c\ub4dc\">Object.hasOwn(obj, k)<\/td><td data-label=\"\uc6a9\ub3c4\">\uc790\uae30 \uc790\uc2e0 \uc18d\uc131\uc778\uc9c0 (\ud504\ub85c\ud1a0\ud0c0\uc785 X)<\/td><\/tr>\n    <tr><td data-label=\"\uba54\uc11c\ub4dc\">Object.groupBy(arr, fn)<\/td><td data-label=\"\uc6a9\ub3c4\">ES2024 \u2014 \ubc30\uc5f4\uc744 \uac1d\uccb4\ub85c \uadf8\ub8f9\ud654<\/td><\/tr>\n  <\/tbody>\n<\/table>\n<\/div>\n\n<pre><code>\/\/ in \uc5f0\uc0b0\uc790 vs hasOwn\n\"toString\" in user;             \/\/ true (\ud504\ub85c\ud1a0\ud0c0\uc785 \uccb4\uc778 \ud3ec\ud568)\nObject.hasOwn(user, \"toString\"); \/\/ false (\uc790\uae30 \uac83\ub9cc)\n\n\/\/ freeze\nconst config = Object.freeze({ apiUrl: \"https:\/\/...\" });\nconfig.apiUrl = \"x\";            \/\/ strict mode \uc5d0\uc11c \uc5d0\ub7ec, \uc544\ub2c8\uba74 \uc870\uc6a9\ud788 \ubb34\uc2dc<\/code><\/pre>\n\n<div class=\"databox\">\n  <p><strong>\uc2e4\uc804 \uccb4\ud06c.<\/strong> \u2460 \uc0c8 \uac1d\uccb4 \ub9cc\ub4e4 \ub54c\ub294 <code>{ ...a, x: newVal }<\/code> \ud328\ud134\uc774 React\/Redux \ud45c\uc900. \u2461 API \uc751\ub2f5 \uc77c\ubd80\ub9cc \uc4f0\ub824\uba74 \uad6c\uc870 \ubd84\ud574 + \uae30\ubcf8\uac12. \u2462 \ud0a4-\uac12 \uc21c\ud68c\ub294 \uac70\uc758 \ud56d\uc0c1 <code>Object.entries<\/code> + for&#8230;of. \u2463 \uae4a\uc740 \ubcf5\uc81c\ub294 <code>structuredClone<\/code>.<\/p>\n<\/div>\n\n<div class=\"cta\">\n  <h3>11\ud3b8 \u2014 \ubb38\uc790\uc5f4 \uba54\uc11c\ub4dc<\/h3>\n  <p>\ud15c\ud50c\ub9bf \ub9ac\ud130\ub7f4, split\u00b7replace\u00b7slice, \uc815\uaddc\uc2dd \uc0b4\uc9dd.<\/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: 9\ud3b8 \ubc30\uc5f4 \u00b7 \ud604\uc7ac: <strong>10\ud3b8 (\uae30\ucd08)<\/strong> \u00b7 \ub2e4\uc74c \u2192 11\ud3b8 \ubb38\uc790\uc5f4 \u00b7 \uc9c4\ud589: <strong>10\/26<\/strong>\n<\/div>\n\n<\/article>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\uac1d\uccb4 \ub9ac\ud130\ub7f4\u00b7Object.keys\/values\u00b7\uad6c\uc870 \ubd84\ud574\u00b7spread. 26\ud3b8 \uad50\uc7ac 10\ud3b8.<\/p>\n","protected":false},"author":1,"featured_media":536,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[],"class_list":["post-341","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\/341","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=341"}],"version-history":[{"count":3,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/341\/revisions"}],"predecessor-version":[{"id":562,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/341\/revisions\/562"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media\/536"}],"wp:attachment":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media?parent=341"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/categories?post=341"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/tags?post=341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}