Productivity Programming

The Ultimate JavaScript Cheat Sheet

Akshata Shanbhag 25-01-2020

If you want to build dynamic webpages, you’ll have to supplement your HTML and CSS knowledge with an understanding of JavaScript. This scripting language is considered an essential in modern web development.


You can build all kinds of interesting interactive apps and websites with JavaScript, but there’s much to learn on the way. With that in mind, we have created the following JavaScript cheat sheet for you.

The cheat sheet can serve as a quick refresher on JavaScript elements any time you need one. It’s handy for newbies and experts alike.

FREE DOWNLOAD: This cheat sheet is available as a downloadable PDF from our distribution partner, TradePub. You will have to complete a short form to access it for the first time only. Download The Ultimate JavaScript Cheat Sheet.

The Ultimate JavaScript Cheat Sheet

JavaScript Arrays
concat()Join several arrays into one
copyWithin()Copy array elements within the array, to and from specified positions
indexOf()Return the primitive value of the specified object
includes()Check if an array contains the specified element
join()Combine elements of an array into a single string and return the string
entries()Return a key/value pair Array Iteration Object
every()Check if every element in an array passes a test
fill()Fill the elements in an array with a static value
filter()Create a new array with every element in an array that pass a test
find()Return the value of the first element in an array that pass a test
forEach()Call a function for each array element
from()Create an array from an object
lastIndexOf()Give the last position at which a given element appears in an array
pop()Remove the last element of an array
push()Add a new element at the end
reverse()Sort elements in descending order
reduce()Reduce the values of an array to a single value (going left-to-right)
reduceRight()Reduce the values of an array to a single value (going right-to-left)
shift()Remove the first element of an array
slice()Pull a copy of a portion of an array into a new array object
sort()Sort elements alphabetically
splice()Add elements in a specified way and position
unshift()Add a new element to the beginning
JavaScript Boolean Methods
toString()Convert a Boolean value to a string, and return the result
valueOf()Return the first position at which a given element appears in an array
toSource()Return a string representing the source code of the object
JavaScript Arithmetic Operators
(...)Grouping operator (operations within brackets are executed earlier than those outside)
%Modulus (remainder)
++Increment numbers
--Decrement numbers
==Equal to
===Equal value and equal type
!=Not equal
!==Not equal value or not equal type
>Greater than
<Lesser than
>=Greater than or equal to
<=Lesser than or equal to
?Ternary operator
Logical Operators
&&Logical AND
||Logical OR
!Logical NOT
Bitwise Operators
&AND statement
|OR statement
<<Left shift
>>Right shift
>>>Zero fill right shift
alert()Output data in an alert box in the browser window
confirm()Open up a yes/no dialog and return true/false depending on user click
console.log()Write information to the browser console (good for debugging purposes)
document.write()Write directly to the HTML document
prompt()Create a dialog for user input
Global Functions
decodeURI()Decode a Uniform Resource Identifier (URI) created by encodeURI or similar
decodeURIComponent()Decode a URI component
encodeURI()Encode a URI into UTF-8
encodeURIComponent()Same but for URI components
eval()Evaluate JavaScript code represented as a string
isFinite()Determine whether a passed value is a finite number
isNaN()Determine whether a value is an illegal number
Number()Convert an object's value to a number
parseFloat()Parse a string and return a floating point number
parseInt()Parse a string and return an integer
JavaScript Loops
forThe most common way to create a loop in JavaScript
whileSet up conditions under which a loop executes
do whileSimilar 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
breakStop and exit the cycle if certain conditions are mets
continueSkip parts of the cycle if certain conditions are met
Escape Characters
\'Single quote
\"Double quote
\fForm feed
\nNew line
\rCarriage return
\tHorizontal tabulator
\vVertical tabulator
JavaScript String Methods
charAt()Return a character at a specified position inside a string
charCodeAt()Give the unicode of character at that position
concat()Concatenate (join) two or more strings into one
fromCharCode()Return a string created from the specified sequence of UTF-16 code units
indexOf()Provide the position of the first occurrence of specified text within a string
lastIndexOf()Same as indexOf() but with the last occurrence, searching backwards
match()Retrieve the matches of a string against a search pattern
replace()Find and replace specified text in a string
search()Execute a search for a matching text and return its position
slice()Extract a section of a string and return it as a new string
split()Split a string object into an array of strings at a specified position
startsWith()Check whether a string begins with specified characters
substr()Similar to slice() but extracts a substring depended on a specified number of characters
substring()Similar to slice() but can’t accept negative indices
toLowerCase()Convert strings to lower case
toUpperCase()Convert strings to upper case
valueOf()Return the primitive value (that has no properties or methods) of a string object

