JavaScript Cheat Sheet A Basic Guide to JavaScript (original) (raw)

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

• JavaScript (JS) is a versatile, high-level programming language primarily used for creating interactive and dynamic content on websites.
• It runs in browsers, enabling features like form validation, animations, and real-time updates.

This article provides an in-depth JavaScript Cheat Sheet, a must-have for every web developer.

JavaScript Chear Sheet

**What is JavaScript Cheat Sheet?

A **JavaScript Cheat Sheet is a concise reference guide that provides a quick overview of essential JavaScript concepts, syntax, and commands.

It is designed to help developers, especially beginners, recall important topics or features of the language without delving into detailed documentation.

**Fundamentals

• To use JavaScript on a website, attach the JavaScript file to the HTML file. Enclose the code within the <script> tag for the browser to recognize and execute it:

• You can also use an external file:

• JavaScript comments help explain and improve code readability.
  • **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

JavaScript `

console.log("Using var Keyword"); var x = 1; if (x === 1) { var x = 2; console.log(x); } console.log(x);

// Using let keyword

console.log("Using let Keyword"); let x1 = 1; if (x1 === 1) { let x1 = 2; console.log(x1); } console.log(x1);

// 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

Using var Keyword 2 2 Using let Keyword 2 1 Using const Keyword 48

• Use let for variables whose values will change.
• Use const for variables with constant values.
• Avoid using var in modern JavaScript due to potential scoping issues.

**Datatypes

• In JavaScript, data types define the type of value a variable can hold.
• Understanding the types is crucial for evaluating expressions and ensuring the correct operations are performed on variables.
• JavaScript has both **primitive and **non-primitive data types:

JavaScript `

// string let s = "hello geeks"; console.log(s);

// Number const n = 10; console.log(n);

// Boolean const x = "true"; console.log(x);

// Undefined

let name; console.log(name);

// Null

const num = null; console.log(num);

// Symbol const val1 = Symbol("hello"); const val2 = Symbol("hello"); console.log(val1); console.log(val2);

// Here both values are different // as they are symbol type which // is immutable object

const obj = { firstName: "geek", lastName: null, batch: 2, }; console.log(obj);

`

Output

hello geeks 10 true undefined null Symbol(hello) Symbol(hello) { firstName: 'geek', lastName: null, batch: 2 }

• **Primitive types (like Number, String, Boolean, Null, and Undefined) store single values.
• **Non-primitive types (like Object, Array, and Function) can store collections of data or executable code.

**Operators

• JavaScript operators are symbols used to perform various operations on variables (operands). Following are the different types of operators:

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)); // false

// 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

`

Output

x + y = 5 x - y = 2 x * y = 15 x / y = 1.6666666666666667 x % y = 2 ++x = 6 x++ = 6 x = 7 --x = 6 x-- = 6 x = 5 x ** y = 125 true true true true false true true false

**JS scope and scope chain

**Scope determines where a variable is accessible in your program. It defines the context in which variables can be referenced or modified. JavaScript has three main types of scope:

• **Function Scope: Variables declared inside a function are only accessible within that function.
• **Global Scope: Variables declared outside any function are accessible throughout the program.
• **Block Scope: Variables declared with let or const inside a block (e.g., loops or conditionals) are only accessible within that block.

**Scope Chain:

• The **scope chain helps the JavaScript engine resolve variable references by searching through the current scope and its outer scopes (from local to global).
• If a variable isn’t found in the current scope, the engine looks in outer scopes until it either finds the variable or reaches the global scope.
• If it cannot find the variable, it either declares it in the global scope (non-strict mode) or throws an error (strict mode). JavaScript `

let a = 10;

function example() { let b = 20; // Exists in function scope

if (true) {
    var c = 30; // Exists in function scope (due to 'var')
    const d = 40; // Exists in block scope
}

console.log(a); // Accessible from global scope
console.log(b); // Accessible from function scope
console.log(c); // Accessible from function scope (due to 'var')
console.log(d); // Error: 'd' is not accessible outside block scope

}

example();

`

**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:

