DEV Community: Sarvesh Prajapati

5 Must Know Websites for Web Developers

Sarvesh Prajapati — Sat, 05 Mar 2022 04:39:09 +0000

One of the crucial parts of being a programmer is finding the right resources and using them efficiently.

Though using those resources is varies from person to person. But having knowledge is a must for every developer out there.

In this article, we’ll discuss several websites that a developer should be aware of.

So let’s put it into work:

1. MDN Web Docs

Resources for Developers, by Developers
https://developer.mozilla.org

When it comes to having pretty good knowledge about any web technology there is one website I first end up with: MDN Web Docs.

This website covers topics regarding HTML, CSS, and JavaScript. The contents of this website are too good to be overlooked.

The writer explains every bit of information in a plain English way. And this is also my favorite website which makes me put it at the first of the list.

So I personally encourage you to do visit this site, if you haven’t.

2. Medium

Where good ideas find you.
🔗https://medium.com

If you are a developer who loves to gain knowledge by reading articles apart from watching video, then Medium is here for you.

Over 200 dev writers share their knowledge through their articles so you can find high quality articles relevant to your domain.

Medium is my go to website to get a rich knowledge about any particular topic.

So consider this site as your next programming resource.

3. Dev Community

🔗https://dev.to

Since Medium has a particular group of writers who belongs to programming, but Dev.to is the entire platform made for developer.

This the specific resources where you can find articles about any programming technologies.

Majority of Dev's articles are pretty straight forward, and it make sense.

So do give it a shot.

4. GitHub

Where the world builds software

🔗https://github.com

If you are in this programming fields, then it's hard to believe that you haven't heard about GitHub.

Probably you have one , if not more than one.

And if you haven't then you are missing.

For you quick reference:

GitHub is a hosting platform the store source code and it's version using popular version control system GIT.

It wouldn't be wrong if I say, GitHub is going to be the next resume for a developer, and it makes sense.

So make a GitHub account to show your potential as a developer.

5. Stackoverflow

For Developers, By Developers

🔗https://stackoverflow.com

Like I mention earlier, programming is more about thinking than just coding. So in case you are developing a programs, chances are you might end up with running out of logic and idea.

So what else you need that Stackoverflow.

Stackoverflow is a forum platform specially made for programmer.

The community of developer here on Stackoverflow is so vast that chances are you could find solution of your problem on this website.

Wrap things up

Having said that, this is not the whole list of resources. These are the resources which I personally prefer.

Let me know in the comment if you have some more and why they are useful.

So that’s it for now. See you in the next one.

📢 This article is officially published in Within Bracket.

Function in JavaScript - The Basic

Sarvesh Prajapati — Tue, 01 Mar 2022 16:22:26 +0000

Introduction

If you been in programming for a while, you probably would know that functions are the important concept of any typical programming language.

And if are familiar with functional programming languages, like JavaScript,
then it is hard to argue with that statement that functions are the bread and butter of
functional programming languages.

In case if you are new to this programming worlds, then bare with throughout this article and in the end you might would get to know something interesting about functions and why it is important.

The concept of functions is fairly simple:

Breaking down large problems in pieces and wrapping them in a value to reduce repetition.

Sounds Bookish ?

Let me simplify it.

Say, you have a problem to find square of some numbers.

The typical approach would be:

    let num;
    num = 10;
    console.log("Square of "+num+" is "+num*num);
    num = 11;
    console.log("Square of "+num+" is "+num*num);
    num = 12;
    console.log("Square of "+num+" is "+num*num);
    num = 13;
    console.log("Square of "+num+" is "+num*num);
    num = 14;
    console.log("Square of "+num+" is "+num*num);
    num = 15;
    console.log("Square of "+num+" is "+num*num);
    num = 16;
    console.log("Square of "+num+" is "+num*num);
    num = 17;
    console.log("Square of "+num+" is "+num*num);

Doesn't it seems weird ? Repetitive.

Let's see how functions would reduce this repetition.

    function findSquare(num) {
        console.log("Square of "+num+" is "+num*num);
    }
    findSquare(10); //Square of 10 is 100
    findSquare(11); //Square of 11 is 121
    findSquare(12); //Square of 12 is 144
    findSquare(13); //Square of 13 is 169
    findSquare(14); //Square of 14 is 196
    findSquare(15); //Square of 15 is 225
    findSquare(16); //Square of 16 is 256
    findSquare(17); //Square of 17 is 286
    findSquare(18); //Square of 18 is 324

How about that !

This is just a simple example to show you the power of functions, but this not enough.
In fact these days we have functional programming approach to solve a problem.
We'll discuss more about functional programming in future articles.

For now let's play with some basics, to help you to learn fundamental concepts.

Structure of a function:

To use a function:

first you need to define a function
then, call the function

In the above example:

Define a function

function findSquare(num) {
        console.log("Square of "+num+" is "+num*num);
}

Call the function

findSquare(10);

Components of a function:

Typically a function has three components:

function name
parameters
return values

function name is mandatory, whereas some function do have parameters and some functions don't. Same goes for return values, some function return values some functions don't.

    // Without parameter, Without return value
    function sayHello(){
        console.log("I said hello");
    }
    sayHello(); // I said hello

    //Without parameter, With return value
    function greeting(){
        return "Hello";
    }
    console.log(greeting()+ " World!"); // Hello world

    //With parameter, Without return
    function printDouble(num){
        console.log("Double of "+num+" is "+num*2);
    }
    printDouble(2); // Double of 2 is 4

    //with parameter, with return
    function giveSquare(num) {
        return num*num;
    }
    console.log(giveSquare(5)); // 25

