DEV Community: Kunguma Sakthivel K

Scope of var, let, const

Kunguma Sakthivel K — Tue, 21 Jan 2025 17:43:37 +0000

What is Scope?

Scope of variable refers to the region of the program where the variable is accessible. Understanding variable scope is crucial for writing efficient and error-free code.

In JavaScript, there are three types of variable scope:

var
let
const

var

The var keyword was first introduced in 1995 with initial release of JavaScript.
The value initiated with var keyword has a global scope, which means the value is accessible by all parts of the file.

var x = 10
function inner() {
    console.log(x) // output: 10
}
console.log(x) // output: 10

Variable declared using var is hoisted to top the file which means you can try to access the variable before it initialized, but as an output it will give undefined because we didn't initialize the value to the variable.

console.log(x) // output: undefined
var x = 10
console.log(x) // output: 10

let

The let keyword was introduced in 2015, where the keyword is added to ECMAScript 6 to give block scope functionality.
The value initialized using let give block scope. So, the variable can't be accessed in any other scope. example: function, global scope.
Unlike var, variable declared using let keyword when the value accessed before declaration raises an error because of temporal dead zone.

console.log(x) // output: raises error
let x = 10

Also, you can't be able to access block level variable inside the function too.

let x = 10
function inner() {
    console.log(x) // output: raises error
}

const

This is also another type of block scope variable, in addition to that variable declared with const should be initialized on the same line.

const PI = 3.14
console.log(3.14) // output: 3.14

This keyword is introduced in ECMAScript 6, this is used to store constant value line environmental variables, access tokens, etc. Mainly used to store any constant value won't change in future.
If you tried to change the value of const declared variable, then it will raise TypeError: Assignment to constant variable in runtime.

const PI = 3.14
PI = 3.5 // output: TypeError: Assignment to constant variable.

Happy Coding...

How to Set-up NGINX

Kunguma Sakthivel K — Thu, 16 Jan 2025 07:55:30 +0000

Now to download and set-up the NGINX, to your local machine for windows

Step-1

Go to NGINX website and download the stable version nginx/Windows-1.xx.x in your local machine.
The downloaded file will be a zip.

Step-2

While extracting the zip file, make sure to extract the folder in C:\.
Now click on Extract button to extract the files.

Step-3

Now go to C:\ and navigate to NGINX folder, inside the folder there will be a file called nginx.exe double click on that.

Now NGINX server is started in localhost:80, because port 80 is default port for http

To verify that the NGINX server is serving the file, go to networks tab in Developer tools and click on localhost, under the Header tab you can see the nginx server.

To stop the NGINX server, simplest way is go to task manager and find the NGINX process than give End Task option to terminate the NGINX server in easiest way.

If you came along this long, then you're very eager to learn and develop web server.

So, if you want to learn personally how to develop web server or backend applications fill out this google form.
Form

Happy Coding

Bubble Search... Swap (x, y);

Kunguma Sakthivel K — Wed, 04 Dec 2024 12:37:24 +0000

Bubble Search

Bubble search is one of the most common and basic sorting technique which is used to sort an array. Most common parameters are array which is to be sorted and a size of an array (optional).

Technique used in Bubble Sort
In bubble sort, sorting happens based on comparison between two element, like which one is greater or lesser.

Eg:

list = [2, 1]
if list[0] > list[1]:
  list[0], list[1] = list[1], list[0]

Above the list become [1, 2]. Here we compare 0th and 1th index, if the 0th index value is greater than 1th index value then the swapping will happen.
This process will be applied to all the elements in an array until the array is sorted.
We need to apply this process iteratively to sort an array of N size.

Implementation of Bubble Sort!

def bubble_sort (array: list) -> list:
  for i in range(0, len(array) - 1):
    for j in range(0, len(array) - 1 - i):
      if array[j] > array[j + 1]:
        array[j], array[j+1] = array[j+1], array[j]

  return arr

The outer loop will be run for N time to move all the at it correct position. The outer loop act as pass which is mentioned in the above image.
The inner loop will make comparison between current and next elements, if the condition meet then the swap will happen.

Time complexity is O(N^2)

print(Happy Coding)

How to connect MongoDB with NodeJS Application!

Kunguma Sakthivel K — Mon, 05 Aug 2024 12:24:01 +0000

In this blog, I going to show how to connect with MongoDB in NodeJS application.

First create root directory folder and go to terminal and install required packages.

npm install express nodemon mongodb mongoose cors dotenv

These packages are required to setup the mongoDB server.

MongoDB Account Setup

First, create a mongoDB atlas account and create a cluster.
After creating cluster, go to Data Service and click on connect

After clicking connect, then popup window will appear

![mongoDb ui]](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/96gz3lje8sg19sinevoe.png)

Click on driver to get your mongoDB connection string which look like mongodb+srv://<username>:<password>@cluster0.5hjxnse.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0

Folder setup and DB connection code!

Now create a root folder and name it as your wise. Eg: mongo-connection
Then create a file called index.js and past the bellow code

const express = require('express');
const cors = require('cors');
const { connection } = require('./db');
require('dotenv').config();
const port = process.env.PORT 
const app = express();
app.use(cors());
app.use(express.json());

app.get('/', (req, res) => {
    res.send({
        message: 'api is working'
    })
})

app.listen(port, async()=> {
    try{
        await connection
        console.log('db is connected')
    } catch (err) {
        console.log(err.message)
    }
    console.log('server is running on port ' + process.env.PORT);
});

Then create db.js file and setup the mongoDB

const mongoose = require('mongoose');
require('dotenv').config()

