Hey there beautiful people on the internet, hope all of you are doing well…
Today we will talk on some scattered topics but I think is a must to know as a javascript web developer.
Today's talk will be in the following sequence …
#Coding Style — Formatting
#Code Formatting— Indentation
#Commenting On Code
#Variable Naming
#Variable Declaration and Hoisting
#Cross Browser Testing
#Primitive Values
#Objects & Functions
#Arrow Function
#try-catch Statement
Code Styling — Formatting
Well, who doesn’t love to be disciplined? But can everyone achieve that kind of life? The answer is no. Because it is not an everyday easy task rather it has to be maintained and nurtured gradually.
Similarly, In coding when we code we don’t have to write a beautiful code for the computer of the compiler that will compile the code because they don’t really care about the formatting and spaces and indentations rather they want is a correct and bugless code. So why is it important to format our code or style our codes? This is for our better understanding and better visualization.
So in styling out codes there is a term known as formatting. This means to write our codes as a format and also to maintain that format everywhere. For the global use case, we see many formatting styles but it's better for us to stick to one.
What we have to think is that it's not about the computer that processes the code rather it's for our understanding and visualization of the code that needs it to be formatted. Cause then we will see a pretty code and we will realize the after-effects by doing so.
Just simply look at these two codes and tell which one is better understood to us. I think from the common sense perspective the second one looks much prettier and yes after a lot of days when we will lookback at the code then we will be able to understand the codes more easily.
This is why writing good formatted code is a great trait for any developer or programmer…
Indentation another best code formatting tip
If indentation is a new word for us then let's dissect it a bit and see the inside. Now if we search for the word indentation then we may see “space at the beginning of a written line or paragraph ”. This again refers to the type of styling the code for perfection.
For example, if we look at this code
Then we will see a pattern that every starting tag and the corresponding closing tag are in the same vertical column or they have the same amount of spaces from the leftmost side. Another thing is that when we are getting deeper into other tags then they are another tab than the container tag.
These two properties mainly govern the indentation property for a better-looking code that also makes sense when looking at it. Cause it will also show which tags are under which tag and we can easily get a feeling of their hierarchy and also the parent-children concepts from just looking at the code.
So it's really important to have a quality indentation in our codes.
Code Commenting
Well has it ever happened with you that you wrote a code but after a long gap maybe weeks or months even years you see the code and don’t know what really is happening in the code. Well, I have faced this kind of problem and one of the easiest hacks is commenting on the code.
What actually is commenting right? And who do we comment actually? Well, the thing is that we can add comments on codes, and in those comments, we will talk specifically on the part of the code that follows this is also a convention to comment at the top of the code so that we can start going through the code with a mentality of what is done in the code.
This simple code has commented on top of each code which means what is done in the next few lines of the code so that the reader can get a nice headstart on the code.
Also here we see single-line comments and also multiple-line comments.
Well in some simple sentences the goal is to make blocks of indented codes that fit a specific task and at the top of each block, we will talk about the functionality and working procedure or target so that the reader gets a nice overview of the code and can understand what is done in the code.
Though there are many types to comment on a code it is necessary to comment on a code so that if we are revisiting the code many times after then this will help not only us but also our readers to know what is the purpose of the following lines of code.
Variable Naming
Variables are very important for our coding part and it helps us to store our desired data in them but if they were not there then what would happen?
Well, simply we would have to work with registers and memory addresses and pointer which makes the life of coding a real pain.
Thanks to ALLAH that we have variables. So how should we name them? Well, we can’t just name them our cousins' names or friends' names and remember which friend was for which task. Rather we will give them names in meaningful ways.
Suppose we are adding two numbers and the result needs to be in a variable. What can be the name?
Anything that makes sense both to you and the reader. For instance, if we are taking a variable for the added-up result then we may use names like “sum”.
Now in the real-life, not everything is as simple as “sum” rather in JS we will have to name variables for rendering elements in the DOM and other parts of the code there we will have to name in a meaningful way. Simply think that, if we have to work with an array that will store the values of products. Then we will name the variable as “arrayOfProducts”.
I hope it makes sense right?
Okay, now you can see that I had written in a different casing well this is a special casing system or convention named “camel case”. Here the total name will be consisting of many words. The first letter of the first word will be small cased and the first letters of the other words will be uppercased. Suppose we are intending to make a variable name with the words “response” “from” “api”. Then we can make the variable name “responseFromApi”. This helps the reader to get a better understanding of what is this variable used for…
So to make the use of the variable clear to the user and the programmer we will use this kind of casing and meaningful names for variables that is a good trait for a good coder.
Variable Declaration & Hoisting
As we have talked about how to name variables now let's talk about their declaration and JavaScript Hoisting property.
What is a declaration? Suppose there are students in a class. Obviously, they have names but there may be a case when two names are the same, so we give individual id no or roll no to each of them. Why is that could we just call them by name and if there are multiple outcomes then we will choose as we intend. Well, that is not the correct way rather a redundant one.
Well for this example the process of giving the students ids can be considered as a declaration as it declares them in front of the class and when a variable is called then it gives only the data of that variable.
Similarly, we will declare a variable before it is being used right?
var number1;
let number2;
const number3;
Well, this is an example of a declaration in three ways. Where the first two variables can be updated with other values. But the third one a const type means this will be initialized with one value and that will be fixed in that scope.
Only the declaration is not all rather initializing with proper values must be done.
For example,
const number3 = 24;
console.log(number3);
Now another thing to be remembered is that if we have declared a variable by a name obviously that name can not be redeclared for another variable. So one variable name for one variable.
Hoisting may be new to us but don’t worry cause it only means to hoist something or elevate something. In JavaScript, this concept is used in the sense of variable. For example, if we are writing a code then the usual thing is to give the declaration first then use the variable afterward. But variable hoisting is enabled as a key feature for JavaScript and for that we can use a variable before its declaration.
a = 5;
console.log(a);
var a;
Here we see the declaration is after and the use case is before well this is a special type of offering from JavaScript that works only when variables are declared with var keyword because the const and let keyword doesn’t allow this variable hoisting.
Cross Browser Testing
Being a web developer we are not working with only one device or one platform rather we are building websites that need to be perfect for each and every device and browser.
So if we want to be ready for browsers then we must do cross-browser testing. The analogy is very simple.
At first, we will work on our initial planning.
Secondly, we will develop our code and the website.
Next comes the testing part on the browsers. This means we will target a specific browser and after that, we will try to correct our code for that particular browser.
After this, the corrections must be done, and then comes the iteration part when we will again go to the second step or the development stage and then work through the process until we get to our desired goal.
So we have to consider the browser giants and have to specifically code some parts or update some parts or even downgrade some parts as not every browser is as updated as the other. So it depends on their version and compatibility issue.
So this is a very important issue for the global acceptance of the website.
typeOf() method & Primitive Values
In the JS library, we get to see many inbuilt methods that really come in handy in many scenarios. One of them is typeOf() method. This returns the type of the parameter. Meaning it returns whether the variable is a string or number or what?
console.log(typeOf(12))
console.log("AB 12")
Well, these two will show numbers and strings.
And now if we talk about what values are there that will be returned from the typeOf() method, then we will see
● Undefined (undefined), used for unintentionally missing values.
● Null (null), used for intentionally missing values.
● Booleans (true and false), used for logical operations.
● Numbers (-100, 3.14, and others), used for mathematical calculations.
● Strings (“hello”, “abracadabra”, and others), used for text.
● Symbols: used to hide implementation details.
● Bigtits : used for math on big numbers.
● Objects : used for object representation.
● Functions : used for showing function types.
These are the main primitive values that are governing JS.
Objects & Functions
Well, let's learn some more about objects and function. Because these two are really important not only for the web development JS rather for any other language specially OOP (object-oriented programming).
Just guess Apple as a brand and the latest iPhone12 as their latest and greatest invention. But the thing is that already many other phones have all came from Apple. So we can consider Apple as the Class and the phones as objects.
When we are condensing much information in one big composite data or variable then that is called an object. Meaning an object will be one variable of its own but it will be composited of more than one variable known as attributes. This has a special syntax like,
let iPhone = {
name:"iPhone 12",
price:1300,
color:"Purple"
};
console.log(iPhone.name);
This will show us the name iPhone12. This how to work with objects.
For the concept of functions, I will just say that it is nothing but a command that is called from another part of the code or from a specific part of the code, and this function will work on something or do some works and lastly, after a successful completion it will return a value to that position of the cod where it was called.
A simple function example in js may be,
function addNumbers (number1 , number2){
return number1 + number2;
}
console.log(addNumbers(1,2));
Where addNumbers is the function name and number1 and number2 are the parameters that will be used in the processing. This function returns the value of the sum of number1 and number2.
So when addNumbers(1,2) is called from the bellow then this adding function will be called from there and it will return the resulting sum that will be replaced by addNumbers(1,2) and ultimately this the main working procedure of a function.
Arrow Function =>
Well, we have seen one syntax of function in the previous part but now we will see a modern ES6 version of it known as an arrow function.
const addNumbers = (number1 , number2) => {
return number1 + number2;
}
console.log(addNumbers(2,4));
This is the same code just the syntax is different. Just know that the arrow function is an ES6 version and updated with respect to the normal function. Here the function name is told before and after that, the parameters must be told, and then the procedures will be done within the curly braces after the arrow sign.
Again if there is no parameter then the first brackets are just there nothing in between.
const showMsg = () =>{
console.log("hi");
}
showMsg();
These are the ways to implement an arrow function.
Try- Catch
We write code and it is not a surety that what we code is 100% true and correct rather there may be faults then we have to handle those errors else that will be a bug for the code.
For instance, if we are working with a variable named number and think it was initialized with 5. But unfortunately, it has been in a position that number = 50/(number*0);
So now we will know that this will be an error and we cannot continue our code with this faulty code. So there comes try-catch block.
Simply think if there is no error then it will work in the try block but when any sort of error is being generated then it will just go to the catch block which means that this is really a handy one and we can correct our code or reinitialize our data with this one.
let number = 0;
let label="";
try{
number = number/anotherNumber;
label = "in try";
}
catch(error){
number = 0;
label = "in catch";
}
console.log(label);
As you can guess that the code in the try block is not correct rather is a non-declared variable named anotherNumber that will disturb the program badly. So this is why the code will move towards the catch block. And in the label, we will see the value to be in catch.
So in one word, if there is an issue with the try block the code will move for the catch block and no other try block statements will be compiled rather the catch block will take the floor.
Well, that's all for today. Hope to meet you, beautiful people, soon.