Each variable created inside a function is only valid only inside that function.
It is called local scope.

Let me show you:

    function printFive() {
        const num = 5;
        console.log(num); //5
    }
    console.log(num); //ReferenceError: num is not defined

I have written a detailed article on Scope in JavaScript. Check out here 👇

Variables in JavaScript, Scope and Hoisting

Before I go any further let me draw your attention to parameter and argument.

Sometimes people being confused between parameter and argument,
and treat them as same. But there is a thin line between them which you need to know,
to be a better developer.

Check out below image:

When we pass the value while calling the function, that value is refer as argument,
whereas when we accept the value in the function definition, that value is refer as parameter.

This is all the basics you need to know about function.

But when is comes to JavaScript, you can manipulate function in a different way than any other
functional programming language.

Let me show you:

All functional programming language can do this:

    function makeTwice(n) {
        return 2*n;
    }
    console.log(makeTwice(5));

But not all functional programming language can do this:

    const makeTwice = function(n) {
        return 2*n;
    }
    let giveMeTwice = makeTwice; //passing makeTwice to giveMeTwice
    console.log(giveMeTwice(5));

In JavaScript we can even pass the function to variables like a typical value.
This feature has a several benefits in functional programming with JavaScript
which we'll discuss in future article.

Before I wrap things up, there are some topics which need to discuss.

Optional Argument:

Let me first show you an example:

    function makeSquare(n) {
        return n* n; 
    }
    console.log(makeSquare(5, "hello", false)); //25

We might pass 3 arguments (5, "hello", false), but out function makeSquare only able to accept 1 parameter.

So you guessed it right, both "hello" and false are optional arguments.

The optional arguments looks like useless, but they are not at all.

Let me show you:

*Say you have a problem where you pass 2 arguments. If function accept two arguments them it give the result of their difference, but if the function accepts only 1 parameter then it result the -ve of that single number.
*

    function minus(x, y) {
      if (y === undefined)
        return -x;
      else 
        return x - y;
    }
    console.log(minus(10)); // → -10
    console.log(minus(10, 5)); // → 5

You can even set the default value of optional parameter.

    function multiply(x, y=1) {
        return x*y; //here y is 1 by default
    }
    console.log(multiply(10)); // → 10
    console.log(multiply(10, 5)); // 50

The Arguments Array

Like I told you earlier, functions in JavaScript are way advanced than any other.
One of it's cool feature is arguments array.

The arguments array is the default property of a function in JavaScript which
contains all the arguments passed to that function in the form of an array.

Let me show you:

    function demo(a,b,c) {
        console.log(a); // 10
        console.log(b); // 20
        console.log(c); // 30
        console.log(arguments.length); // 3 
        console.log(arguments[0]); // 10
        console.log(arguments[1]); // 20
        console.log(arguments[2]); // 30
    }
    demo(10,20,30);

The arguments array still works, even if you don't pass anything in the function parameter.

Sounds weird ?

Check this out:

    // removing a,b,c from parameter
    function demo() {
        console.log(arguments.length); // 3 
        console.log(arguments[0]); // 10
        console.log(arguments[1]); // 20
        console.log(arguments[2]); // 30
    }
    demo(10,20,30);

Conclusion:

With that being said, up till here we have covered all the basics you need to know about
functions in JavaScript. Now you are good to go and play with them on your own.

Cause this the only way you can learn even better.

But this is not at all. We still have lot to discuss about functions and some even cool features of them.

More on later articles. Till then keep learning.

Which Programming Language to Learn and Why? — Typical Answer!

Sarvesh Prajapati — Sat, 26 Feb 2022 11:58:41 +0000

When it comes to choosing your first programming language, most poeple think that it is one of the most overwhelming job they ever gonna do. And this is why we have a lot of videos on youtube around this topic.

But the answer is fairly simple:

The C Programming Language

Every programmer need to learn C regardless you are a beginner or a experienced developer.

And It is hard to argue with that statement, and why not. All the legend programmers like Linus Torvald ( Founder of LINUX) or Bjarne Stroustrup (Founder of C++) encourage to learn this powerful language.

So let’s look at some reason why you need to learn C:

1. To Understand How a Computer Works:

As a programmer you need to understand how a computer works from the ground level; and C can help you to visualize the inner working mechanism of a Computer System.

Since C is a low level language and very close to machine: so while Programming in C, you need to manage memory allocation and memory management on your own.

These concept are very essential for a programmer : which you can’t learn from any other language. And with programming in C, you are also become able to write efficient code.

2. Influence other Programming Language:

It is hard to argue with the statement that C is the mother of all the high level languages that ever exist. Behind the major high level language whether it is java, python, php, javascript, perl: you name it, there is C behind the scene, which powers them.

So in my opinion this is one the most influencive reason why you need to learn C.

And trust me, after learning C you become able to learn any programming language in the world.

3. Help in Collaboration:

As a programmer, collaboration is the most important skills one can ever have.

When you work with a team, you need to let people understand your logic about how a particular code is going to work. This is where you can use your C concept to represent your logic.

Since C is very close to machine, and it pretty much similar to pseudocode: thus every programmer can understand your code easily regardless which background they came from.

So these are the some reason why a programmer need to learn C.

Here are the popular programs written in C

