DEV Community

Cover image for Basic Of Javascript - Day 1 of #100DaysOfFullStackChallnege
Zende Aditya
Zende Aditya

Posted on

Basic Of Javascript - Day 1 of #100DaysOfFullStackChallnege

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();
Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode

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 
Enter fullscreen mode Exit fullscreen mode
  1. Using ([]) notation:
let authorName = blogDetails['author']; // aditya
Enter fullscreen mode Exit fullscreen mode

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"];
Enter fullscreen mode Exit fullscreen mode

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

fruits[5] = "grapes";
Enter fullscreen mode Exit fullscreen mode

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' ]
Enter fullscreen mode Exit fullscreen mode

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];
Enter fullscreen mode Exit fullscreen mode
  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
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode
  1. 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"];
Enter fullscreen mode Exit fullscreen mode

The output of the above code is

console.log(numbersArray.concat(lettersArray)); 
// [1, 2, 3, 4, 5, 'a', 'b', 'c', 'd', 'e', 'f']
Enter fullscreen mode Exit fullscreen mode
  1. 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);
Enter fullscreen mode Exit fullscreen mode

the output will be

[2,  4,  6, 8, 10, 12, 14, 16, 18]
Enter fullscreen mode Exit fullscreen mode

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 },
];

Enter fullscreen mode Exit fullscreen mode

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 }]
Enter fullscreen mode Exit fullscreen mode

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.

  1. 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}`);
})

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode
  1. 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);
Enter fullscreen mode Exit fullscreen mode

and the output is

[ 2, 4, 6, 8, 10 ]
Enter fullscreen mode Exit fullscreen mode

Top comments (0)