5 Super Useful JS CheatSheet1.Array Methods 1 [1, 2, 3].length; // 3 2 [1, 2, 3].push(4); // [1, 2, 3, 4] * 3 [1, 2, 3].unshift(@); // [@, 1, 2, 3] * 4 [1, 2, 3].pop(); // [1, 2] 5 [1, 2, 3].shift(); // [2, 3] * 6 [1, 2, 3].at(2)5 // 3 7 [1, 2, 3].indexoF(3); // 2 8 [1, 2, 3].includes(3); // true 9 [1, 2, 3].map((num) => num * 2); // [2, 4, 6] 10 [1, 2, 3].filter((num) => num > 1); // [2, 3] ii [1, 2, 3]-every((num) => num > @); // true 12 [1, 2, 3].some((num) => num > 2); // true 13 [1, 2, 3].fi11(@); // [0, @, 2] 14 [1, 2, 3].reduce((acc, num) => acc + num, @); // 6 15 [1, 2, 3].concat([4, 5]); // [1, 2, 3, 4, 5] 16 [1, 2, 3].reverse(); // [3, 2, 1] 17 [3, 2, 1].sort(); // [1, 2, 3] 18 [1, 2, 3].join("-"); // "1-2-3" 19 [1, 2, 3].flat(); // [1, 2, 3] PL Pe Pe CC) ee Pe SRP SEES Peet rc CC meee 22 [4, 2, 3].toString(); // "1,2,3" 23 [1, 2, 3].toLocaleString(); // "1,2,3" 24 [1, 2, 3].slice(1, 2); // [2] 25 [1, 2, 3].splice(1, 1, "a"); // [1, ‘a’, 3] 26 Array.isArray([1, 2, 3]); // true 27. Array.from("123"); // [‘1', '2', '3'] EW Sr tela to know2.Array Methods ia) SURPLUS ans cat ee) PLCs 2) eee ERE Sae rac) FE CPL ICs ets ne aC EE) CPL ap amet PES 6 “JavaScript” .toLowerCase(); //? ‘javascript’ Pe ato OE es ERED sets eC oe CMEC Coc ane ts Co eee SCRE ae ant 1) ne SEMEL ao 1G FCs ae SORE EV ae ae) ECG FR | 13. “JavaScript Dev".includes("Dev"); //? true SCRE RUS) Ca aCe SEER aes Seve Ga FELL ee CRP C ae Tale OEE UC ast ta tO ea ae 18 “ JavaScript Dev “.trimEnd(); //? * JavaScript Dev" 19 "Dev".padstart(1e, "*")3 //? "****#*+Dev" 20 “Dev".padEnd(10, “*"); //? ‘Dev***###*" MPC ae eee eer Ge Fae 22 “JavaScript Dev" .endsWith("Dev"); //? true 23 “JavaScript Dev".repeat(3)3 //? ‘JavaScript DevJavaScript DevJavaScript Dev’ 24 “JavaScript Dev". indexof ("JavaScript"); //? @ 25 “JavaScript Dev".lastIndexOF("Dev")3 //? 11 26 “JavaScript Dev".search("Dev"); //? 11 “JavaScript Dev".includes("Dev"); //? true EW Sr tela to know3.Date Methods Initialization const date = new Date(); //? 2023-04-25T19:27:35.363Z new Date(1682452894553) ; //? Sun Apr 25 2023 00:00:00 GMT+0200 new Date("2023-04-25"); //? Sun Apr 25 2023 00:00:00 GMT+0200 new Date("2023-04-25T01:10:00"); //? Sun Apr 25 2023 01:10:00 GMT+0200 new Date(2023, 3, 25, 1, 10, 0, 0); //? Tue Apr 25 2023 61:10:00 GMT+0200 // year, month, day, hour, min, sec, misc roe ee oy BR aS) cr iy Sr | tela to know OgConversions eo5o 1 date.toString(); PE ie ye SEP eee Le Ce Pe) Pee meorie se tO 4 //? Tue Apr 25 2023 5 date.toTimeString(); 6 7 8 9 Ee er ee eae aE) date. toIsostring(); //? 2023-@4-25T19:27:35.363Z Coe tees a0 SCM PLP Pe 11 date.toLocaleDatestring(); SURE PLTEX YE] SER Re eS U0} ee ee 15 date.getTime(); SCEPC PLEPL Lee) | EW Sr tela to knowCOMNDAUAWNE a2) Get Methods Core Cire Coie ee Eee Crees Coe cree Che | ECV post date. getFullYear(); //? 2023 Creer @ ka! date.getDate(); //? 25 date. getDay(); 1/2? 2 date. getHours(); ast date. getMinutes(); ka date. getSeconds(); //? 35 (Fhe ee ae SLO kee) date.getTime(); //? 1682452895363 date.getTimezoneOffset(); //? -120 T= mY C-tnatolo esa n CLES en Freee e OS //? set month setDate(1); eae eee Te an Seer te ea setSeconds(20); ECU Reb eel eee posse Ly . SetTime(1680153156131); //? set time (milliseconds since Jan 1, 1970) Sr >») to know4.DOM Methods Accessing Elements document.getElementById("id"); //? find element by its id document . getElementsByClassName("class"); //? find elements by class CUA a eee Lac document .querySelector("selector”); //? find first element matching selector document .querySelectorAll("selector"); //? find all elements matching selector Cees Creating/Appending Elements (x Oe ) 1 document.createElement("name"); //? create element node 2 document .createTextNode("text"); //? create text node 3 elem.appendChild(child); //? append child to element 4 elem.removeChild(child); //? remove child from element elem.replaceChild(newChild, oldchild); //? replace child with new child Modifying Elements ix elem. innerHTML SOU cae Smee cad cers Ces Cs Cele

0uterHTML

"5 //? set HTML inner text"; //? set inner text ee eee cd Stee aes) POORER ess Ce ed ea to] Sa LT rt | EW Sr >» tela to knowAccessing Parent, Children, Siblings OC ata Satay elem.parentElement; //? access parent element elem.children; //? access element children elem.firstElementChild; //? access first child elem.lastElementChild; //? access last child elem.nextElementSibling; //? access next sibling elem.previousElementSibling; //? access previous sibling Modifying Attributes ee0e 1 elem.getAttribute("attr"); //? get attribute value 2 elem.setAttribute("attr", "value"); //? set attribute value 3 elem.removeAttribute("attr"); //? remove attribute Modifying Element Classes eee 1 elem.classList.add("my-class"); //? add class 2 elem.classList.remove("my-class"); //? remove class 3 elem.classList.toggle("my-class"); //? toggle class 4 elem.classList.contains("my-class"); //? check for class EW Sr tela to know5.DOM Events Event Listeners eee 1 document.addEventListener(‘click’, (event) => { ya console.log( ‘Click Event’, event); Eee oF ry 5 // unregister event listener 6 document.removeEventListener(‘click', (event) => { 7 console.log( ‘Unregistered Event’, event); eo cr iy Sr R post to know »eum cnc ted eames Meu stead Ponte ern Ten) ioe cu ag reteset crtes aur urns Drei nee Ue Cas Dre ae eC Er ters ce CUCL OR Tue Enea Cirem nace cea) ec rege ina ts) eazD Cooma een ec i4 Com eae) Cv near) window is resized Sr to know