JavaScript `

// JS parseInt function: const num1 = parseInt("100.45"); console.log('Using parseInt("100.45") = ' + num1);

// JS parseFloat function: const num2 = parseFloat("123.45abc"); console.log('parseFloat("123.45abc") = ' + num2);

// JS isNaN function: console.log(isNaN("hello"));

// JS Number() function: const num3 = Number("123"); console.log("Value of '123': " + num3);

// JS eval() function: function evalExample() { const expression = "2 + 3 * 4"; // Example expression to evaluate const result = eval(expression); // Evaluates '2 + 3 * 4' and returns 14 console.log(result); } evalExample();

// JS encodeURI function: const url = "https://example.com/hello world?query=javascript"; const encodedURL = encodeURI(url); // Encodes spaces as '%20' and ensures valid URL. console.log(encodedURL);

`

Output

Using parseInt("100.45") = 100 parseFloat("123.45abc") = 123.45 true Value of '123': 123 14 https://example.com/hello%20world?query=javascript

• parseInt(): Converts the string to an integer by removing the decimal part.
• parseFloat(): Converts the string to a floating-point number until a non-numeric character is encountered.
• isNaN(): Checks whether the value is NaN (Not a Number).
• Number(): Converts a value to a number; for example, Number("123") results in 123.
• eval(): Evaluates a JavaScript expression in string form and executes it. Be cautious with its use due to security risks.
• encodeURI(): Encodes a complete URL, converting special characters like spaces into their appropriate encoded forms.

**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:

JavaScript `

// Declaring and initializing arrays

// Num Array let arr = [10, 20, 30, 40, 50]; let arr1 = [110, 120, 130, 140];

// String array let string_arr = ["Alex", "peter", "chloe"];

// push: Adding elements at the end of the array arr.push(60); console.log("After push op " + arr);

// unshift() Adding elements at the start of the array arr.unshift(0, 10); console.log("After unshift op " + arr );

// pop: removing elements from the end of the array arr.pop(); console.log("After pop op" + arr);

// shift(): Removing elements from the start of the array arr.shift(); console.log("After shift op " + arr);

// splice(x,y): removes x number of elements // starting from index y arr.splice(2, 1); console.log("After splice op" + arr);

// reverse(): reverses the order of elements in array arr.reverse(); console.log("After reverse op" + arr);

// concat(): merges two or more array console.log("After concat op" + arr.concat(arr1));

`

**Loops

• Loops are a useful feature in most programming languages.
• With loops you can evaluate a set of instructions/functions repeatedly until certain condition is reached.
• They let you run code blocks as many times as you like with different values while some condition is true. Loops can be created in the following ways in JavaScript:

JavaScript `

// Illustration of for loop let x;

for (x = 2; x <= 4; x++) { console.log("Value of x:" + x); }

// creating an Object let languages = { first: "C", second: "Java", third: "Python", fourth: "PHP", fifth: "JavaScript", };

// Iterate through every property of the object for (itr in languages) { console.log(languages[itr]); }

// Illustration of while loop let y = 1;

// Exit when x becomes greater than 4 while (y <= 4) { console.log("Value of y:" + y); y++; }

// Illustration of do-while loop let z = 21;

do {

console.log("Value of z:" + z);

z++;

} while (z < 20);

`

Output

Value of x:2 Value of x:3 Value of x:4 C Java Python PHP JavaScript Value of y:1 Value of y:2 Value of y:3 Value of y:4 Value of z:21

**If-else

• If-else is used in JavaScript to execute a block of codes conditionally.
• These are used to set conditions for your code block to run. If certain condition is satisfied certain code block is executed otherwise else code block is executed.
• JavaScript allows us to nest if statements within if statements as well. i.e, we can place an if statement inside another if statement. JavaScript `

// JavaScript program to illustrate if-else statement const i = 10;

if (i < 15) console.log("Value of i is less than 10"); else console.log("Value of i is greater than 10");

`

Output

Value of i is less than 10

**Strings

• Strings in JavaScript are primitive and immutable data types used for storing and manipulating text data which can be zero or more characters consisting of letters, numbers or symbols.
• JavaScript provides a lot of methods to manipulate strings. Some most used ones are:

