JS10 — Ten Javascript fundamental topics you should know

1. Cross Browser Testing
As a web developer, we build different applications that are used by world wide users. During our development process, we test our application across our devices. But it isn’t right that users all over the world or a particular area use the same browsers or devices that we’re using.
Cross browser testing is an approach where an application is tested across different devices before deployment. It is a responsibility of a developer that he assures his application not only works fine in his device but it works well on all of his user’s device.
This practice of cross browser testing comes because there are may different features and methodologies into different browsers and devices. Those browsers may also have different capabilities or levels of support for technology features than others. Sometimes our browsers have bugs or they think differently in implementing features. So, it isn’t unusual that those different browsers behave different in a particular feature of our application.
So we should keep a portion of cross browser testing in our work stack. We shouldn’t deploy our application without its cross browser work ability.

2. Comment
Comment is a very common thing in all programming language. There are generally two kind of comment, single line comment and multi line comment.
We often write down some descriptive line into our code called Comment. We write comments to describe overall architecture, function usage or important solutions.
In javascript, single line comment can be declared by starting the line with // (double forward slash). But if we want multi line comment, we put our lines between /* … */ sign.
Note: Beginners should avoid writing comment here and there much more. Also describing “how code works” “what it does” in comment isn’t a good practice. A function can be a description to another function rather commenting into a complex function.

3. try…catch
Sometimes our code dies from a tiny error, thrown from our mistakes, unexpected user input or a failed server response and many other reasons. Die means a script immediately stops in case of an error. So, we use try…catch block so that our code do something more reasonable instead of dying. The try…catch constructed with two main blocks like
try {
// script …
} catch (error) {
// error handling
}
The try…catch block works in synchronous way. First the code into try {…} is executed. If there were no error in our script written into try block, the code successfully executes and ignores the catch(error){…} block.
But if we leave any error in our code written into try block, the code won’t execute, then it goes into catch block and does the job what we wrote into catch(error){…}.
The error in catch(error){…} block is a variable that can be named as we wish. It contains an error object with details about what happened. The object usually contains two or more properties such as ‘name’ that consists of the name of the error, ‘message’ that is a textual message about error details.
So if there is an error in our code, the try block doesn’t kill the script rather we have a chance to handle that in catch block.
Note: try…catch only works for runtime errors. So to handle our errors, we should write valid javascript.

4. Coding Style
No mater how much complex is our code. to keep our code human-readable and correct, it must be as clean and easy to read as possible. Below we mention some point that should be keep in mind during writing functions or other building blocks in our code.
i. Give a white space between parameters.
ii. Don’t give any space between the function name and parentheses and also between the parentheses and the parameter.
iii. Put the opening curly brace { on the same line where the function name declared, after a space.
iv. Give spaces around operators.
v. A semicolon is mandatory after each ending line of code.
vi. Indent 2 or 4 spaces before the code into the function.
vii. Give space between arguments.
viii. Give an empty line between logical blocks.
ix. Put the ‘else’ block in the same line where the ending curly brace of ‘if’ block located.

5. Hoisting
Hoisting is a default behavior in javascript. We can use a variable or invoke a function before its declaration. Conceptually hoisting is to physically move the declaration of a variable or function name to the top of our code. But in reality, the variable and function declarations are put into memory during compiling the code but stay exactly where we typed them in our code.
Actually our variables and functions are declared with the value of undefined before we use or invoke them. So we don’t face any error when we use them before declaring them.
Note: Declarations are hoisted in javascript not the initializations. If a variable is declared and initialized after using it, the value will remain undefined as we mentioned above why it is undefined.

6. Block Binding
Variable is more formally known as binding because when we declare a variable, we actually bind a value to a name inside a scope. In javascript, there is a block creates inside every time we create a function or write code between {…} curly braces with var, let and cons.

7. Default parameters of Function
When we write a function, we can initialize its parameter as any default value. The default value of parameter of function is generally undefined. But from ES2015, we can set a value to a parameter in a function like :
function sum(a, b = 3) {
return a + b ;
}
console.log(sum(5))
We don’t pass any argument for the second parameter of the function above, but we initialized that with the value of 3. So it will return the expected result.

8. Arrow Functions
Arrow function is a new approach in javascript. It makes creating functions more easier. It is called ‘Arrow’ because it looks like a arrow(=>) sign.
To create an arrow function, we first express it via var/let/const. Then we write a name that holds the function and then we give an equal(=) sign as we declare variable. So after giving equal sign, now we can put our parameters between ( ) and then we give an arrow like sign => and lastly we can write our function body between { }.
If we want to write a single a line function, we can omit the curly braces. Also we can omit the () where we put our parameters if there is only a single parameter in our function. But if we have no parameter in our function, we’ve to give a empty parentheses () like that. So our function looks like :
// Single line arrow function
let sum = (x, y) => x + y ;
// Multi line arrow function
let multiply = (a, b) => {
const c = 0.5 ;
const result = a * b * c ;
return result ;
}

9. Spread Operator
Spread operator allows an iterable to expand in places where 0+ arguments are expected. It is mostly used in the variable array where there is more than 1 values are expected. It allows us the privilege to obtain a list of parameters from an array. Syntax of Spread operator is same as Rest parameter but it works completely opposite of it. Spread operator’s syntax is like :

let newValue = […previousValue];

In the above syntax, … is spread operator which will target all values in particular variable. When … occurs in function call or alike,its called a spread operator. Spread operator can be used in many cases,like when we want to expand,copy,concat,with math object.