{"id":47084,"date":"2016-04-11T08:00:57","date_gmt":"2016-04-11T15:00:57","guid":{"rendered":"https:\/\/redfindevelop.wpengine.com\/blog\/?p=47084"},"modified":"2020-10-05T13:11:59","modified_gmt":"2020-10-05T20:11:59","slug":"destructuring-and-default-parameters-in-es6","status":"publish","type":"post","link":"https:\/\/www.redfin.com\/news\/destructuring-and-default-parameters-in-es6\/","title":{"rendered":"Destructuring and Default Parameters in ES6"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Today, I was reading <\/span><a href=\"https:\/\/github.com\/redfin\/react-server\/pull\/17\"><span style=\"font-weight: 400;\">this React Server pull request<\/span><\/a><span style=\"font-weight: 400;\"> from the inimitable <\/span><a href=\"https:\/\/github.com\/aickin\"><span style=\"font-weight: 400;\">Sasha Aickin<\/span><\/a><span style=\"font-weight: 400;\"> to our awesome new open source React server, cleverly named <\/span><a href=\"https:\/\/github.com\/redfin\/react-server\"><span style=\"font-weight: 400;\">react-server<\/span><\/a><span style=\"font-weight: 400;\"> when I came across <\/span><a href=\"https:\/\/github.com\/redfin\/react-server\/pull\/17\/files#diff-a4a834902670402c6fa64c79737e8b7fR17\"><span style=\"font-weight: 400;\">this function signature<\/span><\/a><\/p>\n<pre class=\"theme:solarized-light font:consolas lang:default decode:true \">export default (routes, {\n  workingDir = \u2018.\/__clientTemp\u2019,\n  routesDir = \u2018.\u2019,\n  ...\n} = {}) =&gt; {\n  \/\/ function body omitted\n}<\/pre>\n<p><span style=\"font-weight: 400;\">I generally like to think that I\u2019m a pretty good JavaScript dev, and that I\u2019ve been doing a good job keeping up with ES6, but I was completely lost on this one. \u00a0I was pretty sure that this was destructuring a default argument, but <\/span><a href=\"https:\/\/web.archive.org\/web\/20160304055633\/https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Destructuring_assignment\"><span style=\"font-weight: 400;\">based on the MDN documentation at the time<\/span><\/a><span style=\"font-weight: 400;\">, I would have expected this to look like this<\/span><\/p>\n<pre class=\"theme:solarized-light font:consolas lang:default decode:true\">export default (routes, {\n  workingDir: workingDir,\n  routesDir: routesDir} = {\n  workingDir: \u2018.\/__clientTemp\u2019,\n  routesDir: \u2018.\u2019\n}) {\n  \/\/ function body omitted\n}\n<\/pre>\n<p><span style=\"font-weight: 400;\">(note that <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions\/Default_parameters\">MDN has since updated their documentation<\/a>). Other than the fact that I\u2019m not sure that\u2019s the most readable indentation, I was fairly certain that would work, but when I babelified Sasha\u2019s implementation, I got code that looked exactly like what I would have expected<\/span><\/p>\n<pre class=\"theme:solarized-light font:consolas lang:default decode:true\">sasha.js\n\nexport default (routes, {\n  workingDir = '.\/__clientTemp',\n  routesDir = '.',\n} = {}) =&gt; {\n  console.log(workingDir);\n  console.log(routesDir);\n}\n\ndougwade ~\/temp \u00bb babel sasha.js\n\n'use strict';\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = function (routes) {\n  var _ref = arguments.length &lt;= 1 || arguments[1] === undefined ? {} : arguments[1];\n  var _ref$workingDir = _ref.workingDir;\n  var workingDir = _ref$workingDir === undefined ? '.\/__clientTemp' : _ref$workingDir;\n  var _ref$routesDir = _ref.routesDir;\n  var routesDir = _ref$routesDir === undefined ? '.' : _ref$routesDir;\n  console.log(workingDir);\n  console.log(routesDir);\n};\nmodule.exports = exports['default'];\n<\/pre>\n<p><span style=\"font-weight: 400;\">And even more interesting was how unlike what I thought <\/span><a href=\"https:\/\/developer.mozilla.org\/en-US\/\"><span style=\"font-weight: 400;\">MDN<\/span><\/a><span style=\"font-weight: 400;\"> was telling me I should do it was<\/span><\/p>\n<pre class=\"theme:solarized-light font:consolas lang:default decode:true\">mdn.js\n\nexport default (routes, {\n  workingDir: workingDir,\n  routesDir: routesDir,\n} = {\n  workingDir: '.\/__clientTemp',\n  routesDir: '.',\n}) =&gt; {\n  console.log(workingDir);\n  console.log(routesDir);\n}\n\ndougwade ~\/temp \u00bb babel mdn.js\n\n'use strict';\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = function (routes) {\n  var _ref = arguments.length &lt;= 1 || arguments[1] === undefined ? {\n    workingDir: '.\/__clientTemp',\n    routesDir: '.'\n  } : arguments[1];\n  var workingDir = _ref.workingDir;\n  var routesDir = _ref.routesDir;\n  console.log(workingDir);\n  console.log(routesDir);\n};<\/pre>\n<p><span style=\"font-weight: 400;\">And how much better behaved it is than what I was trying to do<\/span><\/p>\n<pre class=\"theme:solarized-light font:consolas lang:default decode:true \">harness.js\n\nimport destruct from \".\/sasha\" \/\/changed to \u201c.\/mdn\u201d for mdnHarness.js\nlet initialParam = {unused: true};\nconsole.log('only one function param');\ndestruct(initialParam);\nconsole.log('pass a well-behaved second argument');\ndestruct(initialParam, {\n\tworkingDir: '.\/foo',\n\troutesDir: '.\/bar',\n})\nconsole.log('pass a partial second argument; hopefully routesDir is \u201c.\u201d');\ndestruct(initialParam, {\n\tworkingDir: '.\/foo',\n});\nconsole.log('expliticly pass undefined');\ndestruct(initialParam);\n\nterminal\n\ndougwade ~\/temp \u00bb babel --presets es2015 --plugins add-module-exports mdn.js &gt; target\/mdn.js\ndougwade ~\/temp \u00bb babel --presets es2015 --plugins add-module-exports sasha.js &gt; target\/sasha.js\ndougwade ~\/temp \u00bb babel --presets es2015 --plugins add-module-exports harness.js &gt; sashaHarness.js\n# editing goes here\ndougwade ~\/temp \u00bb babel --presets es2015 --plugins add-module-exports harness.js &gt; mdnHarness.js\n\ndougwade ~\/temp \u00bb node target\/sashaHarness.js\n\nonly one function param\n.\/__clientTemp\n.\npass a well-behaved second argument\n.\/foo\n.\/bar\npass a partial second argument\n.\/foo\n.\nexplicitly pass undefined\n.\/__clientTemp\n.\ndougwade ~\/temp \u00bb node target\/mdnHarness.js\nonly one function param\n.\/__clientTemp\n.\npass a well-behaved second argument\n.\/foo\n.\/bar\npass a partial second argument\n.\/foo\nundefined\nexpliticly pass undefined\n.\/__clientTemp\n.\n<\/pre>\n<p>Note especially the case of a partial second argument &#8212; when you pass a partial argument to what I thought MDN was suggesting, the second argument is undefined, whereas in Sasha\u2019s solution, you still get the default behavior. \u00a0So, what\u2019s going on; what sorcery is making this do?<\/p>\n<p><span style=\"font-weight: 400;\">My first thought was that I misunderstood destructuring, but there seemed to be no indication that <span class=\"theme:solarized-light font:consolas lang:default decode:true crayon-inline \">{ x = 1, y = 2 } = {}<\/span> was <\/span><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Destructuring_assignment\"><span style=\"font-weight: 400;\">valid destructuring from MDN<\/span><\/a><span style=\"font-weight: 400;\"> (in case you hadn\u2019t noticed, MDN is my go-to reference for how you JavaScript). \u00a0My next thought was that maybe I didn\u2019t understand <\/span><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Object_initializer\"><span style=\"font-weight: 400;\">the object literal<\/span><\/a><span style=\"font-weight: 400;\">, but that didn\u2019t seem to have any hints either, and the <\/span><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions\/Default_parameters\"><span style=\"font-weight: 400;\">default parameters article<\/span><\/a><span style=\"font-weight: 400;\"> is what had gotten me into this mess in the first place. \u00a0My first real clue came from the eminent Dr Axel Rauschmayer from his blog post <\/span><a href=\"http:\/\/www.2ality.com\/2015\/03\/destructuring-algorithm.html\"><span style=\"font-weight: 400;\">Destructuring Algorithm<\/span><\/a><span style=\"font-weight: 400;\">, which has this example <span class=\"theme:solarized-light font:consolas lang:default decode:true crayon-inline \">[{x=0, y=0} = {}] &lt;- [{z:3}]<\/span>. \u00a0Turns out we\u2019re in what Dr. Raushmayer calls rule 2d {key: pattern = default_value, &lt;&lt;properties&gt;&gt;}, and sure enough, when I dropped into the node repl, everything worked just as I expected with my new-found enlightenment<\/span><\/p>\n<p><span style=\"font-weight: 400;\">So, what happened to me? \u00a0Check out this editorial aside in the <\/span><a href=\"https:\/\/hacks.mozilla.org\/2015\/05\/es6-in-depth-destructuring\/\"><span style=\"font-weight: 400;\">Mozilla hacks article on destructuring<\/span><\/a><\/p>\n<pre class=\"theme:solarized-light font:consolas lang:default decode:true\">temp.js\n\nlet {\n  workingDir = '.\/__clientTemp',\n} = { routesDir: '.' };\nconsole.log(workingDir);\nconsole.log(routesDir);\n\nterminal\n\ndougwade ~\/temp \u00bb babel temp.js &gt; target\/temp.js\ndougwade ~\/temp \u00bb node target\/temp.js\n.\/__clientTemp\n\/Users\/doug.wade\/temp\/target\/temp.js:8\nconsole.log(routesDir);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0^\nReferenceError: routesDir is not defined\n\u00a0\u00a0\u00a0at Object.&lt;anonymous&gt; (\/Users\/doug.wade\/temp\/target\/temp.js:8:13)\n\u00a0\u00a0\u00a0at Module._compile (module.js:413:34)\n\u00a0\u00a0\u00a0at Object.Module._extensions..js (module.js:422:10)\n\u00a0\u00a0\u00a0at Module.load (module.js:357:32)\n\u00a0\u00a0\u00a0at Function.Module._load (module.js:314:12)\n\u00a0\u00a0\u00a0at Function.Module.runMain (module.js:447:10)\n\u00a0\u00a0\u00a0at startup (node.js:140:18)\n\u00a0\u00a0\u00a0at node.js:1001:3<\/pre>\n<p><i><span style=\"font-weight: 400;\">(Editor\u2019s note: This feature is currently implemented in Firefox only for the first two cases, not the third. See <\/span><\/i><a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=932080\"><i><span style=\"font-weight: 400;\">bug 932080<\/span><\/i><\/a><i><span style=\"font-weight: 400;\">.)<\/span><\/i><\/p>\n<p><span style=\"font-weight: 400;\">The third example referenced looks like this<\/span><\/p>\n<pre class=\"theme:solarized-light font:consolas lang:default decode:true\">var { x = 3 } = {};\nconsole.log(x);\n\/\/ 3<\/pre>\n<p><span style=\"font-weight: 400;\">My takeaway, then, is a cautionary tale. \u00a0For me, MDN is far and away the most accessible, attractive, and well-written source of documentation for JavaScript, but it\u2019s not intended to be the authoritative source on the ECMAScript standard, which is what Chrome and Node and Babel develop against, but instead the authoritative source on how Firefox and SpiderMonkey function. \u00a0If you want to know what is in the ECMAScript standard, probably your best starting place is <\/span><a href=\"http:\/\/exploringjs.com\/es6\/index.html\"><span style=\"font-weight: 400;\">Exploring ES6<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>How default parameters and destructuring interact in ES6 to make gorgeous code, and why just checking MDN isn&#8217;t enough<\/p>\n","protected":false},"author":13177,"featured_media":47090,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"default","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[57],"tags":[78],"dashboard":[],"coauthors":[],"class_list":["post-47084","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-company-news","tag-career"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.7 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Destructuring and Default Parameters in ES6 - Redfin Real Estate News<\/title>\n<meta name=\"description\" content=\"How default parameters and destructuring interact in ES6 to make gorgeous code, and why just checking MDN isn&#039;t enough\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.redfin.com\/news\/destructuring-and-default-parameters-in-es6\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Destructuring and Default Parameters in ES6\" \/>\n<meta property=\"og:description\" content=\"How default parameters and destructuring interact in ES6 to make gorgeous code, and why just checking MDN isn&#039;t enough\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.redfin.com\/news\/destructuring-and-default-parameters-in-es6\/\" \/>\n<meta property=\"og:site_name\" content=\"Redfin Real Estate News\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/redfin\" \/>\n<meta property=\"article:published_time\" content=\"2016-04-11T15:00:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-10-05T20:11:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.redfin.com\/news\/wp-content\/uploads\/2016\/04\/es6_logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"640\" \/>\n\t<meta property=\"og:image:height\" content=\"385\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Doug Wade\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@redfin\" \/>\n<meta name=\"twitter:site\" content=\"@redfin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Doug Wade\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.redfin.com/news\\\/destructuring-and-default-parameters-in-es6\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.redfin.com/news\\\/destructuring-and-default-parameters-in-es6\\\/\"},\"author\":{\"name\":\"Doug Wade\",\"@id\":\"https:\\\/\\\/www.redfin.com/news\\\/#\\\/schema\\\/person\\\/ce8e1b698aeb1c41384c05ef5c97ddbc\"},\"headline\":\"Destructuring and Default Parameters in ES6\",\"datePublished\":\"2016-04-11T15:00:57+00:00\",\"dateModified\":\"2020-10-05T20:11:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.redfin.com/news\\\/destructuring-and-default-parameters-in-es6\\\/\"},\"wordCount\":501,\"publisher\":{\"@id\":\"https:\\\/\\\/www.redfin.com/news\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.redfin.com/news\\\/destructuring-and-default-parameters-in-es6\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.redfin.com/news\\\/wp-content\\\/uploads\\\/2016\\\/04\\\/es6_logo.jpg\",\"keywords\":[\"Career\"],\"articleSection\":[\"Company News\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2016\",\"copyrightHolder\":{\"@id\":\"https:\\\/\\\/www.redfin.com/news\\\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.redfin.com/news\\\/destructuring-and-default-parameters-in-es6\\\/\",\"url\":\"https:\\\/\\\/www.redfin.com/news\\\/destructuring-and-default-parameters-in-es6\\\/\",\"name\":\"Destructuring and Default Parameters in ES6 - Redfin Real Estate News\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.redfin.com/news\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.redfin.com/news\\\/destructuring-and-default-parameters-in-es6\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.redfin.com/news\\\/destructuring-and-default-parameters-in-es6\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.redfin.com/news\\\/wp-content\\\/uploads\\\/2016\\\/04\\\/es6_logo.jpg\",\"datePublished\":\"2016-04-11T15:00:57+00:00\",\"dateModified\":\"2020-10-05T20:11:59+00:00\",\"description\":\"How default parameters and destructuring interact in ES6 to make gorgeous code, and why just checking MDN isn't enough\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.redfin.com/news\\\/destructuring-and-default-parameters-in-es6\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.redfin.com/news\\\/destructuring-and-default-parameters-in-es6\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.redfin.com/news\\\/destructuring-and-default-parameters-in-es6\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.redfin.com/news\\\/wp-content\\\/uploads\\\/2016\\\/04\\\/es6_logo.jpg\",\"contentUrl\":\"https:\\\/\\\/www.redfin.com/news\\\/wp-content\\\/uploads\\\/2016\\\/04\\\/es6_logo.jpg\",\"width\":640,\"height\":385},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.redfin.com/news\\\/destructuring-and-default-parameters-in-es6\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.redfin.com/news\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Destructuring and Default Parameters in ES6\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.redfin.com/news\\\/#website\",\"url\":\"https:\\\/\\\/www.redfin.com/news\\\/\",\"name\":\"Redfin Real Estate News\",\"description\":\"The latest real estate news and research from technology-powered residential real estate company, Redfin.\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.redfin.com/news\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.redfin.com/news\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.redfin.com/news\\\/#organization\",\"name\":\"Redfin\",\"url\":\"https:\\\/\\\/www.redfin.com/news\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.redfin.com/news\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.redfin.com\\\/news\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/Redfin-News-Logo.png\",\"contentUrl\":\"https:\\\/\\\/www.redfin.com\\\/news\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/Redfin-News-Logo.png\",\"width\":1100,\"height\":235,\"caption\":\"Redfin\"},\"image\":{\"@id\":\"https:\\\/\\\/www.redfin.com/news\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/redfin\",\"https:\\\/\\\/x.com\\\/redfin\",\"https:\\\/\\\/www.instagram.com\\\/redfinrealestate\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/redfin\",\"https:\\\/\\\/www.pinterest.com\\\/redfin\\\/\",\"https:\\\/\\\/en.wikipedia.org\\\/wiki\\\/Redfin\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.redfin.com/news\\\/#\\\/schema\\\/person\\\/ce8e1b698aeb1c41384c05ef5c97ddbc\",\"name\":\"Doug Wade\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/1cb4c01b6eebf4bb7770e674ad8d70385f0e968d07b6345cd98a9c4f06020943?s=96&d=wp_user_avatar&r=g98695681813068d628dacc4b535b1a8d\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/1cb4c01b6eebf4bb7770e674ad8d70385f0e968d07b6345cd98a9c4f06020943?s=96&d=wp_user_avatar&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/1cb4c01b6eebf4bb7770e674ad8d70385f0e968d07b6345cd98a9c4f06020943?s=96&d=wp_user_avatar&r=g\",\"caption\":\"Doug Wade\"},\"description\":\"I'm a software developer at Redfin on the Platforms team. I'm a cyclist, soccer hooligan, and beer enthusiast.\",\"sameAs\":[\"https:\\\/\\\/plus.google.com\\\/106007864994207794940\"],\"url\":\"https:\\\/\\\/www.redfin.com/news\\\/author\\\/doug-waderedfin-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Destructuring and Default Parameters in ES6 - Redfin Real Estate News","description":"How default parameters and destructuring interact in ES6 to make gorgeous code, and why just checking MDN isn't enough","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.redfin.com\/news\/destructuring-and-default-parameters-in-es6\/","og_locale":"en_US","og_type":"article","og_title":"Destructuring and Default Parameters in ES6","og_description":"How default parameters and destructuring interact in ES6 to make gorgeous code, and why just checking MDN isn't enough","og_url":"https:\/\/www.redfin.com\/news\/destructuring-and-default-parameters-in-es6\/","og_site_name":"Redfin Real Estate News","article_publisher":"https:\/\/www.facebook.com\/redfin","article_published_time":"2016-04-11T15:00:57+00:00","article_modified_time":"2020-10-05T20:11:59+00:00","og_image":[{"width":640,"height":385,"url":"https:\/\/www.redfin.com\/news\/wp-content\/uploads\/2016\/04\/es6_logo.jpg","type":"image\/jpeg"}],"author":"Doug Wade","twitter_card":"summary_large_image","twitter_creator":"@redfin","twitter_site":"@redfin","twitter_misc":{"Written by":"Doug Wade","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.redfin.com\/news\/destructuring-and-default-parameters-in-es6\/#article","isPartOf":{"@id":"https:\/\/www.redfin.com\/news\/destructuring-and-default-parameters-in-es6\/"},"author":{"name":"Doug Wade","@id":"https:\/\/www.redfin.com\/news\/#\/schema\/person\/ce8e1b698aeb1c41384c05ef5c97ddbc"},"headline":"Destructuring and Default Parameters in ES6","datePublished":"2016-04-11T15:00:57+00:00","dateModified":"2020-10-05T20:11:59+00:00","mainEntityOfPage":{"@id":"https:\/\/www.redfin.com\/news\/destructuring-and-default-parameters-in-es6\/"},"wordCount":501,"publisher":{"@id":"https:\/\/www.redfin.com\/news\/#organization"},"image":{"@id":"https:\/\/www.redfin.com\/news\/destructuring-and-default-parameters-in-es6\/#primaryimage"},"thumbnailUrl":"https:\/\/www.redfin.com\/news\/wp-content\/uploads\/2016\/04\/es6_logo.jpg","keywords":["Career"],"articleSection":["Company News"],"inLanguage":"en-US","copyrightYear":"2016","copyrightHolder":{"@id":"https:\/\/www.redfin.com\/news\/#organization"}},{"@type":"WebPage","@id":"https:\/\/www.redfin.com\/news\/destructuring-and-default-parameters-in-es6\/","url":"https:\/\/www.redfin.com\/news\/destructuring-and-default-parameters-in-es6\/","name":"Destructuring and Default Parameters in ES6 - Redfin Real Estate News","isPartOf":{"@id":"https:\/\/www.redfin.com\/news\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.redfin.com\/news\/destructuring-and-default-parameters-in-es6\/#primaryimage"},"image":{"@id":"https:\/\/www.redfin.com\/news\/destructuring-and-default-parameters-in-es6\/#primaryimage"},"thumbnailUrl":"https:\/\/www.redfin.com\/news\/wp-content\/uploads\/2016\/04\/es6_logo.jpg","datePublished":"2016-04-11T15:00:57+00:00","dateModified":"2020-10-05T20:11:59+00:00","description":"How default parameters and destructuring interact in ES6 to make gorgeous code, and why just checking MDN isn't enough","breadcrumb":{"@id":"https:\/\/www.redfin.com\/news\/destructuring-and-default-parameters-in-es6\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.redfin.com\/news\/destructuring-and-default-parameters-in-es6\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.redfin.com\/news\/destructuring-and-default-parameters-in-es6\/#primaryimage","url":"https:\/\/www.redfin.com\/news\/wp-content\/uploads\/2016\/04\/es6_logo.jpg","contentUrl":"https:\/\/www.redfin.com\/news\/wp-content\/uploads\/2016\/04\/es6_logo.jpg","width":640,"height":385},{"@type":"BreadcrumbList","@id":"https:\/\/www.redfin.com\/news\/destructuring-and-default-parameters-in-es6\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.redfin.com\/news\/"},{"@type":"ListItem","position":2,"name":"Destructuring and Default Parameters in ES6"}]},{"@type":"WebSite","@id":"https:\/\/www.redfin.com\/news\/#website","url":"https:\/\/www.redfin.com\/news\/","name":"Redfin Real Estate News","description":"The latest real estate news and research from technology-powered residential real estate company, Redfin.","publisher":{"@id":"https:\/\/www.redfin.com\/news\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.redfin.com\/news\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.redfin.com\/news\/#organization","name":"Redfin","url":"https:\/\/www.redfin.com\/news\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.redfin.com\/news\/#\/schema\/logo\/image\/","url":"https:\/\/www.redfin.com\/news\/wp-content\/uploads\/2020\/10\/Redfin-News-Logo.png","contentUrl":"https:\/\/www.redfin.com\/news\/wp-content\/uploads\/2020\/10\/Redfin-News-Logo.png","width":1100,"height":235,"caption":"Redfin"},"image":{"@id":"https:\/\/www.redfin.com\/news\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/redfin","https:\/\/x.com\/redfin","https:\/\/www.instagram.com\/redfinrealestate\/","https:\/\/www.linkedin.com\/company\/redfin","https:\/\/www.pinterest.com\/redfin\/","https:\/\/en.wikipedia.org\/wiki\/Redfin"]},{"@type":"Person","@id":"https:\/\/www.redfin.com\/news\/#\/schema\/person\/ce8e1b698aeb1c41384c05ef5c97ddbc","name":"Doug Wade","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/1cb4c01b6eebf4bb7770e674ad8d70385f0e968d07b6345cd98a9c4f06020943?s=96&d=wp_user_avatar&r=g98695681813068d628dacc4b535b1a8d","url":"https:\/\/secure.gravatar.com\/avatar\/1cb4c01b6eebf4bb7770e674ad8d70385f0e968d07b6345cd98a9c4f06020943?s=96&d=wp_user_avatar&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1cb4c01b6eebf4bb7770e674ad8d70385f0e968d07b6345cd98a9c4f06020943?s=96&d=wp_user_avatar&r=g","caption":"Doug Wade"},"description":"I'm a software developer at Redfin on the Platforms team. I'm a cyclist, soccer hooligan, and beer enthusiast.","sameAs":["https:\/\/plus.google.com\/106007864994207794940"],"url":"https:\/\/www.redfin.com\/news\/author\/doug-waderedfin-com\/"}]}},"_links":{"self":[{"href":"https:\/\/www.redfin.com\/news\/wp-json\/wp\/v2\/posts\/47084","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.redfin.com\/news\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.redfin.com\/news\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.redfin.com\/news\/wp-json\/wp\/v2\/users\/13177"}],"replies":[{"embeddable":true,"href":"https:\/\/www.redfin.com\/news\/wp-json\/wp\/v2\/comments?post=47084"}],"version-history":[{"count":0,"href":"https:\/\/www.redfin.com\/news\/wp-json\/wp\/v2\/posts\/47084\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.redfin.com\/news\/wp-json\/wp\/v2\/media\/47090"}],"wp:attachment":[{"href":"https:\/\/www.redfin.com\/news\/wp-json\/wp\/v2\/media?parent=47084"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.redfin.com\/news\/wp-json\/wp\/v2\/categories?post=47084"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.redfin.com\/news\/wp-json\/wp\/v2\/tags?post=47084"},{"taxonomy":"dashboard","embeddable":true,"href":"https:\/\/www.redfin.com\/news\/wp-json\/wp\/v2\/dashboard?post=47084"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.redfin.com\/news\/wp-json\/wp\/v2\/coauthors?post=47084"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}