Basic Of Javascript - Day 1 of #100DaysOfFullStackChallnege

ยท

4 min read

Basic Of Javascript - Day 1 of #100DaysOfFullStackChallnege

Table of contents

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
  1. 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.
  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"];

The output of the above code is

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

  1. Array.forEach() This method executes the callback function on each element of the array Here is an 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
  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.

An example of a map is

let mapfun = numbersArray.map((num)=>num*2);

and the output is

[ 2, 4, 6, 8, 10 ]

Please like the blog if you get any value from it

ย