Boost Your JavaScript Jetpack knowledge

1. JavaScript Data Types

In JavaScript variable don’t have types. Because it is dynamically typed language. In other programming language we have to mention data type like in c. We declare variable like

int num = 34;
char name = “Habib”;

But in JavaScript we don’t mention variable type. we can declare

let num = 34; // number
let num = “Habib”; // string

So, we can categories JavaScript data types into two categories'

1. Primitive

There are 6 types of Primitives in JavaScript

1. string,
2. number
3. boolean
4. undefined,
5. null and
6. symbol.

2. Objects

we can use one single variable to store multiple data in JavaScript. We can assign multiple types of data in Objects, lets see an example of Objects.

let student = {
name: “habib”,
id: 34,
isMale: true
}
console.log(student)
Expected Output: { name: ‘habib’, id: 34, isMale: true } // full Objects
console.log(student.name) // printing the specific objects property.
Expected Output: habib

2. Global Block Bindings

Binding means declaring a variable or declare and initialize a variable which known as binding. JavaScript ES6 brigs out the latest block binding. There are advantages and disadvantages of binding. lets look at below example

{
let x = 50;
}
console.log(x);
// Expected output: Error message

Here we declared in block scope but printing outside of block that’s why we get an error message. But we if we declared it globally we can access the variable at anywhere. lets look at below:

let x = 50;
{
console.log(x);
}
console.log(x);
// Expected Output:
50
50

Here we declared globally so we can access our variable at anywhere.

3. JavaScript try catch

No matter how good or bad you are in programming errors is your daily partner. Errors is unreliable things which happened in programming. It makes your life harder. But if you are master in handling errors then you can enjoy your programming life. Now we are going to learn error handling in JavaScript.

try: try statement lets you blocks of code for errors and catch statement lets you to handle the errors

lets see an example:

try{
console.log(“testing our code”);
thisWordMakesError;
console.log(“end of testing our code!”);
}
catch(err){
console.log(“Error is found “ + err.stack);
}
VM60:2 testing our code
VM60:8 Error is found ReferenceError: thisWordMakesError is not defined
at <anonymous>:4:5
undefined

There is nothing like the word thisWordMakesError in javaScript. So, our code stopped at try function when it found the word thisWordMakesError then it didn’t execute the next line it directly went to the catch function and shows where actually error is found. In this way we can boost up our coding by handling errors.

4. JavaScript Coding Styles

As a programmer you will work for an organization, work as a team member, you can be a tutor. End of the day you are your code must be clean and human readable. There are various rules for right coding styles I have mentioned some of them.

1. Don’t use spaces between function name and parenthesis.

2. Use space between function parameter.

3. Write curly braces on the same line and use space closing parenthesis and starting curly braces

4. Use space between all the operators;

5. Always use a semicolon when statement ends.

6. Use two space to indent function inner statement.

7. Always use an empty line between two blocks.

8. Don’t make your line too much long.

9. Use spaces between your two nested call.

10. Use space after writing for or while and conditional logic if else

11. Write code without breaking line after else

5. Commenting in JavaScript

In programming comments is one kind of instruction that makes the code more understandable for programmers. Comments are not executed. Comments are skipped when the code runs. It won’t affect the main code. lets see how we can comment in our JavaScript program.

// use double forward slash to use single line comment
let name = “habib”; // It’s string
// Multi line comment
/* start with forward slash and asterisk
ends with asterisk and forward */

But there are set’s of rules of a good developer. Never use unreliable comments. Use comments when only necessary.

6. Arrow Function

As function is an important factor for every developer. You will use function not to repeating your code multiple times. In JavaScript Arrow function is the latest creations of JavaScript ES6. It makes our life lot more easier. Reduces the number of lines of code and extra keywords. Lets see normal function then we compare it to arrow function

function add (x, y) {
console.log(x + y)
}
add(2, 4);
Expected Output: 6

In Arrow function we can write the same code like below

add = (x, y) => {
console.log(x + y)
}
add(2, 4);

using arrow function your code would be much cleaner

6. Spread Operator:

