{"id":4293,"date":"2020-04-13T13:03:31","date_gmt":"2020-04-13T04:03:31","guid":{"rendered":"https:\/\/learningbox.co.jp\/?p=4293"},"modified":"2020-11-06T13:40:02","modified_gmt":"2020-11-06T04:40:02","slug":"blog_destructuring-assignment-javascript","status":"publish","type":"post","link":"https:\/\/learningbox.co.jp\/en\/2020\/04\/13\/blog_destructuring-assignment-javascript\/","title":{"rendered":"What is JavaScript's \"Split Assignment\"?"},"content":{"rendered":"<p>Hello! I'm Kamijo from Development Department\ud83d\udd0b<br \/>\nIn this article, we will introduce JavaScript's \"Split Assignment\".<br \/>\nI would like to summarize the article as clearly as possible. Thank you very much for your continued support.<\/p>\n<p class=\"mokujimidasi\">Click here for table of contents<\/p>\n<ul class=\"mokuji\">\n<li>1. what is split assignment?<\/li>\n<li>2. partitioning and assignment of arrays<\/li>\n<li>3. object partitioning and assignment<\/li>\n<li>4. rest syntax and split assignment<\/li>\n<\/ul>\n<p><!-- \uff11 --><\/p>\n<h2>What is Split Assignment?<\/h2>\n<blockquote><p>\nThe Destructuring assignment syntax is a JavaScript expression that allows you to take a value from an array or a property from an object and assign it to a separate variable.<br \/>\n<a link=\"https:\/\/developer.mozilla.org\/ja\/docs\/Web\/JavaScript\/Reference\/Operators\/Destructuring_assignment\">MDN web docs<\/a>\n<\/p><\/blockquote>\n<p><!-- \uff12 --><\/p>\n<h2>Split Array Assignment<\/h2>\n<p>The split assignment of an array is the same as the split assignment at the beginning of the<\/p>\n<p>Write variable declarations like array literals on the left side, and write arrays on the right side.<\/p>\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"dark\" data-default-tab=\"js,result\" data-user=\"kamijodev\" data-slug-hash=\"yLJqWWv\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"yLJqWWv\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/kamijodev\/pen\/yLJqWWv\"><br \/>\n  yLJqWWv<\/a> by kamijodev (<a href=\"https:\/\/codepen.io\/kamijodev\">@kamijodev<\/a>)<br \/>\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>If the number of arrays is not enough, it will be undefined.<\/p>\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"dark\" data-default-tab=\"js,result\" data-user=\"kamijodev\" data-slug-hash=\"ZEOjdOM\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"\u5206\u5272\u4ee3\u5165\uff12\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/kamijodev\/pen\/ZEOjdOM\"><br \/>\n  Split assignment 2<\/a> by kamijodev (<a href=\"https:\/\/codepen.io\/kamijodev\">@kamijodev<\/a>)<br \/>\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<h2>Split object assignment<\/h2>\n<p>It's the same as the split assignment of an array.<\/p>\n<p>Write variable declarations like object literals on the left side and objects on the right side.<\/p>\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"dark\" data-default-tab=\"js,result\" data-user=\"kamijodev\" data-slug-hash=\"wvWxLze\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"\u5206\u5272\u4ee3\u5165\uff13\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/kamijodev\/pen\/wvWxLze\"><br \/>\n  Split substitution 3<\/a> by kamijodev (<a href=\"https:\/\/codepen.io\/kamijodev\">@kamijodev<\/a>)<br \/>\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<h2>Rest Syntax and Split Assignment<\/h2>\n<p>It can be combined with the rest syntax to aggregate the rest of the values.<\/p>\n<p>In Japan, it seems to be called residual substitution.<\/p>\n<p>For more information on Rest Syntax, click here.<\/p>\n<p><a href=\"https:\/\/learningbox.co.jp\/en\/2020\/03\/26\/blog_javascript-syntax\/\" rel=\"noopener noreferrer\" target=\"_blank\">What are \"spread syntax\" and \"rest syntax\" in JavaScript?<\/a><\/p>\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"dark\" data-default-tab=\"js,result\" data-user=\"kamijodev\" data-slug-hash=\"xxOJoEo\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"\u5206\u5272\u4ee3\u5165\uff14\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/kamijodev\/pen\/xxOJoEo\"><br \/>\n  Split substitution 4<\/a> by kamijodev (<a href=\"https:\/\/codepen.io\/kamijodev\">@kamijodev<\/a>)<br \/>\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>","protected":false},"excerpt":{"rendered":"\u3053\u3093\u306b\u3061\u306f\uff01\u958b\u767a\u90e8\u306e\u4e0a\u689d\u3067\u3059\ud83d\udd0b \u4eca\u56de\u306e\u8a18\u4e8b\u3067\u306fJavaScript\u306e\u300c\u5206\u5272\u4ee3\u5165\u300d\u306b\u3064\u3044\u3066\u3054\u7d39\u4ecb\u3044\u305f\u3057\u307e\u3059\u3002 \u306a [&hellip;]","protected":false},"author":1,"featured_media":4427,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_vk_print_noindex":"","sitemap_hide":"","_veu_custom_css":"#post_title {\r\n  font-size: 200% !important;\r\n}\r\nbody {\r\n\tfont-family: \"Segoe WPC\", \"Segoe UI\", \"SFUIText-Light\", \"HelveticaNeue-Light\", sans-serif, \"Droid Sans Fallback\";\r\n\tfont-size: 14px;\r\n\t\/* padding: 0 12px; *\/\r\n\tline-height: 22px;\r\n\tword-wrap: break-word;\r\n}\r\n\r\n#code-csp-warning {\r\n\tposition: fixed;\r\n\ttop: 0;\r\n\tright: 0;\r\n\tcolor: white;\r\n\tmargin: 16px;\r\n\ttext-align: center;\r\n\tfont-size: 12px;\r\n\tfont-family: sans-serif;\r\n\tbackground-color:#444444;\r\n\tcursor: pointer;\r\n\tpadding: 6px;\r\n\tbox-shadow: 1px 1px 1px rgba(0,0,0,.25);\r\n}\r\n\r\n#code-csp-warning:hover {\r\n\ttext-decoration: none;\r\n\tbackground-color:#007acc;\r\n\tbox-shadow: 2px 2px 2px rgba(0,0,0,.25);\r\n}\r\n\r\n\r\nbody.scrollBeyondLastLine {\r\n\tmargin-bottom: calc(100vh - 22px);\r\n}\r\n\r\nbody.showEditorSelection .code-line {\r\n\tposition: relative;\r\n}\r\n\r\nbody.showEditorSelection .code-active-line:before,\r\nbody.showEditorSelection .code-line:hover:before {\r\n\tcontent: \"\";\r\n\tdisplay: block;\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: -12px;\r\n\theight: 100%;\r\n}\r\n\r\nbody.showEditorSelection li.code-active-line:before,\r\nbody.showEditorSelection li.code-line:hover:before {\r\n\tleft: -30px;\r\n}\r\n\r\n.vscode-light.showEditorSelection .code-active-line:before {\r\n\tborder-left: 3px solid rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.vscode-light.showEditorSelection .code-line:hover:before {\r\n\tborder-left: 3px solid rgba(0, 0, 0, 0.40);\r\n}\r\n\r\n.vscode-dark.showEditorSelection .code-active-line:before {\r\n\tborder-left: 3px solid rgba(255, 255, 255, 0.4);\r\n}\r\n\r\n.vscode-dark.showEditorSelection .code-line:hover:before {\r\n\tborder-left: 3px solid rgba(255, 255, 255, 0.60);\r\n}\r\n\r\n.vscode-high-contrast.showEditorSelection .code-active-line:before {\r\n\tborder-left: 3px solid rgba(255, 160, 0, 0.7);\r\n}\r\n\r\n.vscode-high-contrast.showEditorSelection .code-line:hover:before {\r\n\tborder-left: 3px solid rgba(255, 160, 0, 1);\r\n}\r\n\r\nimg {\r\n\tmax-width: 100%;\r\n\tmax-height: 100%;\r\n}\r\n\r\na {\r\n\tcolor: #4080D0;\r\n\ttext-decoration: none;\r\n}\r\n\r\na:focus,\r\ninput:focus,\r\nselect:focus,\r\ntextarea:focus {\r\n\toutline: 1px solid -webkit-focus-ring-color;\r\n\toutline-offset: -1px;\r\n}\r\n\r\nhr {\r\n\tborder: 0;\r\n\theight: 2px;\r\n\tborder-bottom: 2px solid;\r\n}\r\n\r\nh1 {\r\n\tpadding-bottom: 0.3em;\r\n\tline-height: 1.2;\r\n\tborder-bottom-width: 1px;\r\n\tborder-bottom-style: solid;\r\n}\r\n\r\nh1, h2, h3 {\r\n\tfont-weight: normal;\r\n}\r\n\r\nh1 code,\r\nh2 code,\r\nh3 code,\r\nh4 code,\r\nh5 code,\r\nh6 code {\r\n\tfont-size: inherit;\r\n\tline-height: auto;\r\n}\r\n\r\na:hover {\r\n\tcolor: #4080D0;\r\n\ttext-decoration: underline;\r\n}\r\n\r\ntable {\r\n\tborder-collapse: collapse;\r\n}\r\n\r\ntable > thead > tr > th {\r\n\ttext-align: left;\r\n\tborder-bottom: 1px solid;\r\n}\r\n\r\ntable > thead > tr > th,\r\ntable > thead > tr > td,\r\ntable > tbody > tr > th,\r\ntable > tbody > tr > td {\r\n\tpadding: 5px 10px;\r\n}\r\n\r\ntable > tbody > tr + tr > td {\r\n\tborder-top: 1px solid;\r\n}\r\n\r\nblockquote {\r\n\tmargin: 0 7px 0 5px;\r\n\tpadding: 0 16px 0 10px;\r\n\tborder-left: 5px solid;\r\n}\r\n\r\ncode {\r\n\tfont-family: Menlo, Monaco, Consolas, \"Droid Sans Mono\", \"Courier New\", monospace, \"Droid Sans Fallback\";\r\n\tfont-size: 14px;\r\n\tline-height: 19px;\r\n}\r\n\r\nbody.wordWrap pre {\r\n\twhite-space: pre-wrap;\r\n}\r\n\r\n.mac code {\r\n\tfont-size: 12px;\r\n\tline-height: 18px;\r\n}\r\n\r\npre:not(.hljs),\r\npre.hljs code > div {\r\n\tpadding: 16px;\r\n\tborder-radius: 3px;\r\n\toverflow: auto;\r\n}\r\n\r\n\/** Theming *\/\r\n\r\n.vscode-light,\r\n.vscode-light pre code {\r\n\tcolor: rgb(30, 30, 30);\r\n}\r\n\r\n.vscode-dark,\r\n.vscode-dark pre code {\r\n\tcolor: #DDD;\r\n}\r\n\r\n.vscode-high-contrast,\r\n.vscode-high-contrast pre code {\r\n\tcolor: white;\r\n}\r\n\r\n.vscode-light code {\r\n\tcolor: #A31515;\r\n}\r\n\r\n.vscode-dark code {\r\n\tcolor: #D7BA7D;\r\n}\r\n\r\n.vscode-light pre:not(.hljs),\r\n.vscode-light code > div {\r\n\tbackground-color: rgba(220, 220, 220, 0.4);\r\n}\r\n\r\n.vscode-dark pre:not(.hljs),\r\n.vscode-dark code > div {\r\n\tbackground-color: rgba(10, 10, 10, 0.4);\r\n}\r\n\r\n.vscode-high-contrast pre:not(.hljs),\r\n.vscode-high-contrast code > div {\r\n\tbackground-color: rgb(0, 0, 0);\r\n}\r\n\r\n.vscode-high-contrast h1 {\r\n\tborder-color: rgb(0, 0, 0);\r\n}\r\n\r\n.vscode-light table > thead > tr > th {\r\n\tborder-color: rgba(0, 0, 0, 0.69);\r\n}\r\n\r\n.vscode-dark table > thead > tr > th {\r\n\tborder-color: rgba(255, 255, 255, 0.69);\r\n}\r\n\r\n.vscode-light h1,\r\n.vscode-light hr,\r\n.vscode-light table > tbody > tr + tr > td {\r\n\tborder-color: rgba(0, 0, 0, 0.18);\r\n}\r\n\r\n.vscode-dark h1,\r\n.vscode-dark hr,\r\n.vscode-dark table > tbody > tr + tr > td {\r\n\tborder-color: rgba(255, 255, 255, 0.18);\r\n}\r\n\r\n.vscode-light blockquote,\r\n.vscode-dark blockquote {\r\n\tbackground: rgba(127, 127, 127, 0.1);\r\n\tborder-color: rgba(0, 122, 204, 0.5);\r\n}\r\n\r\n.vscode-high-contrast blockquote {\r\n\tbackground: transparent;\r\n\tborder-color: #fff;\r\n}\r\n\/* Tomorrow Theme *\/\r\n\/* http:\/\/jmblog.github.com\/color-themes-for-google-code-highlightjs *\/\r\n\/* Original theme - https:\/\/github.com\/chriskempson\/tomorrow-theme *\/\r\n\r\n\/* Tomorrow Comment *\/\r\n.hljs-comment,\r\n.hljs-quote {\r\n\tcolor: #8e908c;\r\n}\r\n\r\n\/* Tomorrow Red *\/\r\n.hljs-variable,\r\n.hljs-template-variable,\r\n.hljs-tag,\r\n.hljs-name,\r\n.hljs-selector-id,\r\n.hljs-selector-class,\r\n.hljs-regexp,\r\n.hljs-deletion {\r\n\tcolor: #c82829;\r\n}\r\n\r\n\/* Tomorrow Orange *\/\r\n.hljs-number,\r\n.hljs-built_in,\r\n.hljs-builtin-name,\r\n.hljs-literal,\r\n.hljs-type,\r\n.hljs-params,\r\n.hljs-meta,\r\n.hljs-link {\r\n\tcolor: #f5871f;\r\n}\r\n\r\n\/* Tomorrow Yellow *\/\r\n.hljs-attribute {\r\n\tcolor: #eab700;\r\n}\r\n\r\n\/* Tomorrow Green *\/\r\n.hljs-string,\r\n.hljs-symbol,\r\n.hljs-bullet,\r\n.hljs-addition {\r\n\tcolor: #718c00;\r\n}\r\n\r\n\/* Tomorrow Blue *\/\r\n.hljs-title,\r\n.hljs-section {\r\n\tcolor: #4271ae;\r\n}\r\n\r\n\/* Tomorrow Purple *\/\r\n.hljs-keyword,\r\n.hljs-selector-tag {\r\n\tcolor: #8959a8;\r\n}\r\n\r\n.hljs {\r\n\tdisplay: block;\r\n\toverflow-x: auto;\r\n\tcolor: #4d4d4c;\r\n\tpadding: 0.5em;\r\n}\r\n\r\n.hljs-emphasis {\r\n\tfont-style: italic;\r\n}\r\n\r\n.hljs-strong {\r\n\tfont-weight: bold;\r\n}\r\n\/*\r\n * Markdown PDF CSS\r\n *\/\r\n\r\n body {\r\n\tfont-family:  \"Meiryo\", \"Segoe WPC\", \"Segoe UI\", \"SFUIText-Light\", \"HelveticaNeue-Light\", sans-serif, \"Droid Sans Fallback\";\r\n}\r\n\r\npre {\r\n\tbackground-color: #f8f8f8 !important;\r\n\tborder: 1px solid #cccccc;\r\n\tborder-radius: 3px;\r\n\toverflow-x: auto;\r\n\twhite-space: pre-wrap;\r\n\toverflow-wrap: break-word;\r\n}\r\n\r\npre:not(.hljs) {\r\n\tpadding: 23px;\r\n\tline-height: 19px;\r\n}\r\n\r\nblockquote {\r\n\tbackground: rgba(127, 127, 127, 0.1);\r\n\tborder-color: rgba(0, 122, 204, 0.5);\r\n}\r\n\r\n.emoji {\r\n\theight: 1.4em;\r\n}\r\n\r\n\/* for inline code *\/\r\n:not(pre):not(.hljs) > code {\r\n\tcolor: red; \/* Change the old color so it seems less like an error *\/\r\n  font-weight: bold;\r\n}\r\n\r\n\/* Page Break : use <div class=\"page\"\/> to insert page break\r\n-------------------------------------------------------- *\/\r\n.page {\r\n\tpage-break-after: always;\r\n}\r\n\r\n.p-entry__body h1  {\r\n  \/*\u7dda\u306e\u7a2e\u985e\uff08\u5b9f\u7dda\uff09 \u592a\u3055 \u8272*\/\r\n  border-bottom: solid 8px #3FA5F5;\r\n  display:inline-block;\r\n  font-size:36px;\r\n}\r\n\r\nh2 {\r\n  padding: 0.25em 0.5em;\/*\u4e0a\u4e0b \u5de6\u53f3\u306e\u4f59\u767d*\/\r\n  color: #494949;\/*\u6587\u5b57\u8272*\/\r\n  background: transparent;\/*\u80cc\u666f\u900f\u660e\u306b*\/\r\n  border-left: solid 5px #3FA5F5;\/*\u5de6\u7dda*\/\r\n  padding-left: 19px !important;\r\n  margin-bottom: 24px !important;\r\n}\r\n\r\n.mokujimidasi{\r\n  position: relative;\r\n  padding: 0.6em 0.6em 0.6em 1.4em;\r\n  background: #e0edff;\r\n  font-weight:bold;\r\n}\r\n.mokujimidasi:after {\r\n  position: absolute;\r\n  content: '';\r\n  top: 100%;\r\n  left: 30px;\r\n  border: 15px solid transparent;\r\n  border-top: 15px solid #e0edff;\r\n  width: 0;\r\n  height: 0;\r\n}\r\nul.mokuji{\r\n    padding: 0.5em 1em;\r\n    font-weight: bold;\r\n    border: solid 3px #3b5998;\r\n}\r\nul.mokuji li{\r\n  line-height: 1.5;\r\n  padding: 0.5em 0;\r\n  list-style: none;\r\n}\r\n.page-sub-title {\r\n    border-left: 5px solid #ff8000;\r\n    padding-left: 10px!important;\r\n    font-weight: 600!important;\r\n    margin-top: 40px!important;\r\n}\r\n\r\n\/* \u3075\u3093\u308f\u308a\u624b\u66f8\u304d\u67a0\u30004 *\/\r\n.kakomi-kage4 {\r\nline-height:1.4;\r\n margin: 2em auto;\r\n padding: 1em;\r\n width: 90%;\r\n color: #555555; \/* \u6587\u5b57\u8272 *\/\r\n background-color: #FFFFE0; \/* \u80cc\u666f\u8272 *\/\r\n box-shadow: 0 0 5px 2px #ffa042, 0 0 5px 2px #ffa042 inset; \/* \u5f71 *\/\r\n border-radius: 2em .7em 3em .9em\/.8em 3em .7em 2em; \/*\u89d2\u306e\u4e38\u307f*\/\r\n}\r\n.post_content pre {\r\n  background: white !important;\r\n}\r\nh2 { \r\n  font-weight: bold !important;\r\n  font-size: 160% !important;\r\n}","veu_display_promotion_alert":"","vkexunit_cta_each_option":"","_wpcom_ai_launchpad_first_post":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[6,7],"tags":[],"class_list":["post-4293","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-7"],"acf":[],"jetpack_featured_media_url":"https:\/\/learningbox.co.jp\/wp-content\/uploads\/2020\/04\/\u30b8\u30e3\u30d0\u30b9\u30af\u30ea\u30d7\u30c8-\u5206\u5272\u4ee3\u5165.png","jetpack_shortlink":"https:\/\/wp.me\/pgMrZ4-17f","_links":{"self":[{"href":"https:\/\/learningbox.co.jp\/en\/wp-json\/wp\/v2\/posts\/4293","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learningbox.co.jp\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/learningbox.co.jp\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/learningbox.co.jp\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/learningbox.co.jp\/en\/wp-json\/wp\/v2\/comments?post=4293"}],"version-history":[{"count":16,"href":"https:\/\/learningbox.co.jp\/en\/wp-json\/wp\/v2\/posts\/4293\/revisions"}],"predecessor-version":[{"id":5294,"href":"https:\/\/learningbox.co.jp\/en\/wp-json\/wp\/v2\/posts\/4293\/revisions\/5294"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/learningbox.co.jp\/en\/wp-json\/wp\/v2\/media\/4427"}],"wp:attachment":[{"href":"https:\/\/learningbox.co.jp\/en\/wp-json\/wp\/v2\/media?parent=4293"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learningbox.co.jp\/en\/wp-json\/wp\/v2\/categories?post=4293"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learningbox.co.jp\/en\/wp-json\/wp\/v2\/tags?post=4293"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}