# Loops, Arrays, Objects and Functions

## Loops

Loops are used to execute a block of code repeatedly as long as a specified condition is true. JavaScript supports several types of loops:

### For Loop

The `for` loop is used to run a block of code a specific number of times. It consists of three parts: initialization, condition, and increment/decrement.

#### Syntax:

```javascript
for (initialization; condition; increment/decrement) {
  // code block to be executed
}
```

```javascript
for (let i = 0; i < 5; i++) {
  console.log(i);
}
// Output: 0, 1, 2, 3, 4
```

* In the loop, it will first create a variable named as `i` and assign a value to `0`, now it will check whether `0` is lesser than `5` or not, if the condition is true then it will increment the variable `i` value with `1`, at the starting of this loop, before matching the condition, `i`'s value was `0`, but after the condition came as true, its value changed to `1`, and now we are inside the `for` loops body, and simply we logged out our `i` value. Now again it went back and this time it did not create a variable, it just jumped to the condition part, it checked whether `1` is lesser than `5` or not, yes it is lesser than `5` so it again incremented `i` value with one and went to `for` loops body and logged out our `i`'s value. This process will repeat for 5 times, on the 5th and last time it checked the value of `i` which is 5, is lesser than the condition `5`, no its not lesser than `5`, both are equal, now it will increment the value of `i` with one and break/come out of loop.
    
* You might be wondering why did it increment the value of `i` if the condition became false on the last loop, Well that is how JavaScript works in loops.
    

### While Loop

The `while` loop runs a block of code as long as the specified condition is true.

#### syntax:

```javascript
while (condition) {
  // code block to be executed
}
```

```javascript
let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}
// Output: 0, 1, 2, 3, 4
```

* The `while` loop works similar to `for` loop, only the way we write our condition is different, other than that, all of the logic I explained on `for` loop works the same here.
    

### Do-While Loop

The `do-while` loop is similar to the `while` loop, but it guarantees that the code block will be executed at least once since the condition is evaluated after the block is executed.

#### syntax:

```javascript
do {
  // code block to be executed
} while (condition);
```

```javascript
let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);
// Output: 0, 1, 2, 3, 4
```

* As it was mentioned above, the `do-while` loop will be executed at least once even if the condition does not match, let us suppose:
    

```javascript
let i = 6;
do {
  console.log(i);
  i++;
} while (i < 5);
// Output: 6
```

* In this example `i`'s value is `6` and it is certain that `6` is lesser than `5` in our condition yet the loop will be executed once and print it in our log then break/come out of loop. This loop can be helpful if we want some of our logic to be executed at least for once even if our condition is not matching.
    

### `break` in `for` loop

```javascript
for (let i = 0; i < 5; i++) {
    if (i == 3) {
        break
      }
    console.log(i)
}
// Output: 0, 1, 2, 4
```

* Remember how the `for` loop works, it is working on the same logic, but we have a new keyword `break` inside of our `if` condition, what we are saying in the condition is that if the value of `i` is equals to `3` then break out of the whole loop and stop the execution there. Hence we got our output as `0, 1, 2` and after that the loop got broken.
    

### `continue` in `for` loop

```javascript
for (let i = 0; i < 5; i++) {
    if (i == 3) {
        continue;
      }
    console.log(i);
}
// Output: 0, 1, 2, 4
```

* It is again working on the same logic of `for` loop, but we again have a new keyword `continue`, what actually happening is that in our `if` condition we are checking if the value of `i` is equals to `3`, if its correct then it will skip the value of `3` and then go back to the loop and continue the execution while skipping the number `3`. Hence we got our output as `0, 1, 2, 4`.
    

<mark>Understanding loops is very important because suppose we have n number of data in our database and we want to render it out in our frontend, we can never be sure how many times we will have to write it down in frontend logic, so that's where loops come in help, it will count how many data's are there in database and then run the loop for that number of time's. It is purely executing dynamically.</mark>

## Arrays

Arrays are used to store multiple values in a single variable. JavaScript arrays are dynamic, meaning they can grow and shrink in size. Here are some array methods and properties:

### Creating an Array

```javascript
let fruits = ['Apple', 'Banana', 'Cherry'];
```

