Categories: SEO

JavaScript Cheat Sheet & Quick Guide

Whether you’re still learning Javascript or are an advanced developer, it can be helpful to keep a reference sheet for common JavaScript commands. We’ve compiled a downloadable JavaScript cheat sheet to keep near your desk.

But first, let’s recap what JavaScript is and how it works. 

What is JavaScript?

JavaScript is a programming language used to create interactive elements of a website, like maps, scrolling videos, and animation. It works in tandem with other coding languages, like HTML and CSS.

What is the Difference Between JavaScript, HTML, and CSS?

JavaScript, HTML, and CSS are all programming languages with major differences: 

  • HTML is the language used to define text and headings, as well as embed images on a webpage.
  • CSS is the language used to apply styling to the HTML content, like colors and fonts. 
  • JavaScript is the language that creates interactive and dynamic content like moving graphics, maps, scrolling videos, and more. 

Where JavaScript Sits on Your Website

JavaScript sits in the HTML of your webpages. It needs to be bookended by <script> tags. For example:

<script >

//JS code goes here

</script>

You can also add your JavaScript to a file and link to it within your HTML code. This form of linking, referred to sometimes as “linking JavaScript externally,” helps you keep track of your code.

How to Write JavaScript

There are categories of JavaScript code, including:

  • Variables: A variable is an element that can vary (i.e. a data value that can be changed.)
  • Operators: As with other programming languages, an operator operates single or multiple data values to produce a result.
  • Functions: A function takes an input and produces a related output. This is usually a set of statements that performs a task to produce a result.
  • Loops: This loops a block of code until certain conditions are met.
  • If – Else Statements: Like a flowchart, If-Else Statements run blocks of code if certain conditions are true. If the conditions are false, another block of code is run.
  • Strings: Strings are a way to store text. In strings, the first character is 0, the second character is 1, the third character is 2, and so on.
  • Regular Expressions: Also called a rational expression, a regular expression is a string of characters in a pattern used to match character combinations.
  • Numbers and Math: Numbers and Math are static properties for mathematical constants and functions.
  • Dates: As the name suggests, dates in JavaScript are a moment in time that can be as specific as a particular millisecond on any particular day.
  • DOM Node: A DOM node is a way to allow JavaScript to dynamically update the content of a page.
  • Events: An event is any change or update to the webpage that occurs as of JavaScript code being run.

JavaScript Command Cheat Sheet

When working with JavaScript, try our complete ‘cheat sheet’ of JavaScript commands. 

Variables

These are elements that can vary, which can include variables, data types, and arrays.

var

The most common variable. Var variables move to the top when code is executed

const

A variable that cannot be reassigned and is not accessible before they appear within the code

let

The let variable can be reassigned but not re-declared

var age = 23

Numbers

var x

Variables

var a = “init”

Text (strings)

var b = 1 + 2 + 3

Operations

var c = true

True or false statements

const PI = 3.14

Constant numbers

var name = {firstName:”John”, lastName:”Doe”}

Objects

concat()

Join several arrays into one

indexOf()

Returns the first position at which a given element appears in an array

join()

Combine elements of an array into a single string and return the string

lastIndexOf()

Gives the last position at which a given element appears in an array

pop()

Removes the last element of an array

push()

Add a new element at the end

reverse()

Reverse the order of the elements in an array

shift()

Remove the first element of an array

slice()

Pulls a copy of a portion of an array into a new array of 4 24

sort()

Sorts elements alphabetically

splice()

Adds elements in a specified way and position

toString()

Converts elements to strings

unshift()

Adds a new element to the beginning

valueOf()

Returns the primitive value of the specified object

Operators

These are single or multiple data values used to produce a result, including Basic Operators, Comparison Operators, Logical Operators, and Bitwise Operators.

(plus sign) +

Addition

Subtraction

*

Multiplication

/

Division

(..) Grouping operator

Grouping operator

%

Remainder

(two plus signs) ++

Increment numbers

Decrement numbers

( 2 equal signs) ==

Equal to

(3 equal signs) ===

Equal value and equal type

!=

Not equal

!==

