Some Intermediate Concepts of Javascript

Undefined:

Undefined value primitive value is used when a variable has not been assigned a value.

The standard clearly defines that you will receive undefined when accessing uninitialized variables, non-existing object properties, non-existing array elements, and alike.

Undefined type is a type whose sole value is the undefined value.

A declared variable but not yet assigned with a value (uninitialized) is by default undefined.

Favor const, otherwise use let, but say goodbye to var

const and let are block scoped (contrary to older function scoped var) and exist in a temporal dead zone until the declaration line.

When accessing a non-existing object property, JavaScript returns undefined.

JavaScript offers a bunch of ways to determine if the object has a specific property:

  • obj.prop !== undefined: compare against undefined directly
  • typeof obj.prop !== 'undefined': verify the property value type
  • obj.hasOwnProperty('prop'): verify whether the object has an own property
  • 'prop' in obj: verify whether the object has an own or inherited property

Private variable:

In object-oriented programming languages, there is a way to limit the visibility of a variable from outside its scope. In other words, some programming languages allow variables to only be accessible by the object that “owns” it.

Encapsulations:

The easiest way to achieve pseudo-encapsulation would be to prefix your private member with a special symbol that indicates the private scope to the client. It is a common convention to use the _ symbol as a prefix.

Closures

In JavaScript, when a function finishes executing, any variables declared within its body is “garbage collected”. In other words, it is deleted from memory. This is why local variables are possible in JavaScript. This is why variables inside functions cannot be accessed outside.

Factory Functions

A factory function is any function that returns an object. Yup, that’s pretty much it. This is not to be confused with classes and constructor functions. Classes and constructor functions require the new keyword to instantiate objects while factory functions return the instantiated object itself.

Bind(),Call(),Apply():

In object-oriented programming languages, the this keyword always refers to the current instance of the class. Whereas in JavaScript, the value of this depends on how a function is called.

We use call, bind and apply methods to set the this keyword independent of how the function is called. This is especially useful for the callbacks

Bind( )

The bind method creates a new function and sets the this keyword to the specified object.

Syntax:

For example:

Let’s suppose we have two person objects.

Let’s add a greeting function:

We can use the bind method on the greeting function to bind the this keyword to john and jane objects. For example:

Here greeting.bind(john) creates a new function with this set to john object, which we then assign to greetingJohn variable. Similarly for greetingJane.

We can also use bind in case of callbacks and event handlers. For example:

In the above example, the this keyword inside the incrementCounter method will now correctly refer to the counter object instead of the event object.

Bind() accept arguments:

We can also pass extra arguments to the bind method. The general syntax for this is function.bind(this, arg1, arg2, ...). For example:

In the above example, the bind method creates a new function with certain parameters predefined (lang in this case) and this keyword set to the john and jane objects.

Call ( )

The call method sets the this inside the function and immediately executes that function.

The difference between call() and bind() is that the call() sets the this keyword and executes the function immediately and it does not create a new copy of the function, while the bind() creates a copy of that function and sets the this keyword.

Syntax:

For example:

Above example is similar to the bind() example except that call() does not create a new function. We are directly setting the this keyword using call().

Call () accept arguments:

Call() also accepts a comma-separated list of arguments. The general syntax for this is function.call(this, arg1, arg2, ...)

For example:

Apply ( )

The apply() method is similar to call(). The difference is that the apply() method accepts an array of arguments instead of comma separated values.

Syntax:

For example:

Callback function

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

Here is a quick example:

Event bubbling and delegation:

Events:

In JavaScript, when users interact with the page, their actions are captured in form of events

  • When users interact with a web page, their actions are registered in form of events
  • A listener receives an object parameter, which contains data about the triggered event

Event bubbling:

Event bubbling is the propagation of an event from its origin towards the root element.

if an event occurs on a given element, it will be triggered on its parent as well and on its parent’s parent and all the way up, until the html element. If any of these elements has one or more registered listeners, they will be called. Therefore, the bubbling effect is only noticeable when at least one ancestor of the event’s origin has a listener for the same type of event. Otherwise, the propagation will happen silently, since there’s no listener to be called.

  • Event bubbling is the propagation of an event from the element where it happened towards the root element

Event delegation:

Event delegation leverages the bubbling effect to extract the handling logic of an event to a common ancestor of the elements where this event is triggered.

  • Event delegation makes it possible to handle events triggered by many elements in a single place.

Programmer | Developer | Dreamer

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