const connection = mongoose.connect(process.env.mongoUrl);

module.exports = {
    connection,
};

In the above code we have process.env.mongoUrl, this code specifics the mongoDB connection string which was in .env environmental file.

mongoUrl = "mongodb+srv://<username>:<password>@cluster0.5hjxnse.mongodb.net/<table_name>?retryWrites=true&w=majority&appName=Cluster0"
PORT = 4000

Don't forgot to add your current IP address in mongo atlas, while setup your DB, because mongoDB requires your system's current IP address

If you add your current IP address, then the error will be resolve.

So, yeah we connected our MongoDB in our NodeJS application. Now, lets test one API call to maske sure your endpoint are working.

I use tunderclient to test my API call in vscode.

Now go to any API testing tool like postman or tunderclient to make API call to our localhost.

So, that it our server is working fine. This server run on localhost with port number 4000
http://localhost:4000/

Happy Dev!

How To Connect Wireless Debugging!

Kunguma Sakthivel K — Mon, 22 Jul 2024 13:53:49 +0000

*These are just simple steps to setup the wireless debugging while developing your mobile app!
*
What is the need for wireless debugging?
Because android simulators consume lot of computer resources to run it on system. Most of the learning dev are student who have limited computation power, so this helps them to setup their mobile app in their device.

Getting Started!!!
STEP 1: Setup your phone to developer mode by multiple required number of taps on your mobile build number. After multiple taps, your mobile will switch to developer mode.

STEP 2: Connect your mobile to your computer via USB cable and type in terminal adb devices this will check your mobile is connected or not.
If not check that your mobile is in developer mode.

STEP 3: After connecting the mobile via USB, now run your react native app this will install the mobile app in your device and also make sure that both laptop and mobile is connected on same network like same wi-fi.

STEP 4: In system terminal, type ipconfig this command will tell you IP configuration and IP address. Copy the IP v4 address. Because, to connect wireless debugging we use IP v4 address to connect with phone.

STEP 5: Now open your mobile app in your mobile as shake your mobile it will make one popup.

Now, go to setting

Now, go to Debug server host & port for device

In this popup type your IP v4 address and port number that used to host the app

Example: 0.0.0.0:3000

Tip: If your restart your application or re-connected to different wi-fi network make sure that IPv4 address is same as before or repeat the process from STEP1.

Thank You! Happy Coding!!!

Permission denied to push into remote repo!

Kunguma Sakthivel K — Wed, 27 Sep 2023 05:14:36 +0000

Here I can't able to push my file into GitHub. I shows error
The requested URL returned error: 403 and permission denied in terminal(Attached Image below).

PS C:\Users\LENOVO\Desktop\ReactJS\portfolio> git add src/.   
PS C:\Users\LENOVO\Desktop\ReactJS\portfolio> git add public/.  
PS C:\Users\LENOVO\Desktop\ReactJS\portfolio> git commit -m "second Commit" 
On branch main
nothing to commit, working tree clean
PS C:\Users\LENOVO\Desktop\ReactJS\portfolio> git branch -M main
PS C:\Users\LENOVO\Desktop\ReactJS\portfolio> git remote add origin https://github.com/kungumasakthivel/Dumy.git
error: remote origin already exists.
PS C:\Users\LENOVO\Desktop\ReactJS\portfolio> git remote remove orgin
error: No such remote: 'orgin'
PS C:\Users\LENOVO\Desktop\ReactJS\portfolio> git remote remove orgine
error: No such remote: 'orgine'
PS C:\Users\LENOVO\Desktop\ReactJS\portfolio> git remote remove origin
PS C:\Users\LENOVO\Desktop\ReactJS\portfolio> git remote add origin https://github.com/kungumasakthivel/Dumy.git
PS C:\Users\LENOVO\Desktop\ReactJS\portfolio> git push -u origin main
remote: Permission to kungumasakthivel/Dumy.git denied to Agil1102.
fatal: unable to access 'https://github.com/kungumasakthivel/Dumy.git/': The requested URL returned error: 403

I can't able to see any UI in my browser. But error in browser console while routing using react-router-dom package.

Kunguma Sakthivel K — Mon, 25 Sep 2023 06:16:33 +0000

Uncaught TypeError: Cannot set properties of undefined (setting 'props')

import HomePage from "./components/HomePage";
import ContactPage from "./components/ContactPage";
import ProjectPage from "./components/ProjectPage";
import AboutPage from "./components/AboutPage";
import {Switch, Route, BrowserRouter} from "react-router-dom";
import Header from "./components/HomePage/Header";
import { Component } from "react";


class App extends Component() {
  render() {
  return (
    <>
    <Header/>
    <BrowserRouter>
    <Switch>
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0x6mp1tgm4qtt0z6kzr5.png)


      <Route exact path='/' component={HomePage}/>
      <Route exact path="/about" component={AboutPage}/>
      <Route exact path="/contact" component={ContactPage}/>
      <Route exact path="project" component={ProjectPage}/>
    </Switch>
    </BrowserRouter>

    </>
  );
  }
}

export default App;

import {Component} from 'react';
import './index.css'
import {Link} from 'react-router-dom'

class Header extends Component {

    render() {
        return(
        <nav>
        <div className='header'>

            <div>
                <h1>portfolio</h1>
            </div>
            <ul className='sub-header'>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/project">Project</Link></li>
                <li><Link to="/about">About</Link></li>
                <li><Link to="/contact">Contant</Link></li>
            </ul>

        </div>
        </nav>
        )
    }
}

export default Header