Major Operating System: Window, Mac or Linux
Google Applications
Adobe Applications
Mozilla Firefox
Thunderbird
MySql
Git
and list goes on…

Conclusion

Rgardless whether you are a noob beginner or a experienced developer, you’ll come across C once in a while: now and them, so you better have it.

C is the language that powers other popular programming language, so learning C will always help you in some aspect like we mention above.

References

Thanks for sticking around. Keep Learning.

This article is officially published on Within Bracket

3 Things to learn while Programming.

Sarvesh Prajapati — Sat, 26 Feb 2022 11:50:12 +0000

When its come to programming most people think that it is just a programming language that they need to gear up thier programmig journey.

But the reality is far different than that.

Yeah there is a stereotype of programmers who just write code sitting in the corner, but as a programmer you also need to have some soft skills like communication and collaboration.

We’ll discuss about soft skills in our future article but in this one we’ll discuss about some essential things you need to learn along with programming.

So let’s get started:

1. Understanding of English Language

As a programmer you need to aware of english language, because majority of the articles and contents are in english language — and if you know english then it would be better to find relevant contents. And it also help to improve your communication skills. So you better have it.

You can improve your english skill by:

Reading articles on Medium
Participate in discussion on Quora

2. Logical Thinking

Programs are built upon logics and as a programmer you gonna spend most of your time in thinking rather than just coding. So you need to train your brain to think logically; otherwise you gonna have hard time with a bit complex code.

And in my opinion problem solving and logical thinking is the one of the important tools, a programmers should have.

3. Knowing Pseudocode

As I mention earlier, you don’t need to worry about choosing your first programming language, but you should know how to write pseudocode.

Pseudocode are just the simple awy to write your logic without using any complex syntax. And knowing pseudocode will also halp you in long run. As it is language independent, so anyone from any programming background, can understand your logic easily.

Conclusion

With that being said. In my opinion these are the three essential things you need to know before gear up your programming journey further.

English Language
Logical thinking
Pseudocode

Although there are other things you may consider, but these are the bare minimum stuff one need to have.

You will eventually find other skills along with your journey.

And btw, I also have a video version of this article. So if you better prefer video, then you can have a look on that too.
Here is the link.

Thanks for sticking around. Keep Learning.

This article is officially published on Within Bracket

JavaScript Equality - Double Equals (==) vs Triple Equals (===)

Sarvesh Prajapati — Sat, 26 Feb 2022 11:24:13 +0000

One thing we often do as a programmer in any programming language is equality checking. Whether this value equals that value or not.

In JavaScript, there are two equality checking operators: double equals (==) and triple equals (===). And they often lead programmers to be confused while using them.

Well, they are not too complicated to understand.

In this article, we’ll go over some differences and use cases such as where and how to use the two types of operators efficiently. And guess what? They are also funny to learn about.

About Comparison

But hold on. Before deep diving, I want you to take the below points into consideration.

All the comparison operators return Boolean values after execution. Either true or false.
And as we all know in programming, there are only two values 1 and 0. So if we go even further, true become 1 and false become 0.

Okay then, keeping that in mind, let’s get into this.

In JavaScript, the comparison happens in two ways.

Comparison with type
Comparison with values

So, what’s the difference between == and ===?

The double equals first converts the type of the operand and then compares them with values. While the triple equals compares the values without changing the type of the operand.

So, that’s it ? 😒

Hell no. There is more to come.

But wait, if you don’t know about type conversion in JavaScript, do check out the article below 👇. It would make much more sense then.

Type Conversion in JavaScript - The Magic

Now, let’s look up some scenarios

To check whether a value is true or false, we can use the Boolean object constructor. Here’s how 👇

console.log(Boolean('hey'))  //true
//-- any valid string is true

console.log(Boolean(0))       //false
//-- as I said earlier 1 is true and 0 is false

console.log(Boolean('0'))     //true
//-- why 0 is true here ? Thanks to quotation, which makes it a String

console.log(Boolean(' '))      //false
//-- the quotation has no character: not a valid string; false

console.log(Boolean([ ]))     //true
//-- empty array

More examples

console.log(false == 0)  //true
console.log(0 == '')    //true
console.log('' == false)  //true

Double equal converts false and ‘ ‘ into 0, that’s why they are equal to 0.

But! This not gonna happen in the case of triple equal. Why? Because === does not convert the type of the operand.

console.log(false === 0)  //false
//-- false is Boolean while 0 is Number, so they not equal for ===

console.log(0 === '')  //false
//-- 0 is Number while '' is string

console.log('' === false)  //false
//-- '' is String while false is Boolean

Data type is one of the most crucial topics in any programming language. I have also written an article on data types in JavaScript.

Data Types in JavaScript — The Weird Parts

With null, undefined and NaN

With that being said, let’s move on. In JavaScript, we have: null, undefined, and NaN

nullis a type of object, which mean noting; blank
undefined is a data type itself
NaN is type of Number, which mean not a number

console.log(typeof null) // object

console.log(typeof undefined ) // undefined

console.log(typeof NaN) // Number

So first, let’s compare null and undefined with == v/s ===;

console.log(null == undefined) // true
//-- double equal convert null into 0 and undefined as well

console.log(null === undefined) // false
//-- for triple equal null is an object while undefined is undefined

null and undefined are only equal to each other and themselves while comparing with Double Equal ( == ). If you compare them with any other value you’ll get nothing but a false.

console.log(null == null) //true
console.log(null == ' ') //false
console.log(null == false) //false
console.log(null == 000) //false
console.log(null == 123) //false
console.log(null == []) //false

