5 Super Useful JavaScript Cheatsheet

1. Array Methods

[1, 2, 3].length; // 3
[1, 2, 3].push(4); // [1, 2, 3, 4]
[1, 2, 3].unshift(0); // [0, 1, 2, 3]
[1, 2, 3].pop(); // [1, 2]
[1, 2, 3].shift(); // [2, 3]
[1, 2, 3].at(2); // 3
[1, 2, 3].indexOf(3); // 2
[1, 2, 3].includes(3); // true
[1, 2, 3].map(num => num * 2); // [2, 4, 6]
[1, 2, 3].filter((num) => num > 1); // [2, 3]
[1, 2, 3].every((num) => num > 0); // true
[1, 2, 3].some((num) => num > 2); // true
[1, 2, 3].fill(0); // [0, 0, 0]
[1, 2, 3].reduce((acc, num) => acc + num, 0); // 6
[1, 2, 3].concat([4, 5]); // [1, 2, 3, 4, 5]
[1, 2, 3].reverse(); // [3, 2, 1]
[3, 2, 1].sort(); // [1, 2, 3]
[1, 2, 3].join("-"); // "1-2-3"
[1, 2, 3].flat(); // [1, 2, 3]
[1, 2, 3].find((num) => num == 1); // 1
[1, 2, 3].findIndex((num) => num == 2); // 1
[1, 2, 3].toString(); // "1,2,3"
[1, 2, 3].toLocaleString(); // "1,2,3"
[1, 2, 3].slice(1, 2); // [2]
[1, 2, 3].splice(1, 1, "a"); // [1, 'a', 3]
Array.isArray([1, 2, 3]); // true
Array.from("123"); // ['1', '2', '3']
    

2. String Methods

"JavaScript".length; // 10
"JavaScript"[2]; // 'v'
"JavaScript".charAt(2); // 'v'
"JavaScript".charCodeAt(2); // 118
"JavaScript".indexOf("S"); // 4
"JavaScript".toLowerCase(); // 'javascript'
"JavaScript".toUpperCase(); // 'JAVASCRIPT'
"JavaScript".slice(2, 5); // 'vas'
"JavaScript".substring(2, 5); // 'vas'
"JavaScript".substr(2, 2); // 'va'
"JavaScript".concat(" Dev"); // 'JavaScript Dev'
"JavaScript Dev".split(" "); // ['JavaScript', 'Dev']
"JavaScript Dev".includes("Dev"); // true
"Java Dev".replace("Dev", "JS"); // 'Java JS'
"Java Dev".replaceAll("Dev", "JS"); // 'Java JS'
" JavaScript Dev ".trim(); // 'JavaScript Dev'
" JavaScript Dev ".trimStart(); // 'JavaScript Dev'
" JavaScript Dev ".trimEnd(); // ' JavaScript Dev'
"Dev".padStart(10, "*"); // '*******Dev'
"Dev".padEnd(10, "*"); // 'Dev*******'
"JavaScript Dev".startsWith("Java"); // true
"JavaScript Dev".endsWith("Dev"); // true
"JavaScript Dev".repeat(3); // 'JavaScript DevJavaScript DevJavaScript Dev'
"JavaScript Dev".indexOf("JavaScript"); // 0
"JavaScript Dev".lastIndexOf("Dev"); // 11
"JavaScript Dev".search("Dev"); // 11
"JavaScript Dev".includes("Dev"); // true
    

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 01:10:00 GMT+0200
// year, month, day, hour, min, sec, misc
    

Conversions

date.toString();
// Tue Apr 25 2023 21:27:35 GMT+0200 (Central European Summer Time)
date.toDateString();
// Tue Apr 25 2023
date.toTimeString();
// 21:27:35 GMT+0200 (Central European Summer Time)
date.toISOString();
// 2023-04-25T19:27:35.363Z
date.toLocaleString();
// 4/25/2023, 9:27:35 PM
date.toLocaleDateString();
// 4/25/2023
date.toLocaleTimeString();
// 9:27:35 PM
date.getTime();
// 1682452895363
    

Get Methods

date.getFullYear();    // 2023
date.getMonth();    // 3
date.getDate();    // 25
date.getDay();    // 2
date.getHours();    // 21
date.getMinutes();    // 27
date.getSeconds();    // 35
date.getMilliseconds();    // 363
date.getTime();    // 1682452895363
date.getTimezoneOffset();    // -120
    

Set Methods

date.setFullYear(2023);    // set year
date.setMonth(11);    // set month
date.setDate(1);    // set date
date.setHours(10);    // set hours
date.setMinutes(20);    // set minutes
date.setSeconds(20);    // set seconds
date.setMilliseconds(20);    // set milliseconds
date.setTime(1680153156131);    // set time (milliseconds since Jan 1, 1970)
    

4. DOM Methods

Accessing Elements

document.getElementById("id"); // find element by its id
document.getElementsByClassName("class"); // find elements by class
document.getElementsByTagName("tag"); // find elements by tag name
document.querySelector("selector"); // find first element matching selector
document.querySelectorAll("selector"); // find all elements matching selector
    

Creating/Appending Elements

document.createElement("name"); // create element node
document.createTextNode("text"); // create text node
elem.appendChild(child); // append child to element
elem.removeChild(child); // remove child from element
elem.replaceChild(newChild, oldChild); // replace child with new child
    

Modifying Elements

elem.innerHTML = "<h2>outerHTML</h2>"; // set HTML
elem.innerText = "inner text"; // set inner text
elem.textContent = "text content"; // set text content
elem.style.color = "blue"; // set style
elem.outerHTML = "<p>learn with <strong>Athreos</strong></p>"; // replace HTML
			

Accessing Parent, Children, Siblings

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

elem.getAttribute("attr"); // get attribute value
elem.setAttribute("attr", "value"); // set attribute value
elem.removeAttribute("attr"); // remove attribute
    

Modifying Element Classes

elem.classList.add("my-class"); // add class
elem.classList.remove("my-class"); // remove class
elem.classList.toggle("my-class"); // toggle class
elem.classList.contains("my-class"); // check for class

5. DOM Events

Event Listeners

document.addEventListener('click', (event) => {
	console.log('Click Event', event);
});
// unregister event listener
document.removeEventListener('click', (event) => {
	console.log('Unregistered Event', event);
});

Keyboard Events

keydown // key is pressed down
keyup // key is released

Form Events

blur // element has lost focus
change // value of <input>, <select>, or <textarea> is modified
focus // element has received focus
select // text has been selected in an element
submit // fires on <form> when submitted
reset // fires when form is reset

Mouse Events

click // left mouse button click
dblclick // left mouse button double click
mousedown // pointing device button is pressed when inside element
mouseup // mouse button released over an element
mouseover // mouse pointer enters an element
mousemove // mouse pointer moves over an element

Window Events

abort // resource was not fully loaded, but not due to an error
error // error event occurs if resource failed to load or can’t be used
load // document has finished loading
unload // document is being unloaded
scroll // document is scrolled
resize // window is resized

23 February Tags : coding , javascript