JavaScript Cheat Sheet For Beginners - 2021

JavaScript Cheat Sheet For Beginners - 2021

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

JavaScript is a programming language used primarily by Web browsers to create a dynamic and interactive experience for the user. Most of the functions and applications that make the Internet indispensable to modern life are coded in some form of JavaScript. While JavaScript is not the only client-side scripting language on the Internet, it was one of the first and it is still the most widely used.

Here you can find the completed JavaScript cheat sheet ūüĎá

Arrays

Functions Description
concat() Concatenate different arrays into one.
join() Joins all the elements of one array as a string
indexof() Returns the index (first position) of an element in the array
lastindexof() Returns the last position of an element in the array
sort() Alphabetic sort of array elements
reverse() Sort elements in descending order
valueof() Primitive value of the element specified
slice() Cut a portion of one array and put it in a new array
splice() Add elements to an array in a specific manner and position
unshift() Add new element to the array in the beginning 
shift() Remove first element of the array
pop() Remove the last element of the array
push() Add new element to the array as the last one
tostring() Prints the string value of the elements of the array

Global Functions

encodeURI() Encodes a URI into UTF-8
encodeURIComponent() Encoding for URI components
decodeURI() Decodes a Uniform Resource Identifier (URI) created by encodeURI or similar
decodeURIComponent() Decodes a URI component
parseInt() Parses the input returns an integer
parseFloat() Parses the input and returns a floating-point number
eval() Evaluates JavaScript code represented as a string
Number() Returns a number converted from its initial value
isNaN() Determines whether a value is NaN or not
isFinite() Determines whether a passed value is a finite number

Loops

for looping in javascript
while execute a block of code while some condition is true
do while similar to while, but executes at least as the condition is applied
after the code is executed
break break and exit the cycle based on some conditions
continue continue next iteration if some conditions are met

String Methods

Method Meaning
length determines length of string
indexof() finds position of the first occurrence of a character or text in the string
lastindexof() returns last occurrence of text in a string
search() searches and returns position of a specified value in string
slice() extracts and returns part of a string as another new string
substring() substring returns part of the string from start index to the end index specified. cannot take negative values unlike slice()
substr() returns the sliced out portion of a string, the second parameter being the length of the final string.
replace() replaces a particular value with another
touppercase() changes all characters into uppercase
tolowercase() changes all characters into lowercase
concat() joins two or more strings together into another string
trim() removes white spaces from a string
charat() finds character at a specified position
charcodeat() returns the unicode of character at the specified position
split() convert a string into array based on special character
accessing characters using [] access a character of string using its index (doesn’t work on some versions of ie)

User Events