* Writing them in single quotes `''` or double quotes `""` does not really make any difference, JavaScript will make it as single quotes even if written in double quotes.
    

### Array Properties and Methods

#### .length

The `.length` property returns the number of elements quantity in an array.

```javascript
let fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits.length); // Output: 3
```

* It will count how many element's are there in the array.
    

#### .push()

The `.push()` method adds one or more elements to the end of an array and returns the new length of the array.

```javascript
let fruits = ['Apple', 'Banana', 'Cherry'];
fruits.push('Pineapple');
console.log(fruits); // Output: ['Apple', 'Banana', 'Cherry', 'Pineapple']
```

#### .pop()

The `.pop()` method removes the last element from an array and returns that element. This method changes the length of the array.

```javascript
let fruits = ['Apple', 'Banana', 'Cherry'];
let lastFruit = fruits.pop();
console.log(lastFruit); // Output: 'Cherry'
console.log(fruits); // Output: ['Apple', 'Banana']
```

#### .sort()

The `.sort()` method sorts the elements of an array in ascending order and returns the sorted array. By default, the sort order is according to string Unicode code points.

```javascript
let fruits = ['Banana', 'Apple', 'Cherry'];
fruits.sort();
console.log(fruits); // Output: ['Apple', 'Banana', 'Cherry']
```

* As mentioned above, it can only sort in String, it cannot sort number's in order for example:
    

```javascript
let nums = [100, 63, 245];
nums.sort();
console.log(nums); // Output: [ 100, 245, 63 ]
```

* In this case the sort function will first convert the numbers into String, such as `['100', '63', '245']` and then it will only focus on first Number ex: `'1', '6', '2'`, then it will sort the numbers according to that, hence it gave us the output of `[100, 245, 63]`.
    

To sort the numbers we can do:

```javascript
let nums = [100, 63, 245];
nums.sort((a, b) => a - b);
console.log(nums); // Output: [ 63, 100, 245 ]
```

* We have used an Arrow Function inside our `.sort()` function.
    

#### .includes()

The `.includes()` method determines whether an array contains a certain element, returning `true` or `false` as appropriate.

```javascript
let fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits.includes('Banana')); // Output: true
console.log(fruits.includes('Grape')); // Output: false
```

#### .indexOf()

The `.indexOf()` method returns the first index at which a given element can be found in the array, or `-1` if it is not present.

```javascript
let fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits.indexOf('Banana')); // Output: 1
console.log(fruits.indexOf('Grape')); // Output: -1
```

#### .splice()

The `.splice()` method changes the contents of an array by removing or replacing existing elements and/or adding new elements.

```javascript
let fruits = ['Apple', 'Banana', 'Cherry'];
// Remove 1 element at index 1
let removed = fruits.splice(1, 1);
console.log(fruits); // Output: ['Apple', 'Cherry']
console.log(removed); // Output: ['Banana']

// Add 'Grape' at index 1
fruits.splice(1, 0, 'Grape');
console.log(fruits); // Output: ['Apple', 'Grape', 'Cherry']
```

* `fruites.splice(remove from which index, how many element to remove)`, so in our first example we said remove from index `1` and remove only `1` element from there.
    
* Index's count always start from `0` and it can go as far as your Arrays length. Here the element `'Apple'` is at index `0` and `'Banana'` at index of `1` so we said to remove `'Banana'` from the Array and if we were to remove till `'Cherry'` then we would have specified `2` in our `.splice()`'s second value, But we wanted to remove only the `'Banana'` so we said `1` in the second value.
    

#### .forEach()

The `.forEach()` method executes a provided function once for each array element.

```javascript
let fruits = ['Apple', 'Banana', 'Cherry'];
fruits.forEach((fruit, index) => {
  console.log(`${index}: ${fruit}`);
});
// Output:
// 0: Apple
// 1: Banana
// 2: Cherry
```

* `forEach()` is a looping function for Arrays, we have two values as an argument in our Arrow Function, first argument will hold our each element of our Array and second will hold its index number. The loop will keep looping through the Array till the Array ends and do a certain activity which we have given.
    

## Objects

