DEV Community: sai bhargav

HOISTING IN js

sai bhargav — Wed, 12 Jan 2022 08:11:48 +0000

Hello there today we meet again with new topic that is HOISTING so lets start together

what is hoisting??
HOISTING::JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code.

Here we can declare functions before we use it so variables and class declarations are also being used as difference.

so lets discuss about function hoisting

FUNCTION HOISTING

One of the advantages of hoisting is that it lets you use a function before you declare it in your code.

catName("Tiger");

function catName(name) {
console.log("My cat's name is " + name);
}
/*
The result of the code above is: "My cat's name is Tiger"
*/

Without hoisting you would have to write the same code like this:

function catName(name) {
console.log("My cat's name is " + name);
}

catName("Tiger");
/*
The result of the code above is the same: "My cat's name is Tiger"
*/

this example was used from MDN docs because i found out that this is the best example

VARIABLE HOISTING

so as i told previously we can do variable hoisting too but here variable which can be hoisted are declaration not intializations so we cannot hoist initializations

lets have an example here:
Here we declare then initialize the value of a var after using it. The default initialization of the var is undefined.

console.log(num); // Returns 'undefined' from hoisted var declaration (not 6)
var num; // Declaration
num = 6; // Initialization
console.log(num); // Returns 6 after the line with initialization is executed.

The same thing happens if we declare and initialize the variable in the same line.

console.log(num); // Returns 'undefined' from hoisted var declaration (not 6)
var num = 6; // Initialization and declaration.
console.log(num); // Returns 6 after the line with initialization is executed.

If we forget the declaration altogether (and only initialize the value) the variable isn't hoisted. Trying to read the variable before it is initialized results in ReferenceError exception.

console.log(num); // Throws ReferenceError exception - the interpreter doesn't know about num.
num = 6; // Initialization

Variables declared with let and const are also hoisted but, unlike var, are not initialized with a default value. An exception will be thrown if a variable declared with let or const is read before it is initialized.

console.log(num); // Throws ReferenceError exception as the variable value is uninitialized
let num = 6; // Initialization
Copy to Clipboard
Note that it is the order in which code is executed that matters, not the order in which it is written in the source file. The code will succeed provided the line that initializes the variable is executed before any line that reads it.

and the last one class hoisting so this is the last topic for today so lets disscuss and packup 😂😂

CLASS HOISTING

Classes defined using a class declaration are hoisted, which means that JavaScript has a reference to the class. However the class is not initialized by default, so any code that uses it before the line in which it is initialized is executed will throw a ReferenceError.

Function expressions and class expressions are not hoisted.

The expressions evaluate to a function or class (respectively), which are typically assigned to a variable. In this case the variable declaration is hoisted and the expression is its initialization. Therefore the expressions are not evaluated until the relevant line is executed.

so thats all for today catch you in next time with some interesting topic... byee hope you are having a good day...

Transpiler vs Compiler

sai bhargav — Tue, 11 Jan 2022 09:14:17 +0000

Hey there again we meet today hope you are doing well in this pandemic as yesterday i told about that today we gonna disscuss about transpiler and compiler so put your seat belt and stay focussed 😂

Transpiler::

Transpiling is a specific term for taking source code written in one language and transforming into another language that has a similar level of abstraction.

For example lets take babel which it converts every es6 or es6+ code in to es5 code which every browser can perform its task by fully functionality so this is how transpiler works

Some examples of transpilers:

Emscripten: Transpiles C/C++ to JavaScript

Babel: Transpiles ES6+ code to ES5 (ES6 and ES5 are different versions or generations of the JavaScript language)

Compiler::

Compiling is the general term for taking source code written in one language and transforming into another.

For example lets take the famous gcc editor which runs c programs here its take program only in one language but it gives the ouput in many forms

now a fomo(fear of missing out) may be created about the word abstraction lets discuss about it the

Abstraction::

Abstraction is the property by virtue of which only the essential details are displayed to the user. The trivial or the non-essentials units are not displayed to the user. Ex: A car is viewed as a car rather than its individual components. so this is what we call abstraction so a compiler or a transpiler doesnt understand about our english language which is also called as high level language so we have to convert that into binary code which is also called as low level code by this way we can perform all operations to get a better understanding you have to read about levels of abstraction and levels of language so thats all for today catch you next time and have a great day.....

History of js

sai bhargav — Mon, 10 Jan 2022 05:16:50 +0000

Hello guys meeting you after a long time and i forgot to tell you that i got selected to neogcamp level 1 and now i am practicing the web dev there with some professionals so lets get into the topic.

