JavaScript

Content

1. Introduction to JavaScript

2. Objects in JavaScript

3. Classes in JavaScript

4. Prototypes in JavaScript

5. ‘this’ keyword and Its usage in JavaScript

6. Strict Notation

7. Function Closure

8. Callbacks & Promises

Introduction to JavaScript

What is JavaScript

JavaScript is a scripting or programming language that lets you add advanced functionality to your web pages. It is used on both client side and server side. JavaScript can update and change both HTML and CSS. Data can be calculated, manipulated, and validated using JavaScript. JavaScript is also known as a dynamic computer programming language.

why use JavaScript?

Through translating a static page into an interactive one, JavaScript increases the user interface of the web page. In other words, JavaScript is used by web browsers to provide dynamic experience for the user.

It is also considered as one of the faster programming languages.

why do we need to learn JavaScript?

To be a powerful web developer you need to learn JavaScript from the basics. Since JavaScript is one of the most widely used programming language in web development. And JavaScript is the only language which runs on browser.

Objects in JavaScript

JavaScript is built on a simple object-oriented framework.

JavaScript has number of predefined objects. Furthermore, you also can define objects.

Objects can also be created using object literals (‘{}’)

What is an object?

An object in JavaScript is a stand-alone entity with properties and a type. In other words, Objects are a collection of properties.

What is a property in JavaScript?

In JavaScript, object has properties associated with it. A Property is an association between a key and a value (key-value pair).

figure I

According to figure I :

figure II

Classes in JavaScript

Class is a template for creating objects. JavaScript doesn’t contain proper classes. Classes use the prototype-based inheritance by using constructors.

Furthermore, functions which consist of the keyword ‘new’ acts as classes.

Recently the keyword ‘class’ is introduced by JavaScript but it is not yet acquired but all JavaScript engines.

figure III

Prototypes in JavaScript

Assume we need to add new properties to a function later which is being shared over many instances; that’s where we need a prototype.

The prototype is an object that is associated with every functions and objects by default in JavaScript.

Furthermore, function’s prototype property is accessible and adjustable

But object’s prototype property (which is — attribute) is invisible.

figure IV

‘this’ keyword and its usage in JavaScript

this’ keyword refers to an object, that object which is executing the current of JavaScript code.

So, inside an object the ‘this’ keyword refers to the same object.

Figure III and IV are some examples on how ‘this’ keyword is used.

Strict Notation

strict’ is a literal expression.

Convenient way of writing secure JavaScript.

why use strict notation?

  • To ensure that the code executes in strict mode. Since Strict Notation does not allow to create variables without var keyword. In other words, variables have to be declared.
  • Also it stops referring to the window object as ‘this’ from outside object instances.
figure V

Function Closure

In JavaScript, Closure is a function which returns another function in JavaScript.

closure is used to encapsulate variables into a function and prevent access to it from the outside.

A closure is the combination of a function bundled together with references to its surrounding state (which is known as the lexical environment).

When the inner function is created, JavaScript builds an environment with all of the local variables from the outer function. Closure is the combination of this lexical environment and the inner function.

figure VI

Callback and Promises

what is a callback?

Function that is passed to another function as a parameter is a callback function. Below is an example:

figure VII

In JavaScript there are certain instances where the code does not run sequentially(top-to-bottom). This is known as asynchronous programming.

callbacks ensure that a function will not start until a particular task has been completed, but it will run immediately after the task has been completed.

what is a promise?

A promise is an object that is returned by a function that has not yet completed its task.

When the called function completes its task asynchronously, it notify the original caller that the task has been completed, a completion handler function on the promise object is called.

figure VIII

--

--