Objects are one of the fundamental building blocks in JavaScript, used to store collections of data and more complex entities. An object is a collection of properties, where a property is an association between a key (name) and a value.

### Creating an Object

Objects are used to store multiple key and values in a single variable. As mentioned above unlike Arrays here we have `key` instead of `index`'s and we can name the key as anything we want. For example:

```javascript
let userData = {
    name: "Aquib",
    age: 22,
    country: "India"
};
```

* Here the `name` is our `key` and `"Aquib"` is our value of that key, and so on. We can store as many data as we want inside the object.
    

### Accessing Object Properties

```javascript
console.log(userData.name); //Output: Aquib
console.log(userData.age); //Output: 22
```

* To access any objects property the most famous method is using `dot`, the name of the variable then a `dot` and the `key` of the object you want to access.
    

### Adding and Modifying Properties

```javascript
//Adding new data in our object
userData.job = 'Developer';

// Modifying our existing property
userData.age = 21;
```

### Removing Properties

```javascript
delete userData.job;
console.log(userData.job); //Undefined
```

### `For-In` Loop

The `for-in` loop is used to iterate over the enumerable properties of an object. It is primarily used with objects, but it can also be used to iterate over the indexes of an array.

**syntax**

```javascript
for (variable in object) {
  // code block to be executed
}
```

When used with an object, the `for-in` loop iterates over all enumerable properties of the object, including those inherited through the prototype chain.

```javascript
let userData = {
    name: "Aquib",
    age: 22,
    country: "India"
};

for (let key in userData) {
console.log(`${key}: ${userData[key]}`);
}
//Output:
//name: Aquib
//age: 22
//country: India
```

### Example with Arrays

Although `for-in` can be used to iterate over array indices, it's generally not recommended for arrays due to potential issues with the order of iteration and enumerability of properties. For arrays, `for-of` or other methods like `forEach` are usually better.

```javascript
let fruits = ['Apple', 'Banana', 'Cherry'];

for (let index in fruits) {
  console.log(`${index}: ${fruits[index]}`);
}

// Output:
// 0: Apple
// 1: Banana
// 2: Cherry
```

## Functions

Functions are one of the fundamental building blocks in JavaScript. A function is a set of statements that perform a task or calculate a value. Functions can be defined in various ways, and JavaScript supports different types of functions, including named functions, anonymous functions, and arrow functions.

### Function Declaration

```javascript
function functionName(parameters) {
  // function body
}
```

```javascript
//Creating a function
function myFunc() {
    console.log("Hello");
}
//Calling a function
myFunc();
```

**Function while taking arguments in parameters:**

```javascript
function greeting(name) {
  console.log("Hello, " + name);
}

greeting("Aquib"); //Output: Hello, Aquib
```

* Inside the parameters we can name anything and then it will greet us according to the given argument.
    

### Functions with Return

Functions can return values using the `return` statement. Once a `return` statement is executed, the function stops executing and the value is returned to the caller.

```javascript
function add(a, b) {
  return a + b;
}

let result = add(3, 5);
console.log(result); // Output: 8
```

### Anonymous Functions

Anonymous functions are functions without a name. They are often used as arguments to other functions or assigned to variables.

```javascript
let greet = function(name) {
  return "Hello, " + name;
};

console.log(greet("Aquib")); // Output: Hello, Aquib
```

### Arrow Functions

Arrow functions provide a shorter syntax for writing functions. They are always anonymous and do not have their own `this`, `arguments`, `super`, or [`new.target`](http://new.target).

#### syntax

```javascript
(parameters) => {
  // function body
}
```

We can write it in a single line as well, like:

```javascript
(parameters) => expression
```

```javascript
let greet = (name) => {
  return "Hello, " + name;
};

console.log(greet("Aquib")); // Output: Hello, Aquib
```

* First we are saving our function inside of a variable then as you may have noticed in this Arrow function we don't have the keyword of `function`, instead we are using parentheses `()` then an arrow sign `=>` then our body of our function surrounded by curly braces `{}`. This is a new way of writing our functions, introduced in ES6.
    

Writing the function in single line:

```javascript
let greet = name => "Hello, " + name;

console.log(greet("Aquib")); // Output: Hello, Aquib
```