{"id":16066,"date":"2025-06-09T10:46:42","date_gmt":"2025-06-09T01:46:42","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=16066"},"modified":"2026-05-20T10:56:24","modified_gmt":"2026-05-20T01:56:24","slug":"modern-javascript","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=16066","title":{"rendered":"Modern JavaScript"},"content":{"rendered":"

\ubcc0\uc218\uc640 \uc2a4\ucf54\ud504 (let, const)<\/h3>\n

var\ub294 \ubc84\uadf8\ub97c \uc720\ubc1c\ud558\uae30 \uc26c\uc6cc \ub354 \uc774\uc0c1 \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uc74c. \ud639 \ub3d9\ub8cc\uac00 var\ub97c \uc0ac\uc6a9\ud558\uace0 \uc788\ub2e4\uba74 \uac70\uce68\uc5c6\ub294 \ud558\uc774\ud0a5\uc73c\ub85c..<\/p>\n

\r\nconst maxPoints = 100; \/\/ \ubcc0\uacbd \ubd88\uac00\r\nlet currentScore = 0;  \/\/ \ubcc0\uacbd \uac00\ub2a5\r\ncurrentScore += 10;\r\n<\/pre>\n
\uac1d\uccb4 \ucd08\uae30\ud654 \ub2e8\ucd95 \uc131\uaca9 (Property Shorthand)<\/h2>\n
\r\nconst name = 'Sora';\r\nconst age = 28;\r\n\r\n\/\/ \uacfc\uac70 \ubc29\uc2dd\r\nconst user = { name: name, age: age };\r\n\r\n\/\/ \ucd5c\uc2e0 \ubc29\uc2dd (\ub611\uac19\uc774 \ub3d9\uc791\ud569\ub2c8\ub2e4)\r\nconst user = { name, age };\r\n<\/pre>\n
\uad6c\uc870\ub97c \ubd84\ud574\ud574\uc11c \ud560\ub2f9 (\uad6c\uc870\ubd84\ud574\ud560\ub2f9, Destructuring Assignment)<\/h2>\n
\r\nconst user = { name: 'Alice', age: 30, city: 'Seoul' };\r\n\r\n\/\/ \uac1d\uccb4 \uad6c\uc870 \ubd84\ud574\r\nconst { name, age } = user;\r\nconsole.log(name, age); \/\/ Alice 30\r\n\r\nconst { name: name2, ...sss } = user;\r\nconsole.log(name2, sss); \/\/ Alice { age: 30, city: 'Seoul' }\r\n\r\n\/\/ \ub2e4\ub978 \uc774\ub984\uc73c\ub85c \ud560\ub2f9\ud558\uac70\ub098 \uae30\ubcf8\uac12 \uc124\uc815\ub3c4 \uac00\ub2a5\r\nconst { name: fullName, email = 'noemail@example.com' } = user;\r\nconsole.log(fullName, email); \/\/ Alice noemail@example.com\r\n\r\n\/\/ \ubc30\uc5f4 \uad6c\uc870 \ubd84\ud574\r\nconst colors = ['red', 'green', 'blue'];\r\nconst [first, second, third] = colors;\r\nconsole.log(first, second, third); \/\/ red green blue\r\n<\/pre>\n
\ud654\uc0b4\ud45c \ud568\uc218 (Arrow Functions)<\/h3>\n
\ud654\uc0b4\ud45c \ud568\uc218\ub294 this\uc5d0 \ub300\ud55c \uc720\uc9c0\ub825\uc774 \ubc1c\uc0dd<\/p>\n
\r\n\/\/ \uae30\uc874 \ubc29\uc2dd\r\nfunction add(a, b) {\r\n  return a + b;\r\n}\r\n\r\n\/\/ \ud654\uc0b4\ud45c \ud568\uc218 (\ucd5c\uc2e0)\r\nconst add = (a, b) => a + b;\r\n<\/pre>\n
\uad6c\uc131 \uc694\uc18c\ub97c \ud3bc\uccd0 \uc0ac\uc6a9\ud558\ub294 \ubb38\ubc95 (\uc2a4\ud504\ub808\ub4dc \ubb38\ubc95, Spread Syntax)<\/h3>\n
\r\n\/* \ubc30\uc5f4 \uacb0\ud569 \ubc0f \ubcf5\uc0ac\uc5d0\uc11c\uc758 \uc608 *\/\r\n\r\nconst arr1 = [1, 2, 3];\r\nconst arr2 = [4, 5, 6];\r\n\r\n\/\/ \ubc30\uc5f4 \uacb0\ud569\r\nconst combinedArr = [...arr1, ...arr2];\r\nconsole.log(combinedArr); \/\/ [1, 2, 3, 4, 5, 6]\r\n\r\n\/\/ \ubc30\uc5f4 \ubcf5\uc0ac (\uc595\uc740 \ubcf5\uc0ac)\r\nconst copiedArr = [...arr1];\r\nconsole.log(copiedArr); \/\/ [1, 2, 3]\r\n\r\n\/* \uac1d\uccb4 \ubcd1\ud569 \ubc0f \ubcf5\uc0ac\uc5d0\uc11c\uc758 \uc608 *\/\r\n\r\nconst obj1 = { a: 1, b: 2 };\r\nconst obj2 = { c: 3, d: 4 };\r\n\r\n\/\/ \uac1d\uccb4 \ubcd1\ud569\r\nconst combinedObj = { ...obj1, ...obj2 };\r\nconsole.log(combinedObj); \/\/ { a: 1, b: 2, c: 3, d: 4 }\r\n\r\n\/\/ \uac1d\uccb4 \ubcf5\uc0ac (\uc595\uc740 \ubcf5\uc0ac)\r\nconst copiedObj = { ...obj1 };\r\nconsole.log(copiedObj); \/\/ { a: 1, b: 2 }\r\n\r\n\/* \ud568\uc218 \uc778\uc790 \uc804\ub2ec\uc5d0\uc11c\uc758 \uc608 *\/\r\n\r\nfunction sum(a, b, c) {\r\n  return a + b + c;\r\n}\r\n\r\nconst numbers = [1, 2, 3];\r\nconsole.log(sum(...numbers)); \/\/ 6 (\ubc30\uc5f4 \uc694\uc18c\ub97c \uac1c\ubcc4 \uc778\uc790\ub85c \ud3bc\uccd0\uc11c \uc804\ub2ec)\r\n\r\n\/\/ \ub098\uba38\uc9c0: \ubaa8\uc73c\uae30\r\nfunction sum2(first, ...rest) {\r\n  return rest.reduce((acc, v) => acc + v, first);\r\n}\r\n\r\nconsole.log(sum2(1, 2, 3, 4)); \/\/ \ucd9c\ub825 : 10\r\n<\/pre>\n
null \ub610\ub294 undefine\uc774 \uc544\ub2d0 \uacbd\uc6b0\uc5d0 \ub300\ud55c \uc120\ud0dd\uc801 \uccb4\uc774\ub2dd(\uc120\ud0dd\uc801 \uccb4\uc774\ub2dd, Optional Chaining)<\/h3>\n
\r\nconst user = {\r\n  name: 'Dave',\r\n  address: {\r\n    street: '123 Main St',\r\n    city: 'Busan'\r\n  },\r\n  \/\/ phone: '010-1234-5678' \/\/ phone \uc18d\uc131\uc774 \uc5c6\uc744 \uc218 \uc788\uc74c\r\n};\r\n\r\n\/\/ \uae30\uc874 \ubc29\uc2dd (\uc5d0\ub7ec \ubc29\uc9c0)\r\nlet city = user.address && user.address.city;\r\nconsole.log(city); \/\/ Busan\r\n\r\nlet zipCode;\r\nif (user.address && user.address.zipCode) {\r\n  zipCode = user.address.zipCode;\r\n}\r\nconsole.log(zipCode); \/\/ undefined\r\n\r\n\/\/ \uc120\ud0dd\uc801 \uccb4\uc774\ub2dd\r\nconst userCity = user.address?.city;\r\nconsole.log(userCity); \/\/ Busan\r\n\r\nconst userPhone = user.phone?.number; \/\/ user.phone\uc774 undefined\uc774\ubbc0\ub85c userPhone\uc740 undefined\r\nconsole.log(userPhone); \/\/ undefined\r\n\r\nconst userStreet = user.address?.street;\r\nconsole.log(userStreet); \/\/ 123 Main St\r\n\r\n\/\/ \ubc30\uc5f4 \uc694\uc18c\uc5d0\ub3c4 \uc801\uc6a9 \uac00\ub2a5\r\nconst arr = [{ value: 10 }];\r\nconst firstValue = arr?.[0]?.value;\r\nconsole.log(firstValue); \/\/ 10\r\n\r\nconst emptyArr = [];\r\nconst nonExistentValue = emptyArr?.[0]?.value;\r\nconsole.log(nonExistentValue); \/\/ undefined\r\n\r\n\/\/ \ub9e4\uc11c\ub4dc\ub3c4 \uac00\ub2a5\ud568\r\nconsole.log?.(\"....\");\r\n<\/pre>\n
\uc9c4\uc9dc null \ub610\ub294 undefine\uc5d0 \ub300\ud55c \uc120\ud0dd \uc5f0\uc0b0\uc790 (Nullish \ubcd1\ud569 \uc5f0\uc0b0\uc790, Nullish Coalescing Operator)<\/h3>\n
\r\nconst userInput = null;\r\nconst defaultValue = 'default value';\r\n\r\n\/\/ || \uc5f0\uc0b0\uc790 (Falsy \uac12\ub3c4 \uac78\ub7ec\ub0c4)\r\nconst resultOr = userInput || defaultValue;\r\nconsole.log(resultOr); \/\/ default value\r\n\r\nconst zeroValue = 0;\r\nconst resultOrZero = zeroValue || defaultValue;\r\nconsole.log(resultOrZero); \/\/ default value (0\ub3c4 Falsy\ub85c \uac04\uc8fc\ud558\uc5ec default value\uac00 \ud560\ub2f9\ub428)\r\n\r\n\/\/ ?? \uc5f0\uc0b0\uc790 (null \ub610\ub294 undefined\ub9cc \uac78\ub7ec\ub0c4)\r\nconst resultNullish = userInput ?? defaultValue;\r\nconsole.log(resultNullish); \/\/ default value\r\n\r\nconst zeroValueNullish = 0;\r\nconst resultNullishZero = zeroValueNullish ?? defaultValue;\r\nconsole.log(resultNullishZero); \/\/ 0 (0\uc740 \uc720\ud6a8\ud55c \uac12\uc73c\ub85c \uac04\uc8fc\ub428)\r\n\r\nconst emptyString = '';\r\nconst resultNullishEmptyString = emptyString ?? defaultValue;\r\nconsole.log(resultNullishEmptyString); \/\/ ''\r\n<\/pre>\n
\ube44\ub3d9\uae30 \ucc98\ub9ac ( async \/ await )<\/h3>\n
\r\nasync function fetchData() {\r\n  try {\r\n    const res = await fetch(\"https:\/\/api.example.com\/data\");\r\n    const data = await res.json();\r\n    console.log(data);\r\n  } catch (err) {\r\n    console.error(err);\r\n  }\r\n}\r\n<\/pre>\n
 \ucd5c\uc2e0 \ubc30\uc5f4 \/ \uac1d\uccb4 \uba54\uc11c<\/h3>\n
\r\n\/\/ \ubc30\uc5f4\r\n[1, 2, 3].at(-1); \/\/ 3 (\ub4a4\uc5d0\uc11c \uc778\ub371\uc2a4)\r\n[1, [2, [3]]].flat(Infinity); \/\/ [1, 2, 3]\r\n[1, 2, 3].flatMap(x => [x, x * 2]); \/\/ [1,2, 2,4, 3,6]\r\n\/\/ \uac1d\uccb4\r\nObject.entries({ a: 1, b: 2 }); \/\/ [[\"a\",1], [\"b\",2]]\r\nObject.fromEntries([[\"a\", 1]]); \/\/ { a: 1 }\r\nObject.hasOwn(obj, \"key\"); \/\/ true\/false (ES2022)\r\n<\/pre>\n
\uae30\uc874 .sort()\ub098 .reverse()\ub294 \uc6d0\ubcf8 \ubc30\uc5f4 \uc790\uccb4\ub97c \ubc14\uafb8\uc5b4 \ubc84\ub824\uc11c \ubc84\uadf8\ub97c \uc790\uc8fc \uc720\ubc1c\ud588\uc2b5\ub2c8\ub2e4. \ucd5c\uc2e0 \uba54\uc11c\ub4dc\ub294 \uc6d0\ubcf8\uc740 \uadf8\ub300\ub85c \ub450\uace0, \uc815\ub82c\ub41c ‘\uc0c8\ub85c\uc6b4 \ubc30\uc5f4’\uc744 \ubc18\ud658\ud569\ub2c8\ub2e4.<\/p>\n
\r\nconst numbers = [3, 1, 4];\r\nconst sorted = numbers.toSorted();\r\n\r\nconsole.log(numbers); \/\/ [3, 1, 4] (\uc6d0\ubcf8 \uc720\uc9c0!)\r\nconsole.log(sorted);  \/\/ [1, 3, 4] (\uc0c8 \ubc30\uc5f4)\r\n<\/pre>\n
\ub17c\ub9ac \ud560\ub2f9 \uc5f0\uc0b0\uc790<\/h3>\n
\r\na ||= \"\uae30\ubcf8\uac12\"; \/\/ a\uac00 falsy\uba74 \ud560\ub2f9\r\na &&= \"\uc0c8\uac12\"; \/\/ a\uac00 truthy\uba74 \ud560\ub2f9\r\na ??= \"\uae30\ubcf8\uac12\"; \/\/ a\uac00 null\/undefined\uba74(truthy\uc640 \ub2e4\ub984) \ud560\ub2f9\r\n<\/pre>\n
Promise \uad00\ub828<\/h3>\n
\r\n\/\/ \ubaa8\ub450 \uc131\uacf5\ud574\uc57c \ud1b5\uacfc\r\nawait Promise.all([p1, p2, p3]);\r\n\/\/ \ud558\ub098\ub77c\ub3c4 \uc644\ub8cc\ub418\uba74 \ud1b5\uacfc\r\nawait Promise.race([p1, p2]);\r\n\/\/ \uc131\uacf5\/\uc2e4\ud328 \uad00\uacc4\uc5c6\uc774 \uc804\ubd80 \uae30\ub2e4\ub9bc\r\nawait Promise.allSettled([p1, p2]);\r\n\/\/ \ud558\ub098\ub77c\ub3c4 \uc131\uacf5\ud558\uba74 \ud1b5\uacfc\r\nawait Promise.any([p1, p2])\r\n<\/pre>\n
for…of \/ for…in<\/h3>\n
\r\nfor (const item of [1, 2, 3]) { } \/\/ \uac12 \uc21c\ud68c\r\nfor (const key in { a: 1, b: 2 }) { } \/\/ \ud0a4 \uc21c\ud68c\r\n<\/pre>\n
\ucd5c\uc0c1\uc704 await (Top-level await)<\/h3>\n
\uc608\uc804\uc5d0\ub294 await \ud0a4\uc6cc\ub4dc\ub97c \uc4f0\ub824\uba74 \ubb34\uc870\uac74 async \ud568\uc218 \ub0b4\ubd80\uc5d0\uc11c\ub9cc \uac10\uc2f8\uc11c \uc0ac\uc6a9\ud574\uc57c \ud588\uc2b5\ub2c8\ub2e4. \uc774\uc81c\ub294 \ubaa8\ub4c8 \uc2dc\uc2a4\ud15c(import\/export\ub97c \uc4f0\ub294 \ud658\uacbd) \ud30c\uc77c\uc758 \uac00\uc7a5 \ubc14\uae65\ucabd(Top-level)\uc5d0\uc11c\ub3c4 async \ud568\uc218 \uc5c6\uc774 \ubc14\ub85c await\ub97c \uc4f8 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\nconst response = await fetch('https:\/\/api.example.com\/config');
\nexport const config = await response.json();<\/p>\n
\n","protected":false},"excerpt":{"rendered":"
\ubcc0\uc218\uc640 \uc2a4\ucf54\ud504 (let, const) var\ub294 \ubc84\uadf8\ub97c \uc720\ubc1c\ud558\uae30 \uc26c\uc6cc \ub354 \uc774\uc0c1 \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uc74c. \ud639 \ub3d9\ub8cc\uac00 var\ub97c \uc0ac\uc6a9\ud558\uace0 \uc788\ub2e4\uba74 \uac70\uce68\uc5c6\ub294 \ud558\uc774\ud0a5\uc73c\ub85c.. const maxPoints = 100; \/\/ \ubcc0\uacbd \ubd88\uac00 let currentScore = 0; \/\/ \ubcc0\uacbd \uac00\ub2a5 currentScore += 10; \uac1d\uccb4 \ucd08\uae30\ud654 \ub2e8\ucd95 \uc131\uaca9 (Property Shorthand) const name = ‘Sora’; const age = 28; \/\/ \uacfc\uac70 \ubc29\uc2dd const user … <\/p>\n
\ub354 \ubcf4\uae30 “Modern JavaScript”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[88,1],"tags":[],"class_list":["post-16066","post","type-post","status-publish","format-standard","hentry","category-javascript","category-uncategorized"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/16066","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=16066"}],"version-history":[{"count":6,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/16066\/revisions"}],"predecessor-version":[{"id":16848,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/16066\/revisions\/16848"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16066"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=16066"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=16066"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}