{"id":4940,"date":"2017-08-19T14:40:37","date_gmt":"2017-08-19T05:40:37","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=4940"},"modified":"2020-05-28T14:18:02","modified_gmt":"2020-05-28T05:18:02","slug":"%ec%b4%88%ec%95%88-javascript-%ec%83%88%eb%a1%9c%ec%9a%b4-%eb%ac%b8%eb%b2%95-%ec%a0%95%eb%a6%ac","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=4940","title":{"rendered":"JavaScript \uc0c8\ub85c\uc6b4 \ubb38\ubc95 \uc815\ub9ac"},"content":{"rendered":"<p>\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc5d0\uc11c var\ub85c \uc815\uc758\ub41c \ubcc0\uc218\uc758 \uc720\ud6a8\ubc94\uc704\ub294 \ud568\uc218\uc785\ub2c8\ub2e4. \uc77c\ubc18\uc801\uc778 \ud504\ub85c\uadf8\ub798\ubc0d \uc5b8\uc5b4\uc5d0\uc11c \ubcc0\uc218\uc758 \uc720\ud6a8\ubc94\uc704\ub294 \ube14\ub7ed(Block)\uc778\ub370\uc694. \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc5d0\uc11c \ube14\ub7ed\uc758 \ubc94\uc704 \uc9c0\uc815\uc744 \uc704\ud55c \uc2dc\uc791\uc740 &#8216;{&#8216;\uc774\uba70 \ub05d\uc740 &#8216;}&#8217;\uc785\ub2c8\ub2e4. let\uc744 \ud1b5\ud55c \ubcc0\uc218\uc758 \uc815\uc758\ub294 \ubc14\ub85c \uc774\ub7ec\ud55c \ube14\ub7ed \ubc94\uc704\uc5d0\uc11c\ub9cc \uc720\ud6a8\ud55c \ubcc0\uc218\ub97c \uc815\uc758\ud560 \uc218 \uc788\ub3c4\ub85d \ud569\ub2c8\ub2e4.<\/p>\n<p>\uc774\ub7ec\ud55c let \ud0a4\uc6cc\ub4dc\ub97c \ud1b5\ud574 \ubcf4\ub2e4 \ubd84\uba85\ud55c \uc758\ubbf8\ub85c \ubcc0\uc218\ub97c \uc815\uc758\ud574, \ud544\uc694\ud55c \uc2dc\uc810\uc5d0\uc11c\ub9cc \uba54\ubaa8\ub9ac\uc5d0 \uc801\uc7ac\ub418\uc5b4 \uc0ac\uc6a9\ub418\uace0 \ud544\uc694\ud558\uc9c0 \uc54a\uc740 \uc2dc\uc810\uc5d0\uc11c\ub294 \uba54\ubaa8\ub9ac\uc5d0\uc11c \uc81c\uac70\ub418\ub3c4\ub85d \ud560 \uc218 \uc788\ub294\ub370\uc694. \uc544\ub798\uc758 \uc608\ub294 \ubc30\uc5f4\uc5d0 \ub300\ud55c \uac01 \uc694\uc18c\ub97c \uc800\uc7a5\ud558\uae30 \uc704\ud574 i\ub77c\ub294 \ubcc0\uc218\ub97c let\uc73c\ub85c \uc120\uc5b8\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. <\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nlet a = [1, 2, 3];\r\nfor (let i of a) {\r\n    alert(i);\r\n}\r\n<\/pre>\n<p>let \ud0a4\uc6cc\ub4dc\ub294 IE\ub098 Chrome \ubaa8\ub450\uc5d0\uc11c \uc9c0\uc6d0\ub418\uc9c0\ub9cc, \uc704\uc758 for \ubb38\uc740 IE(v11)\uc5d0\uc11c \uc9c0\uc6d0\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\uc544\ub798\uc758 \ucf54\ub4dc\ub294 \ubc30\uc5f4\uc5d0 \ub300\ud55c \uac01 \uc18c\uc694\ub97c \uc21c\ud68c\ud558\uba70 \ucc98\ub9ac\ud560 \uc218 \uc788\ub294 \ud568\uc218\ub97c \uc9c0\uc815\ud560 \uc218 \uc788\ub294 \ubc30\uc5f4\uc758 forEach \ub9e4\uc11c\ub4dc\uc5d0 \ub300\ud55c \uc608\uc81c \ucf54\ub4dc\uc785\ub2c8\ub2e4. <\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nfunction logArrayElements(element, index, array) {\r\n    alert(\"a[\" + index + \"] = \" + element);\r\n}\r\n\r\n[2, 5, 9].forEach(logArrayElements);\r\n<\/pre>\n<p>\uc544\ub798\uc758 \ucf54\ub4dc\ub294 C++, Java, C#\uc758 \ub78c\ub2e4 \ud568\uc218\uc640 \ub9e4\uc6b0 \uc720\uc0ac\ud55c Javascript\uc758 \ubb38\ubc95\uc785\ub2c8\ub2e4. IE(v11)\uc5d0\uc11c\ub294 \uc9c0\uc6d0\ud558\uc9c0 \uc54a\uc73c\uba70 Chrome\uc5d0\uc11c\ub9cc \uc9c0\uc6d0\ud569\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\n\/\/ Case 1 Start\r\nsayHello = name => alert(\"Hello, \" + name);\r\nsayHello(\"Dip2K\");\r\n\/\/ Case 1 End\r\n\r\n\/\/ Case 2 Start\r\nsetTimeout(() => alert(\"timeout!\"), 2000);\r\n\/\/ Case 2 End\r\n\r\n\/\/ Case 3 Start\r\n[2, 4, 8].forEach(item => alert(item));\r\n\/\/ Case 3 End  \r\n      \r\n\/\/ Case 4 Start\r\ncalcCircumference = diameter => {\r\n    return Math.PI * diameter;\r\n}\r\n\r\nalert(calcCircumference(10));\r\n\/\/ Case 4 End\r\n<\/pre>\n<p>Javascript\uc5d0\uc11c \ud568\uc218\ub97c \uc815\uc758\uc2dc\uc5d0 \uc778\uc790\uc5d0 \uae30\ubcf8\uac12\uc744 \uc9c0\uc815\ud560 \uc218 \uc788\ub294\ub370\uc694. \uc544\ub798\uc758 \ucf54\ub4dc\uc5d0\uc11c \uadf8 \uc608\ub97c \uba85\ud655\ud788 \uc0b4\ud3b4\ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nfunction volume(l = 10, w, h = 10) {\r\n    alert(l + \" \" + w + \" \" + h);\r\n}\r\n\r\nvolume();\r\n\r\nvolume2 = (l = 10, w, h = 10) => {\r\n    alert(l + \" \" + w + \" \" + h);\r\n};\r\n\r\nvolume2();\r\n<\/pre>\n<p>Javascript\uc5d0\uc11c\ub294 C\ub098 C#\uc5d0\uc11c\ucc98\ub7fc \ubcc0\uc218\ub97c \ud65c\uc6a9\ud55c \ud615\uc2dd\ud654\ub41c \ubb38\uc790\uc5f4\uc744 \uc27d\uac8c \uad6c\uc131\ud560 \uc218 \uc788\ub294 \ubb38\ubc95\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc544\ub798\ub294 first\uc640 last\ub77c\ub294 \ubcc0\uc218\ub97c \ubb38\uc790\uc5f4\uc744 \uad6c\uc131\ud558\uae30 \uc704\ud574\uc11c ${} \uc0ac\uc6a9\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \ubb38\uc790\uc5f4 \uad6c\uc131\uc744 \uc704\ud574 \uc678\ub530\uc6c0\ud45c(&#8216;)\ub098 \uc30d\ub530\uc6c0\ud45c(&#8220;)\uac00 \uc544\ub2cc `\ub97c \uc0ac\uc6a9\ud574\uc57c \ud55c\ub2e4\ub294 \uc810\uc5d0 \uc720\uc758\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nlet first = \"Kim\";\r\nlet last = \"Hyoung Jun\";\r\n\r\nconst welcome = `You have logged in as ${first} ${last}`;\r\n\r\nalert(welcome);\r\n<\/pre>\n<p>\uc544\ub798\uc758 \ubb38\ubc95\uc740 IE(v11)\uc5d0\uc11c\ub294 \uc9c0\uc6d0\ud558\uc9c0 \uc54a\uc9c0\ub9cc, \ub9e4\uc6b0 \uc720\uc6a9\ud55c \uac83\uc73c\ub85c\uc11c \ubc30\uc5f4\uc744 \ud569\uce58\uac70\ub098 \ubcf5\uc81c\ud558\ub294\ub370 \uc720\uc6a9\ud558\uac8c \uc0ac\uc6a9\ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\n\/\/ Case 1 Start\r\nconst odd = [1, 3, 5];\r\nconst nums = [2, 4, 6, ...odd];\r\nalert(nums);\r\n\/\/ Case 1 End\r\n\r\n\/\/ Case 2 Start\r\nconst odd2 = [...odd];\r\nalert(odd2);\r\n\/\/ Case 2 End\r\n\r\n\/\/ Case 3 Start\r\nconst { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 };\r\nalert(a);\r\nalert(b);\r\nalert(z);\r\n\/\/ Case 3 End\r\n<\/pre>\n<p>Case 1\uc740 odd \ubc30\uc5f4\uacfc nums \ubc30\uc5f4\uc744 \ud569\uce58\ub294 \uac83\uc774\uace0, Case 2\ub294 odd \ubc30\uc5f4\uc744 odd2 \ubc30\uc5f4\ub85c \ubcf5\uc81c(\ucc38\uc870\uac00 \uc544\ub2cc)\ud558\ub294 \uac83\uc785\ub2c8\ub2e4. Case 3\ub294 \ub2e4\uc18c \uadf8 \uc131\uaca9\uc774 \ub2e4\ub978\ub370 a\ub294 1, b\ub294 2, z\ub294 {c:3, d:4} \uac1d\uccb4\uac00 \ub429\ub2c8\ub2e4.<\/p>\n<p>\uc544\ub798\uc758 \ubb38\ubc95\uc740 Javascript\uc758 \ub78c\ub2e4 \ud568\uc218(\uba85\ud655\ud788 \ub78c\ub2e4 \ud568\uc218\ub77c\uace0 \ubd88\ub974\ub294 \uac83\uc774 \ub9de\ub294\uc9c0\ub294 \ud655\uc2e4\uce58 \uc54a\uc73c\ub098)\ub97c \uc0ac\uc6a9\ud574 \ucf54\ub4dc\ub97c \uac04\uacb0\ud558\uac8c \ud45c\ud604\ud55c \uac83\uc73c\ub85c\uc368, \ubc30\uc5f4\uc758 \uc694\uc18c \uc911 \ud2b9\uc815 \uc870\uac74\uc5d0 \uc77c\uce58\ud558\ub294 \uc694\uc18c\ub97c \uac80\uc0c9\ud558\ub294 \uac83\uc73c\ub85c, \ud2b9\uc815 \uc870\uac74\uc744 \ub78c\ub2e4 \ud568\uc218\ub85c \uc815\uc758\ud574 \ud45c\ud604\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nconst pets = [\r\n    { type: 'Dog', name: 'Max' },\r\n    { type: 'Cat', name: 'Karl' },\r\n    { type: 'Dog', name: 'Tommy' }\r\n];\r\n\r\npet = pets.find(pet => pet.name === 'Tommy');\r\nalert(pet.type);\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc5d0\uc11c var\ub85c \uc815\uc758\ub41c \ubcc0\uc218\uc758 \uc720\ud6a8\ubc94\uc704\ub294 \ud568\uc218\uc785\ub2c8\ub2e4. \uc77c\ubc18\uc801\uc778 \ud504\ub85c\uadf8\ub798\ubc0d \uc5b8\uc5b4\uc5d0\uc11c \ubcc0\uc218\uc758 \uc720\ud6a8\ubc94\uc704\ub294 \ube14\ub7ed(Block)\uc778\ub370\uc694. \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc5d0\uc11c \ube14\ub7ed\uc758 \ubc94\uc704 \uc9c0\uc815\uc744 \uc704\ud55c \uc2dc\uc791\uc740 &#8216;{&#8216;\uc774\uba70 \ub05d\uc740 &#8216;}&#8217;\uc785\ub2c8\ub2e4. let\uc744 \ud1b5\ud55c \ubcc0\uc218\uc758 \uc815\uc758\ub294 \ubc14\ub85c \uc774\ub7ec\ud55c \ube14\ub7ed \ubc94\uc704\uc5d0\uc11c\ub9cc \uc720\ud6a8\ud55c \ubcc0\uc218\ub97c \uc815\uc758\ud560 \uc218 \uc788\ub3c4\ub85d \ud569\ub2c8\ub2e4. \uc774\ub7ec\ud55c let \ud0a4\uc6cc\ub4dc\ub97c \ud1b5\ud574 \ubcf4\ub2e4 \ubd84\uba85\ud55c \uc758\ubbf8\ub85c \ubcc0\uc218\ub97c \uc815\uc758\ud574, \ud544\uc694\ud55c \uc2dc\uc810\uc5d0\uc11c\ub9cc \uba54\ubaa8\ub9ac\uc5d0 \uc801\uc7ac\ub418\uc5b4 \uc0ac\uc6a9\ub418\uace0 \ud544\uc694\ud558\uc9c0 \uc54a\uc740 \uc2dc\uc810\uc5d0\uc11c\ub294 \uba54\ubaa8\ub9ac\uc5d0\uc11c \uc81c\uac70\ub418\ub3c4\ub85d \ud560 &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=4940\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;JavaScript \uc0c8\ub85c\uc6b4 \ubb38\ubc95 \uc815\ub9ac&#8221;<\/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":[1],"tags":[],"class_list":["post-4940","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/4940","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=4940"}],"version-history":[{"count":5,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/4940\/revisions"}],"predecessor-version":[{"id":9650,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/4940\/revisions\/9650"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4940"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4940"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4940"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}