{"id":37749,"date":"2017-08-28T23:01:36","date_gmt":"2017-08-28T15:01:36","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=37749"},"modified":"2017-10-31T19:39:44","modified_gmt":"2017-10-31T11:39:44","slug":"javascript-shorthands","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/javascript-shorthands\/","title":{"rendered":"Top 10 JavaScript Shorthands for Beginners"},"content":{"rendered":"

JavaScript shorthands<\/strong> not only speed up the coding process but also make scripts shorter, therefore lead to faster page loads<\/strong>. Shorthand codes are just as valid as their longhand versions; they essentially stand for the same thing<\/strong>\u2013only in a more compact format. They are one of the simplest code optimization techniques<\/a>.<\/p>\n

There are several JavaScript shorthands, however they don\u2019t have an official reference guide<\/strong>. Some are really simple, while others are quite intimidating even for experienced developers. In this article, you can find 10 JavaScript shorthands for beginners<\/strong> with which you can start out with code optimization and write more concise code.<\/p>\n

Read Also:<\/strong> CSS Shorthand vs. Longhand \u2013 When to Use Which<\/a><\/p>\n

1. Decimal numbers<\/h2>\n

If you regularly work with big decimals<\/strong> this shorthand can be godsend, as you don\u2019t have to type out all the zeros anymore, just replace them with the e<\/code> notation. For instance, 1e8<\/code> means the addition of eight zeros after the 1<\/code> digit, it equals to 100000000<\/code>.<\/p>\n

The number after the letter e<\/code> indicates the number of zeros<\/strong> that come after the digit(s) before e<\/code>. Likewise, 16e4<\/code> is the shorthand for 160000<\/code>, etc.<\/p>\n

\r\n\/* Shorthand *\/\r\nvar myVar = 1e8;\r\n\r\n\/* Longhand *\/\r\nvar myVar = 100000000;\r\n<\/pre>\n
2. Increment, decrement<\/h2>\n
The increment shorthand<\/strong> is made up of two +<\/code> signs, it means that the value of a variable is to be incremented by one<\/strong>. Similarly, the decrement shorthand<\/strong> consists of two -<\/code> signs, and it means that the variable is to be decremented by one<\/strong>.<\/p>\n
These two shorthands can be used only on numeric data types<\/strong>. They have an indispensable role in loops, their most frequent use case is the for<\/code> loop<\/a><\/strong>.<\/p>\n
\r\n\/* Shorthand *\/\r\ni++;\r\nj--;\r\n\r\n\/* Longhand *\/\r\ni=i+1;\r\nj=j-1;\r\n<\/pre>\n
3. Add, distract, multiply, divide<\/h2>\n
There\u2019s a shorthand for each of the four basic mathematical operations<\/strong>: addition, distraction, multiplication, and division. They work similarly to the increment and decrement operators, just here, you can change the value of a variable by any number<\/strong> (not just by one).<\/p>\n
In the example below, the i<\/code> variable is incremented by 5<\/code>, j<\/code> is decremented by 3<\/code>, k<\/code> is multiplied by 10<\/code>, and l<\/code> is divided by 2<\/code>.<\/p>\n
\r\n\/* Shorthand *\/\r\ni+=5;\r\nj-=3;\r\nk*=10;\r\nl\/=2;\r\n\r\n\/* Longhand *\/\r\ni=i+5;\r\nj=j-3;\r\nk=k*10;\r\nl=l\/2;\r\n<\/pre>\n
4. Determine character position<\/h2>\n
The charAt()<\/code><\/a> method<\/strong> is one of the most frequently used string methods, it returns the character at a specified position<\/strong> (for instance, the 5th<\/sup> character of a string). There\u2019s a simple shorthand you can use instead: you add the character position enclosed in square brackets<\/strong> after the string.<\/p>\n
Pay attention that the charAt()<\/code> method is zero-based<\/strong>. Therefore, myString[4]<\/code> will return the 5th<\/sup> character in the string (\"y\"<\/code> in the example).<\/p>\n
\r\nvar myString = \"Happy birthday\";\r\n\r\n\/* Shorthand *\/\r\nmyString[4];\r\n\r\n\/* Longhand *\/\r\nmyString.charAt(4);\r\n<\/pre>\n
5. Declare variables in bulk<\/h2>\n
If you want to create more than one variables at the same time<\/strong> you don\u2019t have to type them out one by one. It\u2019s sufficient to use the var<\/code> (or let<\/code>) keyword only once<\/strong>, then you can just list the variables you want to create, separated by a comma<\/strong>.<\/p>\n
With this shorthand, you can declare both undefined variables<\/strong> and variables with a value<\/strong>.<\/p>\n
\r\n\/* Shorthand *\/\r\nvar i, j=5, k=\"Good morning\", l, m=false;\r\n\r\n\/* Longhand *\/\r\nvar i;\r\nvar j=5;\r\nvar k=\"Good morning\";\r\nvar l;\r\nvar m=false;\r\n<\/pre>\n
6. Declare an associative array<\/h2>\n
Declaring an array<\/a> in JavaScript is a relatively simple task, by using the var myArray = [\"apple\", \"pear\", \"orange\"]<\/code> syntax. However, declaring an associative array<\/strong> is a little more complicated, as here, you don\u2019t only have to define the values but also the keys (in case of regular arrays the keys are 0, 1, 2, 3, etc.<\/code>).<\/p>\n
An associative array is a collection of key-value pairs<\/strong>. The longhand way is to declare the array, then add each element one by one. However, with the shorthand below, you can also declare the associative array<\/strong> plus all its elements<\/strong> at the same time.<\/p>\n
In the example below, the myArray<\/code> associative array assigns their place of birth (values) to famous people (keys).<\/p>\n
\r\n\/* Shorthand *\/\r\nvar myArray  = {\r\n  \"Grace Kelly\": \"Philadelphia\",\r\n  \"Clint Eastwood\": \"San Francisco\",\r\n  \"Humphrey Bogart\": \"New York City\",\r\n  \"Sophia Loren\": \"Rome\",\r\n  \"Ingrid Bergman\": \"Stockholm\"\r\n}\r\n\r\n\/* Longhand *\/\r\nvar myArray = new Array();\r\nmyArray[\"Grace Kelly\"] = \"Philadelphia\";\r\nmyArray[\"Clint Eastwood\"] = \"San Francisco\";\r\nmyArray[\"Humphrey Bogart\"] = \"New York City\";\r\nmyArray[\"Sophia Loren\"] = \"Rome\";\r\nmyArray[\"Ingrid Bergman\"] = \"Stockholm\";\r\n<\/pre>\n
7. Declare an object<\/h2>\n
The shorthand for object declaration<\/strong> works similarly to the one for associative arrays. However here, there are not key-value pairs but property-value pairs<\/strong> that you need to place between the braces {}<\/code>.<\/p>\n
The only difference in the shorthand syntax is that object properties are not enclosed in quotation marks<\/strong> (name<\/code>, placeOfBirth<\/code>, age<\/code>, wasJamesBond<\/code> in the example below).<\/p>\n
\r\n\/* Shorthand *\/\r\nvar myObj = { name: \"Sean Connery\", placeOfBirth: \"Edinburgh\",\r\nage: 86, wasJamesBond: true };\r\n\r\n\/* Longhand *\/\r\nvar myObj = new Object();\r\nmyObj.name = \"Sean Connery\";\r\nmyObj.placeOfBirth = \"Edinburgh\";\r\nmyObj.age = 86;\r\nmyObj.wasJamesBond = true;\r\n<\/pre>\n
8. Use the conditional operator<\/h2>\n
The conditional (ternary) operator<\/a><\/strong> is frequently used as the shortcut for the if-else<\/code> statement<\/strong>. It consists of three parts<\/strong>:<\/p>\n
    \n
  1. the condition<\/strong><\/li>\n
  2. what happens if the condition is true<\/strong> (if<\/code>)<\/li>\n
  3. what happens if the condition is false<\/strong> (else<\/code>)<\/li>\n<\/ol>\n
    In the example below, we send a simple message (inside the message<\/code> variable) to people who want to enter a club. Using the shorthand form, it\u2019s just one line of code to run the evaluation<\/strong>.<\/p>\n
    \r\nvar age = 17;\r\n\r\n\/* Shorthand *\/\r\nvar message = age >= 18 ? \"Allowed\" : \"Denied\";\r\n\r\n\/* Longhand *\/\r\nif( age >= 18) {\r\n  var message = \"Allowed\";\r\n} else {\r\n  var message = \"Denied\";\r\n}\r\n<\/pre>\n
    If you want to test it just copy the code into the web console<\/strong> (F12<\/span> in most browsers) and modify the value of the age<\/code> variable a few times.<\/p>\n
    9. Check presence<\/h2>\n
    It frequently happens that you need to check whether a variable is present or not<\/strong>. The \u201cif presence\u201d shorthand<\/strong> helps  you do so with much less code.<\/p>\n
    Beware that most articles on JavaScript shorthands don\u2019t give the proper longhand form, as the if( myVar )<\/code> notation doesn\u2019t simply check if the variable is not false but also a handful of other things. Namely, the variable cannot be undefined, empty, null, and false<\/strong>.<\/p>\n
    \r\nvar myVar = 99;\r\n\r\n\/* Shorthand *\/\r\nif( myVar ) {\r\n  console.log(\"The myVar variable is defined AND it's not empty\r\n  AND not null AND not false.\");\r\n}\r\n\r\n\/* Longhand *\/\r\nif( typeof myVar !== \"undefined\" && myVar !==  \"\" && myVar !== null\r\n&& myVar !== 0 && myVar !== false  ) {\r\n  console.log(\"The myVar variable is defined AND it's not empty\r\n  AND not null AND not false.\");\r\n}\r\n<\/pre>\n
    You can test how the \u201cif presence\u201d shorthand works by inserting the following code snippet into the web console and changing the value of myVar<\/code><\/strong> a few times.<\/p>\n
    To understand how this shorthand works, it\u2019s worth testing it with the values of \"\"<\/code> (empty string), false<\/code>, 0<\/code>, true<\/code>, a non-empty string (e.g. \"Hi\"<\/code>), a number (e.g. 99<\/code>), and when the variable is undefined (simply var myVar;<\/code>).<\/p>\n
    10. Check absence<\/h2>\n
    The \u201cif presence\u201d shorthand can be used to check the absence of a variable<\/strong> by placing an exclamation mark before it<\/strong>. The exclamation mark is the logical not operator<\/a><\/strong> in JavaScript (and in most programming languages).<\/p>\n
    Therefore, with the if( !myVar )<\/code> notation, you can check if the myVar<\/code> variable is not undefined, empty, null, or false<\/strong>.<\/p>\n
    \r\nvar myVar;\r\n\r\n\/* Shorthand *\/\r\nif( !myVar ) {\r\n  console.warn(\"The myVar variable is undefined (OR) empty (OR)\r\n  null (OR) false.\");\r\n}\r\n\r\n\/* Longhand *\/\r\nif( typeof myVar === \"undefined\" || myVar === \"\" || myVar === null\r\n|| myVar === 0 || myVar === false  ) {\r\n  console.warn(\"The myVar variable is undefined (OR) empty (OR)\r\n  null (OR) false.\");\r\n}\r\n<\/pre>\n
    Read Also:<\/strong> JavaScript Jargon: 10 Terms You Should Know<\/a><\/p>","protected":false},"excerpt":{"rendered":"
    JavaScript shorthands not only speed up the coding process but also make scripts shorter, therefore lead to faster page loads. Shorthand codes are just as valid as their longhand versions; they essentially stand for the same thing\u2013only in a more compact format. They are one of the simplest code optimization techniques. There are several JavaScript…<\/p>\n","protected":false},"author":146,"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":"\nTop 10 JavaScript Shorthands for Beginners - Hongkiat<\/title>\n<meta name=\"description\" content=\"JavaScript shorthands not only speed up the coding process but also make scripts shorter, therefore lead to faster page loads. Shorthand codes are just as\" \/>\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\/javascript-shorthands\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Top 10 JavaScript Shorthands for Beginners\" \/>\n<meta property=\"og:description\" content=\"JavaScript shorthands not only speed up the coding process but also make scripts shorter, therefore lead to faster page loads. Shorthand codes are just as\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/javascript-shorthands\/\" \/>\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=\"2017-08-28T15:01:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-10-31T11:39:44+00:00\" \/>\n<meta name=\"author\" content=\"Anna Monus\" \/>\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=\"Anna Monus\" \/>\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\\\/javascript-shorthands\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-shorthands\\\/\"},\"author\":{\"name\":\"Anna Monus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\"},\"headline\":\"Top 10 JavaScript Shorthands for Beginners\",\"datePublished\":\"2017-08-28T15:01:36+00:00\",\"dateModified\":\"2017-10-31T11:39:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-shorthands\\\/\"},\"wordCount\":927,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"keywords\":[\"Javascripts\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-shorthands\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-shorthands\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-shorthands\\\/\",\"name\":\"Top 10 JavaScript Shorthands for Beginners - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"datePublished\":\"2017-08-28T15:01:36+00:00\",\"dateModified\":\"2017-10-31T11:39:44+00:00\",\"description\":\"JavaScript shorthands not only speed up the coding process but also make scripts shorter, therefore lead to faster page loads. Shorthand codes are just as\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-shorthands\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-shorthands\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-shorthands\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Top 10 JavaScript Shorthands for Beginners\"}]},{\"@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\\\/a601053a0ab457901e00cdc83bd5359e\",\"name\":\"Anna Monus\",\"description\":\"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.\",\"sameAs\":[\"https:\\\/\\\/www.annalytic.com\\\/\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/anna_monus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Top 10 JavaScript Shorthands for Beginners - Hongkiat","description":"JavaScript shorthands not only speed up the coding process but also make scripts shorter, therefore lead to faster page loads. Shorthand codes are just as","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\/javascript-shorthands\/","og_locale":"en_US","og_type":"article","og_title":"Top 10 JavaScript Shorthands for Beginners","og_description":"JavaScript shorthands not only speed up the coding process but also make scripts shorter, therefore lead to faster page loads. Shorthand codes are just as","og_url":"https:\/\/www.hongkiat.com\/blog\/javascript-shorthands\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2017-08-28T15:01:36+00:00","article_modified_time":"2017-10-31T11:39:44+00:00","author":"Anna Monus","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Anna Monus","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/javascript-shorthands\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/javascript-shorthands\/"},"author":{"name":"Anna Monus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e"},"headline":"Top 10 JavaScript Shorthands for Beginners","datePublished":"2017-08-28T15:01:36+00:00","dateModified":"2017-10-31T11:39:44+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/javascript-shorthands\/"},"wordCount":927,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"keywords":["Javascripts"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/javascript-shorthands\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/javascript-shorthands\/","url":"https:\/\/www.hongkiat.com\/blog\/javascript-shorthands\/","name":"Top 10 JavaScript Shorthands for Beginners - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"datePublished":"2017-08-28T15:01:36+00:00","dateModified":"2017-10-31T11:39:44+00:00","description":"JavaScript shorthands not only speed up the coding process but also make scripts shorter, therefore lead to faster page loads. Shorthand codes are just as","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/javascript-shorthands\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/javascript-shorthands\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/javascript-shorthands\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Top 10 JavaScript Shorthands for Beginners"}]},{"@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\/a601053a0ab457901e00cdc83bd5359e","name":"Anna Monus","description":"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.","sameAs":["https:\/\/www.annalytic.com\/"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/anna_monus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-9OR","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/37749","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\/146"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=37749"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/37749\/revisions"}],"predecessor-version":[{"id":37773,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/37749\/revisions\/37773"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=37749"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=37749"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=37749"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=37749"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}