[{"data":1,"prerenderedAt":420},["ShallowReactive",2],{"article-javascript-tips-september-2022":3,"authors":404},{"id":4,"title":5,"author":6,"body":7,"date":395,"description":396,"extension":397,"meta":398,"navigation":144,"path":399,"seo":400,"stem":401,"thumbnail":402,"__hash__":403},"article\u002Farticle\u002Fjavascript-tips-september-2022.md","Javascript Tips - September 2022","ashwin",{"type":8,"value":9,"toc":390},"minimark",[10,15,19,22,39,42,64,71,90,93,113,116,120,123,125,203,210,275,277,281,288,350,353,373,383,386],[11,12,14],"h2",{"id":13},"_1-international-list-format","1. International List Format",[16,17,18],"p",{},"Let's say your goal is to format array items in a sentence to render it in HTML etc.",[16,20,21],{},"For Example:",[23,24,29],"pre",{"className":25,"code":26,"language":27,"meta":28,"style":28},"language-javascript shiki shiki-themes material-theme-darker","const thingsILikeToEat = ['Pizza', 'Burger', 'Noodles', 'Tacos'];\n","javascript","",[30,31,32],"code",{"__ignoreMap":28},[33,34,37],"span",{"class":35,"line":36},"line",1,[33,38,26],{},[16,40,41],{},"You might be tempted to do:",[23,43,45],{"className":25,"code":44,"language":27,"meta":28,"style":28},"\u002F\u002F ❌ Don't\nthingsILikeToEat.slice(0, -1).join(', ').concat(', and', thingsILikeToEat.slice(-1));\n\u002F\u002F Output: Pizza, Burger, Noodles, and Tacos\n",[30,46,47,52,58],{"__ignoreMap":28},[33,48,49],{"class":35,"line":36},[33,50,51],{},"\u002F\u002F ❌ Don't\n",[33,53,55],{"class":35,"line":54},2,[33,56,57],{},"thingsILikeToEat.slice(0, -1).join(', ').concat(', and', thingsILikeToEat.slice(-1));\n",[33,59,61],{"class":35,"line":60},3,[33,62,63],{},"\u002F\u002F Output: Pizza, Burger, Noodles, and Tacos\n",[16,65,66,67,70],{},"Instead of writing a list formatting function or doing split\u002Fjoin\u002Fconcat, consider using ",[30,68,69],{},"Intl.ListFormat",".",[23,72,74],{"className":25,"code":73,"language":27,"meta":28,"style":28},"\u002F\u002F ✅ Do\nnew Intl.ListFormat('en').format(thingsILikeToEat);\n\u002F\u002F Output: Pizza, Burger, Noodles, and Tacos\n",[30,75,76,81,86],{"__ignoreMap":28},[33,77,78],{"class":35,"line":36},[33,79,80],{},"\u002F\u002F ✅ Do\n",[33,82,83],{"class":35,"line":54},[33,84,85],{},"new Intl.ListFormat('en').format(thingsILikeToEat);\n",[33,87,88],{"class":35,"line":60},[33,89,63],{},[16,91,92],{},"You could also do 'or' instead of 'and', change language 'en' to your prefered language etc.",[23,94,96],{"className":25,"code":95,"language":27,"meta":28,"style":28},"const formatList = new Intl.ListFormat('en', { style: 'short', type: 'disjunction' });\nformatList.format(thingsILikeToEat);\n\u002F\u002F Output: Pizza, Burger, Noodles, or Tacos\n",[30,97,98,103,108],{"__ignoreMap":28},[33,99,100],{"class":35,"line":36},[33,101,102],{},"const formatList = new Intl.ListFormat('en', { style: 'short', type: 'disjunction' });\n",[33,104,105],{"class":35,"line":54},[33,106,107],{},"formatList.format(thingsILikeToEat);\n",[33,109,110],{"class":35,"line":60},[33,111,112],{},"\u002F\u002F Output: Pizza, Burger, Noodles, or Tacos\n",[114,115],"br",{},[11,117,119],{"id":118},"_2-destructuring-assignmet","2. Destructuring Assignmet",[16,121,122],{},"The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.",[16,124,21],{},[23,126,128],{"className":25,"code":127,"language":27,"meta":28,"style":28},"const [favourite, best, ...rest] = ['Pizza', 'Burger', 'Noodles', 'Tacos'];\n\u002F\u002F Output:\n\n\u002F\u002F console.log(favourite);\n\u002F\u002F Pizza\n\u002F\u002F -------\n\n\u002F\u002F console.log(best);\n\u002F\u002F Burger\n\u002F\u002F -------\n\n\u002F\u002F console.log(rest);\n\u002F\u002F ['Noodles', 'Tacos']\n",[30,129,130,135,140,146,152,158,164,169,175,181,186,191,197],{"__ignoreMap":28},[33,131,132],{"class":35,"line":36},[33,133,134],{},"const [favourite, best, ...rest] = ['Pizza', 'Burger', 'Noodles', 'Tacos'];\n",[33,136,137],{"class":35,"line":54},[33,138,139],{},"\u002F\u002F Output:\n",[33,141,142],{"class":35,"line":60},[33,143,145],{"emptyLinePlaceholder":144},true,"\n",[33,147,149],{"class":35,"line":148},4,[33,150,151],{},"\u002F\u002F console.log(favourite);\n",[33,153,155],{"class":35,"line":154},5,[33,156,157],{},"\u002F\u002F Pizza\n",[33,159,161],{"class":35,"line":160},6,[33,162,163],{},"\u002F\u002F -------\n",[33,165,167],{"class":35,"line":166},7,[33,168,145],{"emptyLinePlaceholder":144},[33,170,172],{"class":35,"line":171},8,[33,173,174],{},"\u002F\u002F console.log(best);\n",[33,176,178],{"class":35,"line":177},9,[33,179,180],{},"\u002F\u002F Burger\n",[33,182,184],{"class":35,"line":183},10,[33,185,163],{},[33,187,189],{"class":35,"line":188},11,[33,190,145],{"emptyLinePlaceholder":144},[33,192,194],{"class":35,"line":193},12,[33,195,196],{},"\u002F\u002F console.log(rest);\n",[33,198,200],{"class":35,"line":199},13,[33,201,202],{},"\u002F\u002F ['Noodles', 'Tacos']\n",[16,204,205,206,209],{},"This method can be used for more complex scenarios also or when you're using ",[30,207,208],{},"Promise.all"," etc.",[23,211,213],{"className":25,"code":212,"language":27,"meta":28,"style":28},"const [pizza, burger] = [\n  { name: 'Pizza', size: 'Large' },\n  { name: 'Burger', size: 'small' },\n];\n\u002F\u002F Output:\n\n\u002F\u002F console.log(pizza);\n\u002F\u002F { name: 'Pizza', size: 'Large' }\n\u002F\u002F -------\n\n\u002F\u002F console.log(burger);\n\u002F\u002F { name: 'Burger', size: 'small' }\n\u002F\u002F -------\n",[30,214,215,220,225,230,235,239,243,248,253,257,261,266,271],{"__ignoreMap":28},[33,216,217],{"class":35,"line":36},[33,218,219],{},"const [pizza, burger] = [\n",[33,221,222],{"class":35,"line":54},[33,223,224],{},"  { name: 'Pizza', size: 'Large' },\n",[33,226,227],{"class":35,"line":60},[33,228,229],{},"  { name: 'Burger', size: 'small' },\n",[33,231,232],{"class":35,"line":148},[33,233,234],{},"];\n",[33,236,237],{"class":35,"line":154},[33,238,139],{},[33,240,241],{"class":35,"line":160},[33,242,145],{"emptyLinePlaceholder":144},[33,244,245],{"class":35,"line":166},[33,246,247],{},"\u002F\u002F console.log(pizza);\n",[33,249,250],{"class":35,"line":171},[33,251,252],{},"\u002F\u002F { name: 'Pizza', size: 'Large' }\n",[33,254,255],{"class":35,"line":177},[33,256,163],{},[33,258,259],{"class":35,"line":183},[33,260,145],{"emptyLinePlaceholder":144},[33,262,263],{"class":35,"line":188},[33,264,265],{},"\u002F\u002F console.log(burger);\n",[33,267,268],{"class":35,"line":193},[33,269,270],{},"\u002F\u002F { name: 'Burger', size: 'small' }\n",[33,272,273],{"class":35,"line":199},[33,274,163],{},[114,276],{},[11,278,280],{"id":279},"_3-international-number-format","3. International Number Format",[16,282,283,284,287],{},"The ",[30,285,286],{},"Intl.NumberFormat"," object enables language-sensitive number formatting.",[23,289,291],{"className":25,"code":290,"language":27,"meta":28,"style":28},"const number = 123456.789;\n\nconsole.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number));\n\u002F\u002F Output: \"123.456,79 €\"\n\n\u002F\u002F the Japanese yen doesn't use a minor unit\nconsole.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(number));\n\u002F\u002F Output: \"￥123,457\"\n\n\u002F\u002F limit to three significant digits\nconsole.log(new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(number));\n\u002F\u002F Output: \"1,23,000\"\n",[30,292,293,298,302,307,312,316,321,326,331,335,340,345],{"__ignoreMap":28},[33,294,295],{"class":35,"line":36},[33,296,297],{},"const number = 123456.789;\n",[33,299,300],{"class":35,"line":54},[33,301,145],{"emptyLinePlaceholder":144},[33,303,304],{"class":35,"line":60},[33,305,306],{},"console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number));\n",[33,308,309],{"class":35,"line":148},[33,310,311],{},"\u002F\u002F Output: \"123.456,79 €\"\n",[33,313,314],{"class":35,"line":154},[33,315,145],{"emptyLinePlaceholder":144},[33,317,318],{"class":35,"line":160},[33,319,320],{},"\u002F\u002F the Japanese yen doesn't use a minor unit\n",[33,322,323],{"class":35,"line":166},[33,324,325],{},"console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(number));\n",[33,327,328],{"class":35,"line":171},[33,329,330],{},"\u002F\u002F Output: \"￥123,457\"\n",[33,332,333],{"class":35,"line":177},[33,334,145],{"emptyLinePlaceholder":144},[33,336,337],{"class":35,"line":183},[33,338,339],{},"\u002F\u002F limit to three significant digits\n",[33,341,342],{"class":35,"line":188},[33,343,344],{},"console.log(new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(number));\n",[33,346,347],{"class":35,"line":193},[33,348,349],{},"\u002F\u002F Output: \"1,23,000\"\n",[16,351,352],{},"You could also use it for basic number formating",[23,354,356],{"className":25,"code":355,"language":27,"meta":28,"style":28},"const number = 3500;\nconsole.log(new Intl.NumberFormat().format(number));\n\u002F\u002F → '3,500' if in US English locale\n",[30,357,358,363,368],{"__ignoreMap":28},[33,359,360],{"class":35,"line":36},[33,361,362],{},"const number = 3500;\n",[33,364,365],{"class":35,"line":54},[33,366,367],{},"console.log(new Intl.NumberFormat().format(number));\n",[33,369,370],{"class":35,"line":60},[33,371,372],{},"\u002F\u002F → '3,500' if in US English locale\n",[16,374,375,376],{},"The full options list can be found ",[377,378,382],"a",{"href":379,"rel":380},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FGlobal_Objects\u002FIntl\u002FNumberFormat\u002FNumberFormat#options",[381],"nofollow","here",[16,384,385],{},"Hope you found this article on Javascript Tips Series helpful. ❤️",[387,388,389],"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":28,"searchDepth":54,"depth":54,"links":391},[392,393,394],{"id":13,"depth":54,"text":14},{"id":118,"depth":54,"text":119},{"id":279,"depth":54,"text":280},"2022-09-30T06:15:00.143Z","Javascript tips series","md",{},"\u002Farticle\u002Fjavascript-tips-september-2022",{"title":5,"description":396},"article\u002Fjavascript-tips-september-2022","\u002Fimg\u002Fjs-tip1.jpg","h52b1e27LNHAS1Mvwi3xUcP3THW3PdjNsoV47ltbQns",{"id":405,"extension":406,"meta":407,"stem":418,"__hash__":419},"author\u002Fauthor\u002FauthorDetails.json","json",{"body":408},[409,413],{"id":6,"fullName":410,"description":411,"image":412},"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":414,"fullName":415,"description":416,"image":417},"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]