JavaScript Cheat Sheet – A Basic Guide to JavaScript

Read

What is JavaScript?

JavaScript is a lightweight, open and cross-platform programming language. It is omnipresent in modern development and is used by programmers across the world to create dynamic and interactive web content like applications and browsers. It is one of the core technologies of the World Wide Web, alongside HTML and CSS, and the powerhouse behind the rapidly evolving internet by helping create beautiful and crazy-fast websites.

JavaScript Chear Sheet

What is JavaScript Cheat Sheet?

We have come up with a cheat sheet to help our readers learn JavaScript in the easiest way possible. It is a documentation of the basics and concepts of JavaScript, quick, correct, and ready-to-use code snippets for common circumstances in JavaScript on one page. It is helpful to both beginner and professional coders of JavaScript.

Strings
Regular Expressions
Data Transformation
Date objects
DOM
Numbers and maths
Events
Errors
Window Properties

Fundamentals: To use JavaScript on website we need to attach the JavaScript file to the HTML file. To do a better code, we should also do the commenting during the code. There are two types of commenting single-line and multiline.

For a browser to know the code is written in JavaScript and execute it we must enclose the code within the <script> tag to include it on the HTML page.

<script type="text/javascript"> 
  // Your js code goes here 
</script>

An external JavaScript file can also be written separately and included within our HTML file using the script tag as:

<script src="filename.js"></script>.

JavaScript comments can be extremely useful to explain JavaScript code and help understand what’s going on in your code and make it more readable.
- Single-line comments: Start a single-line comment with “//”.
- Multi-line comments: Wrap the comment in /* and*/ if it spans multiple lines.

Variables: Variables in JavaScript are containers for storing data. JavaScript allows the usage of variables in the following three ways:

Variable	Description	Example
var	Used to initialize to value, redeclared and its value can be reassigned.	var x= value;
let	Similar to var but is block scoped	let y= value;
const	Used to declare a fixed value that cannot be changed.	const z= value;

JavaScript

console.log("Using var Keyword"); 
var x = 1; 
if (x === 1) { 
    var x = 2; 
    console.log(x); // Output: 2 
} 
console.log(x); // Output: 2 
  
  
// Using let keyword 
console.log("Using let Keyword"); 
let x1 = 1; 
if (x1 === 1) { 
    let x1 = 2; 
    console.log(x1); // Output: 2 
} 
console.log(x1); // Output: 1 
  
  
// Using const keyword 
console.log("Using const Keyword"); 
const number = 48; 
  
// Changing const value will display TypeError 
try { 
    const number = 42; 
} catch (err) { 
    console.log(err); 
} 
console.log(number); // Output: 48 

Datatypes: There are different types of values and data that can be stored in JavaScript variables. For the machine to be able to operate on variables, and correctly evaluate the expressions it is important to know about the type of variables involved. There are following primitive and non-primitive datatypes in JavaScript:

Datatype	Description	Example
Number	Numeric values can be real number or integers.	var x= number;
String	Series of multiple characters written in quotes.	var x= “characters”;
Boolean	Has only two values true or false.	var x= true/false;
Null	Special value that represents that the variable is empty.	var x= null;
Undefined	Represents a variable which is declared but not assigned any value.	let x; / let x= undefined;
Object	Complex data type that allows us to store a collection of data.	var x= { key: “value”; key: “value”; }
Array	Stores multiple values of same type in a single variable.	var x =[‘y1’, ‘y2′,’y3′,’y4’]; y: any datatype
Function	Functions are objects that can be called to execute a block of code.	function x(arguments){ block of code }

JavaScript

// String 
let str = "hello geeks"; 
console.log(str); 
  
// Number 
const num = 10; 
console.log(num); 
  
// Boolean 
const x = "true"; 
console.log(x); 
  
// Undefined 
let name; 
console.log(name ); 
  
// Null 
const number = null; 
console.log(number); 
  
// Symbol 
const value1 = Symbol("hello"); 
const value2 = Symbol("hello"); 
console.log(value1); 
console.log(value2); 
  
// Here both values are different  
// as they are symbol type which  
// is immutable object 
const object = { 
    firstName: "geek", 
    lastName: null, 
    batch: 2, 
}; 
console.log(object); 

Operators: JavaScript operators are symbols used to performvarious operations on variables (operands). Following are the different types of operators:

Operators	Description	Symbols
Arithmetic	Used to perform basic arithmetic operations on variables(operands).	+,-,*,/,%,++,–
Comparison	Comparison operator is used to compare two operands.	==, ===,!=,>,<,>=,<=
Bitwise	Used to perform bitwise operations.	&, \| , ^,~,<<, >>, >>>
Logical	There are three logical operators in javascript. logical AND: When all the operands are true. logical OR: When one or more than one operands are true. logical NOT: Converts true to false.	exp1&&exp2,exp1 \|\|exp2, !exp
Assignment	Assignment operators assign values to JavaScript variables.	=, +=,-=,*=,/=,%=

JavaScript

let x = 5; 
let y = 3; 
  
// Addition 
console.log("x + y = ", x); // 8 
  