Today we are going to talk about kingdom of js yeah i mean history of js so js means javascript now everybody will think of that it will be related to java but it is not they are totally different both of they uses and functionality are different and they are being used for their specific problems.

Now college professors will say it is a scripting language it is not programming language you have to learn only programming language but its a myth now javascript has became more powerful its a dynamic programming language so we can transpile it we will later discuss about what is transpilation and compilation.

so js was invented by *BRENDAN EICH * in 1995 which as developed for netscape 2 and after it became ECMA SCRIPT where ECMA means European Computer Manufactures Association where later on this ECMA SCRIPT renamed as JAVASCRIPT so every programming language has its own standard community where in js its TC 39 community where its checks all of its update and javascript its backwards compatible where its any version can work in browser so after the JS versions came where the major changes started from ES3 TO ES6 and ES6+ so this is all about the history

until we meet next time by the way i got this blog idea from neogcamp so huge thanks for this.......

My neogcamp level zero journey

sai bhargav — Sun, 19 Sep 2021 08:33:13 +0000

Hello there my friends today i am gonna write about my neogcamp level zero journey so you might think about what is neogcamp . so let me explain neogcamp is a web development bootcamp where a person who is selected for level one will do code and learn rigorously for six months and after that he will be able to do any kind of work related to web development. sounds cool na but for that you have to do a lots of hard work. so to qualify level one you have to complete level zero assignments which are fifteen of them where you will learn beginner level of javascript,reactjs,HTML,CSS etc and these lesson are available on sir tanay pratap youtube channel just you have to search tanay pratap on youtube and you have to go playlist there you will find neogcamp and there will be all assignments video.

How did i find about this program and about tanay pratap sir

It was fall of 2020 I was following an instagram page technical sapien where he posts all the informative type in the field of cybersecurity and artificial intelligence then there was a collab live where tanay pratap sir and technical sapien together did live session on instagram then tanay sir told about the whole scene of webdevelopment there it took my interest on web dev field then I remember it was 2020 diwali at that time tanay sir launched the program neogcamp where they will train a person for six months to get them into web dev field so for that they have to pass the level zero and they have to give interview.I thought at that time that I will start but at that time I was in my first year of my b.tech(cse) and i have to write my sem exams so i gave priority to my sem and i have to lose this chance and after six months of that batch now they again started to take another batch for neog 2022 but then again they decided that they will take the applications or portfolio until august 30 but i came to second year of my b.tech then again i have to write my sem exams i thought i was gonna lose this chance again but luckily they extended that date to september 30 and that was the only chance so i worked hard and completed my portfolio filled with 15 assignments and yesterday i submitted it

so now is the part what are assignments and what they will teach..

They will start with CLI app which is known as command line interface app made with java script using some keywords as i given below:
readline-sync : Synchronous Readline for interactively running to have a conversation with the user via a console(TTY).

readlineSync tries to let your script have a conversation with the user via a console, even when the input/output stream is redirected like your-script bar.log.

and using function where it will have keys and you will create questions and answer where you will ask you friends to try it.This contain 2 assignments

Now after that you have to create github account and netlify account where you will learn using of github(if you dont know github please refer to my last 2 blogs) and hosting your website using netlify and you will make your own portfolio using HTML,CSS language by learining through that video now you have 5 assignments in your hand.

Now about 6th and 7th you will create a translator app where the text which you type will be translated into banana minion language sounds fun in these you will use API so what is API

An API (Application Programming Interface) is a set of functions that allows applications to access data and interact with external software components, operating systems, or microservices.

To simplify, an API delivers a user response to a system and sends the system’s response back to a user. here you will get a powerful and important word which is called as promise
what is promise

Promises in JavaScript represent processes that are already happening, which can be chained with callback functions.

A promise is said to be settled if it is either fulfilled or rejected, but not pending.

this might be asked in the javascript interview so by this you will create a translator app using vanilla js or it is also called as pure js.

now about assignment 8 and 9 here you will learn about react js and you will design a react app which one of them will be emoji interpretor where you have tell the meaning of emoji which is given by clicking either giving input

now about assignment 10 you will create an cash register app using vanilla js sorry to mention but i forgot about the keyword queryselector

what is queryselector
this is method where it will take the inputs from the html file to js file and give output through the js file.

so the cash register app will note the bill amount and given amount and it will tell how much cash and how many notes you have to give vendor

now assignment 11 you have to create birthday lucky app using vanilla js where it will tell your birthday lucky or not

