Basic Of Javascript - Day 1 of #100DaysOfFullStackChallnege
Tags: javascript, webdev, frontend, basic
Published: 2024-07-05 17:35:59

So, Welcome back everyone 👋
I'm Aditya, and I'm starting a new series for the next 100 days to become an excellent Full-stack Developer. 
Today is Day 1 of my journey. Today I revised the basic yet important concept in javascript. 
Today I started with revising array, string, and object in javascript.
so whatever I learned today I want to share with you let's start 

I started the revision with Objects in js. 

**## 1. Objects**

So, an Object is nothing but a container that contains different types of values.
Here is the syntax of Object. There are mainly two types of Objects syntax

```
let obj = new Object();
```

this is the one way to create an object and the second and simple syntax is 

```
let blogDetails = {
   author: "aditya",
   age: 21,
   blogsWriteOn : ["Dev.to", "Medium.com", "Hashnode.com"],
   location: "Pune"
}
```
this way you can create an object. 
In the object, we store the data in the `key: value` pairs, we can store any type of data in an object.

Accessing the data from an object.

1. Using (.) notation: 

```
let authorLocation = blogDetails.location; // Pune 
```

2. Using ([]) notation: 

```
let authorName = blogDetails['author']; // aditya
```

## **2. Arrays** 

Arrays -> It is used to store multiple items using one variable name. 
In JavaScript, the array is resizable & can contain different types of data.
Here is what resizable means,
suppose the array is like this: 

```
let fruits = ["apple", "orange", "banana", "pineapple"];
```

There are a total 4 elements in the array and if you push one element like 

```
fruits[5] = "grapes";
```
This will be acceptable In js if we console this the output will remember that we skip the 4th index. but this still works.

```
[ 'apple', 'orange', 'banana', 'pineapple', <1 empty item>, 'grapes' ]
```
Array Methods:
There are almost 46 array methods for the array. We are discussing some but the important methods of array here! 

To understand this method better way we are going to learn with example 

```
let numbersArray = [1, 2, 3, 4, 5,6,7,8, 9,10, 11, 12, 13, 14, 15, 16, 17, 18];
```

1. Array.at()
  This method is used to access a particular element from the array with the help of its index. 
Keep in mind that the index of the array starts with `0` not with `1`.

If we want to access the element at index `0`, we can write like

```
console.log(numbersArray.at(0)); // 1
```
If we want to access the last element of the array we can take the help of length property to get the total length of the array. 
In this case `numbersArray.length` will output `18`.
To access the last element 

```
console.log(numbersArray[numbersArray.length-1]); // 18.
```


2. Array.concat()
This method is used to combine two arrays into a single array. 
Here is simple example to demonstrate this 

```
let numbersArray = [1, 2, 3, 4, 5,6,7,8, 9,10, 11, 12, 13, 14, 15, 16, 17, 18];
let lettersArray = ["a", "b", "c", "d", "e", "f"];
```
The output of the above code is 

```
console.log(numbersArray.concat(lettersArray)); 
// [1, 2, 3, 4, 5, 'a', 'b', 'c', 'd', 'e', 'f']
```
3. Array.filter()
 This method is used to filter the array element on certain conditions that you write as a callback function. 
For example, if you want to print all the event numbers from the array so you can write 

```
let evennumbers = numbersArray.filter((num)=> num % 2 === 0);
```
the output will be 

```
[2,  4,  6, 8, 10, 12, 14, 16, 18]
```

another example with object

```
// Filter on an array of  objects
const students = [
  { name: "aditya", age: 21, mark: 80 },
  { name: "rator", age: 19, mark: 89 },
  { name: "kevin", age: 22, mark: 38 },
  { name: "atharva", age: 18, mark: 80 },
  { name: "random", age: 25, mark: 80 },
];

```
and the output is 

```
const eligible = students.filter((std)=> std.age>20 && std.mark>50);
console.log(eligible); 
// [ { name: 'aditya', age: 21, mark: 80 }, { name: 'random', age: 25, mark: 80 }]
```
The filter function takes two parameters 

1. callbackFun
2. thisArg

**callbackFun** - is a simple function that you provide the perform certain tasks.
**thisArg** - This is an optional parameter. A value to use as this when executing callbackFn.

filter returns the `shallow copy` of the original array after performing the callback function.

4. Array.forEach() 
This method executes the callback function on each element of the array 
Here is example of forEach 

```
let numbersArray = [1, 2, 3, 4, 5];

numbersArray.forEach((num , idx)=>{
  console.log(`The number at index ${idx} is ${num}`);
})

```
and the output will be 

```
The number at index 0 is 1
The number at index 1 is 2
The number at index 2 is 3
The number at index 3 is 4
The number at index 4 is 5
 
```
5. Array.map() 
This is the method of array creates a new array populated with the results of calling a provided function on every element in the calling array.

the example of map is 

```
let mapfun = numbersArray.map((num)=>num*2);
```
and the output is 

```
[ 2, 4, 6, 8, 10 ]
```