console.log(undefined  == undefined ) //true
console.log(undefined == ' ') //false
console.log(undefined == false) //false
console.log(undefined == 0) //false
console.log(undefined == 1) //false
console.log(undefined == []) //false

Now is the time for NaN

NaN is an insane player in the JavaScript world. Why? Because it is never equal to any value — and guess what? It is not even equal to itself.

Are you kidding me ? No buddy, have a look 👇

console.log(NaN == null) //false
console.log(NaN == 0) //false
console.log(NaN == 135) //false
console.log(NaN == 'NaN') //false
console.log(NaN == 'hellow') //false
console.log(NaN == 0) //false
console.log(NaN == undefined) //false
console.log(NaN == NaN) //false

Conclusion

So as you saw, one can easily get confused while choosing whether to use the == or ===.

Let me clarify this. Whenever you need to compare two values, always go with ===, because it gives expected results.

But do play around with both == and ===, because programming is fun, right?

Thanks for sticking around. Keep Learning.

This article is officially published on Within Bracket

Type Conversion in JavaScript - The Magic

Sarvesh Prajapati — Sat, 26 Feb 2022 07:25:34 +0000

If you are a JavaScript developer then you must know JavaScript has three primitive types: Numbers, String and Boolean

But do you know, these types are being converted with each other to perform a certain program. This phenomenon is known as Type Conversion.

Types of Conversion

Implicitly
Explicitly

Let’s explore each of this;

1. Implicit Type Conversion

JavaScript’s objects and function automatically convert the value to a right type for the particular operation. For example:

When you perform a console.log(), the expression automatically convert into String:

const num = 1001;  // num is a number
console.log(num) //> 1001
//? This num has become a string to print.

console.log("20"+"10") //> 2010
console.log("20"-"10") //> 10  (same for * and /)
//? Here + operator simple concatenate the "20" and "10" as string and give 2010,
//whereas - operator converts the values into number to give output 10.

Same for alert(). This also convert the value in String.

const isAlive = true:
alert(isAlive)  //> true
//? This isAlive has become string

This Implicit type conversion also happen when you perform a condition operation using if..else or switch.

The expression within the if block is converted in boolean to perform the operation.

const point = 100;
if(point) {  
  console.log(`You have ${point} points`)
} else {
  console.log(`Collect some point first`)
}
//? though point in number but it converts in boolean(true)
//! Since we know all the positive number is true except 0
// the output will be console.log(`You have ${point} points`)

By the way if you don’t know about this string literals and ${}, they are called template literals. This is the new feature in ES6. This is a very handy tool to logging a statement. Do check it out.

Some more function and operator also do this implicit type conversion, but this is not out concern. We don’t need to worry about all of the function but if you wanna know about them, you get them by doing some research.

Let’s explore the other one:

2. Explicit Type Conversion

In this, we manually convert the value in different types by using some operator and constructor functions.

Number() constructor

This convert the expression into number.

Conversion Rule:

undefined converts into NaN
null converts into 0
"" converts into 0
true converts into 1
false converts into 0
string converts into NaN

Example:

const input = true;
const output = Number(input);
console.log(input);  //>true
console.log(output); //>1
//? The Number constructor converts the boolean value true of input into numeric value 1

Some more examples:

let value;
console.log(value);  //>undefined
console.log(Number(value));   //>NaN (Not a Number)

value = null;
console.log(value);  //>null
console.log(Number(value));   //>0

value = "";
console.log(value);  //>""
console.log(Number(value));   //>0

value = "1to4";
console.log(value);  //>"1to4"
console.log(Number(value));   //>NaN [ to is string ]

String() Constructor

This convert the expression into string.

Example:

let isAlive = true;
console.log(isAlive);  //>true
console.log(typeof isAlive);  //> boolean

isAlive = String(isAlive);
console.log(isAlive);  //>true
console.log(typeof isAlive);  //> string

//> Thought typeof(isAlive), second time, is true, but this true is not boolean, it's a string due to String()

Any thing that pass into the String(), is become string regardless what it been before.

Boolean() Constructor

This convert the expression into boolean.

Conversion Rule:

0, "", undefined, null, NaN covert into 0
others than above convert into 1

Example:

console.log(Boolean(0)); //> false
console.log(Boolean(123)); //> true
console.log(Boolean('wooh')); //> true
console.log(Boolean("")); //> false
console.log(Boolean([])); //> true
console.log(Boolean("0")); //> true
//? Last one : Here the quote is not empty, it has a value "0".
// That's why it returns true rather than false

Beside the type constructor like Number(), String(), Boolean(), there are some also operator the convert the type of a value.

Like '+' operator.

Have a look:

console.log(2 + "2");  //> 22
console.log(2 + +"2");  //>4

But why does that happen?

In the expression 2+ +”2", the extra + operator before “2”, force “2” to become a number. Hence the result is 4 rather than 22.

Conclusion

In JavaScript there are three types of types that occur: Number, String and Boolean.

For implicit type conversion the JavaScript compiler handle this on its own without bother us. Where are for explicit type conversion we use type constructor named Number(), String() and Boolean().

So yeah that’s pretty much it about the type conversion in JavaScript.

References

This article is officially published on Within Bracket

Switch statement in JavaScript

Sarvesh Prajapati — Fri, 25 Feb 2022 07:43:51 +0000

When is comes to controlling the flow of a particular program with making decision, there are typically two options we have:

if…else
switch case

