JavaScript is a rich language, with sometimes a seemingly overwhelming number of libraries and frameworks. With so many options available, it's sometimes useful to just look at the language itself and keep in mind its core components. This glossary covers the core JavaScript language, syntax, and functions.
JavaScript variables
var: The most used variable. Can be reassigned but only accessed within a function, meaning function scope. Variables defined with var move to the top when code is executed.
const: Cannot be reassigned and not accessible before they appear within the code, meaning block scope.
let: Similar to const with block scope, however, the let variable can be reassigned but not re-declared.
Data types
Numbers: var age = 33
Variables: var a
Text (strings): var a = "Sachin"
Operations: var b = 4 + 5 + 6
True or false statements: var a = true
Constant numbers: const PI = 3.14
Objects: var fullName = {firstName:"Sachin", lastName: "Samal"}
Objects
This is a simple example of objects in JavaScript. This object describe the variable car, and includes keys or properties such as make, model, and year are the object's property names. Each property has a value, such as Nissan, Altima, and 2022. A JavaScript object is a collection of properties with values, and it functions as a method.
var car = {
make:"Nissan",
model:"Altima",
year:2022,
};Comparison operators
==: Is equal to
===: Is equal value and equal type
!=: Is not equal
!==: Is not equal value or not equal type
>: Is greater than
<: Is less than
>=: Is greater than or equal to
<=: Is less than or equal to
?: Ternary operator
Logical operators
&&: Logical AND
||: Logical OR
!: Logical NOT
Output data
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.
document.write(): Write directly to the HTML document
prompt(): Create a dialog for user input
Array methods
Array: An object that can hold multiple values at once.
concat(): Join several arrays into one
indexOf(): Return the primitive value of the specified object
join(): Combine elements of an array into a single string and return the string
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
shift(): Remove the first element of an array
slice(): Pull a copy of a portion of an array into a new array
splice(): Add positions and elements in a specified way
toString(): Convert elements to strings
unshift(): Add a new element to the beginning
valueOf(): Return the first position at which a given element appears in an array
JavaScript loops
Loops: Perform specific tasks repeatedly under applied conditions.
for (before loop; condition for loop; execute after loop) {
// what to do during the loop
}for: Creates a conditional loop
while: Sets up conditions under which a loop executes at least once, as long as the specified condition is evaluated as true
do while: Similar to the while loop, it executes at least once and performs a check at the end to see if the condition is met. If it is, then it executes again
break: Stop and exit the cycle at certain conditions
continue: Skip parts of the cycle if certain conditions are met
if-else statements
An if statement executes the code within brackets as long as the condition in parentheses is true. Failing that, an optional else statement is executed instead.
if (condition) {
// do this if condition is met
} else {
// do this if condition is not met
}Strings
String methods
charAt(): Return a character at a specified position inside a string
charCodeAt(): Give the Unicode of the 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 a 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
substr(): Extract a substring depended on a specified number of characters, similar to slice()
substring(): Can't accept negative indices, also similar to slice()
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
Number methods
toExponential(): Return a string with a rounded number written as exponential notation
toFixed(): Return the string of a number with a specified number of decimals
toPrecision(): String of a number written with a specified length
toString(): Return a number as a string
valueOf(): Return a number as a number
Math methods
abs(a): Return the absolute (positive) value of a
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(a): Value of a rounded up to its nearest integer
cos(a): Cosine of a (x is in radians)
exp(a): Value of Ex
floor(a): Value of a rounded down to its nearest integer
log(a): Natural logarithm (base E) of a
max(a,b,c…,z): Return the number with the highest value
min(a,b,c…,z): Return the number with the lowest value
pow(a,b): a to the power of b
random(): Return a random number between 0 and 1
round(a): Value of a rounded to its nearest integer
sin(a): Sine of a (a is in radians)
sqrt(a): Square root of a
tan(a): Tangent of an angle
Dealing with dates in JavaScript
Set dates
Date(): Create a new date object with the current date and time
Date(2022, 6, 22, 4, 22, 11, 0): Create a custom date object. The numbers represent year, month, day, hour, minutes, seconds, milliseconds. You can omit anything except for year and month.
Date("2022-07-29"): Date declaration as a string
Pull date and time values
getDate(): Day of the month as a number (1-31)
getDay(): Weekday as a number (0-6)
getFullYear(): Year as a four-digit number (yyyy)
getHours(): Hour (0-23)
getMilliseconds(): Millisecond (0-999)
getMinutes(): Minute (0-59)
getMonth(): Month as a number (0-11)
getSeconds(): Second (0-59)
getTime(): Milliseconds since January 1, 1970
getUTCDate(): Day (date) of the month in the specified date according to universal time (also available for day, month, full year, hours, minutes, etc.)
parse: Parse a string representation of a date and return the number of milliseconds since January 1, 1970
Set part of a date
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 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, full year, hours, minutes, etc.)
Dom mode
Node methods
appendChild(): Add a new child node to an element as the last child node
cloneNode(): Clone an 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, otherwise false
hasChildNodes(): Return true if an element has any child nodes, otherwise false
insertBefore(): Insert a new child node before a specified, existing child node
isDefaultNamespace(): Return true if a specified namespaceURI is the default, otherwise 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
normalize(): Join adjacent text nodes and removes 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 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 HTMLCollection of elements with a certain tag name belonging to the given namespace
hasAttribute(): Return true if an element has any attributes, otherwise 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
lookupPrefix(): Return a DOMString containing the prefix for a given namespaceURI, if present
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 changes 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
JavaScript events
Mouse
onclick: User clicks on an element
oncontextmenu: User right-clicks on an element to open a context menu
ondblclick: User double-clicks on an element
onmousedown: User presses a mouse button over an element
onmouseenter: Pointer moves onto an element
onmouseleave: Pointer moves out of an element
onmousemove: Pointer moves while it is over an element
onmouseover: Pointer moves onto an element or one of its children
setInterval(): Call a function or evaluates an expression at
oninput: User input on an element
onmouseup: User releases a mouse button while over an element
onmouseout: User moves the mouse pointer out of an element or one of its children
onerror: Happens when an error occurs while loading an external file
onloadeddata: Media data is loaded
onloadedmetadata: Metadata (like dimensions and duration) is loaded
onloadstart: Browser starts looking for specified media
onpause: Media is paused either by the user or automatically
onplay: Media is started or is no longer paused
onplaying: Media is playing after having been paused or stopped for buffering
onprogress: Browser is in the process of downloading the media
onratechange: Media play speed changes
onseeked: User finishes moving/skipping to a new position in the media
onseeking: User starts moving/skipping
onstalled: Browser tries to load the media, but it is not available
onsuspend — Browser is intentionally not loading media
ontimeupdate: Play position has changed (e.g., because of fast forward)
onvolumechange: Media volume has changed (including mute)
onwaiting: Media paused but expected to resume (for example, buffering)
Comments are closed.