Spread operators allows the expressions to be expanded in places where multiple elements or variable are expected. There are many common cases of spread operator. You can add elements of an existing array into new array. To use spread operator we have to use three dots(…) before the existing array into square braces where you want to copy all the elements of your existing array into a new array. Use three dots before your existing array and use this like new array elements. Lets make it more clear with below example.

const firstCollection = [“C”, “Java”, “C++”];
const updatedCollection = [“javascript”, “python”, …firstCollection];
console.log(updatedCollection);
// Expected Output: [ ‘javascript’, ‘python’, ‘C’, ‘Java’, ‘C++’ ]
const firstCollection = [“C”, “Java”, “C++”];
const updatedCollection = [“javascript”, “python”, …firstCollection];
console.log(updatedCollection);
// Expected Output: [ ‘javascript’, ‘python’, ‘C’, ‘Java’, ‘C++’ ]

Here we have added the all the elements of our firstCollection into updatedCollection array.

Lets use spread operators into a function. look at the example.

const adddNumbers = (a, b, c)=> {
console.log(a+b+c)
}
const numbers = [3, 4 , 7];
adddNumbers(…numbers); // we passed the array as an individual arguments.
// Expected Output: 14

7. Cross Browser Testing

You are a web developer. You built a site to help your agency, organization to make money. But what happened if your site doesn’t work properly for all the people who uses your site. You are not the user of your own site. People of all around will use it. They use different browser different device to use your site. Cross browsers testing concepts comes from here. Some people are familiar of using old browser. Old browser doesn’t supports new feature of css or more latest feature. When you make a site you have to test your site in different browser including old and new browser. Test your site into different devices like smart phones, tablets, Desktop and others larges screen. When you ensure that all around your site works fine then you can feel free to deploy your site for the end user.

8. Function with default parameter values.

When you call a function you need to pass parameter into your function. But what happened if you did not pass any arguments to the function but you declared the parameter. You’ll get an error message of undefined like below:

const seeNumbers = (num1, num2, num3) => {
console.log(num1);
console.log(num2);
console.log(num3);
}
seeNumbers(1, 3); /* we haven’t passing any num3 wih any values but we are printing output of num3. */
Expected Output:
1
3
undefined

That’s why we use function default parameter values like below.

const seeNumbers = (num1, num2, num3 = 10) => {
console.log(num1);
console.log(num2);
console.log(num3);
}
seeNumbers(1, 3, 25); // passing num3 arguments with values
Expected Output:
1
3
25
const seeNumbers = (num1, num2, num3 = 10) => {
console.log(num1);
console.log(num2);
console.log(num3);
}
seeNumbers(1, 3); // didn’t pass any num3 arguments with values
Expected Output:
1
3
10

Here we have assigned our num3 parameter into a default parameter. If any values passed into the function the values will executed if not the default parameter works without error message.

9. Declarations and Hoisting

Hoisting means variable declarations, function declarations are a process before any code is executed. So declaring a variable or a function anywhere in the code is equivalent at the top. This behavior is called Hoisting. Let’s look an easy example.

console.log(notDefined);
//Expected Output: undefined
let notDefined = “I am not defined”;
console.log(notDefined);
Expected Output: I am not defined;

For the first console.log gives us error message because variable is existing before declarations. But for the second console.log we get our assigned values. Because variable is declared before existing. Same this is happened for a function. lets look at the below example:

// 1st example
addNum(5, 7); // calling before declarations;
const addNum = (x, y)=>{
console.log(x + y)
}
Expected output: Error message;
// 2nd example
const addNum = (x, y)=>{
console.log(x + y)
}
Expected output: 12;
addNum(5, 7); // calling after declarations
//10 Block Level function
If you declare variable and call it outside of your block it will give you an error message. lets look at an example:
const myFun = () =>{
if(true) {
const name = “habib”;
}
console.log(name)
}
myFun()
//Expected Output: Error message

Because name variable is inside a block but we console it outside of block. But if we console log like below we will get our desired output without error message;

const myFun = () =>{
if (true) {
const name = “habib”;
console.log(name);
}
}
myFun()

Hope my article will boost up your JavaScript knowledge. That’s all from today. Happy Programming…