{"id":11923,"date":"2015-10-27T14:15:59","date_gmt":"2015-10-27T18:15:59","guid":{"rendered":"http:\/\/webdevstudios.com\/?p=11923"},"modified":"2024-04-15T12:03:28","modified_gmt":"2024-04-15T16:03:28","slug":"writing-cleaner-javascript","status":"publish","type":"post","link":"https:\/\/webdevstudios.com\/2015\/10\/27\/writing-cleaner-javascript\/","title":{"rendered":"Writing Clean(er) JavaScript"},"content":{"rendered":"

JavaScript<\/a>, like many programming languages, has some great ways to compartmentalize and structure code to make it more maintainable,\u00a0more readable, and more reliable. This post will cover two things that can help developers to organize their code:\u00a0namespacing and singletons.<\/p>\n

<\/p>\n

Namespacing<\/h4>\n

While JavaScript has no formal “namespaces,” the ability to have pretty much anything be a member of any object allows\u00a0developers to emulate them somewhat effectively. You could consider the “window” to be its own namespace, containing\u00a0what we often refer to as “global” variables. In this sense, everything created in the global scope is actually under\u00a0the “window” namespace:<\/p>\n

\n\t\t\t\t
var foo = 'bar';\n\nconsole.log( window.foo ); \/\/ bar\n\nwindow.foo = 'baz';\n\nconsole.log( foo ); \/\/ baz<\/pre>\n\t\t\t<\/div>\n
Developers are often discouraged from polluting the window object with variables; this creates several issues that aren’t necessarily Big Problems, but can create headaches and difficult debugging situations in the future.<\/p>\n
\n\t\t\t\t
var i = 10;\n\ndo_something();\n\nfor ( i > 0; i--; ) {\n    console.log( i );\n}\n\nfunction do_something() {\n    for( i = 0; i < 4; i++ ) {\n        console.log( i );\n    }\n}\n<\/pre>\n\t\t\t<\/div>\n
The output above, with commas separating for each call to “console.log”, is:<\/p>\n
0, 1, 2, 3, 3, 2, 1, 0<\/p><\/blockquote>\n
Most programmers familiar with JavaScript and scoping will immediately see why the code above is problematic – the “i” variable in our function “do_something” wasn’t bound to the function’s scope (no use of the “var” keyword). When we called our function, the global “window.i” was accessed and overwritten. Working in the global scope also causes issues with keeping code organized:<\/p>\n
\n\t\t\t\t
function trim_space_from_form_input() {}\nfunction trim_space_from_url_input() {}\nfunction validate_input_from_form() {}\nfunction validate_input_from_url() {}<\/pre>\n\t\t\t<\/div>\n
In programming, it’s not uncommon to have several functions that do similar tasks but somewhat differently from one another. In a global space, it becomes increasingly difficult to quickly find and parse the available functions. This can lead to duplicating work, confusing function names, and uncertainty for any developer who may come in to work after you. So, what’s a JavaScript namespace? Like just about everything else in JavaScript, you can use an object for a namespace:<\/p>\n
\n\t\t\t\t
var WDS = {};\n\nWDS.forms = {};\nWDS.url = {};\n\nWDS.forms.trim_space = function() {};\nWDS.forms.validate_input = function() {};\nWDS.url.trim_space = function() {};\nWDS.url.validate_input = function() {};\n\n\/\/ Or, alternatively\n\nvar WDS = {\n    forms: {\n        trim_space: function() {},\n        validate_input: function() {}\n    },\n    url: {\n        trim_space: function() {},\n        validate_input: function() {}\n    }\n};<\/pre>\n\t\t\t<\/div>\n
While those two methods don’t appear cleaner and indeed are a little more “wordy” than the original, what they do provide is cleanliness in the form of keeping relevant code separated from the rest of the environment. Instead of hunting through source files, the developer can inspect the “WDS” object and see what properties it has, and add his or her own properties to extend it.<\/p>\n
A simple namespacing function can help you to quickly create objects that can be used to organize your code’s functionality:<\/p>\n
\n\t\t\t\t
\/**\n * Accepts a string to create a "namespace"\n *\n * @param String ns The namespace to create - works recusively by separating children with dot "."\n * @param Object global[=window] Optional global object to create the namespace in, defaults to window\n *\n * @return Object The furthest point in the namespace\n *\/\nfunction create_ns( ns, global ) {\n  global = global || window;\n\n  ns = ns.split( '.' ); \/\/ split the namespace into components\n\n  for ( var key in ns ) {\n    if ( ! ns.hasOwnProperty( key ) ) {\n      continue;\n    }\n\n    key = ns[ key ]; \/\/ Grab the "text" key\n\n    \/\/ Create the property "key" within the global object\n    if ( ! global.hasOwnProperty( key ) ) {\n      global[ key ] = {};\n    }\n\n    global = global[ key ]; \/\/ reassign global so that we can continue to add sub-properties\n  }\n\n  return global;\n}\n\n\/**\n * Creates the window.WDS object if it doesn't exist, and creates the forms property on window.WDS if that\n * doesn't exist\n *\/\ncreate_ns( 'WDS.forms' );\n\n\/\/ Now, WDS.forms is available to use however we want, for instance adding some methods\nWDS.forms.CreatForm = function() {};\nWDS.forms.ProcessForm = function() {};\nWDS.forms.POST_TYPE = 'POST';\n\n\/**\n * In this example, you could use "this" as the global so that the newly created object has a prepared internal structure\n *\/\nfunction my_thing() {\n  create_ns( 'utilities.string_stuff', this );\n}\n\nvar thing = new my_thing();\nthing.utilities.string_stuff.Compare = function( a, b ) {\n  return a == b;\n};<\/pre>\n\t\t\t<\/div>\n
Singletons<\/h4>\n
Another design pattern that helps keep JavaScript clean, both in terms of tidyness and overhead, is the singleton pattern.<\/p>\n
Often in programming, we are used to instantiating classes over and over again, but we also want to have classes that we only instatiate once and use them over and over. These are singletons, a good example of a singleton class would be a factory to generate new objects, or a utility class to deal with templating.<\/p>\n
\n\t\t\t\t
create_ns( 'WDS.util' );\nWDS.util.TemplateManager = function() {\n    if ( WDS.util.TemplateManager.prototype._singletonInstance ) {\n        return WDS.util.TemplateManager.prototype._singletonInstance;\n    }\n\n    \/\/ "private" variables \n    var templates = {};\n    var tpl_regex = new RegExp();\n\n    WDS.util.TemplateManager.prototype._singletonInstance = this;\n\n    this.render = function ( id, variables ) {\n        if ( ! this.get_tpl( id ) ) {\n            throw "Could not find template " + id;\n        }\n\n        return apply_data( this.get_tpl( id ), variables );\n    };\n\n    this.add_tpl = function( id, template ) {\n        templates[ id ] = template;\n    };\n\n    this.get_tpl = function( id ) {\n        return templates[ id ] || false;\n    };\n\n    function apply_data( template, variables ) {\n        for ( var key in variables ) {\n            if ( ! variables.hasOwnProperty( key ) ) {\n                continue;\n            }\n\n            tpl_regex.compile( '{' + key + '}', 'g' );\n            template = template.replace( tpl_regex, variables[ key ] );\n        }\n\n        return template;\n    }\n};\n\n\/\/ Now, no matter how many times we contruct this object...\nvar MyTemplateUtility = new WDS.util.TemplateManager();\nMyTemplateUtility.add_tpl( 'my_template', '<div id="{div_id}">{div_content}<\/div>' );\n\nvar SomeOtherTemplateUtility = new WDS.util.TemplateManager();\nconsole.log( SomeOtherTemplateUtility.get_tpl( 'my_template' ) ); \/\/ <div id="{div_id}">{div_content}<\/div>\n\n\/\/ we are still acccessing the same instance\nconsole.log( MyTemplateUtility === SomeOtherTemplateUtility ); \/\/ true<\/pre>\n\t\t\t<\/div>\n
Using the singleton pattern, we can confidently instatiate the TemplateManager class anywhere in our code and be sure\u00a0that we’re always dealing with the same instance as the first time we used it: all templates loaded to the utility\u00a0will be accessible to the object no matter when or where it’s called upon. This also reduces code overhead in the browser,\u00a0as we aren’t needlessly polluting the environment with multiple objects that all do the same thing.<\/p>\n
Conclusion<\/h4>\n
While JavaScript, and any language really, can be a tangled ball o’ mess, we as developers can do our part to write more maintainable, organizable, and reusable code. Namespaces help keep our code organized into sensible chunks, while singletons create easily reusable classes that can persist their state during the life of a request.<\/p>\n
Happy coding!<\/p>\n
\"\"<\/p>\n","protected":false},"excerpt":{"rendered":"
JavaScript, like many programming languages, has some great ways to compartmentalize and structure code to make it more maintainable,\u00a0more readable, and more reliable. This post will cover two things that can help developers to organize their code:\u00a0namespacing and singletons.<\/p>\n","protected":false},"author":31,"featured_media":11990,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"jetpack_post_was_ever_published":false,"footnotes":""},"categories":[140,141],"tags":[374,387],"coauthors":[6041],"class_list":["post-11923","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","category-employeepost","tag-design-patterns","tag-javascript-2"],"acf":{"blog_hero_image":null},"yoast_head":"\nWriting Clean(er) JavaScript - WebDevStudios.com<\/title>\n<meta name=\"description\" content=\"Zach talks you through writing clean(er) JavaScript and making your code look nice and pretty!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webdevstudios.com\/2015\/10\/27\/writing-cleaner-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Writing Clean(er) JavaScript\" \/>\n<meta property=\"og:description\" content=\"Zach talks you through writing clean(er) JavaScript and making your code look nice and pretty!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webdevstudios.com\/2015\/10\/27\/writing-cleaner-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"WebDevStudios\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/webdevstudios\" \/>\n<meta property=\"article:published_time\" content=\"2015-10-27T18:15:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-15T16:03:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2015\/10\/Writing-Cleaner-JavaScript-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"851\" \/>\n\t<meta property=\"og:image:height\" content=\"315\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Zach Owen\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webdevstudios\" \/>\n<meta name=\"twitter:site\" content=\"@webdevstudios\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Zach Owen\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2015\\\/10\\\/27\\\/writing-cleaner-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2015\\\/10\\\/27\\\/writing-cleaner-javascript\\\/\"},\"author\":{\"name\":\"Zach Owen\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#\\\/schema\\\/person\\\/9edf35be7961c9563bb98c380dd7bd82\"},\"headline\":\"Writing Clean(er) JavaScript\",\"datePublished\":\"2015-10-27T18:15:59+00:00\",\"dateModified\":\"2024-04-15T16:03:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2015\\\/10\\\/27\\\/writing-cleaner-javascript\\\/\"},\"wordCount\":627,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2015\\\/10\\\/27\\\/writing-cleaner-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webdevstudios.com\\\/wp-content\\\/uploads\\\/2015\\\/10\\\/Writing-Cleaner-JavaScript-1.jpg\",\"keywords\":[\"design-patterns\",\"javascript\"],\"articleSection\":[\"Development\",\"Employee Post\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/webdevstudios.com\\\/2015\\\/10\\\/27\\\/writing-cleaner-javascript\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2015\\\/10\\\/27\\\/writing-cleaner-javascript\\\/\",\"url\":\"https:\\\/\\\/webdevstudios.com\\\/2015\\\/10\\\/27\\\/writing-cleaner-javascript\\\/\",\"name\":\"Writing Clean(er) JavaScript - WebDevStudios.com\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2015\\\/10\\\/27\\\/writing-cleaner-javascript\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2015\\\/10\\\/27\\\/writing-cleaner-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webdevstudios.com\\\/wp-content\\\/uploads\\\/2015\\\/10\\\/Writing-Cleaner-JavaScript-1.jpg\",\"datePublished\":\"2015-10-27T18:15:59+00:00\",\"dateModified\":\"2024-04-15T16:03:28+00:00\",\"description\":\"Zach talks you through writing clean(er) JavaScript and making your code look nice and pretty!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2015\\\/10\\\/27\\\/writing-cleaner-javascript\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/webdevstudios.com\\\/2015\\\/10\\\/27\\\/writing-cleaner-javascript\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2015\\\/10\\\/27\\\/writing-cleaner-javascript\\\/#primaryimage\",\"url\":\"https:\\\/\\\/webdevstudios.com\\\/wp-content\\\/uploads\\\/2015\\\/10\\\/Writing-Cleaner-JavaScript-1.jpg\",\"contentUrl\":\"https:\\\/\\\/webdevstudios.com\\\/wp-content\\\/uploads\\\/2015\\\/10\\\/Writing-Cleaner-JavaScript-1.jpg\",\"width\":851,\"height\":315,\"caption\":\"writing clean code, better JavaScript, JavaScript tutorial, JavaScript in WordPress, how to use JavaScript, WordPress tutorials, web dev tutorials, how to use JS, JS in WordPress, WordPress JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2015\\\/10\\\/27\\\/writing-cleaner-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/webdevstudios.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Writing Clean(er) JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#website\",\"url\":\"https:\\\/\\\/webdevstudios.com\\\/\",\"name\":\"WebDevStudios\",\"description\":\"WordPress Design and Development Agency\",\"publisher\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/webdevstudios.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#organization\",\"name\":\"WebDevStudios\",\"url\":\"https:\\\/\\\/webdevstudios.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/webdevstudios.com\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/wds-amp-logo.png\",\"contentUrl\":\"https:\\\/\\\/webdevstudios.com\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/wds-amp-logo.png\",\"width\":173,\"height\":60,\"caption\":\"WebDevStudios\"},\"image\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"http:\\\/\\\/facebook.com\\\/webdevstudios\",\"https:\\\/\\\/x.com\\\/webdevstudios\",\"http:\\\/\\\/instagram.com\\\/webdevstudios\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/webdevstudios-llc-\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#\\\/schema\\\/person\\\/9edf35be7961c9563bb98c380dd7bd82\",\"name\":\"Zach Owen\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0cc99b931006b6c0ba35ca7c3114f43bda8a4d29c5799e923ecc52d8bc06ceb2?s=96&d=mm&r=gd818c67ef52be34c9e240bf41e09b51b\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0cc99b931006b6c0ba35ca7c3114f43bda8a4d29c5799e923ecc52d8bc06ceb2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0cc99b931006b6c0ba35ca7c3114f43bda8a4d29c5799e923ecc52d8bc06ceb2?s=96&d=mm&r=g\",\"caption\":\"Zach Owen\"},\"description\":\"Senior engineer, duct-tape enthusiast.\",\"sameAs\":[\"http:\\\/\\\/wds.dev\"],\"url\":\"https:\\\/\\\/webdevstudios.com\\\/author\\\/zach\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Writing Clean(er) JavaScript - WebDevStudios.com","description":"Zach talks you through writing clean(er) JavaScript and making your code look nice and pretty!","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:\/\/webdevstudios.com\/2015\/10\/27\/writing-cleaner-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Writing Clean(er) JavaScript","og_description":"Zach talks you through writing clean(er) JavaScript and making your code look nice and pretty!","og_url":"https:\/\/webdevstudios.com\/2015\/10\/27\/writing-cleaner-javascript\/","og_site_name":"WebDevStudios","article_publisher":"http:\/\/facebook.com\/webdevstudios","article_published_time":"2015-10-27T18:15:59+00:00","article_modified_time":"2024-04-15T16:03:28+00:00","og_image":[{"width":851,"height":315,"url":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2015\/10\/Writing-Cleaner-JavaScript-1.jpg","type":"image\/jpeg"}],"author":"Zach Owen","twitter_card":"summary_large_image","twitter_creator":"@webdevstudios","twitter_site":"@webdevstudios","twitter_misc":{"Written by":"Zach Owen","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webdevstudios.com\/2015\/10\/27\/writing-cleaner-javascript\/#article","isPartOf":{"@id":"https:\/\/webdevstudios.com\/2015\/10\/27\/writing-cleaner-javascript\/"},"author":{"name":"Zach Owen","@id":"https:\/\/webdevstudios.com\/#\/schema\/person\/9edf35be7961c9563bb98c380dd7bd82"},"headline":"Writing Clean(er) JavaScript","datePublished":"2015-10-27T18:15:59+00:00","dateModified":"2024-04-15T16:03:28+00:00","mainEntityOfPage":{"@id":"https:\/\/webdevstudios.com\/2015\/10\/27\/writing-cleaner-javascript\/"},"wordCount":627,"commentCount":0,"publisher":{"@id":"https:\/\/webdevstudios.com\/#organization"},"image":{"@id":"https:\/\/webdevstudios.com\/2015\/10\/27\/writing-cleaner-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2015\/10\/Writing-Cleaner-JavaScript-1.jpg","keywords":["design-patterns","javascript"],"articleSection":["Development","Employee Post"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webdevstudios.com\/2015\/10\/27\/writing-cleaner-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webdevstudios.com\/2015\/10\/27\/writing-cleaner-javascript\/","url":"https:\/\/webdevstudios.com\/2015\/10\/27\/writing-cleaner-javascript\/","name":"Writing Clean(er) JavaScript - WebDevStudios.com","isPartOf":{"@id":"https:\/\/webdevstudios.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webdevstudios.com\/2015\/10\/27\/writing-cleaner-javascript\/#primaryimage"},"image":{"@id":"https:\/\/webdevstudios.com\/2015\/10\/27\/writing-cleaner-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2015\/10\/Writing-Cleaner-JavaScript-1.jpg","datePublished":"2015-10-27T18:15:59+00:00","dateModified":"2024-04-15T16:03:28+00:00","description":"Zach talks you through writing clean(er) JavaScript and making your code look nice and pretty!","breadcrumb":{"@id":"https:\/\/webdevstudios.com\/2015\/10\/27\/writing-cleaner-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webdevstudios.com\/2015\/10\/27\/writing-cleaner-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevstudios.com\/2015\/10\/27\/writing-cleaner-javascript\/#primaryimage","url":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2015\/10\/Writing-Cleaner-JavaScript-1.jpg","contentUrl":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2015\/10\/Writing-Cleaner-JavaScript-1.jpg","width":851,"height":315,"caption":"writing clean code, better JavaScript, JavaScript tutorial, JavaScript in WordPress, how to use JavaScript, WordPress tutorials, web dev tutorials, how to use JS, JS in WordPress, WordPress JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/webdevstudios.com\/2015\/10\/27\/writing-cleaner-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webdevstudios.com\/"},{"@type":"ListItem","position":2,"name":"Writing Clean(er) JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/webdevstudios.com\/#website","url":"https:\/\/webdevstudios.com\/","name":"WebDevStudios","description":"WordPress Design and Development Agency","publisher":{"@id":"https:\/\/webdevstudios.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webdevstudios.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webdevstudios.com\/#organization","name":"WebDevStudios","url":"https:\/\/webdevstudios.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevstudios.com\/#\/schema\/logo\/image\/","url":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2019\/07\/wds-amp-logo.png","contentUrl":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2019\/07\/wds-amp-logo.png","width":173,"height":60,"caption":"WebDevStudios"},"image":{"@id":"https:\/\/webdevstudios.com\/#\/schema\/logo\/image\/"},"sameAs":["http:\/\/facebook.com\/webdevstudios","https:\/\/x.com\/webdevstudios","http:\/\/instagram.com\/webdevstudios","https:\/\/www.linkedin.com\/company\/webdevstudios-llc-\/"]},{"@type":"Person","@id":"https:\/\/webdevstudios.com\/#\/schema\/person\/9edf35be7961c9563bb98c380dd7bd82","name":"Zach Owen","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/0cc99b931006b6c0ba35ca7c3114f43bda8a4d29c5799e923ecc52d8bc06ceb2?s=96&d=mm&r=gd818c67ef52be34c9e240bf41e09b51b","url":"https:\/\/secure.gravatar.com\/avatar\/0cc99b931006b6c0ba35ca7c3114f43bda8a4d29c5799e923ecc52d8bc06ceb2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0cc99b931006b6c0ba35ca7c3114f43bda8a4d29c5799e923ecc52d8bc06ceb2?s=96&d=mm&r=g","caption":"Zach Owen"},"description":"Senior engineer, duct-tape enthusiast.","sameAs":["http:\/\/wds.dev"],"url":"https:\/\/webdevstudios.com\/author\/zach\/"}]}},"jetpack_featured_media_url":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2015\/10\/Writing-Cleaner-JavaScript-1.jpg","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3WX6u-36j","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/posts\/11923","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/users\/31"}],"replies":[{"embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/comments?post=11923"}],"version-history":[{"count":0,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/posts\/11923\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/media\/11990"}],"wp:attachment":[{"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/media?parent=11923"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/categories?post=11923"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/tags?post=11923"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/coauthors?post=11923"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}