Pattern Modifiers
eEvaluate replacement
iPerform case-insensitive matching
gPerform global matching
mPerform multiple line matching
sTreat strings as single line
xAllow comments and whitespace in pattern
UUngreedy pattern
[abc]Find any of the characters in the brackets
[^abc]Find any character not in the brackets
[0-9]Find digit specified in the brackets
[A-z]Find any character from uppercase A to lowercase z
(a|b|c)Find any of the alternatives separated with |
.Find a single character, except newline or line terminator
\wWord character
\WNon-word character
\dA digit
\DA non-digit character
\sWhitespace character
\SNon-whitespace character
\bFind a match at the beginning/end of a word
\BFind a match not at the beginning/end of a word
\u0000NUL character
\nA new line character
\fForm feed character
\rCarriage return character
\tTab character
\vVertical tab character
\xxxCharacter specified by an octal number xxx
\xddLatin character specified by a hexadecimal number dd
\uddddUnicode character specified by a hexadecimal number dddd
n+Match any string that contains at least one n
n*Any string that contains zero or more occurrences of n
n?Any string that contains zero or one occurrences of n
n{X}Any string that contains a sequence of X n’s
n{X,Y}Strings that contains a sequence of X to Y n’s
n{X,}Matches any string that contains a sequence of at least X n’s
n$Any string with n at the end of it
^nString with n at the beginning of it
?=nAny string that is followed by a specific string n
?!nString that is not followed by a specific string n
Number Properties
MAX_VALUEMaximum numeric value representable in JavaScript
MIN_VALUESmallest positive numeric value representable in JavaScript
NaNThe “Not-a-Number” value
NEGATIVE_INFINITYNegative Infinity value
POSITIVE_INFINITYPositive Infinity value
Number Methods
toExponential()Return a string with a rounded number written as exponential notation
toFixed()Return string of a number with a specified number of decimals
toPrecision()Return string of a number written with a specified length
toString()Return a number as a string
valueOf()Return a number as a number
Math Properties
EEuler’s number
LN2Natural logarithm of 2
LN10Natural logarithm of 10
LOG2EBase 2 logarithm of E
LOG10EBase 10 logarithm of E
PIThe number PI
SQRT1_2Square root of 1/2
SQRT2Square root of 2
Math Methods
abs(x)Return the absolute (positive) value of x
acos(x)Arccosine of x, in radians
asin(x)Arcsine of x, in radians
atan(x)Arctangent of x as a numeric value
atan2(y,x)Arctangent of the quotient of its arguments
ceil(x)Value of x rounded up to its nearest integer
cos(x)Cosine of x (x is in radians)
exp(x)Value of Ex
floor(x)Value of x rounded down to its nearest integer
log(x)Natural logarithm (base E) of x
max(x,y,z,...,n)Number with highest value
min(x,y,z,...,n)Number with lowest value
pow(x,y)X to the power of y
random()Random number between 0 and 1
round(x)Value of x rounded to its nearest integer
sin(x)Sine of x (x is in radians)
sqrt(x)Square root of x
tan(x)Tangent of an angle
Date()Create a new date object with the current date and time
Date(2017, 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
getDate()Get the day of the month as a number (1-31)
getDay()Get the weekday as a number (0-6)
getFullYear()Get the year as a four digit number (yyyy)
getHours()Get the hour (0-23)
getMilliseconds()Get the millisecond (0-999)
getMinutes()Get the minute (0-59)
getMonth()Get the month as a number (0-11)
getSeconds()Get the second (0-59)
getTime()Get the time (milliseconds since January 1, 1970)
getUTCDate()Day (date) of the month in the specified date according to universal time (also available for day, month, fullyear, hours, minutes etc.)
parseParse a string representation of a date, and return the number of milliseconds since January 1, 1970
setDate()Set the day as a number (1-31)
setFullYear()Set the year (optionally month and day)
setHours()Set the hour (0-23)
setMilliseconds()Set the milliseconds (0-999)
setMinutes()Set the minutes (0-59)
setMonth()Set the month (0-11)
setSeconds()Set the seconds (0-59)
setTime()Set the time (milliseconds since January 1, 1970)
setUTCDate()Set the day of the month for a specified date according to universal time (also available for day, month, fullyear, hours, minutes etc.)

Node Properties
attributesLive collection of all attributes registered to an element
baseURIAbsolute base URL of an HTML element
childNodesCollection of an element’s child nodes
firstChildFirst child node of an element
lastChildLast child node of an element
nextSiblingNext node at the same node tree level
nodeNameName of a node
nodeTypeType of a node
nodeValueValue of a node
ownerDocumentTop-level document object for current node
parentNodeParent node of an element
previousSiblingNode immediately preceding the current one
textContentTextual content of a node and its descendants
Node Methods
appendChild()Add a new child node to an element as the last child node
cloneNode()Clone HTML element
compareDocumentPosition()Compare the document position of two elements
getFeature()Return an object which implements the APIs of a specified feature
hasAttributes()Return true if an element has any attributes, else return false
hasChildNodes()Return true if an element has any child nodes, else return false
insertBefore()Insert a new child node before a specified, existing child node
isDefaultNamespace()Return true if a specified namespaceURI is the default, else return false
isEqualNode()Check if two elements are equal
isSameNode()Check if two elements are the same node
isSupported()Return true if a specified feature is supported on the element
lookupNamespaceURI()Return the namespaceURI associated with a given node
lookupPrefix()Return a DOMString containing the prefix for a given namespaceURI, if present
normalize()Join adjacent text nodes and remove empty text nodes in an element
removeChild()Remove a child node from an element
replaceChild()Replace a child node in an element
Element Methods
getAttribute()Return the specified attribute value of an element node
getAttributeNS()Return string value of the attribute with the specified namespace and name
getAttributeNode()Get the the specified attribute node
getAttributeNodeNS()Return the attribute node for the attribute with the given namespace and name
getElementsByTagName()Provide a collection of all child elements with the specified tag name
getElementsByTagNameNS()Return a live HTML collection of elements with a certain tag name belonging to the given namespace
hasAttribute()Return true if an element has any attributes, else return false
hasAttributeNS()Provide a true/false value indicating whether the current element in a given namespace has the specified attribute
removeAttribute()Remove a specified attribute from an element
removeAttributeNS()Remove the specified attribute from an element within a certain namespace
removeAttributeNode()Take away a specified attribute node and return the removed node
setAttribute()Set or change the specified attribute to a specified value
setAttributeNS()Add a new attribute or change the value of an attribute with the given namespace and name
setAttributeNode()Set or change the specified attribute node
setAttributeNodeNS()Add a new namespaced attribute node to an element
Browser Window Properties
closedCheck whether a window has been closed or not and return true or false
defaultStatusSet or return the default text in the statusbar of a window
documentReturn the document object for the window
framesReturn all <iframe> elements in the current window
historyProvide the History object for the window
innerHeightInner height of a window’s content area
innerWidthInner width of the content area
lengthReturn the number of <iframe> elements in the window
locationReturn the location object for the window
nameSet or return the name of a window
navigatorReturn the Navigator object for the window
openerReturn a reference to the window that created the window
outerHeightOuter height of a window, including toolbars/scrollbars
outerWidthOuter width of a window, including toolbars/scrollbars
pageXOffsetNumber of pixels by which the document has been scrolled horizontally
pageYOffsetNumber of pixels by which the document has been scrolled vertically
parentParent window of the current window
screenReturn the Screen object for the window
screenLeftHorizontal coordinate of the window (relative to screen)
screenTopVertical coordinate of the window
screenXSame as screenLeft but needed for some browsers
screenYSame as screenTop but needed for some browsers
selfReturn the current window
statusSet or return the text in the statusbar of a window
topReturn the topmost browser window
Browser Window Methods
alert()Display an alert box with a message and an OK button
blur()Remove focus from the current window
clearInterval()Clear a timer set with setInterval()
clearTimeout()Clear a timer set with setTimeout()
close()Close the current window
confirm()Display a dialog box with a message and OK and Cancel buttons
focus()Set focus to the current window
moveBy()Move a window relative to its current position
moveTo()Move a window to a specified position
open()Open a new browser window
print()Print the content of the current window
prompt()Display a dialog box that prompts the visitor for input
resizeBy()Resize the window by the specified number of pixels
resizeTo()Resize the window to a specified width and height
scrollBy()Scroll the document by a specified number of pixels
scrollTo()Scroll the document to specified coordinates
setInterval()Call a function or evaluate an expression at specified intervals
setTimeout()Call a function or evaluate an expression after a specified interval
stop()Stop the window from loading
Screen Properties
availHeightReturn the height of the screen (excluding the Windows Taskbar)
availWidthReturn the width of the screen (excluding the Windows Taskbar)
colorDepthReturn the bit depth of the color palette for displaying images
heightThe total height of the screen
pixelDepthThe color resolution of the screen in bits per pixel
widthThe total width of the screen

JavaScript Mouse Events
onclickWhen user clicks on an element
oncontextmenuWhen user right-clicks on an element to open a context menu
ondblclickWhen user double-clicks on an element
onmousedownWhen user presses a mouse button over an element
onmouseenterWhen user moves pointer onto an element
onmouseleaveWhen user moves pointer away from an element
onmousemoveWhen user moves pointer while it is over an element
onmouseoverWhen user moves pointer onto an element or one of its children
onmouseoutWhen user moves pointer away from an element or one of its children
onmouseupWhen user releases a mouse button while over an element
JavaScript Keyboard Events
onkeydownWhen user is pressing a key down
onkeypressWhen user starts pressing a key
onkeyupWhen user releases a key
JavaScript Frame Events
onabortWhen loading of media is aborted
onbeforeunloadBefore the document is about to be unloaded
onerrorWhen an error occurs while loading an external file
onhashchangeWhen the anchor part of a URL has changed
onloadWhen an object has loaded
onpagehideWhen user navigates away from a webpage
onpageshowWhen user navigates to a webpage
onresizeWhen user resizes document view
onscrollWhen user is scrolling an element’s scrollbar
onunloadWhen a page has unloaded
JavaScript Form Events
onblurWhen an element loses focus
onchangeWhen the content of a form element changes (for <input>, <select>, and <textarea>
onfocusWhen an element gets focus
onfocusinWhen an element is about to get focus
onfocusoutWhen an element is about to lose focus
oninputUser input on an element
oninvalidWhen an element is invalid
onresetWhen a form is reset
onsearchWhen a user types something in a search field (for <input="search">)
onselectWhen user selects some text (for <input> and <textarea>)
onsubmitWhen a form is submitted
JavaScript Drag Events
ondragWhen user drags an element
ondragendWhen user has finished dragging the element
ondragenterWhen the dragged element enters a drop target
ondragleaveWhen the dragged element leaves the drop target
ondragoverWhen the dragged element is on top of the drop target
ondragstartWhen user starts to drag an element
ondropDragged element is dropped on the drop target
JavaScript Clipboard Events
oncopyWhen user copies content of an element
oncutWhen user cuts an element’s content
onpasteWhen user pastes content in an element
JavaScript Media Events
onabortWhen media loading is aborted
oncanplayWhen browser can start playing media (e.g. a file has buffered enough)
oncanplaythroughWhen browser can play through media without stopping
ondurationchangeWhen duration of media changes
onendedWhen media has reached its end
onerrorWhen an error occurs while loading an external file
onloadeddataWhen media data is loaded
onloadedmetadataWhen metadata (like dimensions and duration) is loaded
onloadstartWhen browser starts looking for specified media
onpauseWhen media is paused either by user or automatically
onplayWhen media has been started or is no longer paused
onplayingWhen media is playing after having been paused or stopped for buffering
onprogressWhen browser is in the process of downloading media
onratechangeWhen playing speed of media changes
onseekedWhen user has finished moving/skipping to a new position in media
onseekingWhen user starts moving/skipping
onstalledWhen browser is trying to load unavailable media
onsuspendWhen browser is intentionally not loading media
ontimeupdateThe playing position has changed (e.g. because of fast forward)
onvolumechangeWhen media volume has changed (including mute)
onwaitingWhen media has paused but is expected to resume (for example, buffering)
animationendWhen CSS animation is complete
animationiterationWhen CSS animation is repeated
animationstartWhen CSS animation has started
transitionendWhen CSS transition is complete
onmessageWhen a message is received through the event source
onofflineWhen browser starts to work offline
ononlineWhen browser starts to work online
onpopstateWhen the window’s history changes
onshowWhen a <menu> element is shown as a context menu
onstorageWhen a Web Storage area is updated
ontoggleWhen user opens or closes the <details> element
onwheelWhen mouse wheel rolls up or down over an element
ontouchcancelWhen screen touch is interrupted
ontouchendWhen user’s finger goes off touch screen
ontouchmoveWhen user drags a finger across the screen

Explore JavaScript Further

We consider JavaScript one of the top programming languages to master for the future. And we recommend diving into advanced concepts like JavaScript array methods 5 JavaScript Array Methods You Should Master Today Want to understand JavaScript arrays but can't get to grips with them? Check our JavaScript array examples for guidance. Read More  once you have a grasp of the basics of JavaScript.


Image Credit: Oskar Yildiz on Unsplash

Related topics: Cheat Sheet, JavaScript.

Affiliate Disclosure: By buying the products we recommend, you help keep the site alive. Read more.

Whatsapp Pinterest

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Tanmay Lodha
    June 25, 2020 at 9:02 pm

    This article is a pure gem.

  2. Greg
    January 26, 2020 at 4:57 pm

    Excellent! Thank you!