JavaScript Cheat Sheet: A Comprehensive List for Quick Reference
Welcome to the “JavaScript Cheat Sheet: A Comprehensive List for Quick Reference.” This cheat sheet serves as a valuable resource for both beginners and experienced developers. It provides a comprehensive collection of JavaScript syntax, functions, methods, and best practices.
With this cheat sheet, you can quickly find and review essential concepts like variables, data types, control structures, functions, arrays, objects, DOM manipulation, and more. Whether you’re building websites, web applications, or server-side applications with Node.js, this cheat sheet will be your handy reference. It’s concise, visually appealing, and designed for easy comprehension. Explore the “JavaScript Cheat Sheet” and enhance your JavaScript coding skills.
Table of Contents
- Basics
- Variables
- Data Types
- Strings
- Numbers and Math
- Arrays
- Dates
- JSON
- Regular Expressions
- If-Else
- Loops
- Global Functions
- Events
- Promises
- Errors
1. Basics
On page script:
1 2 3 4 | <script type="text/javascript"> ... ... </script> |
Include external JS file:
1 | <script src="filename.js"></script> |
Delay – 1 second timeout:
1 2 3 | setTimeout(function () { }, 1000); |
Functions:
1 2 3 4 | function addNumbers(a, b) { return a + b; } x = addNumbers(1, 2); |
Edit DOM element:
1 | document.getElementById("elementID").innerHTML = ""; |
Output:
1 2 3 4 5 | console.log(a); // write to the browser console document.write(a); // write to the HTML alert(a); // output in an alert box confirm("Really?"); // yes/no dialog, returns true/false depending on user click prompt("Your age?","0"); // input dialog. Second argument is the initial value |
Comments:
1 2 3 4 | /* Multi line comment */ // One line comment |
2. Variables
1 2 3 4 5 6 7 8 9 10 11 | var a; // variable var b = "init"; // string var c = "Hi" + " " + "Joe"; // = "Hi Joe" var d = 1 + 2 + "3"; // = "33" var e = [2,3,5,8]; // array var f = false; // boolean var g = /()/; // RegEx var h = function(){}; // function object const PI = 3.14; // constant var a = 1, b = 2, c = a + b; // one line let z = 'zzz'; // block scope local variable |
Strict mode:
1 2 | "use strict"; // Use strict mode to write secure code x = 1; // Throws an error because variable is not declared |
Values:
1 2 3 4 | false, true // boolean 18, 3.14, 0b10011, 0xF6, NaN // number "flower", 'John' // string undefined, null , Infinity // special |
Operators:
1 2 3 4 | a = b + c - d; // addition, substraction a = b * (c / d); // multiplication, division x = 100 % 48; // modulo. 100 / 48 remainder = 4 a++; b--; // postfix increment and decrement |
Bitwise operators:
1 2 3 4 5 6 7 | & AND 5 & 1 (0101 & 0001) 1 (1) | OR 5 | 1 (0101 | 0001) 5 (101) ~ NOT ~ 5 (~0101) 10 (1010) ^ XOR 5 ^ 1 (0101 ^ 0001) 4 (100) << left shift 5 << 1 (0101 << 1) 10 (1010) >> right shift 5 >> 1 (0101 >> 1) 2 (10) >>> zero fill right shift 5 >>> 1 (0101 >>> 1) 2 (10) |
Arithmetic:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | a * (b + c) // grouping person.age // member person[age] // member !(a == b) // logical not a != b // not equal typeof a // type (number, object, function...) x << 2 x >> 3 // minary shifting a = b // assignment a == b // equals a != b // unequal a === b // strict equal a !== b // strict unequal a < b a > b // less and greater than a <= b a >= b // less or equal, greater or eq a += b // a = a + b (works with - * %...) a && b // logical and a || b // logical or |
3. Data Types
1 2 3 4 5 6 7 | var age = 18; // number var name = "Jane"; // string var name = {first:"Jane", last:"Doe"}; // object var truth = false; // boolean var sheets = ["HTML","CSS","JS"]; // array var a; typeof a; // undefined var a = null; // value null |
Objects:
1 2 3 4 5 6 7 8 9 10 11 12 | var student = { // object name firstName:"Jane", // list of properties and values lastName:"Doe", age:18, height:170, fullName: function() { // object function return this.firstName + " " + this.lastName; } }; student.age = 19; // setting value student[age]++; // incrementing name = student.fullName(); // call object function |
4. Strings
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | var abc = "abcdefghijklmnopqrstuvwxyz"; var esc = 'I don\'t \n know'; // \n new line var len = abc.length; // string length abc.indexOf("lmno"); // find substring, -1 if doesn't contain abc.lastIndexOf("lmno"); // last occurance abc.slice(3, 6); // cuts out "def", negative values count from behind abc.replace("abc","123"); // find and replace, takes regular expressions abc.toUpperCase(); // convert to upper case abc.toLowerCase(); // convert to lower case abc.concat(" ", str2); // abc + " " + str2 abc.charAt(2); // character at index: "c" abc[2]; // unsafe, abc[2] = "C" doesn't work abc.charCodeAt(2); // character code at index: "c" -> 99 abc.split(","); // splitting a string on commas gives an array abc.split(""); // splitting on characters 128.toString(16); // number to hex(16), octal (8) or binary (2) |
5. Numbers and Math
1 2 3 4 5 6 7 8 9 10 11 12 13 | var pi = 3.141; pi.toFixed(0); // returns 3 pi.toFixed(2); // returns 3.14 - for working with money pi.toPrecision(2) // returns 3.1 pi.valueOf(); // returns number Number(true); // converts to number Number(new Date()) // number of milliseconds since 1970 parseInt("3 months"); // returns the first number: 3 parseFloat("3.5 days"); // returns 3.5 Number.MAX_VALUE // largest possible JS number Number.MIN_VALUE // smallest possible JS number Number.NEGATIVE_INFINITY// -Infinity Number.POSITIVE_INFINITY// Infinity |
Math:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | var pi = Math.PI; // 3.141592653589793 Math.round(4.4); // = 4 - rounded Math.round(4.5); // = 5 Math.pow(2,8); // = 256 - 2 to the power of 8 Math.sqrt(49); // = 7 - square root Math.abs(-3.14); // = 3.14 - absolute, positive value Math.ceil(3.14); // = 4 - rounded up Math.floor(3.99); // = 3 - rounded down Math.sin(0); // = 0 - sine Math.cos(Math.PI); // OTHERS: tan,atan,asin,acos, Math.min(0, 3, -2, 2); // = -2 - the lowest value Math.max(0, 3, -2, 2); // = 3 - the highest value Math.log(1); // = 0 natural logarithm Math.exp(1); // = 2.7182pow(E,x) Math.random(); // random number between 0 and 1 Math.floor(Math.random() * 5) + 1; // random integer, from 1 to 5 |
- Constants like Math.PI:
E, PI, SQRT2, SQRT1_2, LN2, LN10, LOG2E, Log10E
6. Arrays
1 2 3 4 5 6 7 8 9 | var dogs = ["Bulldog", "Beagle", "Labrador"]; var dogs = new Array("Bulldog", "Beagle", "Labrador"); // declaration alert(dogs[1]); // access value at index, first item being [0] dogs[0] = "Bull Terier"; // change the first item for (var i = 0; i < dogs.length; i++) { // parsing with array.length console.log(dogs[i]); } |
Methods:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | dogs.toString(); // convert to string: results "Bulldog,Beagle,Labrador" dogs.join(" * "); // join: "Bulldog * Beagle * Labrador" dogs.pop(); // remove last element dogs.push("Chihuahua"); // add new element to the end dogs[dogs.length] = "Chihuahua"; // the same as push dogs.shift(); // remove first element dogs.unshift("Chihuahua"); // add new element to the beginning delete dogs[0]; // change element to undefined (not recommended) dogs.splice(2, 0, "Pug", "Boxer"); // add elements (where, how many to remove, element list) var animals = dogs.concat(cats,birds); // join two arrays (dogs followed by cats and birds) dogs.slice(1,4); // elements from [1] to [4-1] dogs.sort(); // sort string alphabetically dogs.reverse(); // sort string in descending order x.sort(function(a, b){return a - b}); // numeric sort x.sort(function(a, b){return b - a}); // numeric descending sort highest = x[0]; // first item in sorted array is the lowest (or highest) value x.sort(function(a, b){return 0.5 - Math.random()}); // random order sort |
concat, copyWithin, every, fill, filter, find, findIndex, forEach, indexOf, isArray, join, lastIndexOf, map, pop, push, reduce, reduceRight, reverse, shift, slice, some, sort, splice, toString, unshift, valueOf
7. Dates
1 2 3 4 5 6 7 8 9 | Sat Jul 08 2023 12:18:24 GMT+0530 (India Standard Time) var d = new Date(); 1688798904720 miliseconds passed since 1970 Number(d) Date("2017-06-23"); // date declaration Date("2017"); // is set to Jan 01 Date("2017-06-23T12:00:00-09:45"); // date - time YYYY-MM-DDTHH:MM:SSZ Date("June 23 2017"); // long date format Date("Jun 23 2017 07:45:00 GMT+0100 (Tokyo Time)"); // time zone |
Get Times:
1 2 3 4 5 6 7 8 9 10 11 12 | var d = new Date(); a = d.getDay(); // getting the weekday getDate(); // day as a number (1-31) getDay(); // weekday as a number (0-6) getFullYear(); // four digit year (yyyy) getHours(); // hour (0-23) getMilliseconds(); // milliseconds (0-999) getMinutes(); // minutes (0-59) getMonth(); // month (0-11) getSeconds(); // seconds (0-59) getTime(); // milliseconds since 1970 |
Setting part of a date:
1 2 3 4 5 6 7 8 9 10 11 | var d = new Date(); d.setDate(d.getDate() + 7); // adds a week to a date setDate(); // day as a number (1-31) setFullYear(); // year (optionally month and day) setHours(); // hour (0-23) setMilliseconds(); // milliseconds (0-999) setMinutes(); // minutes (0-59) setMonth(); // month (0-11) setSeconds(); // seconds (0-59) setTime(); // milliseconds since 1970) |
8. JSON
1 2 3 4 5 6 | var str = '{"names":[' + // crate JSON object '{"first":"Hakuna","lastN":"Matata" },' + '{"first":"Jane","lastN":"Doe" },' + '{"first":"Air","last":"Jordan" }]}'; obj = JSON.parse(str); // parse document.write(obj.names[1].first); // access |
Send:
1 2 3 | var myObj = { "name":"Jane", "age":18, "city":"Chicago" }; // create object var myJSON = JSON.stringify(myObj); // stringify window.location = "demo.php?x=" + myJSON; // send to php |
Storing and retrieving:
1 2 3 4 5 6 | myObj = { "name":"Jane", "age":18, "city":"Chicago" }; myJSON = JSON.stringify(myObj); // storing data localStorage.setItem("testJSON", myJSON); text = localStorage.getItem("testJSON"); // retrieving data obj = JSON.parse(text); document.write(obj.name); |
9. Regular Expressions
1 | var a = str.search(/CheatSheet/i); |
Modifiers:
1 2 3 | i perform case-insensitive matching g perform a global match m perform multiline matching |
Patterns:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | \ Escape character \d find a digit \s find a whitespace character \b find match at beginning or end of a word n+ contains at least one n n* contains zero or more occurrences of n n? contains zero or one occurrences of n ^ Start of string $ End of string \uxxxx find the Unicode character . Any single character (a|b) a or b (...) Group section [abc] In range (a, b or c) [0-9] any of the digits between the brackets [^abc] Not in range \s White space a? Zero or one of a a* Zero or more of a a*? Zero or more, ungreedy a+ One or more of a a+? One or more, ungreedy a{2} Exactly 2 of a a{2,} 2 or more of a a{,5} Up to 5 of a a{2,5} 2 to 5 of a a{2,5}? 2 to 5 of a, ungreedy [:punct:] Any punctuÂation symbol [:space:] Any space character [:blank:] Space or tab |
10. If-Else
1 2 3 4 5 | if ((age >= 14) && (age < 19)) { // logical condition status = "Eligible."; // executed if condition is true } else { // else block is optional status = "Not eligible."; // executed if condition is false } |
Switch Statement:
1 2 3 4 5 6 7 8 9 10 | switch (new Date().getDay()) { // input is current day case 6: // if (day == 6) text = "Saturday"; break; case 0: // if (day == 0) text = "Sunday"; break; default: // else... text = "Whatever"; } |
11. Loops
For Loop:
1 2 3 4 5 6 7 8 9 10 11 | for (var i = 0; i < 10; i++) { document.write(i + ": " + i*3 + "<br />"); } var sum = 0; for (var i = 0; i < a.length; i++) { sum + = a[i]; } // parsing an array html = ""; for (var i of custOrder) { html += "<li>" + i + "</li>"; } |
While Loop:
1 2 3 4 5 | var i = 1; // initialize while (i < 100) { // enters the cycle if statement is true i *= 2; // increment to avoid infinite loop document.write(i + ", "); // output } |
Do While Loop:
1 2 3 4 5 | var i = 1; // initialize do { // enters cycle at least once i *= 2; // increment to avoid infinite loop document.write(i + ", "); // output } while (i < 100) // repeats cycle if statement is true at the end |
Break:
1 2 3 4 | for (var i = 0; i < 10; i++) { if (i == 5) { break; } // stops and exits the cycle document.write(i + ", "); // last output number is 4 } |
Continue:
1 2 3 4 | for (var i = 0; i < 10; i++) { if (i == 5) { continue; } // skips the rest of the cycle document.write(i + ", "); // skips 5 } |
12. Global Functions
1 2 3 4 5 6 7 8 9 10 11 12 | eval(); // executes a string as if it was script code String(23); // return string from number (23).toString(); // return string from number Number("23"); // return number from string decodeURI(enc); // decode URI. Result: "my page.asp" encodeURI(uri); // encode URI. Result: "my%page.asp" decodeURIComponent(enc); // decode a URI component encodeURIComponent(uri); // encode a URI component isFinite(); // is variable a finite, legal number isNaN(); // is variable an illegal number parseFloat(); // returns floating point number of string parseInt(); // parses a string and returns an integer |
13. Events
1 2 3 | <button onclick="myFunction();"> Click here </button> |
- Mouse
onclick, oncontextmenu, ondblclick, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseover, onmouseout, onmouseup - Keyboard
onkeydown, onkeypress, onkeyup - Frame
onabort, onbeforeunload, onerror, onhashchange, onload, onpageshow, onpagehide, onresize, onscroll, onunload - Form
onblur, onchange, onfocus, onfocusin, onfocusout, oninput, oninvalid, onreset, onsearch, onselect, onsubmit - Drag
ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop - Clipboard
oncopy, oncut, onpaste - Media
onabort, oncanplay, oncanplaythrough, ondurationchange, onended, onerror, onloadeddata, onloadedmetadata, onloadstart, onpause, onplay, onplaying, onprogress, onratechange, onseeked, onseeking, onstalled, onsuspend, ontimeupdate, onvolumechange, onwaiting - Animation
animationend, animationiteration, animationstart - Miscellaneous
transitionend, onmessage, onmousewheel, ononline, onoffline, onpopstate, onshow, onstorage, ontoggle, onwheel, ontouchcancel, ontouchend, ontouchmove, ontouchstart
14. Promises
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | function sum (a, b) { return Promise(function (resolve, reject) { setTimeout(function () { // send the response after 1 second if (typeof a !== "number" || typeof b !== "number") { // testing input types return reject(new TypeError("Inputs must be numbers")); } resolve(a + b); }, 1000); }); } var myPromise = sum(10, 5); myPromsise.then(function (result) { document.write(" 10 + 5: ", result); return sum(null, "foo"); // Invalid data and return another promise }).then(function () { // Won't be called because of the error }).catch(function (err) { // The catch handler is called instead, after another second console.error(err); // => Please provide two numbers to sum. }); |
- States
pending, fulfilled, rejected - Properties
Promise.length, Promise.prototype - Methods
Promise.all(iterable), Promise.race(iterable), Promise.reject(reason), Promise.resolve(value)
15. Errors
1 2 3 4 5 6 | try { // block of code to try undefinedFunction(); } catch(err) { // block to handle errors console.log(err.message); } |
Throw error:
1 | throw "My error message"; // throw a text |
Input validation:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var x = document.getElementById("mynum").value; // get input value try { if(x == "") throw "empty"; // error cases if(isNaN(x)) throw "not a number"; x = Number(x); if(x > 10) throw "too high"; } catch(err) { // if there's an error document.write("Input is " + err); // output error console.error(err); // write the error in console } finally { document.write("</br />Done"); // executed regardless of the try / catch result } |
Error name values:
1 2 3 4 5 | RangeError A number is "out of range" ReferenceError An illegal reference has occurred SyntaxError A syntax error has occurred TypeError A type error has occurred URIError An encodeURI() error has occurred |
I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂
