[{"data":1,"prerenderedAt":299},["ShallowReactive",2],{"article:four-different-ways-to-write-functions-in-javascript":3,"\u002Fblog\u002Ffour-different-ways-to-write-functions-in-javascript-surround":288},{"id":4,"title":5,"author":6,"body":7,"date":277,"description":278,"extension":279,"image":280,"meta":281,"minRead":94,"navigation":122,"path":282,"published":122,"seo":283,"stem":284,"tags":285,"__hash__":287},"blog\u002Fblog\u002Ffour-different-ways-to-write-functions-in-javascript.md","Four Different Ways to Write Functions in Javascript","Baljeet Singh",{"type":8,"value":9,"toc":275},"minimark",[10,22,33,49,260,263,271],[11,12,13,17,18,21],"p",{},[14,15,16],"strong",{},"Functions"," are the basic building blocks of the Javascript. A ",[14,19,20],{},"function"," in Javascript is a code block that performs a specific task or set of tasks.",[11,23,24,25,28,29,32],{},"There are basically ",[14,26,27],{},"4"," (four) different ways we can define ",[14,30,31],{},"functions"," in Javascript.",[34,35,36,40,43,46],"ul",{},[37,38,39],"li",{},"Function Declaration",[37,41,42],{},"Function Expression",[37,44,45],{},"Arrow Function Expression",[37,47,48],{},"Concise Arrow Function Expression",[50,51,56],"pre",{"className":52,"code":53,"language":54,"meta":55,"style":55},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F Function Declaration\nfunction square(x) {\n  return x * x;\n}\n\n\u002F\u002F Function Expression\nconst square = function (x) {\n  return x * x;\n};\n\n\u002F\u002F Arrow Function Expression\nconst square = (x) => {\n  return x * x;\n};\n\n\u002F\u002F Concise Arrow Function Expression\nconst square = (x) => x * x;\n","js","",[57,58,59,68,92,111,117,124,130,154,167,173,178,184,204,217,222,227,233],"code",{"__ignoreMap":55},[60,61,64],"span",{"class":62,"line":63},"line",1,[60,65,67],{"class":66},"sHwdD","\u002F\u002F Function Declaration\n",[60,69,71,74,78,82,86,89],{"class":62,"line":70},2,[60,72,20],{"class":73},"spNyl",[60,75,77],{"class":76},"s2Zo4"," square",[60,79,81],{"class":80},"sMK4o","(",[60,83,85],{"class":84},"sHdIc","x",[60,87,88],{"class":80},")",[60,90,91],{"class":80}," {\n",[60,93,95,99,103,106,108],{"class":62,"line":94},3,[60,96,98],{"class":97},"s7zQu","  return",[60,100,102],{"class":101},"sTEyZ"," x",[60,104,105],{"class":80}," *",[60,107,102],{"class":101},[60,109,110],{"class":80},";\n",[60,112,114],{"class":62,"line":113},4,[60,115,116],{"class":80},"}\n",[60,118,120],{"class":62,"line":119},5,[60,121,123],{"emptyLinePlaceholder":122},true,"\n",[60,125,127],{"class":62,"line":126},6,[60,128,129],{"class":66},"\u002F\u002F Function Expression\n",[60,131,133,136,139,142,145,148,150,152],{"class":62,"line":132},7,[60,134,135],{"class":73},"const",[60,137,138],{"class":101}," square ",[60,140,141],{"class":80},"=",[60,143,144],{"class":73}," function",[60,146,147],{"class":80}," (",[60,149,85],{"class":84},[60,151,88],{"class":80},[60,153,91],{"class":80},[60,155,157,159,161,163,165],{"class":62,"line":156},8,[60,158,98],{"class":97},[60,160,102],{"class":101},[60,162,105],{"class":80},[60,164,102],{"class":101},[60,166,110],{"class":80},[60,168,170],{"class":62,"line":169},9,[60,171,172],{"class":80},"};\n",[60,174,176],{"class":62,"line":175},10,[60,177,123],{"emptyLinePlaceholder":122},[60,179,181],{"class":62,"line":180},11,[60,182,183],{"class":66},"\u002F\u002F Arrow Function Expression\n",[60,185,187,189,191,193,195,197,199,202],{"class":62,"line":186},12,[60,188,135],{"class":73},[60,190,138],{"class":101},[60,192,141],{"class":80},[60,194,147],{"class":80},[60,196,85],{"class":84},[60,198,88],{"class":80},[60,200,201],{"class":73}," =>",[60,203,91],{"class":80},[60,205,207,209,211,213,215],{"class":62,"line":206},13,[60,208,98],{"class":97},[60,210,102],{"class":101},[60,212,105],{"class":80},[60,214,102],{"class":101},[60,216,110],{"class":80},[60,218,220],{"class":62,"line":219},14,[60,221,172],{"class":80},[60,223,225],{"class":62,"line":224},15,[60,226,123],{"emptyLinePlaceholder":122},[60,228,230],{"class":62,"line":229},16,[60,231,232],{"class":66},"\u002F\u002F Concise Arrow Function Expression\n",[60,234,236,238,240,242,244,246,248,250,253,256,258],{"class":62,"line":235},17,[60,237,135],{"class":73},[60,239,138],{"class":101},[60,241,141],{"class":80},[60,243,147],{"class":80},[60,245,85],{"class":84},[60,247,88],{"class":80},[60,249,201],{"class":73},[60,251,252],{"class":101}," x ",[60,254,255],{"class":80},"*",[60,257,102],{"class":101},[60,259,110],{"class":80},[11,261,262],{},"If you prefer you can take a look at the video tutorial,",[264,265],"iframe",{"width":266,"height":267,"src":268,"frameBorder":269,"allow":270,"allowFullScreen":122},560,315,"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FDaVmnMHppq4","0","accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",[272,273,274],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":55,"searchDepth":70,"depth":70,"links":276},[],"2018-04-13","In this article we will take a look at Four Different Ways to Write Functions in Javascript","md","\u002Fimg\u002F4-ways-to-write-js-functions.jpg",{},"\u002Fblog\u002Ffour-different-ways-to-write-functions-in-javascript",{"title":5,"description":278},"blog\u002Ffour-different-ways-to-write-functions-in-javascript",[286],"Web Development","3VClMD5PAzCO8JpXefAxNVFpUbNNrl4FjBHHm6-CsZk",[289,294],{"title":290,"path":291,"stem":292,"description":293,"children":-1},"Creating custom popover component with Vue 3 and Tailwind CSS","\u002Fblog\u002Fcreating-popover-component-with-vue3","blog\u002Fcreating-popover-component-with-vue3","In this article we'll see how we can create a custom design sytem popover component with vue 3 and tailwind css.",{"title":295,"path":296,"stem":297,"description":298,"children":-1},"Getting Started With Angular 10 and TailwindCSS using CDN (Part 1)","\u002Fblog\u002Fgetting-started-with-angular-10-and-tailwindcss-using-cdn-part-1","blog\u002Fgetting-started-with-angular-10-and-tailwindcss-using-cdn-part-1","In this article, we will take a look at how we can use TailwindCSS with Angular 10 using the TailwindCSS CDN",1775568346753]