// Subtraction 
console.log("x - y = ", x - y); // 2 
  
// Multiplication 
console.log("x * y = ", x * y); // 15 
  
// Division 
console.log("x / y = ", x / y); 
  
// Remainder 
console.log("x % y = ", (x % y)); // 2 
  
// Increment 
console.log("++x = ", ++x); // x is now 6 
console.log("x++ = ", x++); 
console.log("x = ", x); // 7 
  
// Decrement 
console.log("--x = ", --x); // x is now 6 
console.log("x-- = ", x--); 
console.log("x = ", x); // 5 
  
// Exponentiation 
console.log("x ** y =", x ** y); 
  
// Comparison 
console.log(x > y); // true 
  
// Equal operator 
console.log((2 == 2)); // true 
  
// Not equal operator 
console.log((3 != 2)); // true 
  
// Strict equal operator 
console.log((2 === 2)); // true 
  
// Strict not equal operator 
console.log((2 !== 2)); // true 
  
// Logical Operator 
  
// Logical AND 
console.log((x < 6 && y < 5)); // true 
  
// Logical OR 
console.log((x < 6 || y > 6)); // true 
  
// Logical NOT 
console.log(!(x < 6)); // false 

JS scope and scope chain:

Scope: Scope defines the accessibility or visibility of variables in JavaScript. That is, which sections of the program can access a given variable and where the variable can be seen.There are usually three types of scopes:
Scope chain: The scope chain is used to resolve the value of variable names in JavaScript. Without a scope chain, the JavaScript engine wouldn’t know which value to pick for a certain variable name if there are multiply defined at different scopes. If the JavaScript engine could not find the variable in the current scope, it will look into the outer scope and will continue to do so until it finds the variable or reaches the global scope. If it still could not find the variable, it will either implicitly declare the variable in the global scope (if not in strict mode) or return an error.

scope	Description
function	Variables declared inside a function is inside the function scope also known as local scope.
global	The variables in global scope can be accessed from anywhere in the program.
block	Block scope restricts the access of a variable outside its scope

JavaScript

let z = 3; 
  
function foo() { 
    if (true) { 
        var x = '1';   // Exist in function scope 
        const y = '2'; // Exist in block scope  
    } 
    console.log(x); 
    console.log(y); 
    console.log(z);    // Exist in global scope 
} 
  
foo(); 

Functions: A JavaScript function is a block of code designed to perform a particular task. It is executed when invoked or called. Instead of writing the same piece of code again and again you can put it in a function and invoke the function when required. JavaScript function can be created using the functions keyword. Some of the functions in JavaScript are:

Function	Description
parseInt()	Parses an argument passed to it and returns an integral number.
parseFloat()	Parses the argument and returns a floating-point number.
isNaN()	Determines if a given value is Not a Number.
Number()	Returns an argument after converting it to number.
eval()	Used for evaluating JavaScript programs presented as strings.
prompt()	Creates a dialogue box for taking input from the user.
encodeURI()	Encodes a URI into a UTF-8 encoding scheme.
match()	Used to search a string for a match against regular expression.

JavaScript

// JS parseInt function 
const num1 = parseInt("3.14"); 
console.log('Using parseInt("3.14") = ' + num1); 
  
// JS parsefloat function 
// It returns floating point Number until  
// it encounters Not a Number character 
const num2 = parseFloat("2018.12@geeksforgeeks"); 
console.log('parseFloat("2018@geeksforgeeks") = ' + num2); 
  
// JS isNAN function 
console.log(isNaN(12)); 
  
// JS number() function 
const num3 = Number(true); 
console.log("Value of 'true': " + num3); 
  
// JS eval() function 
function evalfn() { 
    const a = 4; 
    const b = 4; 
    const value = eval(new String(a * b)); 
    console.log(value); 
} 
evalfn(); 
  
// JS encode URI function 
const url = "https://www.google.com/search?q=geeks for geeks"; 
const encodedURL = encodeURI(url); 
console.log(encodedURL); 

Arrays: In JavaScript, array is a single variable that is used to store different elements. It is often used when we want to store list of elements and access them by a single variable. Arrays use numbers as index to access its “elements”.
Declaration of an Array: There are basically two ways to declare an array.

Example: var House = [ ]; // Method 1
var House = new Array(); // Method 2

There are various operations that can be performed on arrays using JavaScript methods. Some of these methods are:

Method	Description
push()	Adds a new element at the very end of an array.
pop()	Removes the last element of an array.
concat()	Joins various arrays into a single array.
shift()	Removes the first element of an array
unShift()	Adds new elements at the beginning of the array
reverse()	Reverses the order of the elements in an array.
slice()	Pulls a copy of a part of an array into a new array.
splice()	Adds elements in a particular way and position.
toString()	Converts the array elements into strings.
valueOf()	Returns the primitive value of the given object.
indexOf()	Returns the first index at which a given element is found.
lastIndexOf()	Returns the final index at which a given element appears.
join()	Combines elements of an array into one single string and then returns it
sort()	Sorts the array elements based on some condition.