{"id":1133,"date":"2012-11-17T15:46:37","date_gmt":"2012-11-17T15:46:37","guid":{"rendered":"http:\/\/www.sitekickr.com\/blog\/?p=1133"},"modified":"2012-11-17T15:46:37","modified_gmt":"2012-11-17T15:46:37","slug":"javascript-passing-parameter-object","status":"publish","type":"post","link":"https:\/\/www.sitekickr.com\/blog\/javascript-passing-parameter-object\/","title":{"rendered":"JavaScript &#8211; Passing a single parameter object"},"content":{"rendered":"<p>It&#39;s Saturday and I have things to do on the house, but I wanted to write a short post about function parameters before I put on my tool belt. It hit me yesterday afternoon while I was reviewing some of my old JavaScript code, that I really need to improve the way I pass parameters to my functions.<\/p>\n<p>This is essentially what I was looking at:<\/p>\n<p><code>scaleImage(this.image, 800, 600, true, false);<\/code><\/p>\n<p>While this isn&#39;t the most extreme case of unreadable code, it still made my job of understanding what exactly was going on that much more difficult. I could make the following assumptions:<\/p>\n<ul>\n<li><em>this.image<\/em> is the URL of an image<\/li>\n<li><em>800<\/em> is the width<\/li>\n<li><em>600<\/em> is the height<\/li>\n<li><em>true<\/em> tells the function to scale proportionally<\/li>\n<li><em>false<\/em> tells the function not to return any information about the new image<\/li>\n<\/ul>\n<p>Okay, those assumptions could be made, but the following assumptions are equally believable:<\/p>\n<ul>\n<li><em>this.image<\/em> is the filename of an image (the function takes care of the location)<\/li>\n<li><em>800<\/em> is the height<\/li>\n<li><em>600<\/em> is the width<\/li>\n<li><em>true<\/em> tells the function to crop the image to the dimensions specified<\/li>\n<li><em>false<\/em> tells the function not to worry about maintaining the aspect ratio of the image<\/li>\n<\/ul>\n<p>Now, you&#39;re saying to yourself, &quot;Why not just look at the function definition to see what those parameters mean?&quot;. I could, but do I really want to open another file, locate the function and determine the meaning of each parameter. This takes me away from the task at hand and adds another thing I need to store in my tiny brain.<br \/>\n\t&nbsp;<\/p>\n<h3>Improves understanding of your code<\/h3>\n<p>Instead, I should have used a parameter object when I defined the function:<\/p>\n<p><code>function scaleImage(options) { }<br \/>\n\t<\/code><\/p>\n<p>With only a single options parameter, I can now use more understandable code to call the function:<\/p>\n<p><code>scaleImage( { imageUrl: this.image, imageWidth: 800, imageHeight: 600, keepRatio: true, returnImage: false });<\/p>\n<p>\t<\/code><\/p>\n<h3>Your code is more flexible<\/h3>\n<p>With the original method of passing multiple parameters, what happens when we want to add a parameter? Of course, we could just tack the parameter on to the end of the parameter list, and if the function is called without it, no harm done, it will simply equate to <kbd>undefined<\/kbd>. But what happens when we want to make that parameter required, we need to place it before the optional parameters. Then, we need to make sure all of the function calls are adjusted to meet this new parameter list requirement.<\/p>\n<p>By using the single parameter object, you can easily add a new parameter, optional or required. You can validate for required parameters easily, and you don&#39;t need to break any of your existing code to do it.<\/p>\n<p><code>scaleImage( { imageUrl: this.image, newRequiredParam: true, imageWidth: 800, imageHeight: 600, keepRatio: true, returnImage: false });<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"<p>It&#39;s Saturday and I have things to do on the house, but I wanted to write a short post about function parameters before I put&hellip;<\/p>\n","protected":false},"author":1,"featured_media":1140,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"amp_status":""},"categories":[5,217],"tags":[167],"_links":{"self":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/1133"}],"collection":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/comments?post=1133"}],"version-history":[{"count":5,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/1133\/revisions"}],"predecessor-version":[{"id":1139,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/1133\/revisions\/1139"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/media\/1140"}],"wp:attachment":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/media?parent=1133"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/categories?post=1133"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/tags?post=1133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}