now assignment 12 you have to create a triangle fun app where you have to calculate hypotenuse,area and you have to find given angles are triangle or not and a triangle quiz will be there

now assignment 13 you have to create an birthday palindrome app where user will give input and we have to tell whether that date is palindrome or not and you also have to tell that by how many days they have missed it

now assignment 14 you have to create a stock calculator app and tell the user by taking inputs and giving outputs of profit and profit percentage and also loss and loss percentage too this will be also made using vanilla js

now the last part assignment 15 where you have to write blogs whether you can write technical or non technical one as you wish

so i have prepared all of it and wish me best of luck for interview and this is my journey till now i hope you enjoyed it till here and thankyou for reading all of it 🙂🙂 an follow up Or like will be best as a support so lets meet in next blog have a great day.

Github - the developer world continues...

sai bhargav — Sat, 18 Sep 2021 15:23:12 +0000

so hey there we are meeting again today so as i told in previous blog now we will discuss about the rest of the topics so lets jump into it
as we discussed in previous blog most known git commands now we are curious about the less known git commands

less known git commands :

1.Git Stash

One of the most delightful git commands is git stash. It keeps all your changes both to tracked files and in your working tree, stashing them away so that you can use them later. Git stash is temporary storage. With it, you can continue working where you left off whenever you are ready. Hence, you will have a clean working tree and can start working on something new. Also, note that git stash will never touch your untracked and ignored files.

2.Git Rebase

The git rebase command is used for moving or combining a range of commits to a new base commit. In other words, it can change the basis of the present branch from one commit to another and make the branch look like it was generated from another commit. Note that even if the branch looks identical, it is made of entirely new commits.
This command is primarily used for keeping a linear project history.

3.Git Diff

The git diff command is used for comparing the changes committed in Git. This command will help you take two input data groups outputting the modifications between them. When you execute this command, it runs a diff function on the data source of Git. You can use it in compound with the git status and the git log commands.

4.Git Reset

Git reset is another powerful command which allows undoing your changes easily. This command is generally used for returning the entire working tree to the last committed state. It will discard a private branch commits or throw away the changes that have not been committed. The git reset command will also help you to unstage a file in Git.
Generally, in Git every command allows undoing some changes, but only git reset and git checkout can be used for manipulating either individual files or commits.

5.Git Blame

Git blame is simply a great tracking command. It is aimed at showing the author information of every line of your project’s latest modified file. Hence, you can use it to find the author’s name and email address, or the commit hash of the last modified source file.

6.Git-am

The next rarely used but super-useful command is git-am. You can use it for applying a series of patches from a mailbox. It allows splitting mail messages in a mailbox onto commit log message, authorship information, and patches. Git-am applies all of them to the current branch.

7.Git Cherry-pick

Git cherry-pick is robust and not a famous command at the same time. It represents an act of picking a commit from a branch and applying it to another one. It can be related to the powerful Git tools used for undoing changes. Let’s say you have accidentally made a commit in the wrong branch. This command will let you switch to the desired branch and cherry-pick your commit to the place it should belong.

What is git branching

Branching is a feature available in most modern version control systems. Instead of copying files from directory to directory, Git stores a branch as a reference to a commit. In this sense, a branch represents the tip of a series of commits—it's not a container for commits this is like parent child relation where the child branch will inherit the parent when the work is done it will merge into parent to create a unified branch.

So the last part is commit messages

what is commit message

The commit command is used to save changes to a local repository after staging in Git. However, before you can save changes in Git, you have to tell Git which changes you want to save as you might have made tons of edits to keep the record of what are the work you have done we do commit messages.

what are good commit messages:

1.feat: The new feature you're adding to a particular application
2.fix: A bug fix
3.style: Feature and updates related to styling
4.refactor: Refactoring a specific section of the codebase
5.test: Everything related to testing
6.docs: Everything related to documentation
7.chore: Regular code maintenance.[ You can also use emojis to represent commit types]

so these are some commit messages so whenever we commit changes it is a best practice to write commit messages which helps us and others to understand.

so this is it for todays blog i hope you enjoyed well and got some grasp of good knowledge so lets meet in another blog with some information.

Github - A Developer World

sai bhargav — Sat, 18 Sep 2021 15:00:43 +0000

whenever you hear this word 'github' from a developer or your friends so a question pops up in your head 'what is github'

What is Github?

Github is a provider of internet hosting for software development and version control using Git. It offers the distributed version control and source code management functionality of Git, plus its own features. so normally it helps developers to learn and contribute their work in internet.so this is the work of github and you might heard the word repository

