In this comprehensive JavaScript cheat sheet, we've curated a collection of the most commonly used features, methods, and techniques, organized for easy navigation and quick reference. Whether you're brushing up on the basics or exploring advanced concepts, this cheat sheet will serve as your trusty companion on your JavaScript journey.
![JavaScript]()
Why a cheat sheet?
In the fast-paced world of programming, having quick access to essential syntax, functions, and concepts can be a game-changer. That's where a JavaScript cheat sheet becomes invaluable. It serves as a handy reference, providing bite-sized information that helps streamline your coding process and tackle challenges with confidence.
Let's start
let's begin this cheat sheet
On page script
‹script type="text/javascript">
</script>
Include external JS file
<script src="filename.js"></script>
Functions
Named Function
function addNumbers(x, y) {
return x + y;
}
Arrow Functions
let sayHelloWorld = () => {
console.log('Hello World!');
}
sayHelloWorld(); // Hello World
Function hoisting
console.log(square(6)); // 36
function square(n) {
return n * n;
}
Map Function
const a = ["ABCD", "ABC", "ABCDEF", "AB"];
const length1 = a.map(function (s) {
return s.length;
});
console.log(length1); // [4, 3, 6, 2]
const length2 = a.map((s) => s.length);
console.log(length2); // [4, 3, 6, 2]
Comments
/ Multi line comment /
// One line
Logging/Print
console.log('I am billionaire.');
document.write('I love nature.');
alert("I am happy.");
confirm("Are you want to be billionaire?");
prompt("I am a quick learner?", "JavaScrip");
Data Types
var name = "James": // string
var age = 21; // number
var name = {first: "Harry", last: "Potter"}; // object
var IsIamHappy = true; // boolean
var countries = [ "Inda","USA", "UK"] // array
var b; typeof b; // undefined
var b = null; // value null
If - Else Statement
if (age >= 18) // logical condition here
{
status = "You can vote."; // executed if condition is true here
}
else //else block is optional
{
status = "You can't vote." //executed if condition is false here
}
For Loop
for (var i = 0; i < 10; i++) {
document.write(i +"<br/>")
}
While Loop
var i = 1;
while (i < 100) {
document. write(i +"<br/>");
i++;
}
Do - While Loop
var i = 1;
do {
document. write(i +"<br/>");
i++;
} while (i < 100)
For Each Loop
const numbers = [21,44,55,10];
numbers.forEach(num=>{
console.log(num * 2);
});
Numbers
var pi = 3.141;
Number(true); // converts to number
Number(new Date)) // number of milliseconds since 1970
pi.toFixed(0); // returns 3
pi.toFixed(2); // returns 3.14
pi.toPrecision (2) // returns 3.1
pi.valueof(); // returns number
Number.MAX_VALUE // largest possible JS number
Number.MIN_VALUE // smallest possible JS number
Number.NEGATIVE_INFINITY // -Infinity
Number.POSITIVE_INFINITY // Infinity
parseInt("3 months"); // returns the first number: 3
parseFloat("3.5 days"): // returns 3.5
Javascript Math
var pi = Math. PI; // 3.141592653589793
Math.random(); // random number between 0 and 1
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.round (3.3); // = 3 - rounded
Math.round (3.5); // = 4
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.floor(Math.random() * 5) + 1; //1 random integer, from 1 to 5
Strings
var abc = "abcdefghijklmnopqrstuvwxyz";
var esc = 'I don't \n know'; // \n new line
var len = abc. length; // string length
abc.indexOf("pqr"); // find substring
abc.lastIndexOf("pqr"); // last occurance
abc.slice(7,10); // cuts out "hij",
abc.replace ("pqr", "123"); // find and replace
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
"Hello".search("e") => 1
"Hello".slice (1, 3) => el
"Hello"'split('''') => ['H', 'e', T', T', 'o']
128.toString (16); // number to hex(16), octal or binary
" Hello ".trim() => Hello
" Hello ".trimStart() => "Hello "
" Hello ".trimEnd() => " Hello"
"Hello".substring(2, 4) => ||
"Hello".repeat(3) => HelloHelloHello
"Hello".match (/[A-Z]/g) => ['H']
"Hello".padStart(6, "?") => ?Hello
"Hello".padEnd(6, "?") => Hello?
"Hello".startsWith("H") => true
"Hello".ends With("o") => true
"Hello".includes ("x") => false
"Hello".match (/[A-Z]/g) => ['H']
Array
const days = ['Sun', 'Tue', 'Wed', 'Thrus'];
// splice (startIndex, deleteCount, item)
days.splice (1, 0, 'Mon'); // ["Sun", "Mon", "Tue", "Wed", "Thrus"]
days.splice (4, 1, 'Fri'); // ["Sun", "Mon", "Tue", "Wed", "Fri"]
var arr = [1,2,3]; // Below operations are on new array arr= [1,2,3]
var x = arr.shift() //arr=[2,3], x=1
var x = arr.unshift (5) //arr=[5,1,2,3], x=4 \\
var x = arr.pop() //arr= [1,2], x=3
var x = arr.push(7) //arr=[1,2,3,7], x=4
['a', 'b'].concat(['c']); // ['a', 'b', 'c']
['a', 'b', 'c'].join('~'); // 'a~b~c'
['a', 'b', 'c'].slice(1); // ['b', 'c']
['a', 'b', 'b'].indexOf('b'); // 1
['a', 'b', 'b'].lastIndexOf('b'); // 2
[1,2,3].map(x => x * 2); // [2,4,6]
[1,2,3].reduce((x,y) => x * y); // 6
[1,3,2].sort(); // [1,2,3]
[1,2,3].reverse(); // [3,2,1]
[1,2,3].length; // 3
[1,2,3].every (x => x < 5); // true
[1,2,3,4].some (x => x < 3); // true
[1,2,3].filter(x => x < 2); // [1]
['a', 'b', 'c'].forEach (x => console.log(x)); // "a" "b" "c"
JavaScript Window
Location
Returns a location object that contains information about the current url
// reload the page after 2 seconds
setTimeout ( ()= {
window.Location.reload()
}, 2000)
History
Returns an history object that contains the pages visited by a user
// go back after 2 seconds
setTimeout ( ()= {
window.history.go (-1)
7, 2000)
// or
setTimeout (()= {
window.history.back()
J, 2000)
Document
Returns the document object as an html document loaded into a web browser
// get the title of the page
console.log(window.Document.Title)
// <title>my app</title> →> my app
// change the body of the page
window.document.body.innerHTML = "hello world"
Navigator
Returns and object containing information about the user's browser
// preferred language of the user
console.log(window. Navigator. language)
// get location coordinates
if (navigator-geolocation) {
window.navigator.geolocation.getCurrentPosition(pos =>
console. log (pos)
})
} else {
console.log("couldn't get the position")
}
Screen
Returns an object which contains the information about the user's screen
console.log(window.screen.height)
// 900
console.log(window.screen.width)
Local Storage
setItem()
Allows you to store values in the localStorage object; accepts 2 parameters: a key and a value.
window.localStorage.setItem('username','IamCkNitin');
If arrays or objects, then first convert into strings using JSON.stringify( ) As localStorage can only store strings.
const userNameAndPassword = {
username = "IamCkNitin",
Password = "DM@Me"
}
window.localStorage.setItem('login', JSON.stringify(userNameAndPassword)) ;
getItem( )
Allows you to access the data stored in localStorage. Simply pass key as the parameter and it will return value accordingly.
window.localStorage.getItem('cred');
// {"username": "IamCkNitin","password": "DM@Me"}, Use JSON. parse() to convert it back to object.
JSON. parse(window.localStorage.getItem('cred'));
removeItem( )
Allows you to remove the data stored in localStorage. Simply pass the key as the parameter, and it will remove both the key and value. (Does nothing when the parameter is left empty)
window.localStorage.removeItem('cred');
clear ()
Deletes every item in the localStorage.
window.localStorage.clear();
key ( )
Allows you to loop through the keys and pass an index as the parameter to retrieve the name of the key.
var obj = window.localStorage.key(index);
Date and Time
const today = new Date()
today // 2020-08-09T01:40:51.017Z
today.getDate() // 9
today.getDay() // 0 sunday
today.getMonth() // 7 (0 is jan)
today.getFullYear() // 2020
today.getYear() // 120 ?
today.getHours() // 11
today.getMinutes() // 40
today.getSeconds() // 51
today.getMilliseconds () // 24
today.getTime() // 1596937251025
today.getTimezoneOffset() // -600
today.setDate(5)
today.setMonth(5)
today.setFullYear(2022)
today.setYear(100)
today.setHours(12)
today.setMinutes(5)
today.setSeconds(8)
today.setMilliseconds(45)
today.setTime(34)
today.setUTCDate(11)
today.setUTCMonth(5)
today.setUTCFullYear(2022)
today.setUTCHours(5)
today.setUTCMinutes(10)
today.setUTCSeconds(24)
today.setUTCMilliseconds(22)
Date.parse('9 Aug 2020') // 1596895200000
Returns number
milliseconds since January 1, 1970 Returns NaN if invalid
let utcDate = new Date (Date. UTC (2020, 7, 9, 0, 0, 0));
utcDate // 2020-08-09T00:00:00.000Z
utcDate.valueOf() // 1596895200000 (same as parse)
today.getUTCDate() // 9
today.getUTCDay() // 0
today.getUTCMonth() // 7
today.getUTCFullYear() // 2020
today.getUTCHours() // 1
today.getUTCMinutes() // 40
today.getUTCSeconds() // 51
today.getUTCMilliseconds() // 31
const today = new Date()
today.toString() // 'Sun Aug 09 2020 16:44:29 GMT+1000
// (Australian Eastern Standard Time)'
today.toLocaleString() // '09/08/2020, 16:44:29'
today.toGMTString() // 'Sun, 09 Aug 2020 06:44:29 GMT'
today.toUTCString() // 'Sun, 09 Aug 2020 06:44:29 GMT'
JavaScript DOM mainuplation
//single element defined by id
const app = document.getElementById('app')
//multiple elements (arrays) defined by class name
const hero = document.getElementsByClassName('hero')
//multiple elements based on html tag
const h1 = document.getElementsByTagName('h1')
//first element based on selector
const hero = document.querySelector('.hero')
//multiple elements based on selector
const heroes = document.querySelectorAll('.hero')
//create html element of tag <p>
let para = document.createElement('p')
//create text node
let text = document.createTextNode('I ❤ it')
//add text node to the para element
para.appendChild(text)
//insert h2 before h1
app.insertBefore (h2, h1)
<p>I it</p>
h1.insertAdjacentHTML ('beforebegin',<span>cool</span>')
// beforebegin => placed before h1 as a sibling
// afterbegin => placed inside h1 as a first child
// beforeend => placed inside h1 as a last child
// afterend => placed after h1 as a sibling
<div id="app" class="hero dark">
<h1>Hello Javascript</h1>
</div>
app.classList.remove('dark') // remove class
app.classList.add('light') // add class
app.classList.toggle('visible') // toggle class
app.classList.contains('app') // true if app present
app.childNodes // retrieve all child nodes
app.parentNode // return parent node
Java Object
const obj = { key1: value1, key2: value2 }; //Create object
// Constructor Function
function ObjectName(prop1, prop2) {
this.prop1 = prop1;
this.prop2 = prop2;
}
const obj = new ObjectName(value1, value2);
// ES6 Class
class ClassName {
constructor(prop1, prop2) {
this.prop1 = prop1;
this.prop2 = prop2;
}
}
const obj = new ClassName(value1, value2);
//Accessing Object Properties
//Dot Notation
const value = obj.key;
//Bracket Notation (Useful for dynamic property access):
const key = 'key';
const value = obj[key];
//Modifying Object Properties
obj.key = newValue;
//Checking if Object has Property
if ('key' in obj) {
// Property exists
}
//Deleting Object Properties
delete obj.key;
//Looping Through Object Properties:
//For...in Loop
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
const value = obj[key];
// Do something with key and value
}
}
//Object Methods
//Object.keys()
const keys = Object.keys(obj);
//Object.values()
const values = Object.values(obj);
//Object.entries()
const entries = Object.entries(obj);
//Object Comparison
const isEqual = JSON.stringify(obj1) === JSON.stringify(obj2);
//Object Destructuring
const { key1, key2 } = obj;
//Cloning Objects
//Shallow Clone
const cloneObj = { ...obj };
//Deep Clone (Using JSON)
const deepCloneObj = JSON.parse(JSON.stringify(obj));
//Merging Objects
//Object.assign()
const mergedObj = Object.assign({}, obj1, obj2);
//Freezing Objects (Prevent Modification)
Object.freeze(obj);
//Sealing Objects (Prevent Addition/Deletion of Properties)
Object.seal(obj);