Advanced JavaScript Tutorial

Advanced JavaScript Tutorial

Last updated on 12th Oct 2020, Blog, Tutorials

About author

Vikram ((Sr Technical Project Manager ) )

He is a Proficient Technical Expert for Respective Industry Domain & Serving 9+ Years. Also, Dedicated to Imparts the Informative Knowledge's to Freshers. He Share's this Blogs for us.

(5.0) | 14547 Ratings 1851

What is Javascript?

JavaScript is a simple and easy-to-learn programming language as compared to other languages such as C++, Ruby, and Python. It is a high-level, interpreted language that can easily be embedded with languages like HTML. It was developed by Netscape Communications Corporation, Mozilla Foundation, and ECMA International. Brendan Eich is known as the creator or designer of the JavaScript programming language.

Initially, JavaScript was known as LiveScript, but later Netscape changed its name to

JavaScript. Some amazing features of JavaScript are as follows:

  • Lightweight, interpreted language.
  • Easily embedded with languages like HTML, CSS, and Java.
  • Also works as a client-side scripting language, which helps in creating dynamic web pages.

JavaScript is an open source and cross-platform language and therefore mostly used for creating network-centric applications. Nowadays it has become an inseparable part of the core technologies of the internet. JavaScript is used in web technologies to make web pages interactive. Along with HTML and CSS, JavaScript is widely used in web servers and databases. Hence its wide popularity among these kinds of websites.

Advanced working with functions

Recursion and stack

Let’s return to functions and study them more in-depth. If you are not new to programming, then it is probably familiar and you could skip this chapter.

Recursion is a programming pattern that is useful in situations when a task can be naturally split into several tasks of the same kind, but simpler. Or when a task can be simplified into an easy action plus a simpler variant of the same task. Or, as we’ll see soon, to deal with certain data structures.

When a function solves a task, in the process it can call many other functions. A partial case of this is when a function calls itself. That’s called recursion.

Subscribe For Free Demo
[contact-form-7 404 "Not Found"]

Recursive structures

A recursive (recursively-defined) data structure is a structure that replicates itself in parts.

We’ve just seen it in the example of a company structure above.

A company department is:

  • Either an array of people.
  • Or an object with departments.

For web-developers there are much better-known examples: HTML and XML documents.

In the HTML document, an HTML-tag may contain a list of:

  • Text pieces.
  • HTML-comments.
  • Other HTML-tags (that in turn may contain text pieces/comments or other tags etc).

That’s once again a recursive definition.

For better understanding, we’ll cover one more recursive structure named “Linked list” that might be a better alternative for arrays in some cases.

Variable scope

JavaScript is a very function-oriented language. It gives us a lot of freedom. A function can be created dynamically, passed as an argument to another function and called from a totally different place of code later.

We already know that a function can access variables outside of it. Now let’s expand our knowledge to include more complex scenarios.

The global object provides variables and functions that are available anywhere. By default, those that are built into the language or the environment.

In a browser it is named window, for Node.js it is global, for other environments it may have another name.

Recently, globalThis was added to the language, as a standardized name for a global object, that should be supported across all environments. In some browsers, namely non-Chromium Edge, globalThis is not yet supported, but can be easily polyfilled.

We’ll use window here, assuming that our environment is a browser. If your script may run in other environments, it’s better to use globalThis instead. All properties of the global.

Function binding

When passing object methods as callbacks, for instance to setTimeout, there’s a known problem: “losing this”.

Arrow functions are not just a “shorthand” for writing small stuff. They have some very specific and useful features.

JavaScript is full of situations where we need to write a small function that’s executed somewhere else.

For instance:

  • arr.forEach(func) – func is executed by forEach for every array item.
  • setTimeout(func) – func is executed by the built-in scheduler.
  • …there are more.

It’s in the very spirit of JavaScript to create a function and pass it somewhere.

And in such functions we usually don’t want to leave the current context. That’s where arrow functions come in handy.

Decorators and forwarding, call/apply

JavaScript gives exceptional flexibility when dealing with functions. They can be passed around, used as objects, and now we’ll see how to forward calls between them and decorate them.

