DEV Community: Sarvesh Kadam

How I Landed My First Developer Job In 8 Months

Sarvesh Kadam — Thu, 03 Mar 2022 13:48:55 +0000

If you’re looking for your first job or making a career change, you might feel intimidated by the sheer number of things that you have to face to get that gig. I’ve encountered similar challenges that resulted in rejections and, finally, low confidence. However, there are a few things that can help you overcome them.

After multiple Interviews, Rejections and reading several “How to get the job” books. I landed my first developer job in 8 months.

In this post, I have written down a small brain dump of the things that helped me and will help you to improve your application, raise your confidence and land your first developer Job.

First the context

I am currently working as a Software Developer
Before that, I worked as a Quality Analyst, which was not a really exciting position for me.
I began learning to code while working a full-time job and eventually landed my first development position.

Onto the good stuff

The 4 things (mentioned below) helped me add credibility to my job application.

Social Proof
Resume
Self Introductions
Technical Questions

Let’s go over them one by one

Social Proof

By far the most effective technique to build credibility to your application is through social proof. Because it demonstrates to the recruiter your real interest and effort in the field.

This can be accomplished in a variety of ways.

Portfolio

It is mostly regarded as a modern-day resume. Create a Portfolio site using either code or no-code tools; the choice is yours.

You can have an about section where you mention a brief about your story, skillset, and your interests. A project section that includes at least three of your best projects or open-source contributions that demonstrate your technical skills.

Write three blogs and list them in the blog area of your page. This demonstrates that you are genuinely interested in what you are doing.

If you have any testimonials about your work, please include them.
However, the project and blog sections can suffice.

GitHub

Github is a great way to add credibility to your application because it demonstrates your understanding of versioning systems, code maintainability, and so on.

GitHub has a profile feature where you can create your profile by creating a repository with the name same as your username.

You can get ideas from numerous GitHub profiles. Just google GitHub Profile Templates and you will get a list of them.
Also pinned you best of the projects on the profile section.

LinkedIn

Linkedin is where your future employers are hanging out.

So make sure you optimise your linked profile page, Fill out all necessary sections.

Heading- Please Do not include the phrase “Aspiring [_______] Developer” in the title. Mention the title you want to work on, Ex. Frontend Developer.
You can even list down the main technologies in the title below

Software Developer | React JS| Node JS

In the About Section, provide information on yourself in bullet form, as well as information about the technology you worked with, some highlights of your project work, and other related interests in your industry.

Include a link to your Github profile, portfolio, and top blogs in the Featured Section. Then you can fill-up the Education section, Also add License and Certifications if you have any.

Fill out the Skill section and prioritise them.
Finally complete out the Projects section with the Title, Short Description and time you worked on it.

Resume

Yes, Resumes are still relevant today. It will determine whether you receive the first nod and advance to the next round.

Having said that, the purpose of a resume should be to get you an interview, not an offer.

Keep the structure simple and save the file as a PDF with the filename “Firstname_Lastname_resume”.

It should contain your name and contact information (Only email would be fine),

Provide a brief description of yourself, followed by the Technologies and Languages section where you should list down the languages and framework you are proficient with. Do not provide a percentage or a rating to your level of knowledge in those areas.

If this is your first job as a developer, the project section should be the most important part of your CV.
It should include a brief explanation of the project, the technology used, and a link to the project. (If your project has a user interface, you can host it on Netlify or Vercel and provide a link, if not then you can provide the link to your GitHub repository and include an appropriate ReadMe file.)

Then you can talk about your relevant work experience, followed by your interests and hobbies.

Highly recommend checkout The Tech Resume Inside-Out by Gergely Orosz.

Self Introduction

Self Introduction is very crucial; Making a positive impression will boost your chances of success.

You have limited time, so keep it concise, to the point and appealing to the interviewer.