JavaScript `

let gfg = 'GFG '; let geeks = 'stands-for-GeeksforGeeks';

// Print the string as it is console.log(gfg); console.log(geeks);

// concat() method console.log(gfg.concat(geeks));

// match() method console.log(geeks.match(/eek/));

// charAt() method console.log(geeks.charAt(5));

// valueOf() method console.log(geeks.valueOf());

// lastIndexOf() method console.log(geeks.lastIndexOf('for'));

// substr() method console.log(geeks.substr(6));

// indexOf() method console.log(gfg.indexOf('G'));

// replace() method console.log(gfg.replace('FG', 'fg'));

// slice() method console.log(geeks.slice(2, 8));

// split() method console.log(geeks.split('-'));

// toUpperCase method console.log(geeks.toUpperCase(geeks));

// toLowerCase method console.log(geeks.toLowerCase(geeks));

`

Output

GFG stands-for-GeeksforGeeks GFG stands-for-GeeksforGeeks [ 'eek', index: 12, input: 'stands-for-GeeksforGeeks', groups: undefined ] s stands-for-GeeksforGeeks 16 -for-GeeksforGeeks 0 Gfg an...

**Regular Expressions

• A regular expression is a sequence of characters that forms a search pattern.
• The search pattern can be used for text search and text to replace operations.
• A regular expression can be a single character or a more complicated pattern.

**Regular Expression Modifiers:

Modifiers can be used to perform multiline searches. Some of the pattern modifiers that are allowed in JavaScript:

**Regular Expression Patterns:

Metacharacters are characters with a special meaning. Some of the metacharacters that are allowed in JavaScript:

**Quantifiers:

They provide the minimum number of instances of a character, group, or character class in the input required to find a match.

Some of the quantifiers allowed in JavaScript are:

Here is an example to help you understand regular expression better.

JavaScript `

// Program to validate the email address function validateEmail(email) {

// Regex pattern for email
const re = /\S+@\S+\.\S+/g;

// Check if the email is valid
let result = re.test(email);

if (result) {
    console.log("The email is valid.");
} else {
    console.log("The email is not valid.");
}

}

// Input Email Id let email = "abc@gmail.com" validateEmail(email);

email = "abc#$#@45com" validateEmail(email);

`

Output

The email is valid. The email is not valid.

**Data Transformation

• Data transformation is converts data from one format to another.
• It can be done with the usage of higher-order functions which can accept one or more functions as inputs and return a function as the result.
• All higher-order functions that take a function as input are map(), filter(), and reduce().

JavaScript `

const num = [16, 25];

/* Using JS map() Method */ console.log(num.map(Math.sqrt));

const ages = [19, 37, 16, 42];

/* Using JS filter() Method */ console.log(ages.filter(checkAdult));

function checkAdult(age) { return age >= 18; }

/* Using JS reduce() Method */ const numbers = [165, 84, 35]; console.log(numbers.reduce(myFunc));

function myFunc(total, num) { return total - num; }

`

Output

[ 4, 5 ] [ 19, 37, 42 ] 46

**Date objects

• The Date object is an inbuilt datatype of JavaScript language.
• It is used to deal with and change dates and times.
• There are four different way to declare a date, the basic things is that the date objects are created by the new Date() operator.

Syntax

new Date()
new Date(milliseconds)
new Date(dataString)
new Date(year, month, date, hour, minute, second, millisecond)

There are various methods in JavaScript used to get date and time values or create custom date objects. Some of these methods are:

JavaScript `

// Here a date has been assigned by creating a date obj let DateObj = new Date("October 13, 1996 05:35:32");

// getDate() let A = DateObj.getDate();

// Printing date of the month console.log(A);

// getTime() let B = DateObj.getTime();

// Printing time in milliseconds. console.log(B);

// getMinutes() let minutes = DateObj.getMinutes();

// Printing minute. console.log(minutes);

// getFullYear() let C = DateObj.getFullYear();

// Printing year console.log(C);

// getDay() let Day = DateObj.getDay();

// Printing day of the week console.log("Number of Day: " + Day);

// setDate DateObj.setDate(15);

let D = DateObj.getDate();

// Printing new date of the month console.log(D);

// parse(), taking wrong date string as input. let date = "February 48, 2018 12:30 PM";

// calling parse function. let msec = Date.parse(date); console.log(msec);

`

Output

13 845184932000 35 1996 Number of Day: 0 15 NaN

**DOM

• DOM stands for **Document Object Model.
• It defines the logical structure of documents and the way a document is accessed and manipulated. JavaScript can not understand the tags in HTML document but can understand objects in DOM.
• Below are some of the methods provided by JavaScript to manipulate these nodes and their attributes in the DOM:

HTML `