{"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,"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"vkexunit_cta_each_option":"","footnotes":""},"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}]}}