Mention projects, work exp, which directly signifies how interested you are in this job. In the project section, specify the challenges you faced and how you solved them. Have ready with detail about the at least two challenges you faced while working, what solutions you implemented. This will set you out from the crowd.

Refer to techinterviewhandbook.org

Technical Questions

Preparing for technical questions will give you a lot more confidence when you go into the interviews.
Write down the explanations for all of the concepts/questions that are frequently asked about your technology.

For example, if you are applying for React Developer Position, list down details of concepts such as Elements, Fragments, Props, State, Prop drilling, etc. You get the gist.

Google mostly asked questions related to the respective technology. Note down all of them.

Revised them a day before the interview.

Although other things are very important, such as algorithms and data structures.
I would suggest going through the Basic Algorithms such as Reversing String, integer, array chunking, Anagram, etc and understanding Time and Space Complexity. These will give you a pretty good start to Data Structure and Algorithms.

However, the four factors listed above will assist you in developing confidence to face interviews.

The goal of this article was just to share what I learned during the process and hopefully, it will help you.

I am writing more on my journey as a software developer on Twitter, you can follow me there.

Getting started with NPM(Node Package Manager)

Sarvesh Kadam — Fri, 30 Oct 2020 04:34:50 +0000

In this article, we are going to discuss what is NPM (Node Package Manager) and how can we use it in our project.

This is the third part of my Node Module series

NPM Overview:

So what exactly is Node Package Manager?

The package is a piece of code that is managed by the Package Manager which is nothing but software that manages the installation and updating of packages.

NPM as per the official document

NPM is the world's largest software registry. Open-source developers from every continent use npm to share and borrow packages and many organizations use npm to manage private development as well.

So, in NPM we use somebody else's open-source code managed by NPM by importing into our project.

NPM usually comes with Node JS when you download it.
You can check if npm is installed on your machine by simply running the command npm -v on your command-prompt.
if it returns some version number, it means NPM is successfully installed.

NPM has its registry at npmjs.com where we can discover packages that we can use.

Let's look at one of the packages called chalk which is basically used for terminal styling.

pic credit npmjs.com

In the above figure, we can see the weekly downloads of the package which suggests how popular is it.

Also, you can see this package dependencies in it. So this module which will serve as a dependency on our project is itself dependent on other modules.
So this entire management process is taken care of by the Package Manager.

Even the source code is which is present on GitHub is given to us. We can navigate to it and verify if there are any open issues present.

One more thing before moving forward, the NPM packages come in different versions. The pattern which the version follows is semantic versioning.

As you can see, the latest version of the chalk module as and when I wrote is article is 4.1.0

It follows the semantic versioning as Major_changes.Minor_changes.Patch

Major_changes as the name stands, the significant changes made on the module which might affect your existing code.

Minor_changes are a new enhancement or feature along with defect fixes been added which should not affect your existing code.

Patch is the small bug fixes that will not crash your existing code.

You learn more about semantic versioning on semver.org

NPM Installation:

Now to import any package from NPM, you first need to initialize NPM on your local project folder by running the command on the command prompt

npm init

Once you run the above command, it will ask you for some data as shown below such as package name, version, and so on.
Much of this data can be kept as default as mention in the Round brackets ().
Also, the field such as author and license is for the folks who creating NPM packages.
On the other hand, we are just importing and using them to create our own application.

package name: (code_npm) code_npm
version: (1.0.0) 1.0.0
description: npm demo
entry point: (index.js) index.js
test command: test
git repository:
keywords: npm test
author: Sarvesh
license: (ISC)

Once you enter all the fields, it will create a JSON file with the values having the above properties and will ask you for confirmation as

Is this OK? (yes) yes

Once you confirmed yes it will create a package.json file with all the data you entered as illustrated below.

{
  "name": "code_npm",
  "version": "1.0.0",
  "description": "npm demo",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "npm",
    "test"
  ],
  "author": "Sarvesh",
  "license": "ISC"
}

