JavaScript Essentials Cheat Sheet with Explanations
Tags: webdev, javascript, programming, beginners
Published: 2024-03-22 18:27:32

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

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

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

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

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

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

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

```js
// 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](https://github.com/04anilr)
[website](https://my-portfolio-two-lemon-36.vercel.app/)


[Array methods in react.js ](https://dev.to/04anilr/how-to-use-array-methods-in-real-project-example-add-new-record-3o82)
[Fragment in react.js](https://dev.to/04anilr/fragment-in-reactjs-example-of-fragment-299a) 
[Conditional rendering in react.js](https://dev.to/04anilr/conditional-rendering-in-react-conditional-rendering-example-in-react-3j46)
[Children component in react.js](https://dev.to/04anilr/methods-of-react-children-component-in-react-4ol7)
[use of Async/Await in react.js](https://dev.to/04anilr/how-to-use-asyncawait-3a3o)
[Array methods in react.js](https://dev.to/04anilr/array-methods-in-reactjs-36jb)
[JSX in react.js](https://dev.to/04anilr/jsx-in-reactjs-3f7o)
[Event Handling in react.js](https://dev.to/04anilr/event-handling-in-react-5hc7)
[Arrow function in react.js](https://dev.to/04anilr/arrow-functions-in-react-4gb2)
[Virtual DOM in react.js](https://dev.to/04anilr/how-to-work-virtual-dom-in-react-dom-1b39)
[React map() in react.js](https://dev.to/04anilr/how-to-create-react-map-24pp)
[How to create dark mode in react.js](https://dev.to/04anilr/how-to-create-dark-mode-in-react-js-2kn2)
[How to use of Props in react.js](https://dev.to/04anilr/props-and-state-with-example-1bl1)
[Class component and Functional component](https://dev.to/04anilr/class-component-functional-component-in-react-k43)
[How to use of Router in react.js](https://dev.to/04anilr/how-to-use-of-router-in-reactreact-router-1163)
[All React hooks explain ](https://dev.to/04anilr/react-hooks-cheat-sheet-2hic)
[CSS box model ](https://dev.to/04anilr/css-box-model-work-2k0a)
[How to make portfolio nav-bar in react.js](https://dev.to/04anilr/how-to-make-nav-bar-for-portfolio-website-365m)