Not equal value or not equal type

>

Greater than

<

Less than

>=

Greater than or equal to

<=

Less than or equal to

?

Ternary operator

&&

Logical and

!!

Logical or

!

Logical not

&

AND statement

|

OR statement

~

NOT

^

XOR

<<

Left shift

>>

Right shift

>>>

Zero fill right shift

Functions

These perform a task to produce a related output, including Outputting Data and Global Functions.

alert()

An alert box is displayed with an OK button

confirm()

Displays a message box with ok/cancel options

console.log()

Writes information to the browser 

document.write()

Write directly to the HTML document

prompt()

A pop up box that needs user input

decodeURI()

Decodes a Uniform Resource Identifier (URI) created by encodeURI 

decodeURIComponent()

Decodes a URI component

encodeURI()

Encodes a URI into UTF-8

encodeURIComponent()

Encodes a URI using numbers to represent letters

eval()

Evaluates JavaScript code represented as a string

isFinite()

Determines whether a passed value is a finite number

isNaN()

Determines whether a value is NaN or not

Number()

Returns a number converted from its argument

parseFloat()

Parses an argument and returns a floating point number

parseInt()

Parses its argument and returns an integer

Loops

These occur until certain conditions are met.

for

The most common way to create a loop in JavaScript

while

Sets up conditions for a loop

do-while

Checks once again to see if the conditions are met

break

Stops the loop cycle if conditions aren’t met

continue

Skip parts of the loop if conditions are met

If – Else Statements

These are designed to run blocks of code if certain conditions are met.

if (condition) {//}

If a condition is met do this

} else {//}

If a condition is not met do this

Strings

These store text and include escape characters and string methods.

Single quote

Double quote

Backslash

b

Backspace

f

Form feed

n

Newline

r

Carriage return

t

Horizontal tabulator

v

Vertical tabulator

charAt()

Returns a character at a specified position

charCodeAt()

Gives you the unicode of character at a specified position

concat()

Joins multiple strings together

fromCharCode()

Converts UTF-16 unicode values to characters

indexOf()

Returns the position of the first occurrence of a specified element

lastIndexOf()

Returns the position of the last occurrence of a specified element

match()

Returns any matches of a string 

replace()

Find and replace specific text

search()

Searches for text and returns its position

slice()

Extracts a section of a string and returns it

split()

Splits a string into substrings and returns it at a specified position

substr()

Extracts a string and returns it at a specified position

substring()

Excluding negative indices, splits a string into substrings and returns it at a specified position 

toLowerCase()

Convert to lowercase

toUpperCase()

Convert to uppercase

valueOf()

Returns the primitive value of a string object

Regular Expressions 

These are patterns, including pattern modifiers, brackets, metacharacters, and quantifiers.

e

Evaluate replacement

i

Perform case-insensitive matching

g

Perform global matching

m

Perform multiple line matching

s

Treat strings as a single line

x

Allow comments and whitespace in pattern

U

Non Greedy pattern

[abc]

Find any of the characters between the brackets

[^abc]

Find any character not in the brackets

[0-9]

Used to find any digit from 0 to 9

[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

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

Share
Chris Barnhart

Leave a Comment
Published by
Chris Barnhart

Recent Posts

Studio By WordPress & Other Free Tools

WordPress announced the rollout of Studio by WordPress, a new local development tool that makes…

April 28, 2024

Big Update To Google’s Ranking Drop Documentation

Google updated their guidance with five changes on how to debug ranking drops. The new…

April 27, 2024

Google March 2024 Core Update Officially Completed A Week Ago

Google has officially completed its March 2024 Core Update, ending over a month of ranking…

April 27, 2024

Daily Search Forum Recap: April 26, 2024

Here is a recap of what happened in the search forums today, through the eyes…

April 27, 2024

Google March 2024 Core Update Finished April 19, 2024

The Google March 2024 core update finished a week ago and Google did not tell…

April 27, 2024

How to Create a Winning Social Media Marketing Strategy [Free Template]

Small business owners and solopreneurs wear many hats. From managing finances to handling customer service,…

April 26, 2024