JavaScript cheatsheet for beginners
JavaScript plays a pivot role in frontend development. JavaScript is a programming language and responsible for user interaction, content manipulation and behaviour of content on webpage.
This story describes JavaScript in brief.
Variables
var :- function scoped, reassigned and redeclared.
let :- block - scoped, reassigned, can’t redeclared.
const :- block - scoped, can’t reassigned and redeclared.
Data types
Data types are categorised into two parts: Primitive and Non-primitive.
Numbers, String, Boolean, Undefined, Null, BigInt, Symbol are basic data types. An Object data types are collection of key-value pair data. Arrays and Objects are special type of objects.
Operators
JavaScript operators are symbols or keywords used to perform opration on values of variables.
Arithmetic operators
Performs mathematical calculation.
Addition (+)
Subtraction (-)
Division (/)
Multiplication (*)
Modulo (%)
Increment (++)
Decrement ( - -)
Exponential (* *)
Assignment operators
Assign value to variables.
Assignment (=)
Addition Assignment (+=)
Subtraction Assignment (-=)
Multiplication Assignment (*=)
Modulo Assignment (%=)
Division Assignment (/=)
Exponential Assignment (**=)
Comparison operators
Compares two values and returns boolean value.
Equal to (= =)
Not equal to (! =)
Strictly equal to (= = =)
Strictly not equal to (! = =)
Greater than (>)
Less than (<)
Greater than or equal to (>=)
Less than or equal to (<=)
Logical operators
logical operation between two or more boolean expressions.
AND (&&)
OR (||)
NOT (!)
Turnary operator (conditional)
Evaluates condition and executes expressions based on condition.
Syntax
condition ? expression1 : expression2
Bitwise operators
Performs binary operations on numbers.
Bitwise AND (&)
Bitwise OR (|)
Bitwise XOR (^)
Left shift (<<)
Right shift (>>)
Zero fill right shift (>>>)
String (Concatenation) operators
Concatenate two string.
Concatenation operator (+)
Concatenation assignment operator (+=)
Comma operator
Evaluates multiple operands seperated by comma and returns last operand.
comma (,) let a=(1,2,3,4,5);//5
typeof operator
Returns type of value of variable.
typeof “5”; // string
Get Frontend Writing’s stories in your inbox
Join Medium for free to get updates from this writer.
instance of operator
Specifies if the object is valid or not.
void operator
Discards return value.
void()
Conditional statements
Executes code based on true or false condition.
if statement
if(condition)
{
//code block to be executed if condition is
true.
}if else statement
if(condition)
{
//code block to be executed if condition is
true.
}
else
{
//code block to be executed if condition is
false.
}if…else if…else statement
if(condition1)
{
//code block to be executed if condition1 is
true.
}
else if(condition2)
{
//code block to be executed if condition1 is
false and condition2 is true.
}
else
{
//code block to be executed if condition1 &
condition2 is false.
}switch case statement
switch(expression)
{
case value 1:
// code block (if expression matches with
value 1)
break;
case value 2:
// code block (if expression matches with
value 2)
break;
.
.
.
default:
// code block (if no match found)
}Turnary operator (?)
Used for one liner conditional statement and shorthand if…else statement.
condition ? expression 1(if true): expression 2(if false);
Loops
Loops are control structure and used to repeat code block until the condition is false.
for loop
for (initialization; condition; increment/decrement)
{
// Code block to executed
}for in loop
for (let key in object)
{
// code block to be executed
}for each loop
array.forEach(function(element, index, array)
{
// code block to be executed
});while loop
while (condition)
{
// Code block to be executed
}do... while loop
do
{
// Code block to be executed
} while (condition);Arrays
An array is an ordered list of multiple items hold by single variable. Each items in array have their own index value which specifies position of array elements.
const array_name=[item1,item2,item3,... ];Array methods
Basic array methods:-
push() :- Add an element at last.
unshift() :- Add an element at beginning.
pop() :- Removes the last element.
shift() :- Removes the first element.
splice() :- Add or remove an element at specific position.
slice() :- Extract the specific portion of an array.
join() :- Joins all array elements into string.
concat() :- Merge two arrays into one new array.
to string() :- Returns array items in comma separated list.
flat() :- Change the dimetionality of array such as convertion of multi-dimensional array to one-dimensional array.
at() :- Returns indexed element.
Function
Functions are reusable code block used to perform specific task. Using functions you can make code reusable, well organised, and modular form.
You can define function 3 way.
- Function declaration
function func_name(parameter1, parameter2,...)
{
//code block
}
- Function expression
const variable_name=function (parameters)
{
//code block
}
- Arrow function
const variable_name=(parameters)=>{/*code block*/};Object
An object is a collection of key -value pair, where key represents property-name.
const variable_name={
property_name: value,
property_name: value,...
};
Regular expressions
Regular expression is sequence of characters in pattern used to searching, replacing and validating text.
/pattern/modifier flags;Events
JavaScript events are action on browser that results of user interaction or other processes.
<element event="some JavaScript">DOM
With HTML dom(Document Object Model), JavaScript can create,add, change, remove HTML elements and attributes. It also works on event and CSS styles.
document.getElementbyId("demo").innerHtml="Alter
the text";Hoisting
Hoisting is JavaScript behaviour to move all the declaration (variables, functions, classes) to the top of the current scope/script/function.
x=5;
console.log(x); //5
var x;
Closure
This story covered most important topics of JavaScript at beginner level. There is much more in JavaScript in advance, but before you have to mastered on basic concepts.