Transparent caching

Let’s say we have a function slow(x) which is CPU-heavy, but its results are stable. In other words, for the same x it always returns the same result.

If the function is called often, we may want to cache (remember) the results to avoid spending extra-time on recalculations.

But instead of adding that functionality into slow() we’ll create a wrapper function, that adds caching. As we’ll see, there are many benefits of doing so.

Decorators and function properties

It is generally safe to replace a function or a method with a decorated one, except for one little thing. If the original function had properties on it, like func.calledCount or whatever, then the decorated one will not provide them. Because that is a wrapper. So one needs to be careful if one uses them.

E.g. in the example above if slow function had any properties on it, then cachingDecorator(slow) is a wrapper without them.

Some decorators may provide their own properties. E.g. a decorator may count how many times a function was invoked and how much time it took, and expose this information via wrapper properties.

There exists a way to create decorators that keep access to function properties, but this requires using a special Proxy object to wrap a function. We’ll discuss it later in the article Proxy and Reflect.

Function object, NFE

As we already know, a function in JavaScript is a value. A good way to imagine functions is as callable “action objects”. We can not only call them, but also treat them as objects: add/remove properties, pass by reference etc.

Scheduling: setTimeout and setInterval

We may decide to execute a function not right now, but at a certain time later. That’s called “scheduling a call”.

There are two methods for it:

  • setTimeout allows us to run a function once after the interval of time.
  • setInterval allows us to run a function repeatedly, starting after the interval of time, then repeating continuously at that interval.

These methods are not a part of JavaScript specification. But most environments have the internal scheduler and provide these methods. In particular, they are supported in all browsers and Node.js.

Generators, advanced iteration

Generators

Regular functions return only one, single value (or nothing).

Generators can return (“yield”) multiple values, one after another, on-demand. They work great with iterables, allowing to create data streams with ease.

Async iterators and generators

Asynchronous iterators allow us to iterate over data that comes asynchronously, on-demand. Like, for instance, when we download something chunk-by-chunk over a network. And asynchronous generators make it even more convenient.

Let’s see a simple example first, to grasp the syntax, and then review a real-life use case.

Data types

Methods of primitives

JavaScript allows us to work with primitives (strings, numbers, etc.) as if they were objects. They also provide methods to call as such. We will study those soon, but first we’ll see how it works because, of course, primitives are not objects (and here we will make it even clearer).

Let’s look at the key distinctions between primitives and objects.

A primitive

  • Is a value of a primitive type.
  • There are 7 primitive types: string, number, bigint, boolean, symbol, null and undefined.

An object

  • Is capable of storing multiple values as properties.
  • Can be created with {}, for instance: {name: “John”, age: 30}. There are other kinds of objects in JavaScript: functions, for example, are objects.

Numbers

In modern JavaScript, there are two types of numbers:

  • Regular numbers in JavaScript are stored in 64-bit format IEEE-754, also known as “double precision floating point numbers”. These are numbers that we’re using most of the time, and we’ll talk about them in this chapter.
  • BigInt numbers, to represent integers of arbitrary length. They are sometimes needed, because a regular number can’t exceed 253 or be less than -253. As bigints are used in few special areas, we devote them a special chapter BigInt.

So here we’ll talk about regular numbers. Let’s expand our knowledge of them.

Strings

In JavaScript, the textual data is stored as strings. There is no separate type for a single character.

The internal format for strings is always UTF-16, it is not tied to the page encoding.

Arrays

Objects allow you to store keyed collections of values. That’s fine.

But quite often we find that we need an ordered collection, where we have a 1st, a 2nd, a 3rd element and so on. For example, we need that to store a list of something: users, goods, HTML elements etc.

It is not convenient to use an object here, because it provides no methods to manage the order of elements. We can’t insert a new property “between” the existing ones. Objects are just not meant for such use.

There exists a special data structure named Array, to store ordered collections.

Iterables

Iterable objects is a generalization of arrays. That’s a concept that allows us to make any object useable in a for..of loop.

Of course, Arrays are iterable. But there are many other built-in objects, that are iterable as well. For instance, strings are also iterable.

