Dive Into Fundamental of JavaScript

JS fundamentals

Hello. Today we will learn 10 topic about JavaScript fundamental. As a developer you must know this.

1. check type of variable

Sometime we need to check type of a variable value. we can do that with typeof operator. there are many type of value such as number, string, object, Boolean, undefined etc. Array, regular expression are included in object type. try to run the code bellow.

2. handle errors with try…catch

if you want to be a developer error will be your very close friend. in javascript if any error occurs the script dies immediately . if you do not believe that try the code bellow

You can see the first console.log executed. but the second one throw an error because variable school in not declared. after that the script dies and the third console.log didn’t execute. Here comes the try...catch . see the code bellow.

const name = 'jabbar uddin';
const phone = '01712345678';
try {
console.log(name);
console.log(school);
}
catch (err) {
console.log('an error occured');
}
console.log(phone);

we can see try catch not blocking the script. in try section if any error happens it jumps into the the catch section. but scripts doesn’t die. catch takes a parameter. you an name it anything. it a error object. keys are name, message and stack Try the code bellow.

const name = 'jabbar uddin';
const phone = '01712345678';
try {
console.log(name);
console.log(school);
}
catch (err) {
console.log(err.name);
console.log(err.message);
console.log(err.stack);
}
console.log(phone);

3. cleaner code and comments

As a developer your code must be clean. Codes should be like anyone can understand the code easily. see this example. if you are writting single line if statement you can write without curly braces .

if(true)
    console.log('condition is true')

this code will work . but in future if you convert it in multiline there is a high chance that you forget the curly braces and get an error . so it’s a good practice to use curly braces always.

if(true){
    console.log('condition is true')
}

4. Cross browser testing

If you are developing a website you must test the site for deferent browser. because some of latest feature of JavaScript or CSS may not work in older version of browser. you have to ensure the the site works in other browser correctly. there are also disable people. they use the Web with the aid of assistive technologies like screen readers. so site must work with that tools. if you ar developing in a MacBook and the site is working fine that doesn’t mean that it will work in an old smartphone. so you must test for cross browser.

5.caching

Caching is a computer concept which will make the application efficient . if user calling a function again and again you need to load same data . By caching you can reuse the loaded data which is stored in cache

6. var declaration

If we declare var inside a function anywhere it will treated as it declared in top of the function or global scope if declared outside of a function.

function getColor(condition) {
if (condition) {
   var color = 'blue';
   return color;
} else {
    color = 'red';
   return color;
}
}

if the condition is false the code will execute the else part. but the color variable declared in if block. but the script won’t show error because JavaScript will treat the code as bellow

function getColor(condition) {
var color;
if (condition) {
   color = 'blue';
   return color;
} else {
    color = 'red';
    return color;
}
}

this is called hoisting. The declaration of value is hoisted to the top, while the initialization remains in the same spot.

7. let declaration

let declaration is almost like var. but deferance is scoping. let limits the scope of the variable. let is block scope. that means let declaration will work in it scope.

function getColor(condition) {
if (condition) {
let color = 'blue';
return color;
} else {
return null
//the color variable doesn't exist here
}
//the color variable doesn't exist here
}

8. const declaration

const is also block scope. It will only work in it scope. Variables declared using const are considered constants, meaning their values cannot be changed once set. For this reason, every const variable must be initialized on declaration, as shown in this example:

// Valid constant
const name = 'Abdul Karim';
// Syntax error: missing initialization
const age;

9. Spread syntax (…)

we can use spread syntax where zero or more arguments or elements of array or a object are expected. Spread syntax can be used when all elements from an object or array need to be included in a list of some kind. see the example bellow

function doSum(x, y, z) {
return x + y + z;
}
const numbers = [4, 5, 6]
console.log(doSum(...numbers))
//expected output: 15

in this code we can see that the function doSum takes three parameter and returns the value of their sum. When we call the function we passed the elements of the array numbers by the spread oparator (...) it expanded the elements of that array in the argument of that function

10. arrow function

if older version of JavaScript we used to declare a function like this

// annonmous function
setTimeout(function (a, b) {
return a + b;
}, 3000)
//named function
function doSum(a, b) {
return a + b;
}

but in ES6 we are introduced to arrow function like this

// annonmous function
setTimeout((a, b) => {
return a + b;
}, 3000)
//named function
const doSum = (a, b) => {
return a + b;
}

these were 10 fundamental topic of JavaScript. hope you learn something new. thank you for reading.