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