If an object isn’t technically an array, but represents a collection (list, set) of something, then for..of is a great syntax to loop over it, so let’s see how to make it work.

Course Curriculum

Take Your Career to Next Level with JavaScript Training By Domain Experts

  • Instructor-led Sessions
  • Real-life Case Studies
  • Assignments
Explore Curriculum

Map and Set

Now we’ve learned about the following complex data structures:

  • Objects for storing keyed collections.
  • Arrays for storing ordered collections.

But that’s not enough for real life. That’s why Map and Set also exist.

WeakMap and WeakSet

As we know from the chapter Garbage collection, JavaScript engine stores a value in memory while it is reachable (and can potentially be used).

Object.keys, values, entries

Let’s step away from the individual data structures and talk about the iterations over them.

In the previous chapter we saw methods map.keys(), map.values(), map.entries().

These methods are generic, there is a common agreement to use them for data structures. If we ever create a data structure of our own, we should implement them too.

They are supported for:

  • Map
  • Set
  • Array

Plain objects also support similar methods, but the syntax is a bit different.

Destructuring assignment

The two most used data structures in JavaScript are Object and Array.

Objects allow us to create a single entity that stores data items by key, and arrays allow us to gather data items into an ordered collection.

But when we pass those to a function, it may need not an object/array as a whole, but rather individual pieces.

Destructuring assignment is a special syntax that allows us to “unpack” arrays or objects into a bunch of variables, as sometimes that’s more convenient. Destructuring also works great with complex functions that have a lot of parameters, default values, and so on.

Date and time

Let’s meet a new built-in object: Date. It stores the date, time and provides methods for date/time management.

For instance, we can use it to store creation/modification times, to measure time, or just to print out the current date.

JSON methods, toJSON

Let’s say we have a complex object, and we’d like to convert it into a string, to send it over a network, or just to output it for logging purposes.

Naturally, such a string should include all important properties.

Frames

“Don’t use frames.” is an oft repeated advice in web developing. The disadvantages of using frames are many…

  • Pages inside a frameset are hard to bookmark.
  • Other sites won’t be able to link to a page in a framed site.
  • Search bots find it hard to go through a framed site
  • Users can’t type in the url of a deep page.
  • And more…

But one could use frames in web designing if the designer gives a no-frame alternative for the site. www.quirksmode.org is a good example of how to do this. That said, let us continue with our tutorial.

If you still want to use frames even after my warnings, these javascript codes will help interaction between frames. First let’s see what a frame is…

HTML frames allow authors to present documents in multiple views, which may be independent windows or subwindows. Multiple views offer designers a way to keep certain information visible, while other views are scrolled or replaced. For example, within the same window, one frame might display a static banner, a second a navigation menu, and a third the main document that can be scrolled though or replaced by navigating in the second frame.

Moving Stuff around

With javascript, you can move stuff(pictures, text, tables, etc.) around the page. Not very useful – but very cool. If you master this technique, you can even make games with javascript – but don’t try to make Max Payne III with it – I believe the title is copyrighted by its creators – they could sue.

Before starting, let me warn you that moving things have very little practical use in javascript. You could make games – but your games will be very limited if you chose javascript as your programming language. 

Some JavaScript Concepts

I named this tutorial ‘Advanced Javascript Tutorial’ – and till now nothing about it was that advanced. So I insert this chapter at the end to justify the title. Over the years javascript evolved and now some rules/conventions have to be followed when programming javascript for the web. These conventions will help your script to function in the best possible manner. The advantage of following rules are given below.

  • Maximum Cross-Browser Compatibility
  • More structure to the code
  • Increased Readability
  • Increased Reusability
  • World Peace

I had ignored some or most of the principles said here in my earlier scripts because I want to keep those examples as simple as possible. I am including these here so that when you program you will do it with the best possible methods. Please remember that these are not ironclad rules but rather helpful principles.

Object properties configuration

Property flags and descriptors

As we know, objects can store properties.

Until now, a property was a simple “key-value” pair to us. But an object property is actually a more flexible and powerful thing.