In our previous article we had covered everything you need to know about the if..else in JavaScript. Here is the link:

if else in JavaScript - Conditional Statements

Now let's explore the switch case statement.

Check out this simple example:

let fruit = "apple";
switch (fruit){
 case "apple":
   console.log("This is an apple");
   break;
 case "mango":
   console.log("This is a mango");
   break;
 default:
   console.log("This is a fruit");
}
// Output:
This is an apple

In case if you are not familiar with switch before, then it's a fairly simple procedure to control a flow of a program.

Here is a typical syntax of `switch`:

switch(expression_to_be_checked){
  case first_value:
     //do something
     break;
  case second_value:
     //do something else
     break;
  case third_value:
     //do something else
     break;
  default:
     // do what not defined in above cases
}

Let's breakdown the syntax:

every switch statement start with a switch keyword which hold an expression to be checked either as a value or as a variable
then we have several cases to check the expression, and do a particular task according to the case
in every case block we have a break keyword. It is used to break the further flow of the program and limit us to execute task of a particular case block
at the end we have a default case. It executes the default task if no case condition is satisfies.

There you have it the switch case statement in JavaScript.

But, it's not gonna end here, there are few important points you need to aware of before using it.

You can put the `default` keyword wherever you want; not necessary to put at the end

Everywhere you'll find that the default keyword has been put at the end of every required case block, but it's not necessary to put default at the end.

In-fact I prefer putting the default at the beginning, because it make me feel comfortable to not worry about any further if I use lot of case block.

Either way it's a subjective matter, so you put it where you want, it's not a big deal.

let animal = "mouse";
switch (animal){
  default:
     console.log("This is an animal");
  case "rabbit":
     console.log("This is an rabbit");
     break;
  case "lion":
     console.log("This is a lion");
}
// Output:
This is an animal

In-fact I don't need to put break at the last case block, because it makes sense, it's the last case and no other case is going to be checked after the last case block

Not every switch statement require a default case.

Yeah you read it right. It's not mandatory to use default in every switch statement. You may have condition where you wouldn't need to use default case.

let animal = "mouse";
switch (animal){
  case "rabbit":
    console.log("This is an rabbit");
    break;
  case "lion":
    console.log("This is a lion");
}
// Output:
you might not able to see anything as output

What if you forgot to use `break` keyword

It's fairly simple answer - All the case block would be executed whether the condition meets or not - Simple.

Let me comment out the break keyword.

let fruit = "guava";
switch (fruit){
  case "apple":
     console.log("This is an apple");
     //break;
  case "mango":
     console.log("This is a mango");
     //break;
  default:
     console.log("This is a fruit");
}
// Output:
This is an apple
This is a mango

Not using break keyword can leads to a new experience as well. It's called multi-case operation.

Check this out:

let fruit = "guava";
switch (fruit){
  case "apple":
  case "mango":
  case "pineapple":
  case "guava":
  case "watermelon":
    console.log("This is a fruit");
    break;
  default:
    console.log("This is a thing");
}
//Output
This is a fruit.

It's also known as fall-through.

Here we use the four case statement perform the same task.

Conclusion:

So this is all you need to know to work with switch case. Sometimes switch statement is used as a alternative of if…else. But they have their own use cases.

It's also seen that switch statement work faster than if…else in most cases if there are too many conditions to be checked.

I've illustrated several example and scenarios to explain switch statement, but I would highly recommend to tweak with your own example to have a better understanding.

Cause as they say practice makes perfection.

Thanks for sticking around. Keep Learning.

This article is officially published on Within Bracket

if else in JavaScript - Conditional Statements

Sarvesh Prajapati — Fri, 18 Feb 2022 04:58:18 +0000

Bill Gates's once said, "Computer programming is calculation of math and making decision with if..else".

And it is hard to argue with that statement, and why not. Because deep down this is what programming all about.

If you are new to this programming world, consider going through this article for a better reference.:
📌3 Things to learn while Programming

Anyway, if you been in computer programming for a while, you probably know that programs are build upon logics.
And a logic need to go though certain condition to satisfy a particular problem.

This is where conditional statements comes into the picture. They help us to make decisions to ace a problem.

Generally the conditional statements are referred as if...else. And they are pretty straight forward:

if(this happen){
  do this particular task;
}else{
  do this.
}

Which means, if certain condition met, do a particular task, and if the condition is not met, then
do something else.

let num = 1;
if(num > 0){ 
   console.log("The number is poditive");
} else {
   console.log("The number is negative");
}

Types of Conditional Statement

Typically there are two types of conditional statement exists, in any programming language:

if...else
else if

Let's check out them individually:

if...else

Syntax:

if(this condition satisfies){
   do a particular task
} else {
   do something else.
}

This syntax is similar to what we discuss earlier. If a condition satisfies, do a particular task,
otherwise do something else.

Example:

// Check if a number is odd or even
let num = 7;
if(num % 2 == 0){
   console.log("The number is even");
} else {
   console.log("the number is odd");
}

In the above example, we have checked that while dividing a number by 2, if we get 0 as reminder then
the number is even, and if we get 1 as reminder then the number is odd.