What is repository?

A repository contains all of your project's files and each file's revision history. You can discuss and manage your project's work within the repository.
so this is repository it helps us to keep record of our work.

what are alternatives of github?

Top 5 Alternatives To GitHub
Bitbucket.
GitLab.
Google Cloud Source Repositories.
Phabricator.
RhodeCode.
so these are the alternatives which I explored which quite well function but they are less popular mostly in github most of the opensouce contribution are done. Now you quite well know about github and its uses now you might be curious what are the commands in github.

What are top git commands are used always?

Top Git Commands for Developers :

1.Git Init
2.Git Clone
3.Git Branch
4.Git Checkout
5.Git Add
6.Git Commit
7.Git Push
8.Git Pull
9.Git Diff
10.Git Stash
11.Git Status
12.Git Log
13.Git Merge

Let's jump in and look at each of them in detail.

Git Init

The git init command is usually the first command you’d run in any new project that is not already a Git repository (also commonly called repo).

It can be used to convert an existing, un-versioned folder into a Git repository. Also, you can use it to initialize an empty repo.

Using Git Init Command

cd into the directory you want to initialize.

Then, run this command.

$ git init

This will transform the current directory into a Git repository. A .git sub-directory will be added. This will allow you to start recording multiple versions of your project.

Note: Running git init on an already initialized directory will not override any of your settings.

Git Clone

The git clone command is used to download the source code from a remote repository (like GitHub, Bitbucket, or GitLab).

Using Git Clone Command

