JavaScript Essentials Cheat Sheet with Explanations

#webdev #javascript #programming #beginners

JavaScript cheat sheet covering some fundamental concepts and syntax that you may find handy. Feel free to bookmark it for quick reference!

JavaScript Cheat Sheet

Variables and Data Types

// Variable declaration
let variableName;

// Assigning values
variableName = 10;

// Data types
let numberVar = 10; // Number
let stringVar = "Hello"; // String
let booleanVar = true; // Boolean
let arrayVar = [1, 2, 3]; // Array
let objectVar = { key: "value" }; // Object

Explanation:

Variables in JavaScript are declared using let, const, or var. Here, let is used.
Values are assigned using the assignment operator =.
JavaScript has various data types such as numbers, strings, booleans, arrays, and objects. Here, each data type is demonstrated with an example.

Operators

// Arithmetic operators
let sum = 2 + 3;
let difference = 5 - 2;
let product = 3 * 4;
let quotient = 10 / 2;

// Comparison operators
let isEqual = 5 === 5;
let isNotEqual = 10 !== 5;
let greaterThan = 10 > 5;
let lessThan = 3 < 8;

// Logical operators
let andOperator = true && false;
let orOperator = true || false;
let notOperator = !true;

Explanation:

Arithmetic operators (+, -, *, /) perform mathematical operations.
Comparison operators (===, !==, >, <) compare values and return a boolean result.
Logical operators (&&, ||, !) are used to combine or negate boolean values.

Control Flow

// if-else statement
if (condition) {
    // code block
} else {
    // code block
}

// switch statement
switch (expression) {
    case value1:
        // code block
        break;
    case value2:
        // code block
        break;
    default:
        // code block
}

Explanation:

if-else statements execute a block of code based on a condition.
switch statements evaluate an expression and execute the corresponding block of code based on matching cases. break is used to exit the switch statement.

Loops

// for loop
for (let i = 0; i < 5; i++) {
    // code block
}

// while loop
let count = 0;
while (count < 5) {
    // code block
    count++;
}

// do-while loop
let num = 0;
do {
    // code block
    num++;
} while (num < 5);

Explanation:

for, while, and do-while loops are used for iteration, executing a block of code repeatedly until a condition is met.
In a for loop, initialization, condition, and iteration are all specified within the loop structure.

Functions

// Function declaration
function functionName(parameter1, parameter2) {
    // code block
}

// Function expression
const functionName = function(parameter1, parameter2) {
    // code block
};

// Arrow function
const functionName = (parameter1, parameter2) => {
    // code block
};

Explanation:

Functions are blocks of reusable code.
Function declarations, function expressions, and arrow functions are different ways to define functions in JavaScript.

Arrays

// Array declaration
let arrayName = [1, 2, 3];

// Accessing elements
let firstElement = arrayName[0];

// Modifying elements
arrayName.push(4); // Adds element to end
arrayName.pop(); // Removes element from end

// Iterating over arrays
arrayName.forEach(item => {
    // code block
});

Explanation:

Arrays are used to store multiple values in a single variable.
Elements of an array are accessed using square brackets and an index.
Methods like push() and pop() are used to add or remove elements from an array.
The forEach() method is used to iterate over each element of an array.

Objects

// Object declaration
let obj = { key1: "value1", key2: "value2" };

// Accessing properties
let value = obj.key1;

// Modifying properties
obj.key3 = "value3";

// Iterating over object properties
for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
        let value = obj[key];
        // code block
    }
}

Explanation:

Objects are collections of key-value pairs where keys are strings (or Symbols) and values can be of any data type.
Object properties are accessed using dot notation or square brackets.
Object properties can be added or modified dynamically.
The for...in loop is used to iterate over the properties of an object. hasOwnProperty() method is used to check if the property belongs to the object itself.

This cheat sheet covers essential JavaScript syntax and concepts with explanations for better understanding and quick reference.

github
website

Array methods in react.js
Fragment in react.js
Conditional rendering in react.js
Children component in react.js
use of Async/Await in react.js
Array methods in react.js
JSX in react.js
Event Handling in react.js
Arrow function in react.js
Virtual DOM in react.js
React map() in react.js
How to create dark mode in react.js
How to use of Props in react.js
Class component and Functional component
How to use of Router in react.js
All React hooks explain
CSS box model
How to make portfolio nav-bar in react.js