In this chapter we’ll study additional configuration options, and in the next we’ll see how to invisibly turn them into getter/setter functions.

Property getters and setters

There are two kinds of object properties.

The first kind is data properties. We already know how to work with them. All properties that we’ve been using until now were data properties.

The second type of property is something new. It’s accessor properties. They are essentially functions that execute on getting and setting a value, but look like regular properties to an external code.

Classes

Class inheritance

Class inheritance is a way for one class to extend another class.

So we can create new functionality on top of the existing.

Static properties and methods

We can also assign a method to the class function itself, not to its “prototype”. Such methods are called static.

Private and protected properties and methods

One of the most important principles of object oriented programming – delimiting internal interface from the external one.

That is “a must” practice in developing anything more complex than a “hello world” app.

To understand this, let’s break away from development and turn our eyes into the real world.

Usually, devices that we’re using are quite complex. But delimiting the internal interface from the external one allows to use them without problems.

Extending built-in classes

Built-in classes like Array, Map and others are extendable also.

Class checking: “instanceof”

The instanceof operator allows to check whether an object belongs to a certain class. It also takes inheritance into account.

Such a check may be necessary in many cases. Here we’ll use it for building a polymorphic function, the one that treats arguments differently depending on their type.

Mixins

In JavaScript we can only inherit from a single object. There can be only one [[Prototype]] for an object. And a class may extend only one other class.

But sometimes that feels limiting. For instance, we have a class StreetSweeper and a class Bicycle, and want to make their mix: a StreetSweepingBicycle.

Or we have a class User and a class EventEmitter that implements event generation, and we’d like to add the functionality of EventEmitter to User, so that our users can emit events.

There’s a concept that can help here, called “mixins”.

As defined in Wikipedia, a mixin is a class containing methods that can be used by other classes without a need to inherit from it.

In other words, a mixin provides methods that implement a certain behavior, but we do not use it alone, we use it to add the behavior to other classes.

JavaScript Sample Resumes! Download & Edit, Get Noticed by Top Employers! Download

Conclusion

Finally! The end is nigh. You have no idea how long I have waited to tell that. I completed the Basic JavaScript Tutorial in January 2005. I thought that I would finish the Advanced JavaScript Tutorial by February – it got extended. The next deadline was at April – again no luck. As Douglas Adams once said…

I love deadlines. I especially like the whooshing sound they make as they go flying by.

But finally in August I managed it – I have completed the tutorial.

Sorry about the rant – had to get it out of my system. About the tutorial – one final thing before leaving you. The term ‘Advanced’ as in ‘Advanced JavaScript Tutorial’ is relative. Some people may find this advanced – some will find it very basic. I find this tutorial a bit of both. But there is much more to learn in JavaScript.

  • The XMLHTTPRequest method – AJAX framework
  • getElementsByTagName() Method
  • Changing Stylesheets dynamically.
  • XML Parsing in JavaScript
  • Associative Arrays
  • Writing and implementing Browser Specific Code
  • And More…

Some day I may be able to write a tutorial for these stuff – but I don’t think it will be anytime soon. I will not suggest that you wait for me. I think it is better for you to search and study about them by yourself. There are a lot more tutorials out there. Find them and learn from them.

Now you have finished this tutorial. Now you have enough knowledge about JavaScript to be dangerous. Put your newfound knowledge to good use. Create stuff with it. Make a Calculator. Make a game. Make Max Payne III. Just do something. Don’t waste your knowledge – put it to some good use. Look at the codes of others. Learn from them. Steal from them. As I like to say, creativity is great, but plagiarism is faster. Use the knowledge you found thus and make your programs better. Remember ‘View Source’ is your friend.

Join some mailing lists. Join a good JavaScript Forum. I would recommend comp.lang.javascript. Ask questions – involve yourself. Never stop learning. JavaScript is becoming more popular than it was before – especially with the AJAX framework. Whatever investment you put into learning JavaScript is an investment well spent. Buy Books. Read them. And above all – program. That is the only way one will learn programming.

Are you looking training with Right Jobs?

Contact Us

Popular Courses