{"id":26750,"date":"2016-07-06T23:01:23","date_gmt":"2016-07-06T15:01:23","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=26750"},"modified":"2017-10-31T19:48:52","modified_gmt":"2017-10-31T11:48:52","slug":"useful-javascript-statements","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/useful-javascript-statements\/","title":{"rendered":"4 Useful JavaScript Statements You Should Know"},"content":{"rendered":"

JavaScript statements<\/a> give us the power to implement different types of logic in our code.<\/strong> JavaScript provides us with several of them<\/a>, all of which has its own purpose and syntax. Among the most well-known examples we can find expression statements, iteration statements, conditional statements, and more<\/p>\n

In today\u2019s post we\u2019ll see four less common JavaScript statements<\/strong> you may not have known before, but can deepen your JavaScript knowledge, and enable you to write better code.<\/p>\n

1. Empty Statement<\/h2>\n

In place of any JavaScript statement, you can add an empty statement<\/a>, which is written as a single semi-colon ;<\/strong><\/code>. When the JavaScript interpreter interprets an empty statement, no code is executed<\/strong>, therefore they can be useful to replace sub-statements that you don\u2019t want to execute<\/strong>.<\/p>\n

For instance, assume there\u2019s a variable called litmus<\/code> with the default value neutral<\/code>. Based on the value of another variable called pH<\/code>, litmus<\/code> changes to either acidic<\/code> when pH < 7 or basic<\/code> when pH > 7.<\/p>\n

If the value of pH<\/code> turns out to be invalid, an error is thrown. For a condition<\/em> like this, the following conditional statements apply:<\/p>\n

\r\nvar litmus = 'neutral';\r\nvar pH; \r\n\r\nif(pH>0 && pH<7) \r\n    litmus = 'acidic';\r\nelse if(pH>7 && pH<15)\r\n    litmus = 'basic';\r\nelse\r\n    throw \"Invalid pH value\";\r\n<\/pre>\n
However the above set of statements throws an error when pH<\/code>\u2018s value is 7, which shouldn\u2019t be the case.<\/p>\n
When pH<\/code> is 7, litmus<\/code> should keep its default value, that is neutral<\/code>. So, for a case like this, add a condition when pH<\/code> is 7 with a trailing empty statement.<\/p>\n
\r\nvar litmus = 'neutral';\r\nvar pH; \r\n\r\nif(pH>0 && pH<7)\r\n    litmus = 'acidic';\r\nelse if(pH===7)\r\n    ;       \/* empty statement *\/\r\nelse if(pH>7 && pH<15)\r\n    litmus = 'basic';\r\nelse\r\n    throw \"Invalid pH value\";<\/pre>\n
Now, when pH<\/code> is 7, the interpreter doesn\u2019t execute any instructions, and litmus<\/code> keeps its default value, neutral<\/code>.<\/p>\n
Empty statements can also be used to populate an array with the help of the for<\/code> loop.<\/p>\n
\r\nvar ary = [];\r\n\r\nfor(var i = 0; i < 5; ary[i++] = i)\r\n;       \/* empty statement *\/\r\nconsole.log(ary); \r\n\/\/ [1, 2, 3, 4, 5]<\/pre>\n
Typically, a for<\/code> loop statement is followed by a sub-statement that is made up of a single, or a block statement (the one enclosed in {}<\/code> curly brackets) to be executed. By using an empty statement in place of the sub-statement, the interpreter won\u2019t have anything to execute after each loop, so only the looping<\/em> occurs, and the looping conditions get executed<\/strong>.<\/p>\n
In the above example, ary[i++] = i<\/code> executes for each loop iteration as part of the looping condition, and the array ary<\/code> gets instantiated with values of i<\/code>.<\/p>\n
2. The debugger<\/code> Statement<\/h2>\n
In debugging tools, we can add markers<\/strong> called breakpoints<\/em> to any line in the source code to mark the lines from where the debugger tool will start debugging<\/strong>.<\/p>\n
In JavaScript, the debugger<\/a><\/code> statement works the same way as a breakpoint<\/strong>, except that it\u2019s added into the source code directly<\/strong>, rather than within a tool. Any running debugger will halt the script execution<\/strong> when it reaches the debugger<\/code> statement in order to help you debug the code.<\/p>\n
Remember, the debugging will get triggered only if the script is running in a debugging mode<\/strong>, i.e. a debugging program is already running over the execution of the script. If there is no currently running debugger program while interpreting the debugger<\/code> statement, the interpreter will continue its work as if nothing happened.<\/p>\n
As a quick test, run the following code in Codepen, while keeping the browser\u2019s debugger tool open:<\/p>\n
\r\nconsole.log('tesing');\r\ndebugger;\r\nconsole.log('debugging statement');<\/pre>\n
You\u2019ll see a breakpoint besides the debugger<\/code> statement as shown below in the browser\u2019s debugger tool.<\/p>\n
\"debugger<\/figure>\n
3. Labeled Statement<\/h2>\n
In JavaScript, you can add labels<\/a> to certain statements as well. By doing so, you can later jump to the labeled statement<\/strong> using its label in your code, kind of<\/em> like the goto<\/code> statement works in some other languages.<\/p>\n
Labeled statements can only be used together with the break<\/a><\/code> and continue<\/a><\/code> statements, as in JavaScript there\u2019s no literal goto<\/code> statement.<\/p>\n
Both break<\/code> and continue<\/code> can only be used inside looping statements, such as the for<\/code> loop (with one exception, break<\/code> can be used in the switch<\/code> statement as well). So, we can label loops, and use break<\/code> and continue<\/code> to control their execution.<\/p>\n
The syntax of labeled statements<\/strong> is simple, you just need to add the name of the label with a following colon, as you can see it in the example below, where loop<\/code> is the name of the label we add to the for<\/code> loop.<\/p>\n
\r\nloop: for(var i=0; i<5; i++){\r\n    if(i===2) \r\n        continue loop;\r\n    console.log(i); \r\n    \/\/ 0, 1, 3, 4\r\n}<\/pre>\n
When the value of i<\/code> is 2, the execution jumps back to the loop instead of proceeding and hence prevents the console output of \u201c2\u201d.<\/p>\n
Now let\u2019s see another example with the break<\/code> statement. Just replace the continue<\/code> keyword with break<\/code> in the above example, and you will notice that instead of jumping back to the loop like it did with continue<\/code>, the loop ends\/breaks altogether.<\/p>\n
\r\nloop: for(var i=0; i<5; i++){\r\n    if(i===2) \r\n        break loop;\r\n    console.log(i); \r\n    \/\/ 0, 1\r\n}<\/pre>\n
The examples above were rather simple so that you can quickly understand how labeled statements work, but in real-life coding,  labels are more frequently used in compound loops, when it\u2019s necessary to distinguish the different loops, like in the following example:<\/p>\n
\r\nloop: for(var i=0; i<4; i++) {\r\nfor(var j=0; j<2; j++) {   \r\n    if(i===2 && j===1) \r\n        break loop;\r\n    console.log(i+\"-\"+j);     \r\n}<\/pre>\n
Here, the outer loop breaks<\/em><\/strong> at value 2 for variable i<\/code> and at 1 for j<\/code>, and the console returns the following output:<\/p>\n
\r\n0-0\r\n0-1\r\n1-0\r\n1-1\r\n2-0<\/pre>\n
4. The with<\/code> Statement<\/h2>\n
When the JS interpreter comes across an unqualified name<\/strong> that doesn\u2019t specify which object or function the call is associated with, it searches the scope chain<\/strong> for any suitable object or function the call may refer to.<\/p>\n
By using the with<\/a><\/code> statement, we can add an object to the top the scope chain<\/strong>, and specify which object the call is associated with.<\/p>\n
In the following example, you can see that the properties of the person<\/code> object are called using their names alone inside the with<\/code> statement.<\/p>\n
\r\nvar person = {\r\n    firstName: \"John\",\r\n    lastName: \"Doe\",\r\n    age: \"18\",\r\n    country: \"Greenland\"\r\n};\r\n\r\nwith(person) {\r\n    console.log(\"Hi, my name is \" + firstName + \" \" + lastName + \r\n    \". I'm \" + age + \" years old, and live in \" + country + \".\");\r\n}\r\n\/\/ \"Hi, my name is John Doe. I'm 18 years old, and live in Greenland.\"<\/pre>\n
Compare how the code above would look like without using the with<\/code> statement:<\/p>\n
\r\nvar person = {\r\n    firstName: \"John\",\r\n    lastName: \"Doe\",\r\n    age: \"18\",\r\n    country: \"Greenland\"\r\n};\r\n\r\nconsole.log(\"Hi, my name is \" + person.firstName + \" \" + \r\nperson.lastName + \". I'm \" + person.age + \r\n\" years old, and live in \" + person.country + \".\");\r\n\/\/ \"Hi, my name is John Doe. I'm 18 years old, and live in Greenland.\"<\/pre>\n
You can see, the with<\/code> statement can be a great shortcut if you work with many properties of the same object.<\/p>\n
Note however, that using the with<\/code> statement in strict mode is not allowed<\/strong>, since it can cause some scope confusion.<\/p>\n
Also, it\u2019s only advised to use the with<\/code> statement if its internal statements use the object associated with the with<\/code> statement, otherwise the interpreter will waste time looking into the object mentioned by with<\/code> first, for all the unqualified property names it later finds inside the with<\/code> block.<\/p>","protected":false},"excerpt":{"rendered":"
JavaScript statements give us the power to implement different types of logic in our code. JavaScript provides us with several of them, all of which has its own purpose and syntax. Among the most well-known examples we can find expression statements, iteration statements, conditional statements, and more In today\u2019s post we\u2019ll see four less common…<\/p>\n","protected":false},"author":145,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[4117],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\n4 Useful JavaScript Statements You Should Know - Hongkiat<\/title>\n<meta name=\"description\" content=\"JavaScript statements give us the power to implement different types of logic in our code. JavaScript provides us with several of them, all of which has\" \/>\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.hongkiat.com\/blog\/useful-javascript-statements\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"4 Useful JavaScript Statements You Should Know\" \/>\n<meta property=\"og:description\" content=\"JavaScript statements give us the power to implement different types of logic in our code. JavaScript provides us with several of them, all of which has\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/useful-javascript-statements\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2016-07-06T15:01:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-10-31T11:48:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/useful-javascript-statements\/four-js-statement-debugger-output.jpg\" \/>\n<meta name=\"author\" content=\"Preethi Ranjit\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Preethi Ranjit\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/useful-javascript-statements\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/useful-javascript-statements\\\/\"},\"author\":{\"name\":\"Preethi Ranjit\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\"},\"headline\":\"4 Useful JavaScript Statements You Should Know\",\"datePublished\":\"2016-07-06T15:01:23+00:00\",\"dateModified\":\"2017-10-31T11:48:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/useful-javascript-statements\\\/\"},\"wordCount\":949,\"commentCount\":13,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/useful-javascript-statements\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/useful-javascript-statements\\\/four-js-statement-debugger-output.jpg\",\"keywords\":[\"Javascripts\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/useful-javascript-statements\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/useful-javascript-statements\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/useful-javascript-statements\\\/\",\"name\":\"4 Useful JavaScript Statements You Should Know - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/useful-javascript-statements\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/useful-javascript-statements\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/useful-javascript-statements\\\/four-js-statement-debugger-output.jpg\",\"datePublished\":\"2016-07-06T15:01:23+00:00\",\"dateModified\":\"2017-10-31T11:48:52+00:00\",\"description\":\"JavaScript statements give us the power to implement different types of logic in our code. JavaScript provides us with several of them, all of which has\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/useful-javascript-statements\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/useful-javascript-statements\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/useful-javascript-statements\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/useful-javascript-statements\\\/four-js-statement-debugger-output.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/useful-javascript-statements\\\/four-js-statement-debugger-output.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/useful-javascript-statements\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"4 Useful JavaScript Statements You Should Know\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\",\"name\":\"Preethi Ranjit\",\"description\":\"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/preethi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"4 Useful JavaScript Statements You Should Know - Hongkiat","description":"JavaScript statements give us the power to implement different types of logic in our code. JavaScript provides us with several of them, all of which has","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.hongkiat.com\/blog\/useful-javascript-statements\/","og_locale":"en_US","og_type":"article","og_title":"4 Useful JavaScript Statements You Should Know","og_description":"JavaScript statements give us the power to implement different types of logic in our code. JavaScript provides us with several of them, all of which has","og_url":"https:\/\/www.hongkiat.com\/blog\/useful-javascript-statements\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-07-06T15:01:23+00:00","article_modified_time":"2017-10-31T11:48:52+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/useful-javascript-statements\/four-js-statement-debugger-output.jpg","type":"","width":"","height":""}],"author":"Preethi Ranjit","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Preethi Ranjit","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/useful-javascript-statements\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/useful-javascript-statements\/"},"author":{"name":"Preethi Ranjit","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3"},"headline":"4 Useful JavaScript Statements You Should Know","datePublished":"2016-07-06T15:01:23+00:00","dateModified":"2017-10-31T11:48:52+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/useful-javascript-statements\/"},"wordCount":949,"commentCount":13,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/useful-javascript-statements\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/useful-javascript-statements\/four-js-statement-debugger-output.jpg","keywords":["Javascripts"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/useful-javascript-statements\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/useful-javascript-statements\/","url":"https:\/\/www.hongkiat.com\/blog\/useful-javascript-statements\/","name":"4 Useful JavaScript Statements You Should Know - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/useful-javascript-statements\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/useful-javascript-statements\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/useful-javascript-statements\/four-js-statement-debugger-output.jpg","datePublished":"2016-07-06T15:01:23+00:00","dateModified":"2017-10-31T11:48:52+00:00","description":"JavaScript statements give us the power to implement different types of logic in our code. JavaScript provides us with several of them, all of which has","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/useful-javascript-statements\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/useful-javascript-statements\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/useful-javascript-statements\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/useful-javascript-statements\/four-js-statement-debugger-output.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/useful-javascript-statements\/four-js-statement-debugger-output.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/useful-javascript-statements\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"4 Useful JavaScript Statements You Should Know"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3","name":"Preethi Ranjit","description":"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.","url":"https:\/\/www.hongkiat.com\/blog\/author\/preethi\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6Xs","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26750","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/145"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=26750"}],"version-history":[{"count":1,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26750\/revisions"}],"predecessor-version":[{"id":26751,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26750\/revisions\/26751"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=26750"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=26750"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=26750"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=26750"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}