$ git clone (https://url-of-the-repository)
When you clone a repo, the code is automatically downloaded to your local machine.

As a convenience, the downloaded version is linked to the origin (the repository from where you downloaded). I say this is a convenience because when you’re collaborating on the same project, you’d want to push your changes (more on that below) to a single repo.

But sometimes, people wouldn’t want to have this link. If your use case is similar, run

$ git remote rm origin
This will disassociate the downloaded current repository from the origin.

Git Branch

Branch is one of the most important functionalities of Git. This allows teams to work on the same code base in parallel. It enables teams to create Git Workflows and make their workflows more efficient.

Say, you’re working on “Feature A”. And your teammate is working on “Feature B”. By creating a separate branch for each feature, both of you can work on the same code base in parallel without having to worry about conflicts (at least while you’re writing the code).

You can use this command to create a new branch, view existing branches, or delete a branch.

Using Git Branch to create a new branch

$ git branch (branch-name)
This command will create a new branch only in your local system. If you want this to be visible to all the members in the repo, you’ll still have to push the branch.

To push a newly created branch, run git push -u (remote) (branch-name)

Command to view all branches

$ git branch

$ git branch --list
Git command to delete a branch

$ git branch -d (branch-name)

Git Checkout

A mistake I often made when I first started learning git commands was forgetting to switch to the new branch I just created. Yes, after you create a branch, you’ll have to switch to it with another command. That’s where the Git Checkout command comes in.

Using Git Checkout Command

$ git checkout (branch-name)
This will automatically switch you to the branch name you mentioned in the command.

However, when switching from one branch to another, you need to keep two things in mind:

If you made some changes in the previous branch, you will have to first commit and push them (I’ll cover this command below) to your remote repo.
The branch you want to switch must be present in your local system. If not, you can pull them (covered below).
If you’re as lazy as I am, I’m sure you’d want one single command that will both create a new branch and automatically switch to it.

The below command does exactly that.

$ git checkout -b (branch-name)

Git Add

Every time you create a new file, delete it, or make a change, you’ll have to tell Git to track it and add it to the staging area. Otherwise, the files you made changes to wouldn’t be added when you try to push your changes.

Using Git Add Command

$ git add (file-name)
This command will add only a single file to your next commit. If you want to add all the files to which changes were made, you can use

$ git add -A
It’s important to remember that using git add will not make any changes in the remote repository. Your changes will be recorded only when you commit them.

Git Commit

Think of Git Commit command like a checkpoint in your development process.

It’s commonly used to save your changes. Maybe after completing a specific work item assigned to you in your agile tool.

Every time you commit your code changes, you’ll also include a message to briefly describe the changes you made. This helps other team members quickly understand what was added, changed, or removed.

Using Git Commit Command

$ git commit -a
This will commit all the changes in the directory you’re working in. Once this command is run, you’ll be prompted to enter a commit message.

Alternatively, you can enter the commit message in the command itself and skip the additional step where you’ll be prompted to enter the commit message.

To do this, run the following git command:

$ git commit -am “(commit-message)”
Note: The git commit command saves the changes only in your local repository. It does not push to the remote origin and make your changes accessible for others to collaborate.

Git Push

To make all your committed changes available to your teammates, you’ll have to push them to the remote origin.

Using Git Push Command

$ git push (remote) (branch-name)
It’s important to remember that git push command will upload only the changes you’ve committed.

Git Pull

Of course, you’d want to have the latest updates from teammates as well!

The git pull command allows you to fetch all the changes that your teammates pushed and automatically merge them into your local repo.

Using Git Pull Command

$ git pull (remote)
In many cases, you will run into conflict because you had changed a line in a file that another teammate added. In such cases, you need to resolve the conflicts manually.

Git Diff

Git Diff is my go-to command when I want to quickly see the difference between my current branch and another branch (usually the branch I’m merging into).

Using Git Diff Command

$ git diff
This will show you any uncommitted changes in your local repo.

To compare two branches

$ git diff branch1..branch2
This will show all the file differences between the two branches.

To compare a file from two branches

$ git diff branch1 branch2 ./path/to/file.txt
This command will show a comparison of the changes made to file file.txt across the branches branch1 and branch2.

Git Stash

Git Stash temporarily shelves your work, so you can switch to another branch, work on something else, and then come back to this at a later time.

It’s perfect if you need to work on something else and you’re midway through a code change, but aren’t ready to commit the code.

Using Git Stash Save Command

$ git stash save “(stash-message)”
This will stash your changes with the message you entered. This can be helpful when you want to come back and restore your stash, especially when you have several stashes.

However, this will only stash your tracked files that you added using git add. If you want to include the untracked files as well, run

$ git stash save -u
Using Git Stash List Command

When you want to view all the stashed code, you can view them using this command. Once you stash your code, git will assign a stash id, so you can restore a specific stashed code later.

For example:

$ git stash list
This might show the following

stash@{0}: On master: Stashed with message1
stash@{1}: On master: Stashed with message2
Using Git Stash Apply Command

This will automatically restore and apply the topmost stash in the stack.

$ git stash apply
If you want to restore a specific stash that you want to apply, using the above example, you can simply run git stash apply stash@{1}.

Note: When you use git stash apply, the stashed version will be applied to your current working branch. However, it will not delete the stash from the stack.

Using Git Stash Pop Command

To automatically also delete the stash from the stack, the git stash pop command is used.

If you want to do it for a specific stash in the stack, run git stash pop stash@{0}.

Git Status

When you’re feeling a bit lost with what’s happened in your repo (yes, it can happen) the Git Status command can tell you all the information you’ll need to know.

Using Git Status Command

$ git status
This can give you information such as:

Your current branch
Whether your current branch is up to date
If there’s anything in the branch that needs to be committed, pushed, or pulled.
If you have any files that are either staged or not staged.
And if you have any files that are created, modified, or deleted.

Git Log While git status gave you nearly all the information you’d have needed, it wouldn’t give you the information about the commit history for the repository.

This is where the git log command comes into the picture.

Using Git Log Command

$ git log
This displays the entire commit history. If your commit history is large, it’ll show only a portion of it and you can hit [space] to scroll or type q to quit.

If you want to view only the last 3 commit history, you can use the following command: git log -n 3.
To condense the commit history into a single line and view them, run git log --oneline. This is the easiest way to get a high level overview of all the commit history. It might still be a bit too much if you’ve got a lot of commits.
If you want to view the commit history by a specific author, run git log --author"(author-username)".

Git Merge Once you’re done with development inside your feature branch and tested your code, you can merge your branch with the parent branch. This could be either a develop branch or a master branch depending on the git workflow you follow.

When running a git merge command, you first need to be on the specific branch that you want to merge with your feature branch.

Let’s see how to use the git merge command with an example.

Using Git Merge Command

Imagine you’re currently in your feature branch called feature1 and you’re ready to merge it to the develop branch.

We must first switch to the develop branch using the checkout command.

$ git checkout develop
Before merging, you must make sure that you update your local develop branch. This is important because your teammates might’ve merged into the develop branch while you were working on your feature. We do this by running the pull command.

$ git pull
If there are no conflicts while pulling the updates, you can finally merge your feature1 branch into the develop branch.

We do this by using the git merge command followed by the branch name that we want to merge into our current branch.

this is enough i will write more on next blog if i write here it will be overwhelming so thankyou for keeping up with me so lets meet on next blog.