JavaScript Cheat Sheet: Essential Concepts for Beginners
This cheat sheet covers the most essential JavaScript concepts that beginners need to know, including variables, data types, operators, functions, arrays, and conditional statements.
Whether you're just starting out with JavaScript or you need a quick refresher, this cheat sheet is the perfect resource for you.
// Syntax
array.fill(value, start, end)
// Example
var names= ["Raj", "Ram", "Sham"];
names.fill("Ramesh");
// Output
["Ramesh", "Ramesh", "Ramesh"]
// Example
var names= ["Raj", "Ram", "Sham"];
names.fill("Ramesh", 1, 2);
// Output
["Raj", "Ramesh", "Sham"]
Array.Prototype.CopyWithin()
// Syntax
array.copyWithin(target, start, end)
// Example
var names= ["Raj", "Ram", "Sham"];
names.copyWithin(1, 0);
// Output
["Raj", "Raj", "Ram"]
// Example
var names= ["Raj", "Ram", "Sham"];
names.copyWithin(1, 0, 2);
// Output
["Raj", "Raj", "Sham"]
Array.Prototype.Includes()
// Syntax
array.includes(searchElement, fromIndex)
// Example
var names= ["Raj", "Ram", "Sham"];
names.includes("Ram");
// Output
true
// Example
var names= ["Raj", "Ram", "Sham"];
names.includes("Ram", 1);
// Output
false
Array.Prototype.Flat()
// Syntax
array.flat(depth)
// Example
var names= ["Raj", ["Ram", "Sham"]];
names.flat();
// Output
["Raj", "Ram", "Sham"]
// Example
var names= ["Raj", ["Ram", ["Sham"]]];
names.flat(1);
// Output
["Raj", "Ram", ["Sham"]]
Array.Prototype.FlatMap()
// Syntax
array.flatMap(function(currentValue, index, arr), thisValue)
// Example
var names= ["Raj", "Ram", "Sham"];
names.flatMap(function(name) {
return name + " Singh";
});
// Output
["Raj Singh", "Ram Singh", "Sham Singh"]
Array.Prototype.Keys()
// Syntax
array.keys()
// Example
var names= ["Raj", "Ram", "Sham"];
var iterator = names.keys();
iterator.next();
// Output
{value: 0, done: false}
Array.Prototype.Values()
// Syntax
array.values()
// Example
var names= ["Raj", "Ram", "Sham"];
var iterator = names.values();
iterator.next();
// Output
{value: "Raj", done: false}
Array.Prototype.Entries()
// Syntax
array.entries()
// Example
var names= ["Raj", "Ram", "Sham"];
var iterator = names.entries();
iterator.next();
// Output
{value: Array(2), done: false}
Array.Prototype.at()
// Syntax
array.at(index)
// Example
var names= ["Raj", "Ram", "Sham"];
names.at(1);
// Output
Ram
Functions
function name(parameter1, parameter2, parameter3) {
// what the function does
}
Loops
for (Initialization; Condition; Increment/Decrement) {
// what to do during the loop
}
For
The most common way to create a loop in Javascript
While
Sets up conditions under which a loop executes
Do While
Similar to the while loop, however, it executes at least once and performs a check at the end to see if the condition is met to execute again
Break
Used to stop and exit the cycle at certain conditions continue Skip parts of the cycle if certain conditions are met
Strings
var event = "Hacktoberfest 2022";
String Methods
Method
Description
charAt()
Returns a character at a specified position inside a string
charCodeAt()
Gives you the unicode of character at that position
concat()
Concatenates (joins) two or more strings into one
fromCharCode()
Returns a string created from the specified sequence of UTF-16 code units
indexOf()
Provides the position of the first occurrence of a specified text within a string
lastIndexOf()
Same as indexOf() but with the last occurrence, searching backwards
match()
Retrieves the matches of a string against a search pattern
replace()
Find and replace specific text in a string
search()
Executes a search for a matching text and returns its position
slice()
Extracts a section of a string and returns it as a new string
split()
Splits a string object into an array of strings at a specified position
substr()
Similar to slice() but extracts a substring depended on a specified number of characters
substring()
Also similar to slice() but can’t accept negative indices
toLowerCase()
Convert strings to lowercase
toUpperCase()
Convert strings to uppercase
valueOf()
Returns the primitive value (that has no properties or methods) of a string object
Numbers and Math
Number Properties
Method
Description
MAX_VALUE
The maximum numeric value representable in JavaScript
MIN_VALUE
Smallest positive numeric value representable in JavaScript
NaN
The “Not-a-Number” value
NEGATIVE_INFINITY
The negative Infinity value
POSITIVE_INFINITY
Positive Infinity value
Dealing with Dates
Contents need to be added in this section.
Setting Dates
Method
Description
Date()
Creates a new date object with the current date and time
Date(2022, 5, 21, 3, 23, 10, 0)
Create a custom date object. The numbers represent year, month, day, hour, minutes, seconds, milliseconds. You can omit anything you want except for year and month.
Date("2017-06-23")
Date declaration as a string
Pulling Date and Time Values
Function
Description
getDate()
Get the day of the month as a number (1-31)
getDay()
The weekday as a number (0-6)
getFullYear()
Year as a four digit number (yyyy)
getHours()
Get the hour (0-23)
getMilliseconds()
The millisecond (0-999)
getMinutes()
Get the minute (0-59)
getMonth()
Month as a number (0-11)
getSeconds()
Get the second (0-59)
getTime()
Get the milliseconds since January 1, 1970
getUTCDate()
The day (date) of the month in the specified date according to universal time (also available for day, month, fullyear, hours, minutes etc.)
Setting Part of a Date
Method
Description
setDate()
Set the day as a number (1-31)
setFullYear()
Sets the year (optionally month and day)
setHours()
Set the hour (0-23)
setMilliseconds()
Set milliseconds (0-999)
setMinutes()
Sets the minutes (0-59)
setMonth()
Set the month (0-11)
setSeconds()
Sets the seconds (0-59)
setTime()
Set the time (milliseconds since January 1, 1970)
setUTCDate()
Sets the day of the month for a specified date according to universal time (also available for day, month, fullyear, hours, minutes etc.)
Format Date Object
Method
Description
toLocaleDateString()
Returns a string with a language-sensitive representation of the date portion of the specified date in the user agent's timezone
DOM (Document Object Modulation)
Element Methods
Method
Description
getAttribute()
Returns the specified attribute value of an element node
getAttributeNS()
Returns string value of the attribute with the specified namespace and name
getAttributeNode()
Gets the specified attribute node
getAttributeNodeNS()
Returns the attribute node for the attribute with the given namespace and name
getElementsByTagName()
Provides a collection of all child elements with the specified tag name
getElementsByTagNameNS()
Returns a live HTMLCollection of elements with a certain tag name belonging to the given namespace
hasAttribute()
Returns true if an element has any attributes, otherwise false
hasAttributeNS()
Provides a true/false value indicating whether the current element in a given namespace has the specified attribute
removeAttribute()
Removes a specified attribute from an element
removeAttributeNS()
Removes the specified attribute from an element within a certain namespace
removeAttributeNode()
Takes away a specified attribute node and returns the removed node
setAttribute()
Sets or changes the specified attribute to a specified value
setAttributeNS()
Adds a new attribute or changes the value of an attribute with the given namespace and name
setAttributeNode()
Sets or changes the specified attribute node
setAttributeNodeNS()
Adds a new name spaced attribute node to an element
Events
Mouse
Method
Description
onclick
The event occurs when the user clicks on an element
oncontextmenu
User right-clicks on an element to open a context menu
ondblclick
The user double-clicks on an element
onmousedown
User presses a mouse button over an element
onmouseenter
The pointer moves onto an element
onmouseleave
Pointer moves out of an element
onmousemove
The pointer is moving while it is over an element
onmouseover
When the pointer is moved onto an element or one of its children
onmouseout
User moves the mouse pointer out of an element or one of its children
onmouseup
The user releases a mouse button while over an element
Keyboard
Method
Description
onkeydown
When the user is pressing a key down
onkeypress
The moment the user starts pressing a key
onkeyup
The user releases a key
Frame
Method
Description
onabort
The loading of a media is aborted
onbeforeunload
Event occurs before the document is about to be unloaded
onerror
An error occurs while loading an external file
onhashchange
There have been changes to the anchor part of a URL onload When an object has loaded
onpagehide
The user navigates away from a webpage
onpageshow
When the user navigates to a webpage
onresize
The document view is resized
onscroll
An element’s scrollbar is being scrolled
onunload
Event occurs when a page has unloaded
Form
Method
Description
onblur
When an element loses focus
onchange
The content of a form element changes
onfocus
An element gets focus
onfocusin
When an element is about to get focus
onfocusout
The element is about to lose focus
oninput
User input on an element
oninvalid
An element is invalid
onreset
A form is reset
onsearch
The user writes something in a search field
Errors
Error Handlers
Description
try
Lets you define a block of code to test for errors
catch
Set up a block of code to execute in case of an error
throw
Create custom error messages instead of the standard JavaScript errors
finally
Lets you execute code, after try and catch, regardless of the result