Note: '%' is the modulo operator which gives the reminder while divide a number,
whereas '/' gives the quotient.{#quote .info__quote}

else if

Apart from if...else, we have else if, which is use to add another condition.

Syntax:

if(this condition satisfies){
   do a particular task
} else if(check this condition){
   do this task
} else {
   do something else.
}

In this syntax, you can easily see that here is an another condition to be check.

We can add as many conditions as we want to be checked, with the help of else if.

Example:

let num = 5;
if(num > 0){
   console.log("The number is positive");
} else if(num == 0){
   console.log("The number is ZERO");
} else {
   console.log("The number is negetive");
}

Quite obvious; In the above program we also check that whether or not is the number is 0,
and print log statement associated with that condition, using else..if.

The Nested Condition

So far now, we have checked out, what is a conditional statement and its type. But we have a another version
of conditional statement with nesting.

Nesting means checking a condition inside a particlular condition.

❕ Make Sence ? Check this example:

let num1 = 5;
let num2 = 8;
if(num1 == num2){
   console.log("Both number are equal");
} else {
   if(num1 > num2){
      console.log("num1 is greater than num2");
    } else {
      console.log("num1 is lesser than num2");
    }
}

In the above example we have a if..else statement. But inside the else block we have
another if..else statement. This is called Nested Conditional Statement.

Things to Remember:

So here we have learned about the conditional statement, but there are some facts you should
consider while using them.

else always should be followed by a if statement
use else if only if you need to check for another condition
If else done your job, else if might not require to add

Conclusion;

So let's wrap this up. In any programming language we have two kind of conditional statement:

if..else
else if

We also have a nested conditional statement, to check a condition inside a condition.

And this is all about conditional statement in JavaScript.

Data Types in JavaScript — The Weird Parts

Sarvesh Prajapati — Sat, 12 Feb 2022 09:19:42 +0000

If you have been into programming for a while, you know what are data types and why they are important in typically every programming language.

But if you don’t know about data types, well it’s just the type of data (value) you stored in a variable — as simple as that.

Let’s see an example

const name = 'someone';    // data type is string
const num = 101;           // data type is number
const isAlive = true;      // data type is boolean

So let’s deep dive into data types and explore them.

JavaScript has two types of data types: Primitive and Non-Primitive.

Let’s look at Primitive Data Types

Primitive data types are a type which contain only one particular value, it can be a string, number or boolean like the example above

Here is an example:

console.log(typeof 10);     //number
console.log(typeof true);   //boolean
console.log(typeof "sdf");  //string
console.log(typeof 10.5);   //number
console.log(typeof false);  //boolean

Now, let’s look at Non-Primitive Data Types

Non-Primitive data types is a type which contains a collection of data and this data can be of multiple types: primitive or non-primitive

In JavaScript, the object is the most important non-primitive data-type. As we all know objects are the barebones of JavaScript, so we’ll deal with them in another article.

For now, let’s check them out for the sake of understanding the non-primitive data types.

Let’s see an example of this:

const obj = { a: "apple", b: "ball" };
console.log(typeof obj);  //object

Some more data types

Along with primitive and non-primitive data types, JavaScript has three more data types.

1. function()

In any programming language, as well as in JavaScript, the thing we use most often is the function.

The function has its own data type called function

const whoAmI = (who) => {
    console.log(`I am ${who}`);   // I am No one
};
whoAmI('No one');
console.log(typeof whoAmI);   // function

2. undefined

It simply represents that the value is not assigned to a variable.

let name;
console.log(typeof name);   //undefined

3. null

The data type null represents that there is no value — nothing— empty.

let name = null;
console.log(typeof name);   //null

You might be confused between undefined and null. But there is one simple explanation

The undefined is implicit, meaning we don’t have to set a value (or error value), JavaScript automatically gets it. Whereas in the case of null, it is explicit, meaning we have to set it on our own like in the example above.

Okay! But what about the weird part?

In the context of data types, I might say that JavaScript is weird in some aspects. So far, I have seen some weirdness with JavaScript like :

1. Weirdness with in-built constructor functions

In JavaScript, we have some in-built construction functions to define the data types of a variable (which you should not use) like String, Object, Date, etc.

Look at the code below:

console.log(typeof String);  //function

const place = String("somewhere");
console.log(typeof place);   //string

const fruit = new String('fruit');
console.log(typeof fruit);   //object

console.log(typeof Date);   //function

const now = new Date();
console.log(typeof now);     //object

const date = Date;
console.log(typeof date);    //function

2. Weirdness with null

console.log(typeof null);  //object

const name = null;
console.log(name);   //null

console.log(typeof name);   //object

3. Weirdness with objects

 console.log(typeof Object);   //function

const item = ['a', 'd'];
console.log(typeof item);   //object

const obj = { a: "apple", b: "ball" };
console.log(typeof obj);   //object

Conclusion

So, that’s all about Javascript data types and their weirdness. There are also some use-cases that I haven’t mentioned yet. So, if you want to know about them, write the code and explore on your own.

Finally, JavaScript is weird, but that’s the reason I love JavaScript. In future content, we will explore more about JavaScript and its weirdness.

References

More on JavaScript

🎉Thanks for sticking around. Keep Learning.

📢This article is officially published on Within Bracket

📌 Find More Articles Here

Variables in JavaScript-Scope and Hoisting

Sarvesh Prajapati — Thu, 10 Feb 2022 08:30:02 +0000

Introduction

Variables are the basic and a most important part of any programming language. They are used to store values that are used in the further execution of a program.

You can think variables like a box in which we can store something i.e., values.

In JavaScript variables can store any type of values. It can be a number, string, boolean, array, object, and what else. I don’t want to mess around with data types in this article, we discuss them in another one. Let’s keep our eye only one variable.

Let’s take a look how we use a variable in JavaScript:

var x;            //Declare a variable
x=10;             //Assign a value in it
console.log(x);   //Use it

Before **ES6 **use var as variable keyword, but after ES6 there are two new keyword featured for assigning variable let and const.

But why let and const?

To understand the importance of let and const, first we need to know two JavaScript features: Scoping **and **Hoisting.

Let’s first discuss about Scoping:

Scoping simply means that at what **range **a variable can be accessed.

In JavaScript there are two type of scope: Global Scope and Local Scope

Didn’t get it ? Okay, don’t worry. Let’s do it practically. Consider following code:

var global = 'i am a global variable';
function doSomething() {                
   var local = 'i am a local variable';  
   console.log(local);                   
}                                       
console.log(global);
console.log(local);

Output:

i am a global variable
ReferenceError: local is not defined

What’s is the ReferenceError ?

If you see in the above program, I declare two variables globaland local.

The local variable is in the doSomething function, so you can’t access it outside the function. It means that the scope of variable local is within the function i.e, Local Scope.

But the variable global is declared outside of the function, so you can access it from anywhere. Thus variable global is in the Global Scope.

After ES6 the local scope is further divided into two part:

Functional Scope (function) for var
Block Scope (condition or loop) for let and const

Take a look in below code:

function doSomething() {
   if (1<2) {
     var cow = 'cow';
     let dog = 'dog';
     const cat = 'cat';
     console.log(cow);   //cow
     console.log(dog);   //dog
     console.log(cat);   //cat
  }
 console.log(cow);     //cow
 console.log(dog);     //ReferenceError: dog is not defined
 console.log(cat);     //ReferenceError: cat is not defined
}
doSomething();

As you can see if we try to access let and const variable outside of the if(block scope), it give a ReferenceError. However the var variable do its job perfectly within the function scope.

So that’s being said, the scope of var is functional scope where the scope of let and const is block scope.

Let’s first discuss about Hoisting:

When a variable or a function is declared, its declaration is moved to top **of their **scope.

Have a look at below condition;

Trying to access a variable before it has been declared and initialized

console.log(name);  //access name before it defined or initialized
var name='person';  //define and initialize after it been accessed
/* Output */
undefined

Trying to access a variable before it initialized without declaring it

console.log(name);  //access name before it defined or initialized
name='person';      //initialize name without it defined
/* Output */
ReferenceError: name is not defined

As we can see, if we access a variable before it has been declared and initialized, it return undefined. However if we access a variable before it initialized without declaring it, it returns a ReferenceError.

It’s seems ok in second condition that we not declared namebefore accessed it, so it gives a ReferenceError, but what happened in first condition is that JavaScript automatically declared the variable name before accessed it because we put a var keyword before the variable.

//How we write it
console.log(name);  //ReferenceError: name is not defined
var name='person'; 

//How JavaScirpt Manipulate it
var name;
console.log(name);  //undefined
name='person';

Let’s see a big picture regarding hoisting:

var statement = true;
function checkHoisting() {
  //var statement;  /* Javascript automatically declared it here */
  if(1>2){
    var statement = false;
  }
  console.log(statement); // undefined
}
checkHoisting();

By seeing the example one can easily predict that the output should be true. But due to hoisting property JavaScript declared a new statement variable top on top of the checkHoisting function, which is not initialized, thus the output is undefined.

This type of output might cause a weird error.

But that simply not happen it case of letor const. Let’s see.

let statement = true;
function checkHoisting() {
  if(1>2){
     let statement = false;
  }
  console.log(statement);   //the global statement variable
}
checkHoisting(); //Output: true

let and const are not participate in hoist behavior, cause they are block-scoped variable.

Let’s have a look on another scenario:

var statement = true;
var statement = false;
console.log(statement); // Output:false

let done = true;
let done = false;
console.log(done);      
//Output: SyntaxError: Identifier 'done' has already been declared

What happened here ? Can you guess why ?

Let me simplify it.

When we declare a variable again with with a different value with var, then due to hoist behavior, the value of the variable updated with the latest value, thus the output is false.

But in case of letand const, as they not follow hoist property, it throw a SyntaxError that Identifier donehas already been declared.

This duplication of variable can also cause an error.

Conclusion

Due to scope and hoisting, the var keyword might cause an unpredictable result with w don’t want to occur. So as per the ES6 feature, it good to use let and const instead of var to keep our code less confusing and error free.

That’s being said, that all for this article. I hope this article might help you to understand the variable in JavaScript with scope and hoist property.

References

More on JavaScript

Thanks for sticking around. Keep Learning.

📢This article is officially been published on Within Bracket.

📌Find more articles Here

How things happen over the Web !

Sarvesh Prajapati — Fri, 22 Jan 2021 13:51:19 +0000

Hey there ! So as you know how you can start your web dev journey.

If you haven't, checkout the post below 👇

Starting web development in 2021

Sarvesh Prajapati ・ Jan 19 '21 ・ 2 min read

#beginners #webdev

So, where we were !

Yeah, There are couple of things you need to know about web ! 🌞

It's been seen that the way people accessing the web is changing
over the time.

As we all know to access the web, we need a web browser.
But how a browser work ❔

Thought there are a lot of browser, like

Chrome
Firefox
Safari
Opera
Microsoft Edge

But for the sake of simplicity we take Chrome for the example : 😏

So, if you ever open a browser, you can see a address bar which often referred as Search Bar.

In the address bar, you search something you want to surf.

So you type in the search bar, like here to type dev community , and once you hit 🥊 the enter , there something happen behind the scene in the matter of second, well sometimes millisecond.

After you press the enter, the browser fetch the IP address of whatever you type in the address bar, from the DNS or Domain Name Server

In DNS every domain store in the form of a unique IP address, the browser request to the IP address and the server give the response according to the request over a standard protocol.

Sounds silly ! 🙄. Let's dive deeper

Once the client make a request to the server, at first there is a connection built between the client and the server, called TCP/IP Transmission Control Protocol

Now, once the connection build, you can make requests to the server.

The server software are written in different languages like:

java
python
node js
asp.net

But they all try to achieve the same goal. They fetch the data according to your request from the server and give you the data.

The data is might be in HTML , XML or JSON. But for the sake of simplicity we assume the data is in HTML.

But you didn't make a request for an HTML page, Right. 🦉

This is where the Browser comes in. 🦸‍♂️

If the server gives you the visual rendered page, this might takes a lot of time.

So, it gives you the data in the format of HTML CSS and JS and the browser convert this data into the Visual rendered page, in just a flash of second ⌚.

And your page to ready for your enjoyment. 🎉

Wrap things up:

A browser is not only just help you to surf the web but also simplify your work by tracking your activity, restrict errors, keeping secret info, speed up the way you browse with using cache, and much more.

So, thanks for reading the post. Feel free to comment down your opinion.

📢This article is officially been published on Within Bracket.

📌Find more articles Here

Starting web development in 2021

Sarvesh Prajapati — Tue, 19 Jan 2021 14:27:46 +0000

If you want to start web development in 2021, you might be pretty overwhelmed 🙄.

Here I'm walk you through a handy roadmap to start web dev as a complete beginner.

Hold Tight 🦉

Okay, so first thing first if you want to start web dev, you are going to be a programmer which mean you'll write some code and for writing code you'll need a code editor.

A quick note ⚠

If you are going to use notepad for writing code, leave it right now. You are going to be a programmer, not a typewriter.

You need a code editor which designed for programmer.

A code editor not only help you to write code but also improve your programming experience.

There are lot of code editor and you don't have to try them all.

Try VS Code, the only best code editor.

Now, if you don't know thing you see on web are build upon three key element
HTML, CSS, and JavaScript

HTML , building block 🧱 of web page

Everything you see on web is written is HTML, like an image, button, text, shapes etc.

So start learning HTML which you can easily learn in a couple of week.

CSS , styling 🎨 the web_

After learning HTML, you're going to use CSS(Cascading Stylesheet)
CSS help to style HTML element like align them, changing font-style, background-image, color, position and much more.

It takes you 2-3 week 📅 to learn CSS, so you can build something with HTML and CSS 👨‍🎨.

JavaScript , programming 👨‍💻 the web_

Now, after learning HTML and CSS, you are going to learn the only programing language of a webpage.

JavaScript help you to make a webpage even dynamic.

It takes you 10-12 month to learn JS, so you can call yourself a programmer.

So what next

Now its time to build some project with all the thing you've learn.

Building project not only help you think like a programmer but also takes your programming skill to next level.

So, bang 💥 on your keyboard and get your hand dirty by building recipe 🍴 with programming.

DEV Community: Sarvesh Prajapati

5 Must Know Websites for Web Developers

1. MDN Web Docs

2. Medium

3. Dev Community

4. GitHub

5. Stackoverflow

Wrap things up

Function in JavaScript - The Basic

Introduction

Structure of a function:

Components of a function:

Optional Argument:

The Arguments Array

Conclusion:

Which Programming Language to Learn and Why? — Typical Answer!

1. To Understand How a Computer Works:

2. Influence other Programming Language:

3. Help in Collaboration:

Here are the popular programs written in C

Conclusion

References

3 Things to learn while Programming.

1. Understanding of English Language

2. Logical Thinking

3. Knowing Pseudocode

Conclusion

JavaScript Equality - Double Equals (==) vs Triple Equals (===)

About Comparison

So, what’s the difference between == and ===?

Now, let’s look up some scenarios

More examples

With null, undefined and NaN

So first, let’s compare null and undefined with == v/s ===;

Now is the time for NaN

Conclusion

Type Conversion in JavaScript - The Magic

Types of Conversion

1. Implicit Type Conversion

2. Explicit Type Conversion

Number() constructor

Some more examples:

String() Constructor

Boolean() Constructor

Conclusion

References

Switch statement in JavaScript

Check out this simple example:

Here is a typical syntax of switch:

Let's breakdown the syntax:

You can put the default keyword wherever you want; not necessary to put at the end

Not every switch statement require a default case.

What if you forgot to use break keyword

Conclusion:

if else in JavaScript - Conditional Statements

Types of Conditional Statement

if...else

else if

The Nested Condition

Things to Remember:

Conclusion;

Data Types in JavaScript — The Weird Parts

Let’s see an example

Let’s look at Primitive Data Types

Now, let’s look at Non-Primitive Data Types

Some more data types

1. function()

2. undefined

3. null

Okay! But what about the weird part?

1. Weirdness with in-built constructor functions

2. Weirdness with null

3. Weirdness with objects

Conclusion

References

More on JavaScript

Variables in JavaScript-Scope and Hoisting

Introduction

Let’s take a look how we use a variable in JavaScript:

Let’s first discuss about Scoping:

Here is a typical syntax of `switch`:

You can put the `default` keyword wherever you want; not necessary to put at the end

What if you forgot to use `break` keyword