Random Javascript Fundamental Concepts

1. Var

var is globally scoped. When var is declared outside of a function it becomes a global variable. var can be re-declared / updated. Problem with var is that if we use a variable outside of a function and then try to define a new variable with the same name in a scope it will update outside global variables value rather than creating a new variable.

2. Let, Const (ES6)

let and const are block scoped variable. They doesn’t interfere with same names variable outside of their scope. let can be updated or re-declared but const stores constant values. They can’t be re-declared or updated.

In the example below we can see that, the name variable’s value outside of the if block stays “Hotaro Oreki” while inside of if block we are creating another name variable with different value.

3. Function with default parameter

Function’s default parameter is a value that we provide in function declaration that is automatically assigned as the argument if user doesn’t provide a value for the argument. Before ES6 it was a hassle to use default parameter. But in ES6 it is as easy as declaring a variable.

For example, if we want a function to create a full name string by taking first and last name. And we want to set a default last name in case user doesn’t provides the last name we can do it like this:

4. …Spread Operator

… spread operator allows an iterable value to be expanded. We can use it to expand, copy, concat etc.

For example, if we want to copy an array or object to a new variable we can do it simply like this:

If we want to concat arrays we can do it like this:

5. Event Loop

Javascript event loop is responsible for executing the code, collecting and processging the event. Javascrip is a single threaded language. That mean’s it can process one task at a time. But event loop gives us the illusion of multi-threading.
Whenever an asynchronous function is called, it is sent to the browser API and then it stays to the task queue. When call stack finishes all process and becomes empty then new functions from task queue moves to the call stack and the function becomes processed.

This way asynchronous function doesn’t block other codes.

For example,

6. Error Handling

A error is something that happens because of our mistakes, an unexpected user input, an erroneous server response and many other reasons. And when error happens our script stops working or doesn’t work properly. No matter how great we are at programming, errors are inevitable.

That’s why error handling is important. We have to think of those cases where error can be happen and prevent our script from stopping and do something more reasonable. Like show alert message or do something else.

7. Try …Catch

We use try…catch to handle errors. It constructs two blocks: try and catch.

  1. First, the code in try {…} block is executed.
  2. If there is no errors it simply ignores catch block.
  3. If an error occurs in try block it stops the execution of try block and starts to execute the catch (err) {…} block. We get an error object parameter in catch block and it contains what error happened in the try block’s code.

This way if an error happens in try block our script doesn’t stops working and we can handle the error in our own way in the catch block.

Example of errorless code in try…catch:

An example with an error in try…catch:

try…catch doesn’t works for the syntax error. It only works for runtime errors. Means, it should be valid Javascript code.

8. Throw

We can throw our own error using throw operator. Sometimes we may require a certain value but it is syntactically correct and Javascript doesn’t understand it should be wrong for us? In these case we use throw operator. We can use anything in place of error object but it’s better to use objects with name and message.

The syntax is: throw <error object>

Javascript has some built-in constructors for standard error object: Error, SyntaxError, ReferenceError, TypeError, etc. We can use them to create our custom error object.

Let’s see an example,

9. Caching

Caching means storing the commonly used data. There are many data that we use commonly in different websites. Normally we have to always get those data in client from the server. It’s not good to communicate with the server for the same data again and again.

But if we store those commonly used data we can reduce the communication and improve the efficiency. It helps us to reduce the time to load our webpage or process data.

10. Cross Browser Testing

Cross Browser Testing is the method to make sure that our web application works properly in all or at least in most of the browser. As a web developer it is very crucial to make sure that our web application works for all users no matter what browser, device they use.

Different device and browsers are slightly different than one another. Some feature doesn’t support in some browser. For example, some newly advanced features doesn’t work on old browsers.

We always should run and test our application in some different browsers that are mostly used among people. Like Chrome, Firefox, Safari, IE/Edge, Opera, etc. And try to give support in other way for those browsers that doesn’t work. For example, we can support CSS3 in old browser by using something called webkit.

There’s an awesome website called CanIuse to check a feature works on which browsers and doesn’t works on which browsers.

Follow Me: Facebook, Github, LinkedIn

Hello, I am a Full Stack web developer. I am a hardworking, enthusiastic learner and I am always looking for opportunities to learn new technologies.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store