[{"data":1,"prerenderedAt":394},["ShallowReactive",2],{"article-clean-js-tricks":3,"authors":378},{"id":4,"title":5,"author":6,"body":7,"date":369,"description":370,"extension":371,"meta":372,"navigation":250,"path":373,"seo":374,"stem":375,"thumbnail":376,"__hash__":377},"article\u002Farticle\u002Fclean-js-tricks.md","Clean JS Tricks","ashwin",{"type":8,"value":9,"toc":362},"minimark",[10,14,17,22,25,28,94,97,136,139,143,145,174,177,200,203,221,224,228,231,266,269,283,287,290,292,311,314,332,335,337,341,355,358],[11,12,13],"p",{},"Write a much cleaner and more readable code with these few js tips & tricks.",[15,16],"br",{},[18,19,21],"h2",{"id":20},"array-destructuring-for-functions","Array Destructuring For Functions",[11,23,24],{},"In this first type, we will see how to destructure an array for a function with multiple return values.",[11,26,27],{},"The regular way:",[29,30,35],"pre",{"className":31,"code":32,"language":33,"meta":34,"style":34},"language-javascript shiki shiki-themes material-theme-darker","const func = () => {\n  const clinton = 1;\n  const trump = 2;\n  const obama = 3;\n  const biden = 4;\n  return [clinton, trump, obama, biden];\n}\nconst [clinton, trump, obama, biden] = func();\nconsole.log(clinton, trump, obama, biden); \u002F\u002F Outputs: 1,2,3,4\n","javascript","",[36,37,38,46,52,58,64,70,76,82,88],"code",{"__ignoreMap":34},[39,40,43],"span",{"class":41,"line":42},"line",1,[39,44,45],{},"const func = () => {\n",[39,47,49],{"class":41,"line":48},2,[39,50,51],{},"  const clinton = 1;\n",[39,53,55],{"class":41,"line":54},3,[39,56,57],{},"  const trump = 2;\n",[39,59,61],{"class":41,"line":60},4,[39,62,63],{},"  const obama = 3;\n",[39,65,67],{"class":41,"line":66},5,[39,68,69],{},"  const biden = 4;\n",[39,71,73],{"class":41,"line":72},6,[39,74,75],{},"  return [clinton, trump, obama, biden];\n",[39,77,79],{"class":41,"line":78},7,[39,80,81],{},"}\n",[39,83,85],{"class":41,"line":84},8,[39,86,87],{},"const [clinton, trump, obama, biden] = func();\n",[39,89,91],{"class":41,"line":90},9,[39,92,93],{},"console.log(clinton, trump, obama, biden); \u002F\u002F Outputs: 1,2,3,4\n",[11,95,96],{},"Instead, we can use object destructuring:",[29,98,100],{"className":31,"code":99,"language":33,"meta":34,"style":34},"const func = () => {\n  const clinton = 1;\n  const trump = 2;\n  const obama = 3;\n  const biden = 4;\n  return { clinton, trump, obama, biden};\n}\nconst { obama, biden } = func();\n",[36,101,102,106,110,114,118,122,127,131],{"__ignoreMap":34},[39,103,104],{"class":41,"line":42},[39,105,45],{},[39,107,108],{"class":41,"line":48},[39,109,51],{},[39,111,112],{"class":41,"line":54},[39,113,57],{},[39,115,116],{"class":41,"line":60},[39,117,63],{},[39,119,120],{"class":41,"line":66},[39,121,69],{},[39,123,124],{"class":41,"line":72},[39,125,126],{},"  return { clinton, trump, obama, biden};\n",[39,128,129],{"class":41,"line":78},[39,130,81],{},[39,132,133],{"class":41,"line":84},[39,134,135],{},"const { obama, biden } = func();\n",[11,137,138],{},"With this approach, it's easier to select what we require from the function.",[18,140,142],{"id":141},"object-destructuring-for-function","Object Destructuring For Function",[11,144,27],{},[29,146,148],{"className":31,"code":147,"language":33,"meta":34,"style":34},"function getDaysRemaining(subscription) {\n  const startDate = subscription.startDate;\n  const endDate = subscription.endDate;\n  return endDate - startDate;\n}\n",[36,149,150,155,160,165,170],{"__ignoreMap":34},[39,151,152],{"class":41,"line":42},[39,153,154],{},"function getDaysRemaining(subscription) {\n",[39,156,157],{"class":41,"line":48},[39,158,159],{},"  const startDate = subscription.startDate;\n",[39,161,162],{"class":41,"line":54},[39,163,164],{},"  const endDate = subscription.endDate;\n",[39,166,167],{"class":41,"line":60},[39,168,169],{},"  return endDate - startDate;\n",[39,171,172],{"class":41,"line":66},[39,173,81],{},[11,175,176],{},"A slightly better way:",[29,178,180],{"className":31,"code":179,"language":33,"meta":34,"style":34},"function getDaysRemaining(subscription) {\n  const { startDate, endDate } = subscription;\n  return startDate - endDate;\n}\n",[36,181,182,186,191,196],{"__ignoreMap":34},[39,183,184],{"class":41,"line":42},[39,185,154],{},[39,187,188],{"class":41,"line":48},[39,189,190],{},"  const { startDate, endDate } = subscription;\n",[39,192,193],{"class":41,"line":54},[39,194,195],{},"  return startDate - endDate;\n",[39,197,198],{"class":41,"line":60},[39,199,81],{},[11,201,202],{},"Even better :)",[29,204,206],{"className":31,"code":205,"language":33,"meta":34,"style":34},"function getDaysRemaining({ startDate, endDate }) {\n  return startDate - endDate;\n}\n",[36,207,208,213,217],{"__ignoreMap":34},[39,209,210],{"class":41,"line":42},[39,211,212],{},"function getDaysRemaining({ startDate, endDate }) {\n",[39,214,215],{"class":41,"line":48},[39,216,195],{},[39,218,219],{"class":41,"line":54},[39,220,81],{},[11,222,223],{},"With this, we have a smaller and cleaner looking code.",[18,225,227],{"id":226},"copying-arrays","Copying Arrays",[11,229,230],{},"Normally we use for-loops to iterate over elements and copy it into a new array like so:",[29,232,234],{"className":31,"code":233,"language":33,"meta":34,"style":34},"const oldArray = [1,2,3];\nconst newArray = []\n\nfor(let i = 0; i \u003C oldArray.length; i++){\n  newArray[i] = oldArray[i];\n}\n",[36,235,236,241,246,252,257,262],{"__ignoreMap":34},[39,237,238],{"class":41,"line":42},[39,239,240],{},"const oldArray = [1,2,3];\n",[39,242,243],{"class":41,"line":48},[39,244,245],{},"const newArray = []\n",[39,247,248],{"class":41,"line":54},[39,249,251],{"emptyLinePlaceholder":250},true,"\n",[39,253,254],{"class":41,"line":60},[39,255,256],{},"for(let i = 0; i \u003C oldArray.length; i++){\n",[39,258,259],{"class":41,"line":66},[39,260,261],{},"  newArray[i] = oldArray[i];\n",[39,263,264],{"class":41,"line":72},[39,265,81],{},[11,267,268],{},"Instead, a spread operator can be used to achieve a similar result like so:",[29,270,272],{"className":31,"code":271,"language":33,"meta":34,"style":34},"const oldArray = [1,2,3];\nconst newArray = [...oldArray];\n",[36,273,274,278],{"__ignoreMap":34},[39,275,276],{"class":41,"line":42},[39,277,240],{},[39,279,280],{"class":41,"line":48},[39,281,282],{},"const newArray = [...oldArray];\n",[18,284,286],{"id":285},"template-literals","Template literals",[11,288,289],{},"Concatenation strings become a little complicated as the strings\u002Fvariables grows.",[11,291,27],{},[29,293,295],{"className":31,"code":294,"language":33,"meta":34,"style":34},"function getSeason({ month, season }) {\n  console.log(\"It's \" + season + ' in the month of ' + month)\n}\n",[36,296,297,302,307],{"__ignoreMap":34},[39,298,299],{"class":41,"line":42},[39,300,301],{},"function getSeason({ month, season }) {\n",[39,303,304],{"class":41,"line":48},[39,305,306],{},"  console.log(\"It's \" + season + ' in the month of ' + month)\n",[39,308,309],{"class":41,"line":54},[39,310,81],{},[11,312,313],{},"Now let's see using template literals.",[29,315,317],{"className":31,"code":316,"language":33,"meta":34,"style":34},"function getSeason({ month, season }) {\n  console.log(`It's ${season} in the month of ${month}`)\n}\n",[36,318,319,323,328],{"__ignoreMap":34},[39,320,321],{"class":41,"line":42},[39,322,301],{},[39,324,325],{"class":41,"line":48},[39,326,327],{},"  console.log(`It's ${season} in the month of ${month}`)\n",[39,329,330],{"class":41,"line":54},[39,331,81],{},[11,333,334],{},"As you can see comparing the above functions, it's easier to read the return statement of the second function.",[15,336],{},[18,338,340],{"id":339},"finally","Finally",[11,342,343,344,347,348,351,352,354],{},"And finally using ",[36,345,346],{},"const"," instead of ",[36,349,350],{},"var",". Using ",[36,353,346],{}," guarantees a variable cannot be reassigned. This reduces bugs in our code and makes it easier to debug.",[11,356,357],{},"Hope you found this article useful.\nIf so hit 👍🏻 and spread the word by sharing!",[359,360,361],"style",{},"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);}",{"title":34,"searchDepth":48,"depth":48,"links":363},[364,365,366,367,368],{"id":20,"depth":48,"text":21},{"id":141,"depth":48,"text":142},{"id":226,"depth":48,"text":227},{"id":285,"depth":48,"text":286},{"id":339,"depth":48,"text":340},"2020-11-17T05:18:07.442Z","Write cleaner and more readable code with these few js tips & tricks.","md",{},"\u002Farticle\u002Fclean-js-tricks",{"title":5,"description":370},"article\u002Fclean-js-tricks","\u002Fimg\u002Fclean-js-tricks.jpg","QL92HWuIEEUW2OH5HtVJ_0ZC70vufOF4olmnwODP7aM",{"id":379,"extension":380,"meta":381,"stem":392,"__hash__":393},"author\u002Fauthor\u002FauthorDetails.json","json",{"body":382},[383,387],{"id":6,"fullName":384,"description":385,"image":386},"Ashwin K Shenoy","Hi! I am Ashwin, an Software Engineer and Consultant based out of Bengaluru, India.","https:\u002F\u002Fsimpletech.xyz\u002Fimg\u002Fauthor\u002Fashwin.jpg",{"id":388,"fullName":389,"description":390,"image":391},"paul","Paul Shan","Hello! I am Paul, a front end engineer and consultant based out of Bengaluru, India.","https:\u002F\u002Fashwinshenoy.com\u002Fimg\u002Fashwin2.jpg","author\u002FauthorDetails","k8atXxcwAcv_rjC8llPba18X62upiKWYGU5dL4-S4lw",1782187479716]