{"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":"2025-06-09T11:00:06","modified_gmt":"2025-06-09T02:00:06","slug":"modern-javascript","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=16066","title":{"rendered":"Modern JavaScript"},"content":{"rendered":"

\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\r\n\/\/ \uc77c\ubd80\ub9cc \ucd94\ucd9c\ud558\uac70\ub098 \ub098\uba38\uc9c0 \uc694\uc18c\ub4e4\uc744 \ubc30\uc5f4\ub85c \ubc1b\uc744 \uc218\ub3c4 \uc788\uc74c\r\nconst [one, two, ...rest] = colors;\r\nconsole.log(one, two, rest); \/\/ red green ['blue']\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<\/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<\/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
\uc774\uc678\uc5d0\ub3c4 \ud654\uc0b4\ud45c \ud568\uc218, \ud15c\ud50c\ub9bf \ub9ac\ud130\ub7f4, \ud074\ub798\uc2a4, \ubaa8\ub4c8, async\/await \ub4f1\uc774 \uc788\uc74c.<\/p>\n","protected":false},"excerpt":{"rendered":"
\uad6c\uc870\ub97c \ubd84\ud574\ud574\uc11c \ud560\ub2f9 (\uad6c\uc870\ubd84\ud574\ud560\ub2f9, Destructuring Assignment) const user = { name: ‘Alice’, age: 30, city: ‘Seoul’ }; \/\/ \uac1d\uccb4 \uad6c\uc870 \ubd84\ud574 const { name, age } = user; console.log(name, age); \/\/ Alice 30 const { name: name2, …sss } = user; console.log(name2, sss); \/\/ Alice { age: 30, city: ‘Seoul’ } \/\/ \ub2e4\ub978 \uc774\ub984\uc73c\ub85c \ud560\ub2f9\ud558\uac70\ub098 … <\/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":4,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/16066\/revisions"}],"predecessor-version":[{"id":16070,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/16066\/revisions\/16070"}],"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}]}}