[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"content:legacy:page:\u002Fposts\u002Fjavascript\u002F9-lines-of-tips":3,"content:legacy:navigation":3757,"content:legacy:surround:\u002Fposts\u002Fjavascript\u002F9-lines-of-tips":4041,"content:related-articles:9 lines of JavaScript replace 50 lines of code":4044},{"id":4,"title":5,"aside":6,"body":7,"categories":6,"category":3742,"description":3743,"duration":179,"extension":3744,"footer":6,"header":6,"icon":6,"image":3745,"main":6,"meta":3748,"navigation":6,"path":3749,"publishedAt":3750,"seo":3751,"sitemap":3752,"stem":3753,"tags":3754,"toc":6,"top":3755,"__hash__":3756},"content\u002Fposts\u002Fjavascript\u002F9-lines-of-tips.md","9 lines of JavaScript replace 50 lines of code",null,{"type":8,"value":9,"toc":3737},"minimark",[10,15,19,22,26,31,34,354,357,361,364,659,667,671,674,1068,1071,1075,1078,1407,1410,1414,1417,1722,1725,1729,1732,2083,2086,2090,2093,2536,2539,2543,2546,2836,2839,2843,2846,3298,3302,3305,3724,3727,3731,3734],[11,12,14],"h2",{"id":13},"problem","🧱 Problem",[16,17,18],"p",{},"These are really useful, easy-to-read tips that take advantage of modern JavaScript features to solve common problems. So whether you’re cleaning up your code or just starting a new project, these tricks can help you write more elegant and maintainable code.",[16,20,21],{},"Here are 9 such handy tricks that you can start using today. Let’s see what they are!",[11,23,25],{"id":24},"solution","🔑 Solution",[27,28,30],"h4",{"id":29},"_1-flatten-nested-arrays","1. Flatten nested arrays",[16,32,33],{},"Have you ever tried flattening a deeply nested array? Previously, it meant lots of complicated loops, temporary arrays, and way too much code. But now it’s done very neatly in one powerful line of code:",[35,36,37,230],"code-group",{},[38,39,45],"pre",{"className":40,"code":41,"filename":42,"language":43,"meta":44,"style":44},"language-js shiki shiki-themes github-light github-dark","function flattenTheHardWay(arr) {\n  let result = [];\n  for (let i = 0; i \u003C arr.length; i++) {\n    if (Array.isArray(arr[i])) {\n      result = result.concat(flattenTheHardWay(arr[i]));\n    } else {\n      result.push(arr[i]);\n    }\n  }\n  return result;\n}\n\n\u002F\u002F Result: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]\n","Traditional","js","",[46,47,48,72,87,128,143,165,177,189,195,201,210,216,223],"code",{"__ignoreMap":44},[49,50,53,57,61,65,69],"span",{"class":51,"line":52},"line",1,[49,54,56],{"class":55},"szBVR","function",[49,58,60],{"class":59},"sScJk"," flattenTheHardWay",[49,62,64],{"class":63},"sVt8B","(",[49,66,68],{"class":67},"s4XuR","arr",[49,70,71],{"class":63},") {\n",[49,73,75,78,81,84],{"class":51,"line":74},2,[49,76,77],{"class":55},"  let",[49,79,80],{"class":63}," result ",[49,82,83],{"class":55},"=",[49,85,86],{"class":63}," [];\n",[49,88,90,93,96,99,102,104,108,111,114,117,120,123,126],{"class":51,"line":89},3,[49,91,92],{"class":55},"  for",[49,94,95],{"class":63}," (",[49,97,98],{"class":55},"let",[49,100,101],{"class":63}," i ",[49,103,83],{"class":55},[49,105,107],{"class":106},"sj4cs"," 0",[49,109,110],{"class":63},"; i ",[49,112,113],{"class":55},"\u003C",[49,115,116],{"class":63}," arr.",[49,118,119],{"class":106},"length",[49,121,122],{"class":63},"; i",[49,124,125],{"class":55},"++",[49,127,71],{"class":63},[49,129,131,134,137,140],{"class":51,"line":130},4,[49,132,133],{"class":55},"    if",[49,135,136],{"class":63}," (Array.",[49,138,139],{"class":59},"isArray",[49,141,142],{"class":63},"(arr[i])) {\n",[49,144,146,149,151,154,157,159,162],{"class":51,"line":145},5,[49,147,148],{"class":63},"      result ",[49,150,83],{"class":55},[49,152,153],{"class":63}," result.",[49,155,156],{"class":59},"concat",[49,158,64],{"class":63},[49,160,161],{"class":59},"flattenTheHardWay",[49,163,164],{"class":63},"(arr[i]));\n",[49,166,168,171,174],{"class":51,"line":167},6,[49,169,170],{"class":63},"    } ",[49,172,173],{"class":55},"else",[49,175,176],{"class":63}," {\n",[49,178,180,183,186],{"class":51,"line":179},7,[49,181,182],{"class":63},"      result.",[49,184,185],{"class":59},"push",[49,187,188],{"class":63},"(arr[i]);\n",[49,190,192],{"class":51,"line":191},8,[49,193,194],{"class":63},"    }\n",[49,196,198],{"class":51,"line":197},9,[49,199,200],{"class":63},"  }\n",[49,202,204,207],{"class":51,"line":203},10,[49,205,206],{"class":55},"  return",[49,208,209],{"class":63}," result;\n",[49,211,213],{"class":51,"line":212},11,[49,214,215],{"class":63},"}\n",[49,217,219],{"class":51,"line":218},12,[49,220,222],{"emptyLinePlaceholder":221},true,"\n",[49,224,226],{"class":51,"line":225},13,[49,227,229],{"class":228},"sJ8bj","\u002F\u002F Result: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]\n",[38,231,234],{"className":40,"code":232,"filename":233,"language":43,"meta":44,"style":44},"const flattenArray = arr => arr.flat(Infinity);\nconst nestedArray = [1, [2, 3, [4, 5, [6, 7]]], 8, [9, 10]];\nconst cleanArray = flattenArray(nestedArray);\n\n\u002F\u002F Result: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]\n","Modern",[46,235,236,266,332,346,350],{"__ignoreMap":44},[49,237,238,241,244,247,250,253,255,258,260,263],{"class":51,"line":52},[49,239,240],{"class":55},"const",[49,242,243],{"class":59}," flattenArray",[49,245,246],{"class":55}," =",[49,248,249],{"class":67}," arr",[49,251,252],{"class":55}," =>",[49,254,116],{"class":63},[49,256,257],{"class":59},"flat",[49,259,64],{"class":63},[49,261,262],{"class":106},"Infinity",[49,264,265],{"class":63},");\n",[49,267,268,270,273,275,278,281,284,287,290,293,295,298,300,303,305,308,310,313,316,319,321,324,326,329],{"class":51,"line":74},[49,269,240],{"class":55},[49,271,272],{"class":106}," nestedArray",[49,274,246],{"class":55},[49,276,277],{"class":63}," [",[49,279,280],{"class":106},"1",[49,282,283],{"class":63},", [",[49,285,286],{"class":106},"2",[49,288,289],{"class":63},", ",[49,291,292],{"class":106},"3",[49,294,283],{"class":63},[49,296,297],{"class":106},"4",[49,299,289],{"class":63},[49,301,302],{"class":106},"5",[49,304,283],{"class":63},[49,306,307],{"class":106},"6",[49,309,289],{"class":63},[49,311,312],{"class":106},"7",[49,314,315],{"class":63},"]]], ",[49,317,318],{"class":106},"8",[49,320,283],{"class":63},[49,322,323],{"class":106},"9",[49,325,289],{"class":63},[49,327,328],{"class":106},"10",[49,330,331],{"class":63},"]];\n",[49,333,334,336,339,341,343],{"class":51,"line":89},[49,335,240],{"class":55},[49,337,338],{"class":106}," cleanArray",[49,340,246],{"class":55},[49,342,243],{"class":59},[49,344,345],{"class":63},"(nestedArray);\n",[49,347,348],{"class":51,"line":130},[49,349,222],{"emptyLinePlaceholder":221},[49,351,352],{"class":51,"line":145},[49,353,229],{"class":228},[16,355,356],{},"All the hard work is handled by flat(), and adding Infinity tells it to go down any level. Simple, clean, and it actually works.",[27,358,360],{"id":359},"_2-deep-copy-object-without-librarys","2. Deep copy object without librarys",[16,362,363],{},"Need a true deep copy of an object without using lodash? Here's a library-less solution that handles nested objects, arrays, and even dates:",[35,365,366,539],{},[38,367,369],{"className":40,"code":368,"filename":42,"language":43,"meta":44,"style":44},"function manualDeepClone(obj) {\n  if (obj === null || typeof obj !== 'object') return obj;\n  if (obj instanceof Date) return new Date(obj);\n  const clone = Array.isArray(obj) ? [] : {};\n  for (let key in obj) {\n    if (Object[.]prototype[.]hasOwnProperty[.]call(obj, key)) {\n      clone[key] = manualDeepClone(obj[key]);\n    }\n  }\n  return clone;\n}\n",[46,370,371,385,424,448,478,495,508,520,524,528,535],{"__ignoreMap":44},[49,372,373,375,378,380,383],{"class":51,"line":52},[49,374,56],{"class":55},[49,376,377],{"class":59}," manualDeepClone",[49,379,64],{"class":63},[49,381,382],{"class":67},"obj",[49,384,71],{"class":63},[49,386,387,390,393,396,399,402,405,408,411,415,418,421],{"class":51,"line":74},[49,388,389],{"class":55},"  if",[49,391,392],{"class":63}," (obj ",[49,394,395],{"class":55},"===",[49,397,398],{"class":106}," null",[49,400,401],{"class":55}," ||",[49,403,404],{"class":55}," typeof",[49,406,407],{"class":63}," obj ",[49,409,410],{"class":55},"!==",[49,412,414],{"class":413},"sZZnC"," 'object'",[49,416,417],{"class":63},") ",[49,419,420],{"class":55},"return",[49,422,423],{"class":63}," obj;\n",[49,425,426,428,430,433,436,438,440,443,445],{"class":51,"line":89},[49,427,389],{"class":55},[49,429,392],{"class":63},[49,431,432],{"class":55},"instanceof",[49,434,435],{"class":59}," Date",[49,437,417],{"class":63},[49,439,420],{"class":55},[49,441,442],{"class":55}," new",[49,444,435],{"class":59},[49,446,447],{"class":63},"(obj);\n",[49,449,450,453,456,458,461,463,466,469,472,475],{"class":51,"line":130},[49,451,452],{"class":55},"  const",[49,454,455],{"class":106}," clone",[49,457,246],{"class":55},[49,459,460],{"class":63}," Array.",[49,462,139],{"class":59},[49,464,465],{"class":63},"(obj) ",[49,467,468],{"class":55},"?",[49,470,471],{"class":63}," [] ",[49,473,474],{"class":55},":",[49,476,477],{"class":63}," {};\n",[49,479,480,482,484,486,489,492],{"class":51,"line":145},[49,481,92],{"class":55},[49,483,95],{"class":63},[49,485,98],{"class":55},[49,487,488],{"class":63}," key ",[49,490,491],{"class":55},"in",[49,493,494],{"class":63}," obj) {\n",[49,496,497,499,502,505],{"class":51,"line":167},[49,498,133],{"class":55},[49,500,501],{"class":63}," (Object[.]prototype[.]hasOwnProperty[.]",[49,503,504],{"class":59},"call",[49,506,507],{"class":63},"(obj, key)) {\n",[49,509,510,513,515,517],{"class":51,"line":179},[49,511,512],{"class":63},"      clone[key] ",[49,514,83],{"class":55},[49,516,377],{"class":59},[49,518,519],{"class":63},"(obj[key]);\n",[49,521,522],{"class":51,"line":191},[49,523,194],{"class":63},[49,525,526],{"class":51,"line":197},[49,527,200],{"class":63},[49,529,530,532],{"class":51,"line":203},[49,531,206],{"class":55},[49,533,534],{"class":63}," clone;\n",[49,536,537],{"class":51,"line":212},[49,538,215],{"class":63},[38,540,542],{"className":40,"code":541,"filename":233,"language":43,"meta":44,"style":44},"const deepClone = obj => JSON.parse(JSON.stringify(obj));\nconst complexObj = {\n  user: { name: 'Alex', date: new Date() },\n  scores: [1, 2, [3, 4]],\n  active: true\n};\nconst cloned = deepClone(complexObj);\n",[46,543,544,580,591,610,632,640,645],{"__ignoreMap":44},[49,545,546,548,551,553,556,558,561,564,567,569,572,574,577],{"class":51,"line":52},[49,547,240],{"class":55},[49,549,550],{"class":59}," deepClone",[49,552,246],{"class":55},[49,554,555],{"class":67}," obj",[49,557,252],{"class":55},[49,559,560],{"class":106}," JSON",[49,562,563],{"class":63},".",[49,565,566],{"class":59},"parse",[49,568,64],{"class":63},[49,570,571],{"class":106},"JSON",[49,573,563],{"class":63},[49,575,576],{"class":59},"stringify",[49,578,579],{"class":63},"(obj));\n",[49,581,582,584,587,589],{"class":51,"line":74},[49,583,240],{"class":55},[49,585,586],{"class":106}," complexObj",[49,588,246],{"class":55},[49,590,176],{"class":63},[49,592,593,596,599,602,605,607],{"class":51,"line":89},[49,594,595],{"class":63},"  user: { name: ",[49,597,598],{"class":413},"'Alex'",[49,600,601],{"class":63},", date: ",[49,603,604],{"class":55},"new",[49,606,435],{"class":59},[49,608,609],{"class":63},"() },\n",[49,611,612,615,617,619,621,623,625,627,629],{"class":51,"line":130},[49,613,614],{"class":63},"  scores: [",[49,616,280],{"class":106},[49,618,289],{"class":63},[49,620,286],{"class":106},[49,622,283],{"class":63},[49,624,292],{"class":106},[49,626,289],{"class":63},[49,628,297],{"class":106},[49,630,631],{"class":63},"]],\n",[49,633,634,637],{"class":51,"line":145},[49,635,636],{"class":63},"  active: ",[49,638,639],{"class":106},"true\n",[49,641,642],{"class":51,"line":167},[49,643,644],{"class":63},"};\n",[49,646,647,649,652,654,656],{"class":51,"line":179},[49,648,240],{"class":55},[49,650,651],{"class":106}," cloned",[49,653,246],{"class":55},[49,655,550],{"class":59},[49,657,658],{"class":63},"(complexObj);\n",[660,661,664],"alert",{"icon":662,"type":663},"lucide:triangle-alert","warning",[16,665,666],{},"This command line has a few limitations - it won't handle functions, symbols, or circular references. But for 90% of use cases, it's pretty accurate.",[27,668,670],{"id":669},"_3-convert-csv-to-array-of-objects","3. Convert CSV to array of objects",[16,672,673],{},"Here's a neat little command line to take CSV data and output an array of manipulable objects, ideal for use in API responses or reading data:",[35,675,676,892],{},[38,677,679],{"className":40,"code":678,"filename":42,"language":43,"meta":44,"style":44},"function convertCSVTheHardWay(csv) {\n  const lines = csv.split('\\n');\n  const headers = lines[0].split(',');\n  const result = [];\n  for (let i = 1; i \u003C lines.length; i++) {\n    const obj = {};\n    const currentLine = lines[i].split(',');\n    for (let j = 0; j \u003C headers.length; j++) {\n      obj[headers[j]] = currentLine[j];\n    }\n    result.push(obj);\n  }\n  return result;\n}\n",[46,680,681,695,722,749,760,790,801,821,854,864,868,877,881,887],{"__ignoreMap":44},[49,682,683,685,688,690,693],{"class":51,"line":52},[49,684,56],{"class":55},[49,686,687],{"class":59}," convertCSVTheHardWay",[49,689,64],{"class":63},[49,691,692],{"class":67},"csv",[49,694,71],{"class":63},[49,696,697,699,702,704,707,710,712,715,718,720],{"class":51,"line":74},[49,698,452],{"class":55},[49,700,701],{"class":106}," lines",[49,703,246],{"class":55},[49,705,706],{"class":63}," csv.",[49,708,709],{"class":59},"split",[49,711,64],{"class":63},[49,713,714],{"class":413},"'",[49,716,717],{"class":106},"\\n",[49,719,714],{"class":413},[49,721,265],{"class":63},[49,723,724,726,729,731,734,737,740,742,744,747],{"class":51,"line":89},[49,725,452],{"class":55},[49,727,728],{"class":106}," headers",[49,730,246],{"class":55},[49,732,733],{"class":63}," lines[",[49,735,736],{"class":106},"0",[49,738,739],{"class":63},"].",[49,741,709],{"class":59},[49,743,64],{"class":63},[49,745,746],{"class":413},"','",[49,748,265],{"class":63},[49,750,751,753,756,758],{"class":51,"line":130},[49,752,452],{"class":55},[49,754,755],{"class":106}," result",[49,757,246],{"class":55},[49,759,86],{"class":63},[49,761,762,764,766,768,770,772,775,777,779,782,784,786,788],{"class":51,"line":145},[49,763,92],{"class":55},[49,765,95],{"class":63},[49,767,98],{"class":55},[49,769,101],{"class":63},[49,771,83],{"class":55},[49,773,774],{"class":106}," 1",[49,776,110],{"class":63},[49,778,113],{"class":55},[49,780,781],{"class":63}," lines.",[49,783,119],{"class":106},[49,785,122],{"class":63},[49,787,125],{"class":55},[49,789,71],{"class":63},[49,791,792,795,797,799],{"class":51,"line":167},[49,793,794],{"class":55},"    const",[49,796,555],{"class":106},[49,798,246],{"class":55},[49,800,477],{"class":63},[49,802,803,805,808,810,813,815,817,819],{"class":51,"line":179},[49,804,794],{"class":55},[49,806,807],{"class":106}," currentLine",[49,809,246],{"class":55},[49,811,812],{"class":63}," lines[i].",[49,814,709],{"class":59},[49,816,64],{"class":63},[49,818,746],{"class":413},[49,820,265],{"class":63},[49,822,823,826,828,830,833,835,837,840,842,845,847,850,852],{"class":51,"line":191},[49,824,825],{"class":55},"    for",[49,827,95],{"class":63},[49,829,98],{"class":55},[49,831,832],{"class":63}," j ",[49,834,83],{"class":55},[49,836,107],{"class":106},[49,838,839],{"class":63},"; j ",[49,841,113],{"class":55},[49,843,844],{"class":63}," headers.",[49,846,119],{"class":106},[49,848,849],{"class":63},"; j",[49,851,125],{"class":55},[49,853,71],{"class":63},[49,855,856,859,861],{"class":51,"line":197},[49,857,858],{"class":63},"      obj[headers[j]] ",[49,860,83],{"class":55},[49,862,863],{"class":63}," currentLine[j];\n",[49,865,866],{"class":51,"line":203},[49,867,194],{"class":63},[49,869,870,873,875],{"class":51,"line":212},[49,871,872],{"class":63},"    result.",[49,874,185],{"class":59},[49,876,447],{"class":63},[49,878,879],{"class":51,"line":218},[49,880,200],{"class":63},[49,882,883,885],{"class":51,"line":225},[49,884,206],{"class":55},[49,886,209],{"class":63},[49,888,890],{"class":51,"line":889},14,[49,891,215],{"class":63},[38,893,895],{"className":40,"code":894,"filename":233,"language":43,"meta":44,"style":44},"const csvToObjects = csv => csv.split('\\n').map(row => Object.fromEntries(row.split(',').map((value, i, arr) => [arr[0].split(',')[i], value])));\n\nconst csvData = `name,age,city\n                Peboy,30,New York\n                Peace,25,San Francisco\n                Lara,35,Chicago`;\nconst parsed = csvToObjects(csvData);\n\n\u002F\u002F Result: [\n  \u002F\u002F { name: 'Peboy', age: '30', city: 'New York' },\n  \u002F\u002F { name: 'Peace', age: '25', city: 'San Francisco' },\n  \u002F\u002F { name: 'Lara', age: '35', city: 'Chicago' }\n\u002F\u002F ]\n",[46,896,897,991,995,1007,1012,1017,1025,1039,1043,1048,1053,1058,1063],{"__ignoreMap":44},[49,898,899,901,904,906,909,911,913,915,917,919,921,923,926,929,931,934,936,939,942,945,947,949,951,953,955,958,961,963,966,968,970,972,975,978,980,982,984,986,988],{"class":51,"line":52},[49,900,240],{"class":55},[49,902,903],{"class":59}," csvToObjects",[49,905,246],{"class":55},[49,907,908],{"class":67}," csv",[49,910,252],{"class":55},[49,912,706],{"class":63},[49,914,709],{"class":59},[49,916,64],{"class":63},[49,918,714],{"class":413},[49,920,717],{"class":106},[49,922,714],{"class":413},[49,924,925],{"class":63},").",[49,927,928],{"class":59},"map",[49,930,64],{"class":63},[49,932,933],{"class":67},"row",[49,935,252],{"class":55},[49,937,938],{"class":63}," Object.",[49,940,941],{"class":59},"fromEntries",[49,943,944],{"class":63},"(row.",[49,946,709],{"class":59},[49,948,64],{"class":63},[49,950,746],{"class":413},[49,952,925],{"class":63},[49,954,928],{"class":59},[49,956,957],{"class":63},"((",[49,959,960],{"class":67},"value",[49,962,289],{"class":63},[49,964,965],{"class":67},"i",[49,967,289],{"class":63},[49,969,68],{"class":67},[49,971,417],{"class":63},[49,973,974],{"class":55},"=>",[49,976,977],{"class":63}," [arr[",[49,979,736],{"class":106},[49,981,739],{"class":63},[49,983,709],{"class":59},[49,985,64],{"class":63},[49,987,746],{"class":413},[49,989,990],{"class":63},")[i], value])));\n",[49,992,993],{"class":51,"line":74},[49,994,222],{"emptyLinePlaceholder":221},[49,996,997,999,1002,1004],{"class":51,"line":89},[49,998,240],{"class":55},[49,1000,1001],{"class":106}," csvData",[49,1003,246],{"class":55},[49,1005,1006],{"class":413}," `name,age,city\n",[49,1008,1009],{"class":51,"line":130},[49,1010,1011],{"class":413},"                Peboy,30,New York\n",[49,1013,1014],{"class":51,"line":145},[49,1015,1016],{"class":413},"                Peace,25,San Francisco\n",[49,1018,1019,1022],{"class":51,"line":167},[49,1020,1021],{"class":413},"                Lara,35,Chicago`",[49,1023,1024],{"class":63},";\n",[49,1026,1027,1029,1032,1034,1036],{"class":51,"line":179},[49,1028,240],{"class":55},[49,1030,1031],{"class":106}," parsed",[49,1033,246],{"class":55},[49,1035,903],{"class":59},[49,1037,1038],{"class":63},"(csvData);\n",[49,1040,1041],{"class":51,"line":191},[49,1042,222],{"emptyLinePlaceholder":221},[49,1044,1045],{"class":51,"line":197},[49,1046,1047],{"class":228},"\u002F\u002F Result: [\n",[49,1049,1050],{"class":51,"line":203},[49,1051,1052],{"class":228},"  \u002F\u002F { name: 'Peboy', age: '30', city: 'New York' },\n",[49,1054,1055],{"class":51,"line":212},[49,1056,1057],{"class":228},"  \u002F\u002F { name: 'Peace', age: '25', city: 'San Francisco' },\n",[49,1059,1060],{"class":51,"line":218},[49,1061,1062],{"class":228},"  \u002F\u002F { name: 'Lara', age: '35', city: 'Chicago' }\n",[49,1064,1065],{"class":51,"line":225},[49,1066,1067],{"class":228},"\u002F\u002F ]\n",[16,1069,1070],{},"It's an efficient way to do data transformations with a command line, but add some error handling before putting it into production.",[27,1072,1074],{"id":1073},"_4-remove-duplicate-elements-and-sort-array","4. Remove duplicate elements and sort array",[16,1076,1077],{},"Here is a shorthand command to remove duplicate elements and sort your array at the same time, perfect for cleaning up a dataset:",[35,1079,1080,1213],{},[38,1081,1083],{"className":40,"code":1082,"filename":42,"language":43,"meta":44,"style":44},"function cleanArrayManually(arr) {\n  const unique = [];\n  for (let i = 0; i \u003C arr.length; i++) {\n    if (unique.indexOf(arr[i]) === -1) {\n      unique.push(arr[i]);\n    }\n  }\n  return unique.sort((a, b) => a - b);\n}\n",[46,1084,1085,1098,1109,1137,1159,1168,1172,1176,1209],{"__ignoreMap":44},[49,1086,1087,1089,1092,1094,1096],{"class":51,"line":52},[49,1088,56],{"class":55},[49,1090,1091],{"class":59}," cleanArrayManually",[49,1093,64],{"class":63},[49,1095,68],{"class":67},[49,1097,71],{"class":63},[49,1099,1100,1102,1105,1107],{"class":51,"line":74},[49,1101,452],{"class":55},[49,1103,1104],{"class":106}," unique",[49,1106,246],{"class":55},[49,1108,86],{"class":63},[49,1110,1111,1113,1115,1117,1119,1121,1123,1125,1127,1129,1131,1133,1135],{"class":51,"line":89},[49,1112,92],{"class":55},[49,1114,95],{"class":63},[49,1116,98],{"class":55},[49,1118,101],{"class":63},[49,1120,83],{"class":55},[49,1122,107],{"class":106},[49,1124,110],{"class":63},[49,1126,113],{"class":55},[49,1128,116],{"class":63},[49,1130,119],{"class":106},[49,1132,122],{"class":63},[49,1134,125],{"class":55},[49,1136,71],{"class":63},[49,1138,1139,1141,1144,1147,1150,1152,1155,1157],{"class":51,"line":130},[49,1140,133],{"class":55},[49,1142,1143],{"class":63}," (unique.",[49,1145,1146],{"class":59},"indexOf",[49,1148,1149],{"class":63},"(arr[i]) ",[49,1151,395],{"class":55},[49,1153,1154],{"class":55}," -",[49,1156,280],{"class":106},[49,1158,71],{"class":63},[49,1160,1161,1164,1166],{"class":51,"line":145},[49,1162,1163],{"class":63},"      unique.",[49,1165,185],{"class":59},[49,1167,188],{"class":63},[49,1169,1170],{"class":51,"line":167},[49,1171,194],{"class":63},[49,1173,1174],{"class":51,"line":179},[49,1175,200],{"class":63},[49,1177,1178,1180,1183,1186,1188,1191,1193,1196,1198,1200,1203,1206],{"class":51,"line":191},[49,1179,206],{"class":55},[49,1181,1182],{"class":63}," unique.",[49,1184,1185],{"class":59},"sort",[49,1187,957],{"class":63},[49,1189,1190],{"class":67},"a",[49,1192,289],{"class":63},[49,1194,1195],{"class":67},"b",[49,1197,417],{"class":63},[49,1199,974],{"class":55},[49,1201,1202],{"class":63}," a ",[49,1204,1205],{"class":55},"-",[49,1207,1208],{"class":63}," b);\n",[49,1210,1211],{"class":51,"line":197},[49,1212,215],{"class":63},[38,1214,1216],{"className":40,"code":1215,"filename":233,"language":43,"meta":44,"style":44},"const uniqueSorted = arr => [...new Set(arr)].sort((a, b) => a - b);\n\nconst messyArray = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];\nconst cleaned = uniqueSorted(messyArray);\n\u002F\u002F Result: [1, 2, 3, 4, 5, 6, 9]\n\nconst messyStrings = ['banana', 'apple', 'apple', 'cherry', 'banana'];\nconst cleanedStrings = [...new Set(messyStrings)].sort();\n\u002F\u002F Result: ['apple', 'banana', 'cherry']\n",[46,1217,1218,1262,1266,1322,1336,1341,1345,1379,1402],{"__ignoreMap":44},[49,1219,1220,1222,1225,1227,1229,1231,1233,1236,1239,1242,1244,1246,1248,1250,1252,1254,1256,1258,1260],{"class":51,"line":52},[49,1221,240],{"class":55},[49,1223,1224],{"class":59}," uniqueSorted",[49,1226,246],{"class":55},[49,1228,249],{"class":67},[49,1230,252],{"class":55},[49,1232,277],{"class":63},[49,1234,1235],{"class":55},"...new",[49,1237,1238],{"class":59}," Set",[49,1240,1241],{"class":63},"(arr)].",[49,1243,1185],{"class":59},[49,1245,957],{"class":63},[49,1247,1190],{"class":67},[49,1249,289],{"class":63},[49,1251,1195],{"class":67},[49,1253,417],{"class":63},[49,1255,974],{"class":55},[49,1257,1202],{"class":63},[49,1259,1205],{"class":55},[49,1261,1208],{"class":63},[49,1263,1264],{"class":51,"line":74},[49,1265,222],{"emptyLinePlaceholder":221},[49,1267,1268,1270,1273,1275,1277,1279,1281,1283,1285,1287,1289,1291,1293,1295,1297,1299,1301,1303,1305,1307,1309,1311,1313,1315,1317,1319],{"class":51,"line":89},[49,1269,240],{"class":55},[49,1271,1272],{"class":106}," messyArray",[49,1274,246],{"class":55},[49,1276,277],{"class":63},[49,1278,292],{"class":106},[49,1280,289],{"class":63},[49,1282,280],{"class":106},[49,1284,289],{"class":63},[49,1286,297],{"class":106},[49,1288,289],{"class":63},[49,1290,280],{"class":106},[49,1292,289],{"class":63},[49,1294,302],{"class":106},[49,1296,289],{"class":63},[49,1298,323],{"class":106},[49,1300,289],{"class":63},[49,1302,286],{"class":106},[49,1304,289],{"class":63},[49,1306,307],{"class":106},[49,1308,289],{"class":63},[49,1310,302],{"class":106},[49,1312,289],{"class":63},[49,1314,292],{"class":106},[49,1316,289],{"class":63},[49,1318,302],{"class":106},[49,1320,1321],{"class":63},"];\n",[49,1323,1324,1326,1329,1331,1333],{"class":51,"line":130},[49,1325,240],{"class":55},[49,1327,1328],{"class":106}," cleaned",[49,1330,246],{"class":55},[49,1332,1224],{"class":59},[49,1334,1335],{"class":63},"(messyArray);\n",[49,1337,1338],{"class":51,"line":145},[49,1339,1340],{"class":228},"\u002F\u002F Result: [1, 2, 3, 4, 5, 6, 9]\n",[49,1342,1343],{"class":51,"line":167},[49,1344,222],{"emptyLinePlaceholder":221},[49,1346,1347,1349,1352,1354,1356,1359,1361,1364,1366,1368,1370,1373,1375,1377],{"class":51,"line":179},[49,1348,240],{"class":55},[49,1350,1351],{"class":106}," messyStrings",[49,1353,246],{"class":55},[49,1355,277],{"class":63},[49,1357,1358],{"class":413},"'banana'",[49,1360,289],{"class":63},[49,1362,1363],{"class":413},"'apple'",[49,1365,289],{"class":63},[49,1367,1363],{"class":413},[49,1369,289],{"class":63},[49,1371,1372],{"class":413},"'cherry'",[49,1374,289],{"class":63},[49,1376,1358],{"class":413},[49,1378,1321],{"class":63},[49,1380,1381,1383,1386,1388,1390,1392,1394,1397,1399],{"class":51,"line":191},[49,1382,240],{"class":55},[49,1384,1385],{"class":106}," cleanedStrings",[49,1387,246],{"class":55},[49,1389,277],{"class":63},[49,1391,1235],{"class":55},[49,1393,1238],{"class":59},[49,1395,1396],{"class":63},"(messyStrings)].",[49,1398,1185],{"class":59},[49,1400,1401],{"class":63},"();\n",[49,1403,1404],{"class":51,"line":197},[49,1405,1406],{"class":228},"\u002F\u002F Result: ['apple', 'banana', 'cherry']\n",[16,1408,1409],{},"The Set will take care of removing duplicates perfectly, and then the spread operator will turn it back into an array. And you just need to call sort() afterwards!",[27,1411,1413],{"id":1412},"_5-dom-manipulation-querying-and-mutating-multiple-elements","5. DOM Manipulation: Querying and Mutating Multiple Elements",[16,1415,1416],{},"This is a powerful command line that allows you to query and transform multiple DOM elements at once:",[35,1418,1419,1542],{},[38,1420,1422],{"className":40,"code":1421,"filename":42,"language":43,"meta":44,"style":44},"function updateElementsManually(selector) {\nconst elements = document.querySelectorAll(selector);\nfor (let i = 0; i \u003C elements.length; i++) {\n  const el = elements[i];\n  el.style.backgroundColor = '[#]007bff';\n  el.style.color = 'white';\n  el.style.padding = '10px 20px';\n  }\n}\n",[46,1423,1424,1438,1456,1486,1498,1510,1522,1534,1538],{"__ignoreMap":44},[49,1425,1426,1428,1431,1433,1436],{"class":51,"line":52},[49,1427,56],{"class":55},[49,1429,1430],{"class":59}," updateElementsManually",[49,1432,64],{"class":63},[49,1434,1435],{"class":67},"selector",[49,1437,71],{"class":63},[49,1439,1440,1442,1445,1447,1450,1453],{"class":51,"line":74},[49,1441,240],{"class":55},[49,1443,1444],{"class":106}," elements",[49,1446,246],{"class":55},[49,1448,1449],{"class":63}," document.",[49,1451,1452],{"class":59},"querySelectorAll",[49,1454,1455],{"class":63},"(selector);\n",[49,1457,1458,1461,1463,1465,1467,1469,1471,1473,1475,1478,1480,1482,1484],{"class":51,"line":89},[49,1459,1460],{"class":55},"for",[49,1462,95],{"class":63},[49,1464,98],{"class":55},[49,1466,101],{"class":63},[49,1468,83],{"class":55},[49,1470,107],{"class":106},[49,1472,110],{"class":63},[49,1474,113],{"class":55},[49,1476,1477],{"class":63}," elements.",[49,1479,119],{"class":106},[49,1481,122],{"class":63},[49,1483,125],{"class":55},[49,1485,71],{"class":63},[49,1487,1488,1490,1493,1495],{"class":51,"line":130},[49,1489,452],{"class":55},[49,1491,1492],{"class":106}," el",[49,1494,246],{"class":55},[49,1496,1497],{"class":63}," elements[i];\n",[49,1499,1500,1503,1505,1508],{"class":51,"line":145},[49,1501,1502],{"class":63},"  el.style.backgroundColor ",[49,1504,83],{"class":55},[49,1506,1507],{"class":413}," '[#]007bff'",[49,1509,1024],{"class":63},[49,1511,1512,1515,1517,1520],{"class":51,"line":167},[49,1513,1514],{"class":63},"  el.style.color ",[49,1516,83],{"class":55},[49,1518,1519],{"class":413}," 'white'",[49,1521,1024],{"class":63},[49,1523,1524,1527,1529,1532],{"class":51,"line":179},[49,1525,1526],{"class":63},"  el.style.padding ",[49,1528,83],{"class":55},[49,1530,1531],{"class":413}," '10px 20px'",[49,1533,1024],{"class":63},[49,1535,1536],{"class":51,"line":191},[49,1537,200],{"class":63},[49,1539,1540],{"class":51,"line":197},[49,1541,215],{"class":63},[38,1543,1545],{"className":40,"code":1544,"filename":233,"language":43,"meta":44,"style":44},"const modifyElements = selector => Array[.]from(document.querySelectorAll(selector)).forEach(el => el[.]style);\n\n\u002F\u002F Use it like this:\nconst updateButtons = modifyElements('.btn')\n.map(style => Object.assign(style, {\nbackgroundColor: '[#]007bff',\ncolor: 'white',\npadding: '10px 20px'\n}));\n\n\u002F\u002F Or even simpler for class updates:\nconst toggleAll = selector => document.querySelectorAll(selector).forEach(el => el.classList.toggle('active'));\n",[46,1546,1547,1588,1592,1597,1616,1637,1648,1658,1666,1671,1675,1680],{"__ignoreMap":44},[49,1548,1549,1551,1554,1556,1559,1561,1564,1567,1570,1572,1575,1578,1580,1583,1585],{"class":51,"line":52},[49,1550,240],{"class":55},[49,1552,1553],{"class":59}," modifyElements",[49,1555,246],{"class":55},[49,1557,1558],{"class":67}," selector",[49,1560,252],{"class":55},[49,1562,1563],{"class":63}," Array[.]",[49,1565,1566],{"class":59},"from",[49,1568,1569],{"class":63},"(document.",[49,1571,1452],{"class":59},[49,1573,1574],{"class":63},"(selector)).",[49,1576,1577],{"class":59},"forEach",[49,1579,64],{"class":63},[49,1581,1582],{"class":67},"el",[49,1584,252],{"class":55},[49,1586,1587],{"class":63}," el[.]style);\n",[49,1589,1590],{"class":51,"line":74},[49,1591,222],{"emptyLinePlaceholder":221},[49,1593,1594],{"class":51,"line":89},[49,1595,1596],{"class":228},"\u002F\u002F Use it like this:\n",[49,1598,1599,1601,1604,1606,1608,1610,1613],{"class":51,"line":130},[49,1600,240],{"class":55},[49,1602,1603],{"class":106}," updateButtons",[49,1605,246],{"class":55},[49,1607,1553],{"class":59},[49,1609,64],{"class":63},[49,1611,1612],{"class":413},"'.btn'",[49,1614,1615],{"class":63},")\n",[49,1617,1618,1620,1622,1624,1627,1629,1631,1634],{"class":51,"line":145},[49,1619,563],{"class":63},[49,1621,928],{"class":59},[49,1623,64],{"class":63},[49,1625,1626],{"class":67},"style",[49,1628,252],{"class":55},[49,1630,938],{"class":63},[49,1632,1633],{"class":59},"assign",[49,1635,1636],{"class":63},"(style, {\n",[49,1638,1639,1642,1645],{"class":51,"line":167},[49,1640,1641],{"class":63},"backgroundColor: ",[49,1643,1644],{"class":413},"'[#]007bff'",[49,1646,1647],{"class":63},",\n",[49,1649,1650,1653,1656],{"class":51,"line":179},[49,1651,1652],{"class":63},"color: ",[49,1654,1655],{"class":413},"'white'",[49,1657,1647],{"class":63},[49,1659,1660,1663],{"class":51,"line":191},[49,1661,1662],{"class":63},"padding: ",[49,1664,1665],{"class":413},"'10px 20px'\n",[49,1667,1668],{"class":51,"line":197},[49,1669,1670],{"class":63},"}));\n",[49,1672,1673],{"class":51,"line":203},[49,1674,222],{"emptyLinePlaceholder":221},[49,1676,1677],{"class":51,"line":212},[49,1678,1679],{"class":228},"\u002F\u002F Or even simpler for class updates:\n",[49,1681,1682,1684,1687,1689,1691,1693,1695,1697,1700,1702,1704,1706,1708,1711,1714,1716,1719],{"class":51,"line":218},[49,1683,240],{"class":55},[49,1685,1686],{"class":59}," toggleAll",[49,1688,246],{"class":55},[49,1690,1558],{"class":67},[49,1692,252],{"class":55},[49,1694,1449],{"class":63},[49,1696,1452],{"class":59},[49,1698,1699],{"class":63},"(selector).",[49,1701,1577],{"class":59},[49,1703,64],{"class":63},[49,1705,1582],{"class":67},[49,1707,252],{"class":55},[49,1709,1710],{"class":63}," el.classList.",[49,1712,1713],{"class":59},"toggle",[49,1715,64],{"class":63},[49,1717,1718],{"class":413},"'active'",[49,1720,1721],{"class":63},"));\n",[16,1723,1724],{},"This works in all modern browsers and saves you from writing repetitive DOM manipulation code.",[27,1726,1728],{"id":1727},"_6-parallel-api-calls-with-clean-error-handling","6. Parallel API calls with clean error handling",[16,1730,1731],{},"Here's another neat line of code that makes parallel calls to the API and handles errors very cleanly.",[35,1733,1734,1889],{},[38,1735,1737],{"className":40,"code":1736,"filename":42,"language":43,"meta":44,"style":44},"async function fetchDataManually(urls) {\n  const results = [];\n  for (const url of urls) {\n    try {\n      const response = await fetch(url);\n      const data = await response.json();\n      results.push({ status: 'fulfilled', value: data });\n    } catch (error) {\n      results.push({ status: 'rejected', reason: error });\n    }\n  }\n  return results;\n}\n",[46,1738,1739,1757,1768,1785,1792,1811,1830,1846,1856,1870,1874,1878,1885],{"__ignoreMap":44},[49,1740,1741,1744,1747,1750,1752,1755],{"class":51,"line":52},[49,1742,1743],{"class":55},"async",[49,1745,1746],{"class":55}," function",[49,1748,1749],{"class":59}," fetchDataManually",[49,1751,64],{"class":63},[49,1753,1754],{"class":67},"urls",[49,1756,71],{"class":63},[49,1758,1759,1761,1764,1766],{"class":51,"line":74},[49,1760,452],{"class":55},[49,1762,1763],{"class":106}," results",[49,1765,246],{"class":55},[49,1767,86],{"class":63},[49,1769,1770,1772,1774,1776,1779,1782],{"class":51,"line":89},[49,1771,92],{"class":55},[49,1773,95],{"class":63},[49,1775,240],{"class":55},[49,1777,1778],{"class":106}," url",[49,1780,1781],{"class":55}," of",[49,1783,1784],{"class":63}," urls) {\n",[49,1786,1787,1790],{"class":51,"line":130},[49,1788,1789],{"class":55},"    try",[49,1791,176],{"class":63},[49,1793,1794,1797,1800,1802,1805,1808],{"class":51,"line":145},[49,1795,1796],{"class":55},"      const",[49,1798,1799],{"class":106}," response",[49,1801,246],{"class":55},[49,1803,1804],{"class":55}," await",[49,1806,1807],{"class":59}," fetch",[49,1809,1810],{"class":63},"(url);\n",[49,1812,1813,1815,1818,1820,1822,1825,1828],{"class":51,"line":167},[49,1814,1796],{"class":55},[49,1816,1817],{"class":106}," data",[49,1819,246],{"class":55},[49,1821,1804],{"class":55},[49,1823,1824],{"class":63}," response.",[49,1826,1827],{"class":59},"json",[49,1829,1401],{"class":63},[49,1831,1832,1835,1837,1840,1843],{"class":51,"line":179},[49,1833,1834],{"class":63},"      results.",[49,1836,185],{"class":59},[49,1838,1839],{"class":63},"({ status: ",[49,1841,1842],{"class":413},"'fulfilled'",[49,1844,1845],{"class":63},", value: data });\n",[49,1847,1848,1850,1853],{"class":51,"line":191},[49,1849,170],{"class":63},[49,1851,1852],{"class":55},"catch",[49,1854,1855],{"class":63}," (error) {\n",[49,1857,1858,1860,1862,1864,1867],{"class":51,"line":197},[49,1859,1834],{"class":63},[49,1861,185],{"class":59},[49,1863,1839],{"class":63},[49,1865,1866],{"class":413},"'rejected'",[49,1868,1869],{"class":63},", reason: error });\n",[49,1871,1872],{"class":51,"line":203},[49,1873,194],{"class":63},[49,1875,1876],{"class":51,"line":212},[49,1877,200],{"class":63},[49,1879,1880,1882],{"class":51,"line":218},[49,1881,206],{"class":55},[49,1883,1884],{"class":63}," results;\n",[49,1886,1887],{"class":51,"line":225},[49,1888,215],{"class":63},[38,1890,1892],{"className":40,"code":1891,"filename":233,"language":43,"meta":44,"style":44},"const parallelCalls = urls => Promise[.]allSettled(urls[.]map(url => fetch(url)[.]then(r => r[.]json())));\n\nconst urls = [\n'https:\u002F\u002Fapi[.]example[.]com\u002Fusers',\n'https:\u002F\u002Fapi[.]example[.]com\u002Fposts',\n'https:\u002F\u002Fapi[.]example[.]com\u002Fcomments'\n];\nconst getData = async () => {\nconst results = await parallelCalls(urls);\nconst [users, posts, comments] = results[.]map(r => r[.]status === 'fulfilled' ? r[.]value : null);\n};\n",[46,1893,1894,1952,1956,1967,1974,1981,1986,1990,2009,2024,2079],{"__ignoreMap":44},[49,1895,1896,1898,1901,1903,1906,1908,1911,1914,1917,1920,1922,1924,1927,1929,1931,1934,1937,1939,1942,1944,1947,1949],{"class":51,"line":52},[49,1897,240],{"class":55},[49,1899,1900],{"class":59}," parallelCalls",[49,1902,246],{"class":55},[49,1904,1905],{"class":67}," urls",[49,1907,252],{"class":55},[49,1909,1910],{"class":106}," Promise",[49,1912,1913],{"class":63},"[.]",[49,1915,1916],{"class":59},"allSettled",[49,1918,1919],{"class":63},"(urls[.]",[49,1921,928],{"class":59},[49,1923,64],{"class":63},[49,1925,1926],{"class":67},"url",[49,1928,252],{"class":55},[49,1930,1807],{"class":59},[49,1932,1933],{"class":63},"(url)[.]",[49,1935,1936],{"class":59},"then",[49,1938,64],{"class":63},[49,1940,1941],{"class":67},"r",[49,1943,252],{"class":55},[49,1945,1946],{"class":63}," r[.]",[49,1948,1827],{"class":59},[49,1950,1951],{"class":63},"())));\n",[49,1953,1954],{"class":51,"line":74},[49,1955,222],{"emptyLinePlaceholder":221},[49,1957,1958,1960,1962,1964],{"class":51,"line":89},[49,1959,240],{"class":55},[49,1961,1905],{"class":106},[49,1963,246],{"class":55},[49,1965,1966],{"class":63}," [\n",[49,1968,1969,1972],{"class":51,"line":130},[49,1970,1971],{"class":413},"'https:\u002F\u002Fapi[.]example[.]com\u002Fusers'",[49,1973,1647],{"class":63},[49,1975,1976,1979],{"class":51,"line":145},[49,1977,1978],{"class":413},"'https:\u002F\u002Fapi[.]example[.]com\u002Fposts'",[49,1980,1647],{"class":63},[49,1982,1983],{"class":51,"line":167},[49,1984,1985],{"class":413},"'https:\u002F\u002Fapi[.]example[.]com\u002Fcomments'\n",[49,1987,1988],{"class":51,"line":179},[49,1989,1321],{"class":63},[49,1991,1992,1994,1997,1999,2002,2005,2007],{"class":51,"line":191},[49,1993,240],{"class":55},[49,1995,1996],{"class":59}," getData",[49,1998,246],{"class":55},[49,2000,2001],{"class":55}," async",[49,2003,2004],{"class":63}," () ",[49,2006,974],{"class":55},[49,2008,176],{"class":63},[49,2010,2011,2013,2015,2017,2019,2021],{"class":51,"line":197},[49,2012,240],{"class":55},[49,2014,1763],{"class":106},[49,2016,246],{"class":55},[49,2018,1804],{"class":55},[49,2020,1900],{"class":59},[49,2022,2023],{"class":63},"(urls);\n",[49,2025,2026,2028,2030,2033,2035,2038,2040,2043,2046,2048,2051,2053,2055,2057,2059,2062,2064,2067,2070,2073,2075,2077],{"class":51,"line":203},[49,2027,240],{"class":55},[49,2029,277],{"class":63},[49,2031,2032],{"class":106},"users",[49,2034,289],{"class":63},[49,2036,2037],{"class":106},"posts",[49,2039,289],{"class":63},[49,2041,2042],{"class":106},"comments",[49,2044,2045],{"class":63},"] ",[49,2047,83],{"class":55},[49,2049,2050],{"class":63}," results[.]",[49,2052,928],{"class":59},[49,2054,64],{"class":63},[49,2056,1941],{"class":67},[49,2058,252],{"class":55},[49,2060,2061],{"class":63}," r[.]status ",[49,2063,395],{"class":55},[49,2065,2066],{"class":413}," 'fulfilled'",[49,2068,2069],{"class":55}," ?",[49,2071,2072],{"class":63}," r[.]value ",[49,2074,474],{"class":55},[49,2076,398],{"class":106},[49,2078,265],{"class":63},[49,2080,2081],{"class":51,"line":212},[49,2082,644],{"class":63},[16,2084,2085],{},"Promise.allSettled is the hero here; it doesn't fail if a request fails, and it returns explicit state information for each call.",[27,2087,2089],{"id":2088},"_7-datetime-format-clean-date-strings-without-libraries","7. Date\u002FTime Format: Clean Date Strings Without Libraries",[16,2091,2092],{},"Here's a great command line that converts dates into clean, readable strings without any external libraries:",[35,2094,2095,2389],{},[38,2096,2098],{"className":40,"code":2097,"filename":42,"language":43,"meta":44,"style":44},"function formatDateManually(date) {\n  const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];\n  const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n  const dayName = days[date.getDay()];\n  const monthName = months[date.getMonth()];\n  const day = date.getDate();\n  const year = date.getFullYear();\n  const hours = date.getHours();\n  const minutes = date.getMinutes();\n  const ampm = hours >= 12 ? 'PM' : 'AM';\n  return ${dayName}, ${monthName} ${day}, ${year} at ${hours % 12}:${minutes.toString().padStart(2, '0')} ${ampm};\n}\n",[46,2099,2100,2114,2160,2231,2249,2266,2283,2299,2315,2331,2362,2385],{"__ignoreMap":44},[49,2101,2102,2104,2107,2109,2112],{"class":51,"line":52},[49,2103,56],{"class":55},[49,2105,2106],{"class":59}," formatDateManually",[49,2108,64],{"class":63},[49,2110,2111],{"class":67},"date",[49,2113,71],{"class":63},[49,2115,2116,2118,2121,2123,2125,2128,2130,2133,2135,2138,2140,2143,2145,2148,2150,2153,2155,2158],{"class":51,"line":74},[49,2117,452],{"class":55},[49,2119,2120],{"class":106}," days",[49,2122,246],{"class":55},[49,2124,277],{"class":63},[49,2126,2127],{"class":413},"'Sunday'",[49,2129,289],{"class":63},[49,2131,2132],{"class":413},"'Monday'",[49,2134,289],{"class":63},[49,2136,2137],{"class":413},"'Tuesday'",[49,2139,289],{"class":63},[49,2141,2142],{"class":413},"'Wednesday'",[49,2144,289],{"class":63},[49,2146,2147],{"class":413},"'Thursday'",[49,2149,289],{"class":63},[49,2151,2152],{"class":413},"'Friday'",[49,2154,289],{"class":63},[49,2156,2157],{"class":413},"'Saturday'",[49,2159,1321],{"class":63},[49,2161,2162,2164,2167,2169,2171,2174,2176,2179,2181,2184,2186,2189,2191,2194,2196,2199,2201,2204,2206,2209,2211,2214,2216,2219,2221,2224,2226,2229],{"class":51,"line":89},[49,2163,452],{"class":55},[49,2165,2166],{"class":106}," months",[49,2168,246],{"class":55},[49,2170,277],{"class":63},[49,2172,2173],{"class":413},"'January'",[49,2175,289],{"class":63},[49,2177,2178],{"class":413},"'February'",[49,2180,289],{"class":63},[49,2182,2183],{"class":413},"'March'",[49,2185,289],{"class":63},[49,2187,2188],{"class":413},"'April'",[49,2190,289],{"class":63},[49,2192,2193],{"class":413},"'May'",[49,2195,289],{"class":63},[49,2197,2198],{"class":413},"'June'",[49,2200,289],{"class":63},[49,2202,2203],{"class":413},"'July'",[49,2205,289],{"class":63},[49,2207,2208],{"class":413},"'August'",[49,2210,289],{"class":63},[49,2212,2213],{"class":413},"'September'",[49,2215,289],{"class":63},[49,2217,2218],{"class":413},"'October'",[49,2220,289],{"class":63},[49,2222,2223],{"class":413},"'November'",[49,2225,289],{"class":63},[49,2227,2228],{"class":413},"'December'",[49,2230,1321],{"class":63},[49,2232,2233,2235,2238,2240,2243,2246],{"class":51,"line":130},[49,2234,452],{"class":55},[49,2236,2237],{"class":106}," dayName",[49,2239,246],{"class":55},[49,2241,2242],{"class":63}," days[date.",[49,2244,2245],{"class":59},"getDay",[49,2247,2248],{"class":63},"()];\n",[49,2250,2251,2253,2256,2258,2261,2264],{"class":51,"line":145},[49,2252,452],{"class":55},[49,2254,2255],{"class":106}," monthName",[49,2257,246],{"class":55},[49,2259,2260],{"class":63}," months[date.",[49,2262,2263],{"class":59},"getMonth",[49,2265,2248],{"class":63},[49,2267,2268,2270,2273,2275,2278,2281],{"class":51,"line":167},[49,2269,452],{"class":55},[49,2271,2272],{"class":106}," day",[49,2274,246],{"class":55},[49,2276,2277],{"class":63}," date.",[49,2279,2280],{"class":59},"getDate",[49,2282,1401],{"class":63},[49,2284,2285,2287,2290,2292,2294,2297],{"class":51,"line":179},[49,2286,452],{"class":55},[49,2288,2289],{"class":106}," year",[49,2291,246],{"class":55},[49,2293,2277],{"class":63},[49,2295,2296],{"class":59},"getFullYear",[49,2298,1401],{"class":63},[49,2300,2301,2303,2306,2308,2310,2313],{"class":51,"line":191},[49,2302,452],{"class":55},[49,2304,2305],{"class":106}," hours",[49,2307,246],{"class":55},[49,2309,2277],{"class":63},[49,2311,2312],{"class":59},"getHours",[49,2314,1401],{"class":63},[49,2316,2317,2319,2322,2324,2326,2329],{"class":51,"line":197},[49,2318,452],{"class":55},[49,2320,2321],{"class":106}," minutes",[49,2323,246],{"class":55},[49,2325,2277],{"class":63},[49,2327,2328],{"class":59},"getMinutes",[49,2330,1401],{"class":63},[49,2332,2333,2335,2338,2340,2343,2346,2349,2351,2354,2357,2360],{"class":51,"line":203},[49,2334,452],{"class":55},[49,2336,2337],{"class":106}," ampm",[49,2339,246],{"class":55},[49,2341,2342],{"class":63}," hours ",[49,2344,2345],{"class":55},">=",[49,2347,2348],{"class":106}," 12",[49,2350,2069],{"class":55},[49,2352,2353],{"class":413}," 'PM'",[49,2355,2356],{"class":55}," :",[49,2358,2359],{"class":413}," 'AM'",[49,2361,1024],{"class":63},[49,2363,2364,2366,2369,2372,2375,2377,2379,2382],{"class":51,"line":212},[49,2365,206],{"class":55},[49,2367,2368],{"class":63}," ${dayName}, ${monthName} ${day}, ${year} at ${hours % ",[49,2370,2371],{"class":106},"12",[49,2373,2374],{"class":63},"}:${minutes.toString().padStart(",[49,2376,286],{"class":106},[49,2378,289],{"class":63},[49,2380,2381],{"class":413},"'0'",[49,2383,2384],{"class":63},")} ${ampm};\n",[49,2386,2387],{"class":51,"line":218},[49,2388,215],{"class":63},[38,2390,2392],{"className":40,"code":2391,"filename":233,"language":43,"meta":44,"style":44},"const formatDate = date => new Intl.DateTimeFormat('en-US', { dateStyle: 'full', timeStyle: 'short' }).format(date);\n\nconst now = new Date();\nconsole.log(formatDate(now));\n\u002F\u002F Output: \"Thursday, December 9, 2024 at 2:30 PM\"\n\nconst shortDate = date => new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).format(date);\n\u002F\u002F Output: \"Dec 9, 2024\"\n",[46,2393,2394,2442,2446,2461,2477,2482,2486,2531],{"__ignoreMap":44},[49,2395,2396,2398,2401,2403,2406,2408,2410,2413,2416,2418,2421,2424,2427,2430,2433,2436,2439],{"class":51,"line":52},[49,2397,240],{"class":55},[49,2399,2400],{"class":59}," formatDate",[49,2402,246],{"class":55},[49,2404,2405],{"class":67}," date",[49,2407,252],{"class":55},[49,2409,442],{"class":55},[49,2411,2412],{"class":63}," Intl.",[49,2414,2415],{"class":59},"DateTimeFormat",[49,2417,64],{"class":63},[49,2419,2420],{"class":413},"'en-US'",[49,2422,2423],{"class":63},", { dateStyle: ",[49,2425,2426],{"class":413},"'full'",[49,2428,2429],{"class":63},", timeStyle: ",[49,2431,2432],{"class":413},"'short'",[49,2434,2435],{"class":63}," }).",[49,2437,2438],{"class":59},"format",[49,2440,2441],{"class":63},"(date);\n",[49,2443,2444],{"class":51,"line":74},[49,2445,222],{"emptyLinePlaceholder":221},[49,2447,2448,2450,2453,2455,2457,2459],{"class":51,"line":89},[49,2449,240],{"class":55},[49,2451,2452],{"class":106}," now",[49,2454,246],{"class":55},[49,2456,442],{"class":55},[49,2458,435],{"class":59},[49,2460,1401],{"class":63},[49,2462,2463,2466,2469,2471,2474],{"class":51,"line":130},[49,2464,2465],{"class":63},"console.",[49,2467,2468],{"class":59},"log",[49,2470,64],{"class":63},[49,2472,2473],{"class":59},"formatDate",[49,2475,2476],{"class":63},"(now));\n",[49,2478,2479],{"class":51,"line":145},[49,2480,2481],{"class":228},"\u002F\u002F Output: \"Thursday, December 9, 2024 at 2:30 PM\"\n",[49,2483,2484],{"class":51,"line":167},[49,2485,222],{"emptyLinePlaceholder":221},[49,2487,2488,2490,2493,2495,2497,2499,2501,2503,2505,2507,2509,2512,2514,2517,2520,2523,2525,2527,2529],{"class":51,"line":179},[49,2489,240],{"class":55},[49,2491,2492],{"class":59}," shortDate",[49,2494,246],{"class":55},[49,2496,2405],{"class":67},[49,2498,252],{"class":55},[49,2500,442],{"class":55},[49,2502,2412],{"class":63},[49,2504,2415],{"class":59},[49,2506,64],{"class":63},[49,2508,2420],{"class":413},[49,2510,2511],{"class":63},", { month: ",[49,2513,2432],{"class":413},[49,2515,2516],{"class":63},", day: ",[49,2518,2519],{"class":413},"'numeric'",[49,2521,2522],{"class":63},", year: ",[49,2524,2519],{"class":413},[49,2526,2435],{"class":63},[49,2528,2438],{"class":59},[49,2530,2441],{"class":63},[49,2532,2533],{"class":51,"line":191},[49,2534,2535],{"class":228},"\u002F\u002F Output: \"Dec 9, 2024\"\n",[16,2537,2538],{},"Intl.DateTimeFormat handles all the heavy lifting, including localization. No more manually building date strings!",[27,2540,2542],{"id":2541},"_8-event-handling-debounce-without-bloat","8. Event Handling: Debounce Without Bloat",[16,2544,2545],{},"Here's a neat command line to create a debounce version of any function - perfect for handling search input or resizing windows:",[35,2547,2548,2675],{},[38,2549,2551],{"className":40,"code":2550,"filename":42,"language":43,"meta":44,"style":44},"function createDebounce(fn, delay) {\n  let timeoutId;\n  return function debounced(...args) {\n    if (timeoutId) {\n      clearTimeout(timeoutId);\n    }\n    timeoutId = setTimeout(() => {\n      fn.apply(this, args);\n      timeoutId = null;\n    }, delay);\n  };\n}\n",[46,2552,2553,2572,2579,2598,2605,2613,2617,2634,2650,2661,2666,2671],{"__ignoreMap":44},[49,2554,2555,2557,2560,2562,2565,2567,2570],{"class":51,"line":52},[49,2556,56],{"class":55},[49,2558,2559],{"class":59}," createDebounce",[49,2561,64],{"class":63},[49,2563,2564],{"class":67},"fn",[49,2566,289],{"class":63},[49,2568,2569],{"class":67},"delay",[49,2571,71],{"class":63},[49,2573,2574,2576],{"class":51,"line":74},[49,2575,77],{"class":55},[49,2577,2578],{"class":63}," timeoutId;\n",[49,2580,2581,2583,2585,2588,2590,2593,2596],{"class":51,"line":89},[49,2582,206],{"class":55},[49,2584,1746],{"class":55},[49,2586,2587],{"class":59}," debounced",[49,2589,64],{"class":63},[49,2591,2592],{"class":55},"...",[49,2594,2595],{"class":67},"args",[49,2597,71],{"class":63},[49,2599,2600,2602],{"class":51,"line":130},[49,2601,133],{"class":55},[49,2603,2604],{"class":63}," (timeoutId) {\n",[49,2606,2607,2610],{"class":51,"line":145},[49,2608,2609],{"class":59},"      clearTimeout",[49,2611,2612],{"class":63},"(timeoutId);\n",[49,2614,2615],{"class":51,"line":167},[49,2616,194],{"class":63},[49,2618,2619,2622,2624,2627,2630,2632],{"class":51,"line":179},[49,2620,2621],{"class":63},"    timeoutId ",[49,2623,83],{"class":55},[49,2625,2626],{"class":59}," setTimeout",[49,2628,2629],{"class":63},"(() ",[49,2631,974],{"class":55},[49,2633,176],{"class":63},[49,2635,2636,2639,2642,2644,2647],{"class":51,"line":191},[49,2637,2638],{"class":63},"      fn.",[49,2640,2641],{"class":59},"apply",[49,2643,64],{"class":63},[49,2645,2646],{"class":106},"this",[49,2648,2649],{"class":63},", args);\n",[49,2651,2652,2655,2657,2659],{"class":51,"line":197},[49,2653,2654],{"class":63},"      timeoutId ",[49,2656,83],{"class":55},[49,2658,398],{"class":106},[49,2660,1024],{"class":63},[49,2662,2663],{"class":51,"line":203},[49,2664,2665],{"class":63},"    }, delay);\n",[49,2667,2668],{"class":51,"line":212},[49,2669,2670],{"class":63},"  };\n",[49,2672,2673],{"class":51,"line":218},[49,2674,215],{"class":63},[38,2676,2678],{"className":40,"code":2677,"filename":233,"language":43,"meta":44,"style":44},"const debounce=(fn,ms)=>{let timeout;return(...args)=>{clearTimeout(timeout);timeout=setTimeout(()=>fn(...args),ms);};};\n\nconst expensiveSearch=query=>console.log('Searching for:',query);\nconst debouncedSearch=debounce(expensiveSearch,300);\n\n\u002F\u002F Use it in your event listener:\nsearchInput.addEventListener('input',e=>debouncedSearch(e.target.value));\n",[46,2679,2680,2751,2755,2781,2801,2805,2810],{"__ignoreMap":44},[49,2681,2682,2684,2687,2689,2691,2693,2696,2699,2702,2704,2707,2709,2712,2714,2716,2718,2720,2722,2724,2726,2729,2732,2734,2737,2740,2742,2744,2746,2748],{"class":51,"line":52},[49,2683,240],{"class":55},[49,2685,2686],{"class":59}," debounce",[49,2688,83],{"class":55},[49,2690,64],{"class":63},[49,2692,2564],{"class":67},[49,2694,2695],{"class":63},",",[49,2697,2698],{"class":67},"ms",[49,2700,2701],{"class":63},")",[49,2703,974],{"class":55},[49,2705,2706],{"class":63},"{",[49,2708,98],{"class":55},[49,2710,2711],{"class":63}," timeout;",[49,2713,420],{"class":55},[49,2715,64],{"class":63},[49,2717,2592],{"class":55},[49,2719,2595],{"class":67},[49,2721,2701],{"class":63},[49,2723,974],{"class":55},[49,2725,2706],{"class":63},[49,2727,2728],{"class":59},"clearTimeout",[49,2730,2731],{"class":63},"(timeout);timeout",[49,2733,83],{"class":55},[49,2735,2736],{"class":59},"setTimeout",[49,2738,2739],{"class":63},"(()",[49,2741,974],{"class":55},[49,2743,2564],{"class":59},[49,2745,64],{"class":63},[49,2747,2592],{"class":55},[49,2749,2750],{"class":63},"args),ms);};};\n",[49,2752,2753],{"class":51,"line":74},[49,2754,222],{"emptyLinePlaceholder":221},[49,2756,2757,2759,2762,2764,2767,2769,2771,2773,2775,2778],{"class":51,"line":89},[49,2758,240],{"class":55},[49,2760,2761],{"class":59}," expensiveSearch",[49,2763,83],{"class":55},[49,2765,2766],{"class":67},"query",[49,2768,974],{"class":55},[49,2770,2465],{"class":63},[49,2772,2468],{"class":59},[49,2774,64],{"class":63},[49,2776,2777],{"class":413},"'Searching for:'",[49,2779,2780],{"class":63},",query);\n",[49,2782,2783,2785,2788,2790,2793,2796,2799],{"class":51,"line":130},[49,2784,240],{"class":55},[49,2786,2787],{"class":106}," debouncedSearch",[49,2789,83],{"class":55},[49,2791,2792],{"class":59},"debounce",[49,2794,2795],{"class":63},"(expensiveSearch,",[49,2797,2798],{"class":106},"300",[49,2800,265],{"class":63},[49,2802,2803],{"class":51,"line":145},[49,2804,222],{"emptyLinePlaceholder":221},[49,2806,2807],{"class":51,"line":167},[49,2808,2809],{"class":228},"\u002F\u002F Use it in your event listener:\n",[49,2811,2812,2815,2818,2820,2823,2825,2828,2830,2833],{"class":51,"line":179},[49,2813,2814],{"class":63},"searchInput.",[49,2816,2817],{"class":59},"addEventListener",[49,2819,64],{"class":63},[49,2821,2822],{"class":413},"'input'",[49,2824,2695],{"class":63},[49,2826,2827],{"class":67},"e",[49,2829,974],{"class":55},[49,2831,2832],{"class":59},"debouncedSearch",[49,2834,2835],{"class":63},"(e.target.value));\n",[16,2837,2838],{},"This command line covers all the basic debounce use cases and saves you from calling unnecessary functions, especially when inputs are generated continuously like typing or resizing.",[27,2840,2842],{"id":2841},"_9-local-storage-object-storage-with-authentication","9. Local Storage: Object Storage with Authentication",[16,2844,2845],{},"Here's just another neat line of code to handle storing objects in localStorage with built-in validation and error handling:",[35,2847,2848,3128],{},[38,2849,2851],{"className":40,"code":2850,"filename":42,"language":43,"meta":44,"style":44},"function handleLocalStorage(key) {\n  return {\n    get: function() {\n      try {\n        const item = localStorage.getItem(key);\n        return item ? JSON.parse(item) : null;\n      } catch (e) {\n        console.error('Error reading from localStorage', e);\n        return null;\n      }\n    },\n    set: function(data) {\n      try {\n        localStorage.setItem(key, JSON.stringify(data));\n      } catch (e) {\n        console.error('Error writing to localStorage', e);\n      }\n    },\n    remove: function() {\n      try {\n        localStorage.removeItem(key);\n      } catch (e) {\n        console.error('Error removing from localStorage', e);\n      }\n    }\n  };\n}\n",[46,2852,2853,2867,2873,2886,2893,2912,2937,2947,2963,2971,2976,2981,2997,3003,3023,3032,3046,3051,3056,3068,3075,3085,3094,3108,3113,3118,3123],{"__ignoreMap":44},[49,2854,2855,2857,2860,2862,2865],{"class":51,"line":52},[49,2856,56],{"class":55},[49,2858,2859],{"class":59}," handleLocalStorage",[49,2861,64],{"class":63},[49,2863,2864],{"class":67},"key",[49,2866,71],{"class":63},[49,2868,2869,2871],{"class":51,"line":74},[49,2870,206],{"class":55},[49,2872,176],{"class":63},[49,2874,2875,2878,2881,2883],{"class":51,"line":89},[49,2876,2877],{"class":59},"    get",[49,2879,2880],{"class":63},": ",[49,2882,56],{"class":55},[49,2884,2885],{"class":63},"() {\n",[49,2887,2888,2891],{"class":51,"line":130},[49,2889,2890],{"class":55},"      try",[49,2892,176],{"class":63},[49,2894,2895,2898,2901,2903,2906,2909],{"class":51,"line":145},[49,2896,2897],{"class":55},"        const",[49,2899,2900],{"class":106}," item",[49,2902,246],{"class":55},[49,2904,2905],{"class":63}," localStorage.",[49,2907,2908],{"class":59},"getItem",[49,2910,2911],{"class":63},"(key);\n",[49,2913,2914,2917,2920,2922,2924,2926,2928,2931,2933,2935],{"class":51,"line":167},[49,2915,2916],{"class":55},"        return",[49,2918,2919],{"class":63}," item ",[49,2921,468],{"class":55},[49,2923,560],{"class":106},[49,2925,563],{"class":63},[49,2927,566],{"class":59},[49,2929,2930],{"class":63},"(item) ",[49,2932,474],{"class":55},[49,2934,398],{"class":106},[49,2936,1024],{"class":63},[49,2938,2939,2942,2944],{"class":51,"line":179},[49,2940,2941],{"class":63},"      } ",[49,2943,1852],{"class":55},[49,2945,2946],{"class":63}," (e) {\n",[49,2948,2949,2952,2955,2957,2960],{"class":51,"line":191},[49,2950,2951],{"class":63},"        console.",[49,2953,2954],{"class":59},"error",[49,2956,64],{"class":63},[49,2958,2959],{"class":413},"'Error reading from localStorage'",[49,2961,2962],{"class":63},", e);\n",[49,2964,2965,2967,2969],{"class":51,"line":197},[49,2966,2916],{"class":55},[49,2968,398],{"class":106},[49,2970,1024],{"class":63},[49,2972,2973],{"class":51,"line":203},[49,2974,2975],{"class":63},"      }\n",[49,2977,2978],{"class":51,"line":212},[49,2979,2980],{"class":63},"    },\n",[49,2982,2983,2986,2988,2990,2992,2995],{"class":51,"line":218},[49,2984,2985],{"class":59},"    set",[49,2987,2880],{"class":63},[49,2989,56],{"class":55},[49,2991,64],{"class":63},[49,2993,2994],{"class":67},"data",[49,2996,71],{"class":63},[49,2998,2999,3001],{"class":51,"line":225},[49,3000,2890],{"class":55},[49,3002,176],{"class":63},[49,3004,3005,3008,3011,3014,3016,3018,3020],{"class":51,"line":889},[49,3006,3007],{"class":63},"        localStorage.",[49,3009,3010],{"class":59},"setItem",[49,3012,3013],{"class":63},"(key, ",[49,3015,571],{"class":106},[49,3017,563],{"class":63},[49,3019,576],{"class":59},[49,3021,3022],{"class":63},"(data));\n",[49,3024,3026,3028,3030],{"class":51,"line":3025},15,[49,3027,2941],{"class":63},[49,3029,1852],{"class":55},[49,3031,2946],{"class":63},[49,3033,3035,3037,3039,3041,3044],{"class":51,"line":3034},16,[49,3036,2951],{"class":63},[49,3038,2954],{"class":59},[49,3040,64],{"class":63},[49,3042,3043],{"class":413},"'Error writing to localStorage'",[49,3045,2962],{"class":63},[49,3047,3049],{"class":51,"line":3048},17,[49,3050,2975],{"class":63},[49,3052,3054],{"class":51,"line":3053},18,[49,3055,2980],{"class":63},[49,3057,3059,3062,3064,3066],{"class":51,"line":3058},19,[49,3060,3061],{"class":59},"    remove",[49,3063,2880],{"class":63},[49,3065,56],{"class":55},[49,3067,2885],{"class":63},[49,3069,3071,3073],{"class":51,"line":3070},20,[49,3072,2890],{"class":55},[49,3074,176],{"class":63},[49,3076,3078,3080,3083],{"class":51,"line":3077},21,[49,3079,3007],{"class":63},[49,3081,3082],{"class":59},"removeItem",[49,3084,2911],{"class":63},[49,3086,3088,3090,3092],{"class":51,"line":3087},22,[49,3089,2941],{"class":63},[49,3091,1852],{"class":55},[49,3093,2946],{"class":63},[49,3095,3097,3099,3101,3103,3106],{"class":51,"line":3096},23,[49,3098,2951],{"class":63},[49,3100,2954],{"class":59},[49,3102,64],{"class":63},[49,3104,3105],{"class":413},"'Error removing from localStorage'",[49,3107,2962],{"class":63},[49,3109,3111],{"class":51,"line":3110},24,[49,3112,2975],{"class":63},[49,3114,3116],{"class":51,"line":3115},25,[49,3117,194],{"class":63},[49,3119,3121],{"class":51,"line":3120},26,[49,3122,2670],{"class":63},[49,3124,3126],{"class":51,"line":3125},27,[49,3127,215],{"class":63},[38,3129,3131],{"className":40,"code":3130,"filename":233,"language":43,"meta":44,"style":44},"const store = key => ({ get: () => JSON.parse(localStorage.getItem(key)), set: data => localStorage.setItem(key, JSON.stringify(data)), remove: () => localStorage.removeItem(key) });\n\nconst userStore = store('user');\n\u002F\u002F Save data\nuserStore.set({ id: 1, name: 'John', preferences: { theme: 'dark' } });\n\u002F\u002F Get data\nconst userData = userStore.get();\n\u002F\u002F Remove data\nuserStore.remove();\n",[46,3132,3133,3210,3214,3232,3237,3264,3269,3285,3290],{"__ignoreMap":44},[49,3134,3135,3137,3140,3142,3145,3147,3150,3153,3156,3158,3160,3162,3164,3167,3169,3172,3175,3177,3179,3181,3183,3185,3187,3189,3191,3193,3196,3199,3201,3203,3205,3207],{"class":51,"line":52},[49,3136,240],{"class":55},[49,3138,3139],{"class":59}," store",[49,3141,246],{"class":55},[49,3143,3144],{"class":67}," key",[49,3146,252],{"class":55},[49,3148,3149],{"class":63}," ({ ",[49,3151,3152],{"class":59},"get",[49,3154,3155],{"class":63},": () ",[49,3157,974],{"class":55},[49,3159,560],{"class":106},[49,3161,563],{"class":63},[49,3163,566],{"class":59},[49,3165,3166],{"class":63},"(localStorage.",[49,3168,2908],{"class":59},[49,3170,3171],{"class":63},"(key)), ",[49,3173,3174],{"class":59},"set",[49,3176,2880],{"class":63},[49,3178,2994],{"class":67},[49,3180,252],{"class":55},[49,3182,2905],{"class":63},[49,3184,3010],{"class":59},[49,3186,3013],{"class":63},[49,3188,571],{"class":106},[49,3190,563],{"class":63},[49,3192,576],{"class":59},[49,3194,3195],{"class":63},"(data)), ",[49,3197,3198],{"class":59},"remove",[49,3200,3155],{"class":63},[49,3202,974],{"class":55},[49,3204,2905],{"class":63},[49,3206,3082],{"class":59},[49,3208,3209],{"class":63},"(key) });\n",[49,3211,3212],{"class":51,"line":74},[49,3213,222],{"emptyLinePlaceholder":221},[49,3215,3216,3218,3221,3223,3225,3227,3230],{"class":51,"line":89},[49,3217,240],{"class":55},[49,3219,3220],{"class":106}," userStore",[49,3222,246],{"class":55},[49,3224,3139],{"class":59},[49,3226,64],{"class":63},[49,3228,3229],{"class":413},"'user'",[49,3231,265],{"class":63},[49,3233,3234],{"class":51,"line":130},[49,3235,3236],{"class":228},"\u002F\u002F Save data\n",[49,3238,3239,3242,3244,3247,3249,3252,3255,3258,3261],{"class":51,"line":145},[49,3240,3241],{"class":63},"userStore.",[49,3243,3174],{"class":59},[49,3245,3246],{"class":63},"({ id: ",[49,3248,280],{"class":106},[49,3250,3251],{"class":63},", name: ",[49,3253,3254],{"class":413},"'John'",[49,3256,3257],{"class":63},", preferences: { theme: ",[49,3259,3260],{"class":413},"'dark'",[49,3262,3263],{"class":63}," } });\n",[49,3265,3266],{"class":51,"line":167},[49,3267,3268],{"class":228},"\u002F\u002F Get data\n",[49,3270,3271,3273,3276,3278,3281,3283],{"class":51,"line":179},[49,3272,240],{"class":55},[49,3274,3275],{"class":106}," userData",[49,3277,246],{"class":55},[49,3279,3280],{"class":63}," userStore.",[49,3282,3152],{"class":59},[49,3284,1401],{"class":63},[49,3286,3287],{"class":51,"line":191},[49,3288,3289],{"class":228},"\u002F\u002F Remove data\n",[49,3291,3292,3294,3296],{"class":51,"line":197},[49,3293,3241],{"class":63},[49,3295,3198],{"class":59},[49,3297,1401],{"class":63},[27,3299,3301],{"id":3300},"_10-group-elements-by-property-in-an-array-of-objects","10. Group elements by property in an array of objects",[16,3303,3304],{},"This utility function allows you to group an array of objects by a specific property, making it easier to organize and manipulate your data.",[35,3306,3307,3541],{},[38,3308,3309],{"className":40,"code":2850,"filename":42,"language":43,"meta":44,"style":44},[46,3310,3311,3323,3329,3339,3345,3359,3381,3389,3401,3409,3413,3417,3431,3437,3453,3461,3473,3477,3481,3491,3497,3505,3513,3525,3529,3533,3537],{"__ignoreMap":44},[49,3312,3313,3315,3317,3319,3321],{"class":51,"line":52},[49,3314,56],{"class":55},[49,3316,2859],{"class":59},[49,3318,64],{"class":63},[49,3320,2864],{"class":67},[49,3322,71],{"class":63},[49,3324,3325,3327],{"class":51,"line":74},[49,3326,206],{"class":55},[49,3328,176],{"class":63},[49,3330,3331,3333,3335,3337],{"class":51,"line":89},[49,3332,2877],{"class":59},[49,3334,2880],{"class":63},[49,3336,56],{"class":55},[49,3338,2885],{"class":63},[49,3340,3341,3343],{"class":51,"line":130},[49,3342,2890],{"class":55},[49,3344,176],{"class":63},[49,3346,3347,3349,3351,3353,3355,3357],{"class":51,"line":145},[49,3348,2897],{"class":55},[49,3350,2900],{"class":106},[49,3352,246],{"class":55},[49,3354,2905],{"class":63},[49,3356,2908],{"class":59},[49,3358,2911],{"class":63},[49,3360,3361,3363,3365,3367,3369,3371,3373,3375,3377,3379],{"class":51,"line":167},[49,3362,2916],{"class":55},[49,3364,2919],{"class":63},[49,3366,468],{"class":55},[49,3368,560],{"class":106},[49,3370,563],{"class":63},[49,3372,566],{"class":59},[49,3374,2930],{"class":63},[49,3376,474],{"class":55},[49,3378,398],{"class":106},[49,3380,1024],{"class":63},[49,3382,3383,3385,3387],{"class":51,"line":179},[49,3384,2941],{"class":63},[49,3386,1852],{"class":55},[49,3388,2946],{"class":63},[49,3390,3391,3393,3395,3397,3399],{"class":51,"line":191},[49,3392,2951],{"class":63},[49,3394,2954],{"class":59},[49,3396,64],{"class":63},[49,3398,2959],{"class":413},[49,3400,2962],{"class":63},[49,3402,3403,3405,3407],{"class":51,"line":197},[49,3404,2916],{"class":55},[49,3406,398],{"class":106},[49,3408,1024],{"class":63},[49,3410,3411],{"class":51,"line":203},[49,3412,2975],{"class":63},[49,3414,3415],{"class":51,"line":212},[49,3416,2980],{"class":63},[49,3418,3419,3421,3423,3425,3427,3429],{"class":51,"line":218},[49,3420,2985],{"class":59},[49,3422,2880],{"class":63},[49,3424,56],{"class":55},[49,3426,64],{"class":63},[49,3428,2994],{"class":67},[49,3430,71],{"class":63},[49,3432,3433,3435],{"class":51,"line":225},[49,3434,2890],{"class":55},[49,3436,176],{"class":63},[49,3438,3439,3441,3443,3445,3447,3449,3451],{"class":51,"line":889},[49,3440,3007],{"class":63},[49,3442,3010],{"class":59},[49,3444,3013],{"class":63},[49,3446,571],{"class":106},[49,3448,563],{"class":63},[49,3450,576],{"class":59},[49,3452,3022],{"class":63},[49,3454,3455,3457,3459],{"class":51,"line":3025},[49,3456,2941],{"class":63},[49,3458,1852],{"class":55},[49,3460,2946],{"class":63},[49,3462,3463,3465,3467,3469,3471],{"class":51,"line":3034},[49,3464,2951],{"class":63},[49,3466,2954],{"class":59},[49,3468,64],{"class":63},[49,3470,3043],{"class":413},[49,3472,2962],{"class":63},[49,3474,3475],{"class":51,"line":3048},[49,3476,2975],{"class":63},[49,3478,3479],{"class":51,"line":3053},[49,3480,2980],{"class":63},[49,3482,3483,3485,3487,3489],{"class":51,"line":3058},[49,3484,3061],{"class":59},[49,3486,2880],{"class":63},[49,3488,56],{"class":55},[49,3490,2885],{"class":63},[49,3492,3493,3495],{"class":51,"line":3070},[49,3494,2890],{"class":55},[49,3496,176],{"class":63},[49,3498,3499,3501,3503],{"class":51,"line":3077},[49,3500,3007],{"class":63},[49,3502,3082],{"class":59},[49,3504,2911],{"class":63},[49,3506,3507,3509,3511],{"class":51,"line":3087},[49,3508,2941],{"class":63},[49,3510,1852],{"class":55},[49,3512,2946],{"class":63},[49,3514,3515,3517,3519,3521,3523],{"class":51,"line":3096},[49,3516,2951],{"class":63},[49,3518,2954],{"class":59},[49,3520,64],{"class":63},[49,3522,3105],{"class":413},[49,3524,2962],{"class":63},[49,3526,3527],{"class":51,"line":3110},[49,3528,2975],{"class":63},[49,3530,3531],{"class":51,"line":3115},[49,3532,194],{"class":63},[49,3534,3535],{"class":51,"line":3120},[49,3536,2670],{"class":63},[49,3538,3539],{"class":51,"line":3125},[49,3540,215],{"class":63},[38,3542,3544],{"className":40,"code":3543,"filename":233,"language":43,"meta":44,"style":44},"const inventory = [\n  { name: \"asparagus\", type: \"vegetables\", quantity: 9 },\n  { name: \"bananas\", type: \"fruit\", quantity: 5 },\n  { name: \"goat\", type: \"meat\", quantity: 23 },\n  { name: \"cherries\", type: \"fruit\", quantity: 12 },\n  { name: \"fish\", type: \"meat\", quantity: 22 },\n];\n\nconst result = Object.groupBy(inventory, ({ quantity }) =>\n  quantity \u003C 6 ? \"restock\" : \"sufficient\",\n);\nconsole.log(result.restock);\n\u002F\u002F [{ name: \"bananas\", type: \"fruit\", quantity: 5 }]\n",[46,3545,3546,3557,3579,3597,3616,3633,3651,3655,3659,3684,3706,3710,3719],{"__ignoreMap":44},[49,3547,3548,3550,3553,3555],{"class":51,"line":52},[49,3549,240],{"class":55},[49,3551,3552],{"class":106}," inventory",[49,3554,246],{"class":55},[49,3556,1966],{"class":63},[49,3558,3559,3562,3565,3568,3571,3574,3576],{"class":51,"line":74},[49,3560,3561],{"class":63},"  { name: ",[49,3563,3564],{"class":413},"\"asparagus\"",[49,3566,3567],{"class":63},", type: ",[49,3569,3570],{"class":413},"\"vegetables\"",[49,3572,3573],{"class":63},", quantity: ",[49,3575,323],{"class":106},[49,3577,3578],{"class":63}," },\n",[49,3580,3581,3583,3586,3588,3591,3593,3595],{"class":51,"line":89},[49,3582,3561],{"class":63},[49,3584,3585],{"class":413},"\"bananas\"",[49,3587,3567],{"class":63},[49,3589,3590],{"class":413},"\"fruit\"",[49,3592,3573],{"class":63},[49,3594,302],{"class":106},[49,3596,3578],{"class":63},[49,3598,3599,3601,3604,3606,3609,3611,3614],{"class":51,"line":130},[49,3600,3561],{"class":63},[49,3602,3603],{"class":413},"\"goat\"",[49,3605,3567],{"class":63},[49,3607,3608],{"class":413},"\"meat\"",[49,3610,3573],{"class":63},[49,3612,3613],{"class":106},"23",[49,3615,3578],{"class":63},[49,3617,3618,3620,3623,3625,3627,3629,3631],{"class":51,"line":145},[49,3619,3561],{"class":63},[49,3621,3622],{"class":413},"\"cherries\"",[49,3624,3567],{"class":63},[49,3626,3590],{"class":413},[49,3628,3573],{"class":63},[49,3630,2371],{"class":106},[49,3632,3578],{"class":63},[49,3634,3635,3637,3640,3642,3644,3646,3649],{"class":51,"line":167},[49,3636,3561],{"class":63},[49,3638,3639],{"class":413},"\"fish\"",[49,3641,3567],{"class":63},[49,3643,3608],{"class":413},[49,3645,3573],{"class":63},[49,3647,3648],{"class":106},"22",[49,3650,3578],{"class":63},[49,3652,3653],{"class":51,"line":179},[49,3654,1321],{"class":63},[49,3656,3657],{"class":51,"line":191},[49,3658,222],{"emptyLinePlaceholder":221},[49,3660,3661,3663,3665,3667,3669,3672,3675,3678,3681],{"class":51,"line":197},[49,3662,240],{"class":55},[49,3664,755],{"class":106},[49,3666,246],{"class":55},[49,3668,938],{"class":63},[49,3670,3671],{"class":59},"groupBy",[49,3673,3674],{"class":63},"(inventory, ({ ",[49,3676,3677],{"class":67},"quantity",[49,3679,3680],{"class":63}," }) ",[49,3682,3683],{"class":55},"=>\n",[49,3685,3686,3689,3691,3694,3696,3699,3701,3704],{"class":51,"line":203},[49,3687,3688],{"class":63},"  quantity ",[49,3690,113],{"class":55},[49,3692,3693],{"class":106}," 6",[49,3695,2069],{"class":55},[49,3697,3698],{"class":413}," \"restock\"",[49,3700,2356],{"class":55},[49,3702,3703],{"class":413}," \"sufficient\"",[49,3705,1647],{"class":63},[49,3707,3708],{"class":51,"line":212},[49,3709,265],{"class":63},[49,3711,3712,3714,3716],{"class":51,"line":218},[49,3713,2465],{"class":63},[49,3715,2468],{"class":59},[49,3717,3718],{"class":63},"(result.restock);\n",[49,3720,3721],{"class":51,"line":225},[49,3722,3723],{"class":228},"\u002F\u002F [{ name: \"bananas\", type: \"fruit\", quantity: 5 }]\n",[16,3725,3726],{},"This wrapper gives you a clean API for localStorage operations and automatically handles all the JSON parsing\u002Fserialization.",[11,3728,3730],{"id":3729},"conclusion","🏁 Conclusion",[16,3732,3733],{},"These snippets aren’t just about writing less code – they’re about writing smarter code. Each one solves a common JavaScript challenge in a clean, maintainable way. While these snippets are powerful, remember that readability should always come first. If a single line of code makes your code harder to understand, split it into multiple lines.",[1626,3735,3736],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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);}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":44,"searchDepth":74,"depth":74,"links":3738},[3739,3740,3741],{"id":13,"depth":74,"text":14},{"id":24,"depth":74,"text":25},{"id":3729,"depth":74,"text":3730},"javascript","Minify Javascript code with new commands","md",{"src":3746,"alt":3747},"https:\u002F\u002Fraw.githubusercontent.com\u002Ffullstack-core\u002Fblog\u002Frefs\u002Fheads\u002Fmain\u002Fblog\u002Fcover\u002F9-lines-of-javascript-replace-50-lines-of-code.webp","JavaScript Array Methods",{},"\u002Fposts\u002Fjavascript\u002F9-lines-of-tips","2024-12-30",{"title":5,"description":3743},{"loc":3749,"lastmod":3750},"posts\u002Fjavascript\u002F9-lines-of-tips",[3742],false,"Co4V-Ozvi0BVX0IpG1vhMFIP6Wu--YuOY9SO9TwA948",[3758,3874,3882,4020],{"title":3759,"icon":3760,"path":3761,"stem":3762,"children":3763,"page":3755},"Cheatsheets","fluent-color:paw-16","\u002Fcheatsheets","cheatsheets",[3764,3769,3774,3779,3784,3789,3794,3799,3804,3809,3814,3819,3824,3829,3834,3839,3844,3849,3854,3859,3864,3869],{"title":3765,"path":3766,"stem":3767,"icon":3768},"Bash","\u002Fcheatsheets\u002Fbash","cheatsheets\u002Fbash","material-icon-theme:powershell",{"title":3770,"path":3771,"stem":3772,"icon":3773},"CSS","\u002Fcheatsheets\u002Fcss","cheatsheets\u002Fcss","vscode-icons:file-type-css2",{"title":3775,"path":3776,"stem":3777,"icon":3778},"Docker","\u002Fcheatsheets\u002Fdocker","cheatsheets\u002Fdocker","vscode-icons:file-type-docker2",{"title":3780,"path":3781,"stem":3782,"icon":3783},"Git","\u002Fcheatsheets\u002Fgit","cheatsheets\u002Fgit","devicon:git",{"title":3785,"path":3786,"stem":3787,"icon":3788},"Golang","\u002Fcheatsheets\u002Fgo","cheatsheets\u002Fgo","material-icon-theme:go",{"title":3790,"path":3791,"stem":3792,"icon":3793},"HTML","\u002Fcheatsheets\u002Fhtml","cheatsheets\u002Fhtml","material-icon-theme:html",{"title":3795,"path":3796,"stem":3797,"icon":3798},"JavaScript","\u002Fcheatsheets\u002Fjavascript","cheatsheets\u002Fjavascript","material-icon-theme:javascript",{"title":3800,"path":3801,"stem":3802,"icon":3803},"Latex","\u002Fcheatsheets\u002Flatex","cheatsheets\u002Flatex","material-icon-theme:latexmk",{"title":3805,"path":3806,"stem":3807,"icon":3808},"Linux","\u002Fcheatsheets\u002Flinux","cheatsheets\u002Flinux","devicon:linux",{"title":3810,"path":3811,"stem":3812,"icon":3813},"Markdown","\u002Fcheatsheets\u002Fmarkdown","cheatsheets\u002Fmarkdown","material-icon-theme:markdown",{"title":3815,"path":3816,"stem":3817,"icon":3818},"Mongo","\u002Fcheatsheets\u002Fmongo","cheatsheets\u002Fmongo","devicon:mongodb",{"title":3820,"path":3821,"stem":3822,"icon":3823},"Nest","\u002Fcheatsheets\u002Fnest","cheatsheets\u002Fnest","material-icon-theme:nest",{"title":3825,"path":3826,"stem":3827,"icon":3828},"Next","\u002Fcheatsheets\u002Fnext","cheatsheets\u002Fnext","logos:nextjs-icon",{"title":3830,"path":3831,"stem":3832,"icon":3833},"Node","\u002Fcheatsheets\u002Fnode","cheatsheets\u002Fnode","material-icon-theme:nodejs",{"title":3835,"path":3836,"stem":3837,"icon":3838},"Nuxt","\u002Fcheatsheets\u002Fnuxt","cheatsheets\u002Fnuxt","material-icon-theme:nuxt",{"title":3840,"path":3841,"stem":3842,"icon":3843},"React","\u002Fcheatsheets\u002Freact","cheatsheets\u002Freact","material-icon-theme:react",{"title":3845,"path":3846,"stem":3847,"icon":3848},"Redis","\u002Fcheatsheets\u002Fredis","cheatsheets\u002Fredis","vscode-icons:folder-type-redis-opened",{"title":3850,"path":3851,"stem":3852,"icon":3853},"SQL","\u002Fcheatsheets\u002Fsql","cheatsheets\u002Fsql","material-icon-theme:database",{"title":3855,"path":3856,"stem":3857,"icon":3858},"Typescript","\u002Fcheatsheets\u002Ftypescript","cheatsheets\u002Ftypescript","material-icon-theme:typescript",{"title":3860,"path":3861,"stem":3862,"icon":3863},"Vercel","\u002Fcheatsheets\u002Fvercel","cheatsheets\u002Fvercel","vscode-icons:file-type-light-vercel",{"title":3865,"path":3866,"stem":3867,"icon":3868},"Vue","\u002Fcheatsheets\u002Fvue","cheatsheets\u002Fvue","material-icon-theme:vue",{"title":3870,"path":3871,"stem":3872,"icon":3873},"Windows","\u002Fcheatsheets\u002Fwindow","cheatsheets\u002Fwindow","material-icon-theme:folder-windows",{"title":3875,"icon":3760,"path":3876,"stem":3877,"children":3878,"page":3755},"Interviews","\u002Finterviews","interviews",[3879],{"title":3790,"path":3880,"stem":3881,"icon":3793},"\u002Finterviews\u002Fhtml","interviews\u002Fhtml",{"title":3883,"icon":3884,"path":3885,"stem":2037,"children":3886,"page":3755},"Posts","fluent-color:data-bar-vertical-ascending-24","\u002Fposts",[3887,3896,3912,3938,3946,3956,3965,3974,3984,4010],{"title":3888,"icon":3853,"redirect":3889,"path":3890,"stem":3891,"children":3892,"page":3755},"Database","\u002Fposts\u002Fdatabase\u002Freplication-strategy","\u002Fposts\u002Fdatabase","posts\u002Fdatabase",[3893],{"title":3894,"path":3889,"stem":3895,"icon":6},"Database Replication strategy in large systems","posts\u002Fdatabase\u002Freplication-strategy",{"title":3775,"icon":3778,"redirect":3897,"path":3898,"stem":3899,"children":3900,"page":3755},"\u002Fposts\u002Fdocker\u002Fdocker-commands","\u002Fposts\u002Fdocker","posts\u002Fdocker",[3901,3904,3908],{"title":3902,"path":3897,"stem":3903,"icon":6},"Docker commands essentials","posts\u002Fdocker\u002Fdocker-commands",{"title":3905,"path":3906,"stem":3907,"icon":6},"Some useful Dockerfile templates","\u002Fposts\u002Fdocker\u002Fdockerfile-templates","posts\u002Fdocker\u002Fdockerfile-templates",{"title":3909,"path":3910,"stem":3911,"icon":6},"Setup Docker environment on Windows","\u002Fposts\u002Fdocker\u002Fsetup-docker-on-window","posts\u002Fdocker\u002Fsetup-docker-on-window",{"title":3913,"icon":3914,"redirect":3915,"path":3916,"stem":3917,"children":3918,"page":3755},"Git & GitHub","material-icon-theme:git","\u002Fposts\u002Fgit\u002Fbrightly-decorate-graph","\u002Fposts\u002Fgit","posts\u002Fgit",[3919,3922,3926,3930,3934],{"title":3920,"path":3915,"stem":3921,"icon":6},"Brightly decorate your GitHub Graph","posts\u002Fgit\u002Fbrightly-decorate-graph",{"title":3923,"path":3924,"stem":3925,"icon":6},"Download a specific folder on GitHub repository","\u002Fposts\u002Fgit\u002Fdownload-specific-folder","posts\u002Fgit\u002Fdownload-specific-folder",{"title":3927,"path":3928,"stem":3929,"icon":6},"Syncing Git Tags across to other repositories","\u002Fposts\u002Fgit\u002Fsyncing-tags-across-repositories","posts\u002Fgit\u002Fsyncing-tags-across-repositories",{"title":3931,"path":3932,"stem":3933,"icon":6},"Unlocking GitHub Achievement badges","\u002Fposts\u002Fgit\u002Funlocking-achievement-badges","posts\u002Fgit\u002Funlocking-achievement-badges",{"title":3935,"path":3936,"stem":3937,"icon":6},"Essential Git commands every developer should master","\u002Fposts\u002Fgit\u002Fuseful-commands-like-pro","posts\u002Fgit\u002Fuseful-commands-like-pro",{"title":3785,"icon":3788,"redirect":3939,"path":3940,"stem":3941,"children":3942,"page":3755},"\u002Fposts\u002Fgolang\u002Foptimizing-performance-with-pgo","\u002Fposts\u002Fgolang","posts\u002Fgolang",[3943],{"title":3944,"path":3939,"stem":3945,"icon":6},"Optimizing Performance in Go Applications with PGO","posts\u002Fgolang\u002Foptimizing-performance-with-pgo",{"title":3795,"icon":3947,"redirect":3749,"path":3948,"stem":3949,"children":3950,"page":3755},"vscode-icons:file-type-js","\u002Fposts\u002Fjavascript","posts\u002Fjavascript",[3951,3952],{"title":5,"path":3749,"stem":3753,"icon":6},{"title":3953,"path":3954,"stem":3955,"icon":6},"Javascript Promises - Specific functions and use cases","\u002Fposts\u002Fjavascript\u002Fpromises-cheatsheet","posts\u002Fjavascript\u002Fpromises-cheatsheet",{"title":3830,"icon":3957,"redirect":3958,"path":3959,"stem":3960,"children":3961,"page":3755},"material-icon-theme:nodejs-alt","\u002Fposts\u002Fnodejs\u002Fevent-loop","\u002Fposts\u002Fnodejs","posts\u002Fnodejs",[3962],{"title":3963,"path":3958,"stem":3964,"icon":6},"Secret about Event Loop flow in Nodejs","posts\u002Fnodejs\u002Fevent-loop",{"title":3835,"icon":3966,"redirect":3967,"path":3968,"stem":3969,"children":3970,"page":3755},"vscode-icons:file-type-nuxt","\u002Fposts\u002Fnuxt\u002Fenable-pwa-in-nuxt","\u002Fposts\u002Fnuxt","posts\u002Fnuxt",[3971],{"title":3972,"path":3967,"stem":3973,"icon":6},"Enable PWA and Service Worker in Nuxt","posts\u002Fnuxt\u002Fenable-pwa-in-nuxt",{"title":3975,"icon":3976,"redirect":3977,"path":3978,"stem":3979,"children":3980,"page":3755},"Performance","emojione:rocket","\u002Fposts\u002Fperformance\u002Fbackground-image-injection-problem","\u002Fposts\u002Fperformance","posts\u002Fperformance",[3981],{"title":3982,"path":3977,"stem":3983,"icon":6},"Background-Image injection problem in UX","posts\u002Fperformance\u002Fbackground-image-injection-problem",{"title":3985,"icon":3986,"redirect":3987,"path":3988,"stem":3989,"children":3990,"page":3755},"Tutorial","fluent-color:book-open-lightbulb-24","\u002Fposts\u002Ftutorial\u002Fclassification-and-functionality-of-the-servers","\u002Fposts\u002Ftutorial","posts\u002Ftutorial",[3991,3994,3998,4002,4006],{"title":3992,"path":3987,"stem":3993,"icon":6},"Classification and functionality of the servers","posts\u002Ftutorial\u002Fclassification-and-functionality-of-the-servers",{"title":3995,"path":3996,"stem":3997,"icon":6},"What is the difference between localhost and 127.0.0.1?","\u002Fposts\u002Ftutorial\u002Fdifferent-between-localhost-and-127-0-0-1","posts\u002Ftutorial\u002Fdifferent-between-localhost-and-127-0-0-1",{"title":3999,"path":4000,"stem":4001,"icon":6},"8 essential network protocols every programmer should know","\u002Fposts\u002Ftutorial\u002Fessential-network-protocols","posts\u002Ftutorial\u002Fessential-network-protocols",{"title":4003,"path":4004,"stem":4005,"icon":6},"Pre rels in header link tag - SEO technique enhancement","\u002Fposts\u002Ftutorial\u002Fpre-rels-in-header-link-tag","posts\u002Ftutorial\u002Fpre-rels-in-header-link-tag",{"title":4007,"path":4008,"stem":4009,"icon":6},"Better code with SOLID principles","\u002Fposts\u002Ftutorial\u002Fwhat-is-solid","posts\u002Ftutorial\u002Fwhat-is-solid",{"title":4011,"icon":4012,"redirect":4013,"path":4014,"stem":4015,"children":4016,"page":3755},"UI\u002FUX","devicon:figma","\u002Fposts\u002Fuiux\u002Fcommon-button-mistake","\u002Fposts\u002Fuiux","posts\u002Fuiux",[4017],{"title":4018,"path":4013,"stem":4019,"icon":6},"Common Button Mistake in UI\u002FUX","posts\u002Fuiux\u002Fcommon-button-mistake",{"title":4021,"icon":4022,"path":4023,"stem":4024,"children":4025,"page":3755},"Templates","fluent-color:data-pie-24","\u002Ftemplates","templates",[4026,4029,4032,4035,4038],{"title":3785,"path":4027,"stem":4028,"icon":3788},"\u002Ftemplates\u002Fgo","templates\u002Fgo",{"title":3825,"path":4030,"stem":4031,"icon":3828},"\u002Ftemplates\u002Fnext","templates\u002Fnext",{"title":3835,"path":4033,"stem":4034,"icon":3838},"\u002Ftemplates\u002Fnuxt","templates\u002Fnuxt",{"title":3840,"path":4036,"stem":4037,"icon":3843},"\u002Ftemplates\u002Freact","templates\u002Freact",{"title":3865,"path":4039,"stem":4040,"icon":3868},"\u002Ftemplates\u002Fvue","templates\u002Fvue",[4042,4043],{"title":3944,"path":3939,"stem":3945,"children":-1},{"title":3953,"path":3954,"stem":3955,"children":-1},[4045],{"_path":3954,"title":3953,"description":4046,"image":4047,"category":3742,"tags":4050,"duration":197,"publishedAt":4051},"Do you know everything about Promises? What is the difference between them?",{"src":4048,"alt":4049},"https:\u002F\u002Fraw.githubusercontent.com\u002Ffullstack-core\u002Fblog\u002Frefs\u002Fheads\u002Fmain\u002Fblog\u002Fcover\u002Fjavascript-promises-cheatsheet.webp","JavaScript Promises Cheatsheet",[3742],"2025-05-14"]