Also, you can observe a script Object having a test property been added, which you can run using the npm test command and it will give back the desired output as

"Error: no test specified"

Now instead of doing this elongated method of initializing NPM and entering the custom properties values, you can simply run the command

npm init -y

Once you run this command, it will directly create a package.json file with the default values.

Now to install the latest version of the chalk package in your project you need to execute the command

npm install chalk

You can also install any specific version you need of chalk by just adding @version number as shown below and also instead of install you can simply put the short-hand i flag which stands for installation

npm i chalk@4.0.0

This will install two things, a node_modules folder, and a package-lock.json file.

Also, it will add a new property called dependencies to our package.json file which contains the name of the package installed and its version.

"dependencies": {
    "chalk": "^4.0.0"
  }

The node_module folder contains the packages folder and its dependencies folders. It gets modifies as and when the npm package gets installed.

The package-lock.json contains the code which makes NPM faster and secure.

"chalk": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.0.0.tgz",
      "integrity": "sha512-N9oWFcegS0sFr9oh1oz2d7Npos6vNoWW9HvtCg5N1KRFpUhaAhvTv5Y58g880fZaEYSNm3qDz8SU1UrGvp+n7A==",
      "requires": {
        "ansi-styles": "^4.1.0",
        "supports-color": "^7.1.0"
      }

It mainly contains properties such as version which is the semantic version number.

The resolved property is the directory or location from which the package was fetched, here in this case it was fetched from chalk.

The integrity property is to assure, we get the same code if we install the dependency again.

The requires object property represents the dependency of the chalk package.

Note:- Do not make any changes or edit these two files node_modules and package-lock.json

NPM Usage:

Now once we installed chalk to our project we can import it to our root project file using the require() method and store that module in a variable chalk.

Using the red() method of the chalk package, we have styled the "Hello World" text color in red.
On running the command node index.js we get the following output

Now there are many ways you can style your command line output using the chalk package, for more information refer to the Chalk official document on npm.

Also, you can install the npm packages globally that is on our operating system rather than installing it in your local project by adding the -g flag on the command line which stands for global as mentioned below

npm i nodemon -g

This global package will not affect our package.json in any way since it is not installed locally.
we have installed the nodemon package globally which is used for automatic restarted of node application when file changes in the directory are observed.
Refer to nodemon for more information.

We can use the nodemon package by running the application using

nodemon index.js

It works similarly to node index.js, except it keeps an eye on the file changes and it restarts the application once changes are detected.