onclick  event that happens when user clicks on an element
onmouseover  when the mouse is moved over some element or its children
onmouseout  User moves the mouse pointer out of an element or one of its children
onmouseup  when user releases a mouse button while over an element
onmousedown  when user presses a mouse button over an element
onmouseenter  pointer moves onto an element
onmouseleave  Pointer moves out of an element
onmousemove  pointer is moving when it is over an element
oncontextmenu  User right-clicks on an element to open a context menu
ondblclick  The user double-clicks on an element
onkeydown  When the user is pressing a key down
onkeypress  The moment the user starts pressing a key
onkeyup  The user releases a key
onabort  The loading of a media is aborted
onbeforeunload  Event that occurs before a document is to be unloaded
onunload  Event occurs when a page has unloaded
onerror  When 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  the user navigates to a webpage
onresize  The document view is resized
onscroll  An element’s scrollbar is being scrolled
onblur  When an element loses focus
onchange  when content of a form element like <input>, <select> and <textarea> changes
onfocus  An element gets focus
onfocusin  When an element is about to get focus
onfocusout  When element is about to lose focus
oninput  User input on an element
oninvalid  An element is invalid
onreset  form reset
onsearch  The user writes something in the input type search
onselect  The user selects some text (<input> and <textarea>)
onsubmit  event that happens upon submitting the form
try  block of code to execute in case of no errors
catch  block of code to execute in case of an error
throw  Create custom error messages rather than standard JavaScript errors
finally  block that is always executed whether there is error in execution or not
transitionend  event triggered when a CSS transition has completed
onmessage  A message is received through the event source
ononline  The browser starts to work online
onoffline  The browser starts to work offline
ontoggle  The user opens or closes the <details> element
onpopstate  When the window’s history changes
onshow  A <menu> element is shown as a context menu
onstorage  A Web Storage area is updated
onwheel  Mouse wheel rolls up or down over an element
ontouchstart  A finger is placed on the touch-screen
ontouchend  User’s finger is removed from a touch-screen
ontouchcancel  Screen-touch is interrupted
ontouchmove  User finger is dragged across the screen
onabort  Media loading is aborted
onended  The media ended
onerror  Happens when an error occurs while loading an external file
oncanplay  The browser can start playing media 
oncanplaythrough  The browser can play through media without stopping
ondurationchange  change in the duration of the media
onloadeddata  Media data loaded
onloadedmetadata  Metadata (e.g. dimensions, duration) are loaded
onloadstart    The browser starts looking for specified media
onpause  Media is paused either by the user or automatically
onplay  The media started to play or is no longer paused
onplaying  Media is playing after being paused or stopped for buffering
onprogress  The browser is in the process of downloading the media
onratechange  The playing speed of the media changes
onseeked  User is finished moving/skipping to a new position in the media
onseeking  The user starts moving/skipping
onstalled  The browser is trying to load the media but it is unavailable
onwaiting  Media paused but expected to resume (like in buffering)
onsuspend  The browser is intentionally not loading media
ontimeupdate  The playing position has changed (like in case of fast forward)
onvolumechange  Media volume has increased or reduced

Operators

Basic
  • Addition (+)
  • Subtraction (-)
  • Multiply (*)
  • Divide (/)
  • Remainder (%)
  • Increment (++)
  • Decrement (--)
  • Execute brackets first (‚Ķ)
Logical
  • And (&&)
  • Or (||)
  • Not (|)
Comparison
  • Equal to (==)
  • Equal value and type (===)¬†
  • Not equal (!=)
  • Not equal value or type (!==)
  • Greater than (>)¬†
  • Less than (<)¬†
  • Greater than or equal to (>=)
  • Less than or equal to (<=)
  • Ternary operator (?)
Bitwise
  • AND (&)
  • OR (|)¬†
  • NOT (~)¬†
  • XOR (^)¬†
  • Left shift (<<)
  • Right shift (>>)
  • Zero fill right shift (>>>)

Date

Date()  Creates a new date object with current date and time
Date(2019, 10, 21, 12, 24, 58, 13)¬† Create a custom date object. Format ‚Äď (yyyy, mm, dd, hh, min, s, ms). Except for year and month, all parameters are optional.
Date("2019-10-21")  Date declaration as a string
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()  Get 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, full year, hours, minutes etc.)
parse  Parses a string representation of a date and returns the number
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, full year, hours, minutes etc.)

Metacharacters

.  Find a single character, except newline or line terminator
\w  Word character
\W  Non-word character
\d  A digit
\D  A non-digit character
\s  Whitespace character
\S  Non-whitespace character
\b  Find a match at the beginning/end of a word
\B  A match not at the beginning/end of a word
\0  NULL character
\n  A new line character
\f  Form feed character
\r  Carriage return character
\t  Tab character
\v  Vertical tab character
\xxx  The character specified by an octal number xxx
\xdd  Character specified by a hexadecimal number dd
\uxxxx  The Unicode character specified by a hexadecimal number xxxx

Credit

This cheat sheet is a modified cheatsheet provided on Hackr website

Conclusion

I hope you found this cheat sheet helpful. If you need any help please let me know in the comment section.

Let's connect on Twitter and LinkedIn

ūüĎč Thanks for reading, See you next time

 
Share this