[nodemon] 2.0.6
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node index.js`
Hello World

Note: The chalk styling will probably not work when you used nodemon

Finally, we will go through the dev dependencies.There are some NPM packages or modules which won't be needed in our project production environment, but only for our development requirements.
Such modules we install in our project using the dev flag as shown below

 npm i nodemon --save-dev

It creates new property in the package.json called devDependencies

"devDependencies": {
    "nodemon": "^2.0.6"
  }

Conclusion:

NPM is a package manager that manages the 3rd Party Open source code which we can use in our project.
Before using NPM modules, we need to initialize NPM locally using npm init on your command line in the root of your project folder.
Install any NPM package by using the command npm i <package name>
We can install the NPM package globally using the -g flag
Also the package can be made development dependent using the --save-dev flag

If you like this article do reach out to my Twitter as I document my learning

How to use the NodeJS Core (Native) modules?

Sarvesh Kadam — Sat, 24 Oct 2020 14:17:16 +0000

In the last article, we discussed how to import our own files in NodeJS which included function, Objects, function constructor, and ES6 classes.
You can find that article over here.

Today we are going to discuss how we can import and use Node Core(Native) modules into our own files.

Importing Node Core (Native) modules:

Rather than creating our own custom modules every time, Node provides a set of modules to make our lives easier.

We are going to discuss some of the modules, but you can find the entire list on the official node API document over here

Importing Node modules is similar to that of importing your own modules we use the same require() function to access it in our own file.

But there are some modules which you may have used knowingly unknowingly which do not need to be imported. For eg. console.log(), we have used the console module many times without fetching it in our own local file as these methods are available globally.

Let us look at one of the Core Native Modules which is File System (fs).
There are n number of operations we can perform with the file system module such as reading a file, writing a file, and updating it to name a few.

We are going to use the fs module to read a file, even in that there are two ways we can perform this one by using the synchronous function fs.readFileSync() and the other by asynchronous function fs.readFile(), we'll discuss synchronous-asynchronous Node functions in future posts.

Today, we'll use the asynchronous version i.e. fs.readFile()

For this example, we have created two files one main.js where we are going to perform file reading operation and file.txt which is the file we are going to read.

Thefile.txtcontains some text in it.

Now, if we use the fs module to read the file, without importing it as shown below

It will throw an error as fs is not defined that is because the file system fs module is not available globally as the console module is.

ReferenceError: fs is not defined
    at Object.<anonymous> (C:\Users\Sarvesh Kadam\Desktop\Training\blog\code snippets\Node Modular Pattern\main.js:3:1)
    at Module._compile (internal/modules/cjs/loader.js:1256:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1277:10)
    at Module.load (internal/modules/cjs/loader.js:1105:32)
    at Function.Module._load (internal/modules/cjs/loader.js:967:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)
    at internal/main/run_main_module.js:17:47

Therefore, we need to import all the data from the file system module using the require() function and store all that data in a variable fs.

Now you can name that variable anything, we named it fs for readability and it's the standard which most developers follow.

Using the fs variable we can access the readFile() method where we passed three arguments which are file path, character encoding utf-8, and the callback function to give an output.

You might ask why are we passing utf-8 as our argument in the readFile()?

The reason is, it encodes the value and gives the text as an output rather than giving a buffer as shown below

<Buffer 48 65 6c 6c 6f 20 57 6f 72 6c 64 21 21>

The callback function, in turn, has two arguments an error (err)and the actual content in the file (data), and then we print that data in the console.

//Output:
Hello World!

Conclusion :

Node has it's own set of Core (Native) Modules which we can use.
Some of them are available globally, some of them need to be imported locally in your project/folder.
require() function is used to fetch the particular module data and we stored all that data in a variable to access it.

Thank you for your time for reading the article, please, give a follow on my Twitter as I document my learning

How to use Modular patterns in NodeJS?

Sarvesh Kadam — Tue, 20 Oct 2020 04:32:52 +0000

Modular Pattern is one of the fundamental features of Node.

When building an application, as our application/code becomes complex we cannot put our entire code in one single file.

As this becomes unmanageable, we use node modular pattern to write different files and export them(which includes functions, objects, and methods) to the main files.

Now you might ask what exactly is a module?

In simple terms, a module is nothing but a JavaScript file. That's It.

With the node modular functionality, we can import your own external files, core node modules, and npm modules.

Importing your own files :

In this article, we are going to discuss, how we can export and import our own files.
Basically, there are two files calculate.js from where we will export and import them into the main.js file.

We have both the files in the same folder for simplification purposes.

Importing a function:

//---- Exported file [calculate.js] ----
const add = (a,b)=>{
    return a + b
}

module.exports = add

Here we export a function called add using module.exports. Then this function gets imported to a different file using the require method.

In node, each file is referred to as a module and exports is a property of the module Object.

We can now invoke the function in the different files i.e main.js by passing the arguments as shown below.

//------ Main File[main.js] ----

const add = require('./calculate') //name of the desired file
const result = add(2,4)
console.log(result); //Output : 6

Importing an Object: We can also export an entire object and access the different methods in it.

//---- Exported file [calculate.js]  ----
const add = {
    result : (a,b)=>{
        return a + b
    }
}
module.exports = add

As we exported object add and imported to our main file using the require method.

We can now access the result method of the add object using the . dot operator

//---- Main file[main.js] ----
const add = require('./calculate')

const result = add.result(5,8)

console.log(result) //Output : 13

Another way we can do the above Object exportations is by only exporting the method which you require rather than the entire object.

//---- Exported file [calculate.js]  ----
const add = {
    result : (a,b)=>{
        return a + b
    }
}

module.exports = add.result

As you can see we are importing the result method in the add Object, So this method can be directly invoked in the main file.

This is good practice if you don't need the entire object but only require some methods/functions of it and also make our code more secure.

//---- Main file[main.js] ----

const add = require('./calculate')
const result = add(5,8)
console.log(result) //Output : 13

Importing a Function Constructor:

Function constructor is basically used to create a new instance of an Object which possesses the same properties as that of the main object/function.

You can learn more about Function Constructor here

In the below case, we create a new instance of the 'Add' Object using the new keyword. This process where we create an instance of an object is called 'instantiation'.

Then we export this instance using module.exports

//---- Exported file [calculate.js]  ----

function Add (){
    this.result = (a,b)=>{
        return a + b
    }
}

module.exports = new Add()

Now we can import it into our main file and access the 'result' method inside it, to get our calculated value.

//---- Main file[main.js] ----

const add = require('./calculate2')
const result = add.result(1,3)
console.log(result); //Output : 4

This way we can export and import a function constructor.

There is another way we can do this, which is by creating our new instance in the main file rather than in the exported file as shown above module.exports = new Add().

We'll see that while exporting ES6 Classes which works similar to Function constructors.

Importing ES6 Classes:

class is a special type of function where the class keyword helps to initialize it and uses the constructor method to store the properties. You can learn more ES6 classes here

Now we are going to export the entire class using module.exports

//---- Exported file [calculate.js]  ----

const Add = class{
    constructor(a,b){
        this.a = a;
        this.b = b;
    }

    result(){
        return this.a + this.b
    }
}

module.exports = Add;

Now in our main file, we create a new instance using the new keyword and access the result method to get our calculated value.


//---- Main file[main.js] ----

const add = require('./calculate')

const result = new add(2,5)

console.log(result.result()); //Output : 7

Conclusion :

In this article, we discussed how we can import our own files.

We looked into a few ways how we can do this, such as

Importing Functions
Importing an Object
Importing a Function Constructor
Importing ES6 Classes

There are n number of ways in which you can export and import your own files.

The other things which we did not discuss in this article are importing npm modules and importing node core modules which we'll look into in an upcoming article.

Thank you for your time for reading the article, please, give a follow on my Twitter as I document my learning

How to get out of Tutorial Hell without getting out of it?

Sarvesh Kadam — Fri, 09 Oct 2020 05:20:21 +0000

Tutorial Hell stated as per the urban dictionary

When you are learning Computer Science and programming but unfortunately you don't understand any of the code you wrote down from the tutorial but it works. Not only that you cannot write your own. It is very hard to get out of this and be able to write your own code. So it is a hell.

Do you agree with the above definition, or does your definition of Tutorial hell is different?

If you ask me, I feel we do understand the code from the tutorial.

It's just we are so reliant on the tutorial that we feel insecure if we are just given a blank code editor and told to write code or start with a new project.

There is another situation that happens where we start with a tutorial we complete almost a 20 - 30 % of it.

But at some point, we feel we are not on the same path as of the tutor or the complexity of a particular concept takes a drastic turn where we can't keep up with the pace of the course.

Have you faced such obstacles in your learning?

Pic credit unsplash

Here are a few ways you can modify your learning

To overcome your problem on Imposter Syndrome or in simple terms not able to write code on your own.

If you have not yet picked any tutorial, do select a project-based tutorial, then divide the tutorial into many sections at your convenience.

Now let say the tutorial is about building a Task App Project, then you should start building a To-Do App simultaneously with the tutorial.

When a particular section is finished, stop the tutorial, go back to your own project folder and start building with the concepts you learned in that section. Do use Google as a primary resource and then refer to your own tutorial notes.

In this way, you will gain some confidence in writing code on your own and you will feel much better while starting a new project without any step by step tutorial.

Now for the issue, when you get stuck in the tutorial and don't understand a particular topic the trainer is talking about.

Stop the tutorial there itself and refer to other resources for that topic whether its a blog post, Official Documentation, or a short Youtube video.

Once you understand that topic, return back to your main tutorial and you will have more clarity about what the tutor is explaining.

In no way, I am an expert learner or have mastery over learning any concept. I myself started to learn code a few months back, Just want to lay down some methods which I used.

On contrary, I would like to hear from you guys, any other methods which you used to overcome the roadblocks in your learning path.

Conclusion :

Now to conclude, start your own project simultaneously with the tutorial but add your own ideas and features to it, and if you get stuck somewhere in a tutorial, close that and refer to other resources for that particular topic which will give a much broader understanding of the topic.

Thank you for your time for reading the article, please, give a follow on my twitter as I document my learning

How to use Functions in JavaScript?

Sarvesh Kadam — Wed, 07 Oct 2020 11:26:03 +0000

Functions are the fundamental part of JavaScript programming language. It is a block of code that is reusable, i.e. the function can be called anywhere in the code and perform the required task as many times as you need it.

In this article, we are gonna take look at various ways/methods of using JavaScript Function

Function statement :- In this method, we simply declared the function using the function keyword along with the name of the function. We passed the arguments (if any) in the round() bracket and the write the code what you want the function to perform when it is called or invoked inside parenthesis {}.

In the function statement, the function gets hoisted, that is you can access or invoke the function even before it is declared. You can learn more about hoisting where I have briefly discussed it in my previous article

square(4) //Output: 16

function square(a){
    console.log(a * a);
}

square(2)

//Output : 4

Function expressions :- An anonymous function is created, which does not have its name and therefore we create an expression by assigning to a variable using the equal = operator.

var square = function(a){
    console.log(a * a);
}

square(2)

//Output : 4

The square variable is not the name of the function, it just points towards the address of the function in the memory space.

Note:- In function expression, we cannot access the function before it is declared as it will return the variable square as undefined

Immediately Invoked function expression: - In this, we simply declared an anonymous function as we discussed in the function expression above, but instead of assigning it to a variable, we wrapped it inside the parenthesis () and we can immediately invoke or called the function.

(function(a){
    console.log(a * a);
})(2)
//Output : 4

As you can see above example we create an anonymous function passed an argument a and it returns the square of the argument, we can also invoke the function immediately after the curly brackets {} as shown below

(function(a){
    console.log(a * a);
}(2))

//Output : 4

Arrow Functions:- Arrow functions are a concise and neat way to write JavaScript functions. It was introduced in ES6, in this way we don't need to explicitly mention the function keyword while declaring the functions instead we use arrow =>.

var square = (a)=>{
    console.log(a * a);
}
square(2)

//Output : 4

Since in the above code we are passing only one argument a and returning only one value i.e. the square of the number we can make the code more concise by removing the argument brackets and parentheses {} the curly braces

var square = a => console.log(a * a);
square(2)

//Output : 4

Before, moving forward let us discuss the about this keyword, The this in normal function points towards the Object where it is placed in, whereas in the arrow function it points toward the Global Object.

var a = {
    square1 : ()=> {
        console.log(this);
    },
    square2 : function(){
        console.log(this);
    }
}

a.square1() //Output: Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
a.square2() //Output: {square1: ƒ, square2: ƒ}

Callback function:- A callback function is a function you passed as an argument to another function. Sounds Confusing! Let's look at the below example.

var square = (callback)=>{
    callback(2);
}

square((a)=>{
    console.log(a * a); 
})

So in the above example, we create a square function where we pass the "callback" function as an argument, which itself has an argument which is declared as "2".
During the invocation of the square function, we pass the 'callback' function with the argument as a and it prints the square of a on the console.

There is also another function called async which we will discuss it in upcoming blogs since it also requires the concept of promise

Conclusion:-

In the function statement, we declared using the function keyword and this point towards the object it is located in.
In function expression, we assign the function to a variable using the = equal operator.
Immediately Invoked function expression is wrapped around the parenthesis () and it is invoked immediately after the declaration.
Arrow function which was introduced in ES6 is a concise way to write functions and the this keyword inside arrow functions point towards Global Object irrespective of where it is located.
Callback functions are the functions that are passed as arguments in another function.

Thank you for your time for reading the article, please, give a follow on my twitter as I document my learning

Getting started with JSON(JavaScript Object Notation)

Sarvesh Kadam — Tue, 06 Oct 2020 04:44:52 +0000

JSON(Java*Script **Object **N*otation) is a storage format that is completely language independent and it is used to store and transport data. It's quite an important topic as the data which we fetch from external API usually consists of Arrays of elements which are in JSON format.

The syntax of JSON is quite similar to the Object literal syntax which also consists of name, value pairs. But here both names, as well as values, are quoted in inverted commas.

Let us look at the example below :

//Object literals syntax
let details = {
      firstName : "John",
      lastName : "Adams",
      age : 27
}

//JSON syntax
{
      "firstName" : "Mike",
      "lastName" :  "Bush",
      "age" : 25
}

It is believed that in previous years XML format was widely used which has tags surrounding the data.The above mention JSON data in XML format is represented as below

<details>
     <firstName>Mike</firstName>
     <lastName>Bush</lastName>
     <age>25</age>
</details>

As you can see the XML format is verbose as compare to JSON i.e. for a single value "Mike", the name "firstName" is repeated twice for the opening and closing tags which is quite unnecessary. Also, the JSON can be parsed to Object literal which makes it faster to work with.

JSON is so popular that even JavaScript understands it and it has inbuilt functions to convert from JSON to object literal and vice versa.

Javascript provides JSON.stringify() method to convert data from object literal format to JSON format

 const objectData = {
    firstName : "Mike",
    lastName : "Bush"
 }

 const JSONdata = JSON.stringify(objectData)
 console.log(JSONdata)

Output:-

{"firstName":"Mike","lastName":"Bush"}

There is another method calledJSON.parse() which converts JSON format data to Object literal format

const JSONdata = '{ "firstName" : "Mike", "lastName" : "Bush"}';
const ObjectData = JSON.parse(JSONdata)

console.log(ObjectData)

Output:-

{firstName: "Mike", lastName: "Bush"}

This is what I learned when I started with JSON. Understanding fundamentals and the methods of JSON are important as they are an elemental part of accessing information with API.

*Conclusion *:

JSON syntax is similar to Object literal where both name-value pair is in inverted commas.
JSON.stringify() Object --> JSON
JSON.parse() JSON --> Object

Thank you for your time for reading the article, give a follow on my twitter as I am documenting my learning

Learn var, const, and let [JavaScript] in 6 minutes

Sarvesh Kadam — Sun, 04 Oct 2020 18:45:13 +0000

If you have started learning JavaScript and even if you are in the early stages you must have come across var, const, and let variable declaration.

The const and let were introduced in ES6 but before that only var was the only way of variable declaration. Each one of them has its properties, scopes, and uses.

Let us understand each one of them, the main differences between these ways of declaring variables

var :

Variable declared with var are mutable i.e. they can be reassigned or even declare first and initialize in another step

var num  //num declared -- > value of num is undefined 
num = 1  //num initialize/assigned-- > value of num is 1
num = 3 //num reassigned -- > value of num is 3

var is Global scoped and functional scoped.
A variable has global scope when it is declared outside the function and that variable is accessible anywhere in the code

var firstName = "Sarvesh"
var lastName = "Kadam"
function greet(){
       console.log(firstName+" "+lastName)
}
greet() //*Output*: Sarvesh Kadam

Now the functional scoped says that if a variable is declared with the var keyword inside a function, it cannot be accessed outside it

function hello(){
       var firstName = 'Sarvesh'
      }
console.log(firstName) //Will throw an error as firstName is not defined

We cannot access the firstName variable outside the function lexical scope.

const and let:

const and let are blocked scoped(we will this understand in a second). But first, let's look at the difference between them.

let is mutable (as seen in var) whereas const is immutable.

As we can see in the below example, we can declare the variable at one instance and assigned a value to the "item" variable later or even reassign a new value to it.


let item //declaration
item = "food" //item is assigned a value -- > value of item is food
item = "clothes" //item variable declared -- > value of num is clothes

Let's look at const

const item ; //the value must be assigned while declaring
item = "food"  //error

const item2 = "pen"
item2 = "eraser" //error : value cannot be reassigned to constant variable

So in const, we need to declare and initialize the variable at one instance only and we cannot reassign/change the value.

Now both const and let are blocked scope i.e. we cannot access the variables outside parenthesis{} whether the block is a function or conditional statement

if(true){
    let number1 = 2
    const number2 = 4
}
console.log(number1) //will throw an error as number1 is not defined
console.log(number2) //will throw an error as number2 is not defined

As the variables "number1" and "number2" are declared inside the if statement block we cannot access them, whereas in the case of var we can access it as it is function scoped not block scoped.

if(true){
   var number = 5
}
console.log(number) //Output = 5

Now let us discuss a scenario where an object is declared with const

const player = {
    name : "Eden Hazard",
    team : "Read Madrid",
    position : "forward"
}

player.name = "Karim Benzema" //will re-assign the Value successfully

player = {
    name : "Modric",
    team : "Read Madrid",
    position : "forward"
}   //will throw an error

As you can see in the above example we can change the properties of the object variable declared with const but cannot reassign the entire object.

Some peculiar behavior :

In var we can declare a single variable multiple times and it will not throw an error. Note: We don't use this property in any circumstances, just wanted to make you aware of it

     var name = "sarvesh"
     console.log(name)  //Output: sarvesh
     var name = "rihan"
     console.log(name) //Output : rihan

In let we can use the same name for declaring variables for different blocks and it will not affect the value of the global variables

     let a = 5
     if(true){
          let a = 8
          console.log(a) //Output : 8 
     }

     console.log(a) //Output : 5

As we have used a similar name "a" to declare and initialize the variable. Inside the block, the value of "a" is 8 and outside the block i.e. on the global object the value is 5.

In var the variable gets hoisted i.e. (the var variable is available even before any function/code is executed).

     console.log(name) //Output : undefined

     var name = "sarvesh"

     console.log(name) //Output : sarvesh

In the above code, the variable "name" is accessible even before its value is declared or initialize.
As the JavaScript is parsed, before executing any function/code, the parser searches for any variable or function declarations and it sets a memory space for them with value as undefined.

So here before execution, the variable "name" is stored in the memory space with the value of 'undefined' before any of the log functions are executed.

This entire phenomenon is called Hoisting .( will explain in detail with another blog)

This scenario will throw an error if we used let or const instead of var, as these variables do not get hoisted.

Conclusion :

var is functional scoped
const and let are blocked scoped
var and let are mutable
const is immutable

It's a common practice to use let,const instead of var, as the former two are blocked scope and not accessible outside the block, as it makes the code more secured so if anybody changes the value outside the block it will bot affect the functionality of the entire code.

Even in between const and let, use const wherever possible as it makes the code more readable as we understand if the value of the variable will be updated or not further down the code

The above-mentioned points are good enough to get you started with var, let, and const.

Thank you for your time for reading the article, give a follow on my twitter as I am documenting my learning