DEV Community: Joshua Ng'ang'a Raphael

A case of no value vs no object: Comparing 'null', 'undefined' and 'undeclared'.

Joshua Ng'ang'a Raphael — Fri, 15 Mar 2024 13:48:37 +0000

Weird JavaScript
Often times, programmers coming from other languages such as Java or Python which uses the 'none' keyword in place of 'null', are often left bewildered with just how to interact with 'null' in JavaScript, considering its confusing similarity but complete use case contrast with the 'undefined' keyword.
While in most languages, 'null' is often used to refer to the absence of an assigned value, JavaScript instead uses the keyword 'undefined' to do so with 'null' referring to the intentional absence of any object instance.
In this article, we discuss the two keywords as well as elaborate on the differences between them.

Null
Used to signify that a variable ** or **object doesn't currently point to any valid object instance, Brendan Eich in the development of object oriented JavaScript saw it valid to provide developers with a clear way to indicate the absence of a relevant object instance.

This allows 'null' to be applied in the following use cases;

Explicit initialization as well as object reference resetting - allowing for the initializing of variables to 'null', indicating no current object reference which may be assigned later as well as erasing the memory associated with it when no longer needed allowing for garbage-collection.

let user = null; // Initialize user to null
// Later in the code...
user = { name: "John", age: 30 }; // Assign an object reference
user = null; //Release the memory associated with user

As a return value in functions- depending on the scenario, 'null' can be used in functions to indicate;

Error signaling: indicating an error or inability to produce a valid result.

function fetchData(url) {
    if (!isValidUrl(url)) {
        return null; // Return null to indicate invalid URL
    }
    // Otherwise, fetch data from the URL...
}

const data = fetchData("https://example.com/api");
if (data === null) {
    console.log("Error fetching data.");
}

Default Value: functions may return 'null' as a default value when given no valid result or object available.

function findElement(arr, target) {
    for (let element of arr) {
        if (element === target) {
            return element; // Return element if found
        }
    }
    return null; // Return null if element is not found
}

const result = findElement([1, 2, 3, 4], 5);
if (result === null) {
    console.log("Element not found.");
}

From the previous examples, 'null' can be seen to be of type object with its introduction to JavaScript providing a means to indicate that one is referring to a object instance that does not exist.

Checking for null
To check if an object or variable is pointing to an object instance that does not exist, we use strict equality to compare the variable to 'null' as shown;

if (variable === null) {
    // Variable is null
}

Undefined
Being one of the object oriented programming languages allowing for the declaring of variables without immediately assigning them values, there was a need to represent the absence of a defined value or property in JavaScript.
As the keyword 'null' already served the purpose of indicating the absence of an object instance, there arose the need of a different keyword which would instead represent the presence of a variable that has not been assigned a value where one should be defined, in other words, the variable is 'undefined'

Checking for undefined
We check for 'undefined' as follows;
Checking if a variable is of type 'undefined' by using strict equality as shown;

if (variable === undefined) {
 // resolved if variable is undefined
}

Using 'typeof' operator:

if (typeof variable === 'undefined') {
 // resolved if variable is undefined
}

Undeclared
A variable is said to be undeclared when an attempt at trying to access it is made yet the variable has not been created.
We can check if a variable exists by;

Checking its type;

if (typeof foo !== 'undefined') {
    // foo could get resolved and it's defined
}

Logging the suspect variable in the console;

As observed, trying to access a variable that has not been initialized leads to the returning of a reference error.

Mistaken Identity
As both undefined and null are falsy values meaning they are both treated as 'false' in boolean context, there arises a need to distinguish the two as trying to access a variable that is not assigned a value and one that doesn't point to any valid object instance will return the same error; undefined.
Inorder to confirm the specific scenario at hand, the use of strict equality === is used and not == as the loose equality double equal operator carries out 'type coercion' which converts the type of the variables being compared into the same type.

Comparing 'undefined' and 'null' using '==';

Comparing the two using '===';

We discuss 'null' and 'undefined' and outline their key differences and similarities and why there was a need to have both. We also provide use cases for both values as well as techniques on distinguishing one from another.
Mechanisms for checking and dealing with 'null' and 'undefined' should be provided to avoid accessing invalid objects or variables working with invalid objects or variables.

Prototypal inheritance; what really happens under the hood.

Joshua Ng'ang'a Raphael — Thu, 29 Feb 2024 11:43:06 +0000

Everything behaves as an object
In JavaScript, arrays and functions and various datatypes are considered to be objects or rather behave like one.
An object is defined as a composite data type representing a collection of related data and functionality .

They mainly consist of;

Properties: key-value pairs which define the object's characteristics
Methods: functions that are associated with the object and operate on its properties.

Functions have built in methods such as 'apply' that calls the function with a given 'this' value and also has properties such as 'length' which would indicate the number of parameters expected by a given function.
One can view in-built methods and properties of a function through the console by logging the following;

// Log built-in methods of a function
console.log(Object.getOwnPropertyNames(Function.prototype));

// Log built-in properties of a function
console.log(Object.getOwnPropertyNames(Function));

Similarly arrays consist of in built methods such as 'push()' that adds elements to the end of an array.
They also have a 'length' property that indicates the number of elements in an array.
One can view an array's in built methods and properties by logging the following

// Log built-in methods of arrays
console.log(Object.getOwnPropertyNames(Array.prototype));

// Log built-in properties of arrays
console.log(Object.getOwnPropertyNames(Array));

From our earlier definition, it is safe to consider functions and arrays to be objects considering they have in-built key-value pairs (properties) and methods.
For any function or array that is initialized, it inherits this in-built methods from the 'Function.prototype' and the 'Array.prototype'.
What is a prototype?

Prototypal inheritance
A 'Prototype' is an internal property of objects that serves as a blueprint for creating new objects.
Prototypal inheritance allows for the transfer of an objects in built methods and properties to any instantiated object.
When a property or method is accessed on an object, JavaScript will first check if the object has that property or method.
If not it proceeds to move up and looks into the prototype of the object. If the object's prototype does not contain the accessed method or property, JavaScript proceeds to move up once more and check the prototype of our objects' prototype.
This will go on until either the accessed property is found or the ultimate prototype ('Object.prototype') which contains all properties and methods inherited by all objects in JavaScript is reached.
An attempt to access a property above the 'Object.prototype' will return the 'null' object which indicates the property or method an object is trying to access does not exist.
The linking between an object to its prototype from which it inherits its properties and methods to another prototype of another object up until the ultimate prototype 'Object.prototype' is referred to as a 'prototypal chain' and is the mechanism enabling 'prototypal inheritance' which can be defined as the inheritance or the referencing of properties and methods from other objects.

Object creation methods and accessing their prototypes

Objects are created using;

Object literals
Constructor functions
'Object.create()' Each method takes up different syntax and provides varying benefits which we will outline.

Using 'Object literals' (declaring objects)

For creation of simple, single instances of an object with a fixed set of properties and methods, object literals will be our preferred object creation method.

// Creating an object using object literal

var personLiteral = {
  firstName: "Mansa",
  lastName: "Musa",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

console.log(personLiteral.fullName()); // Output: Mansa Musa

Getting and setting of an objects prototype used to be carried out using the keyword 'proto' whih has however been deprecated.

In place of 'proto', two new methods provide an explicit way to get and set the prototype of an object;

'Object.setPrototypeOf(obj, prototype)' - sets the prototype of the specified object, in this case 'obj' to the specified prototype 'prototype'.
'Object.getPrototypeOf(obj)' - gets the prototype of our specified object 'obj.

Constructor functions
Constructor functions are used in the creation of objects with multiple instances, prototypal inheritance, and dynamic initialization which allows constructor functions to accept parameters during instantiation.

// Creating objects using constructor function
function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;

  this.fullName = function() {
    return this.firstName + " " + this.lastName;
  };
}

// Creating instances of Person
var person1 = new Person("Lucky", "Says");
var person2 = new Person("Bob", "Johnson");

console.log(person1.fullName()); // Output: Lucky  Says
console.log(person2.fullName()); // Output: Bob Johnson

Invoking 'new' instantiates a object from our constructor which inherits the properties of the prototype through a special keyword prototype which copies reference of the prototype object to the new object's internal [[Prototype]] property of the new instance. This effectively shares properties found on the 'prototype object'.
Mutability of prototypes
Objects instantiated using Constructor functions can have their behavior dynamically extended by modifying our object prototypes.

 // Define a constructor function
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// Add a method to the prototype
Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

// Create instances of Person
var person1 = new Person('Alice', 30);
var person2 = new Person('Bob', 25);

// Call the method added to the prototype
person1.greet(); // Output: Hello, my name is Alice and I am 30 years old.
person2.greet(); // Output: Hello, my name is Bob and I am 25 years old.

// Modifying the prototype to add a new property
Person.prototype.gender = 'Female';

// Accessing the new property from instances
console.log(person1.gender); // Output: Female
console.log(person2.gender); // Output: Female

In this example, We add a method 'greet' to our Person prototype and proceed to create two new instances of Person and call the 'greet' method on them
We then add a new property 'gender' to the Person prototype, essentially adding them to all instances of the object before calling them on our two instances 'person1' and 'person2'.
allowing you to even change properties.

Syntactical sugar
Objects in JavaScript can also be created with classes
**Unlike **other languages working with classes, we can add properties to the prototype and hence to every
instantiated object of this constructor;

class Rectangle {
  constructor(height, width) {
    this.name = "Rectangle";
    this.height = height;
    this.width = width;
  }
}

class FilledRectangle extends Rectangle {
  constructor(height, width, color) {
    super(height, width);
    this.name = "Filled rectangle";
    this.color = color;
  }
}

const filledRectangle = new FilledRectangle(5, 10, "blue");
// filledRectangle ---> FilledRectangle.prototype ---> Rectangle.prototype ---> Object.prototype ---> null

Classes are referred to as 'syntactical sugar' as they merely provide a more declarative and readable syntax for defining object prototypes.
They also provide more understandable syntax for working with inheritance, with built-in keywords like 'extends' for subclassing and 'super' for calling superclass constructors and methods.

Despite the syntactical difference, classes are eventually compiled as constructor functions at runtime.

'Object.create()'
'Object.create()' is a method in JavaScript allowing us to create new objects having specified their prototype.

// Creating a prototype object
var personPrototype = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

// Creating objects using Object.create()
var person1 = Object.create(personPrototype);
person1.firstName = "Emily";
person1.lastName = "Brown";

var person2 = Object.create(personPrototype);
person2.firstName = "David";
person2.lastName = "Lee";

console.log(person1.fullName()); // Output: Emily Brown
console.log(person2.fullName()); // Output: David Lee

This explicit and direct assigning of prototypes to objects enables us to create objects without the use of constructor functions, thus eliminating any constructor overhead leading to cleaner and more concise code that does not require instantiation-time initialization logic.

Performance concerns
Prototypical inheritance provides great
dynamicity to code and reduces the need for repetitive codebases. It should however be undertaken with care so as to avoid accumulating overhead.
Every attempt to access properties high up on the prototype chain incurs a negative impact on code performance.
To avoid unnecessary performance drops, one may consider checking if the desired property exists on itself using 'hasOwnProperty' or 'Object.hasOwn' before proceeding to traverse the prototype chain.
It is also advisable to check if the desired property exists as trying to access nonexistent properties leads to full traversal of the full prototype chain.

Event-driven architecture: navigating the single threaded nature of Node.js

Joshua Ng'ang'a Raphael — Fri, 23 Feb 2024 21:35:14 +0000

JavaScript's 'comeback story'
Despite its popularity nowadays, JavaScript had been once relegated to a simple scripting language primarily for client-side web development.
Over the years, JavaScript has however experienced a resurgence, becoming a versatile and powerful language suitable for use across both the front and back-end in software development.
One major factor to this resurgence is the development of Node.js which allowed for the execution of JavaScript on the server-side, thus giving rise to the full-stack JavaScript developer.

Lightweight and Efficient

Node.js is a lightweight runtime environment which is built on the JavaScript V8 engine which allows for the rendering of JavaScript server-side. It is a lightweight, efficient, high performing environment which has allowed for the development of scalable and high-performance software such as

real-time applications
web servers
web applications
Command Line tools

Node.js was written to provide JavaScript functionality on the back and since JavaScript is a single-threaded language, Node.js was developed using a single-threaded model.
This simply means that Node.js has a single event loop that executes only one task at a time, be it processing incoming requests, handling callbacks, and executing JavaScript code.
Node.js however implements a Non-blocking I/O (input/output) model to bypass whatever bottlenecks that may arise in single-threaded execution.
This allows for input/output operations to be executed asynchronously allowing for the handling of a large number of concurrent connections which allows for the development of scalable applications.
The implementation of an event-driven non-blocking I/O model helps to eliminate a few performance issues one may experience using single-threaded systems. However one may still encounter some limitations which we discuss as well as some workarounds to them.

Blocking Operations: Any synchronous or blocking operations can be encountered thus blocking an application's responsiveness and impacting performance
In Node.js, synchronous methods may be found in either native modules; which are modules written outside as well as in the Node.js standard library. For example in the File System module, an attempt to read from the file system may be written as follows

const fs = require('node:fs');
const data = fs.readFileSync('/file.md'); // blocks here until file is read. Synchronous methods end with the word Sync 
console.log(data);
moreWork(); // will run after console.log

Use of such synchronous methods may exhibit poor performance.
Node.js however provides alternative asynchronous methods to each synchronous blocking method.
Our previous example can thus be rewritten to provide asynchronous, non-blocking execution as follows;

const fs = require('node:fs');
fs.readFile('/file.md', (err, data) => {
  if (err) throw err;
});

Sometimes it is however not possible to use the non-blocking alternative of a synchronous method.
One vital tool Node.js provides for this scenario is Libuv which is an open-source library that is the core behind Node.js's event-driven, non-blocking model.

Concurrency Limitations - Node.js is built on a single loop, non-blocking event-driven system that allows it to manage I/O-intensive operations.

It is however a single-threaded system that uses one event loop. This causes serious issues when executing CPU-intensive tasks as applications are blocked from further execution. Node.js however provides an ingenious solution in 'worker threads'.
Worker threads, introduced in v10.5 of Node.js provide for the offloading of CPU-intensive tasks out from the event loop allowing for the execution of threads in parallel in a non-blocking manner. They essentially provided a separate runtime for CPU-intensive tasks by offloading them from the main event loop and thus maintain application responsiveness. They are however used at a cost.

Threading issues
Whilst a step forward towards achieving true parallelism using Node.js, the use of threads is not without a few challenges;

Increased complexity; one must now manage the synchronization between the primary and worker threads.
Restricted APIs; worker threads are only granted access to a restricted set of APIs not including DOM and UI APIs.
Significant resource allocation; each thread is assigned its own instance of the V8 JavaScript engine.

Although solving the issue of limited concurrency, one must use worker threads conservatively and only when necessary.

Error handling
The asynchronous nature of Node.js model which makes use of callback-based APIs may lead to 'callback hell' as one may have to read through large amounts of code to identify the specific callback that is experiencing an error.
Uncaught exceptions might also terminate the Node.js process abruptly and can crash the application if not handled properly.
Stack traces which provide information on the sequence of function calls may not accurately provide a solution to finding the source of error as they are asynchronous in nature
Error handling and debugging in Node.js should be done using provided debugging tools and libraries.
Consistent error handling mechanisms such as use of the 'throw' as well as the 'try...catch'
also provide for easier debugging.

Still the preferred solution

This article outlines a few factors one should consider when choosing to work with Node.js. Despite some limitations, workarounds have been provided by the brilliant contributors and developers that make Node.js a reality.
For scalable, efficient, high performing web-apps and real-time applications, Node.js is still a strong contender for the preferred environment to work with.

'this' and its ever changing context.

Joshua Ng'ang'a Raphael — Wed, 21 Feb 2024 20:22:04 +0000

The this keyword is a special keyword associated mainly with the languages C++, Java and JavaScript. It however varies in application between the three languages, with 'this' being used quite similarly in Java and C++ to refer to the current object within instance methods.

'this' in C++
When used in c++, the keyword 'this' is used as a pointer that points to the object whose member function is being executed. It holds the memory address of the current object and accesses members of the current object within member functions

#include <iostream>

class NewClass {
public:
 int num;

void printVal() {
std::cout << "Value of val is: " <<this->val << std::end1;
}
};
 int main() {
NewClass obj;
obj.val = 36;
obj.printVal(); // Value of num is: 36
return 0;

'this' in Java
Just as in C++, 'this' is used in Java to refer to the current object instance to access members of the current object within the object instance methods

public class NewClass{
int x;
public void printX() {
  System.out.printIn("Value of x:  " + this.x);
}
public static void main(String[] args) {
   NewClass obj = new NewClass();
    obj.x = 46;
    obj.printX(); // Expected Output: Value of x: 46
 }
}

As seen in the examples, the this keyword accesses the object members val(36) in C++ and x(46) in Java within member functions of the objects.
The 'this' keyword in JavaScript however, is applied dynamically depending on the scope and context in which the function containing the 'this' keyword is invoked.

'this' in JavaScript
As earlier discussed, the this keyword will refer to different objects depending on its current scope and context. As a result 'this' can be applied in various contexts to bring about different meaning as discussed below

'this' in Global context- when not used within a regular function, object or constructor function, 'this' is placed in global scope. Simply put, in JavaScript we consider functions to be treated as objects; hence the keyword 'this' will be called in the global scope provided it is outside of any object and it will instead refer to the global object. The global object in browsers is referred to as the window and can be output by logging 'this' in the console.

'this' in method invocation - a function that is defined as a property of an object is called a method and when it is called, it is invoked as a method of an object. In this case, 'this' refers to the object in which the method is a property.

let obj = {
name: 'Unai',
greet: function() {
console.log('Good evening, ' + this.name);
}
};
obj.greet(); // Output: Good evening, Unai

'this' in constructor invocation - we use constructor functions to create multiple instances of objects. If the constructor function used to create an instance of an object is invoked with the 'new' keyword and the arguments to be used as the properties of the new object are passed , 'this' is now used to refer to the newly created object.

// Constructor function
function Vehicle(name) {
this.name = name;
}
let vehicle1 = new Vehicle('Audi');
console.log(vehicle1.name);  // Output: Audi

Constructor invocation and callback functions
Special cases may be encountered when using callback functions within constructor functions.

As shown in this example, the expected output which is the new instantiated object is not logged. Rather, the window objected is returned indicating that the 'this' keyword is referring to the global object instead of the 'me' object.
This confusion is brought about by the callback function which is executed in an entirely different context to the constructor function as it is not defined as a method of the constructor despite being written within it.
The callback function can be however made to execute in the same context as the constructor by binding the 'this' object to the function.

This is an example of explicit binding and its benefits which we take a deeper look into as the next context in which 'this' is used.

'this' in explicit binding - explicit binding is the clear and direct process of specifying the value of 'this' within a function using functions such as 'call' or 'bind'

function useName() {
console.log('My name is ' + this.name);
} //this is used within a function
let person2 = { name: 'Josh' };
useName.call(person2); // Output: My name is Josh

Here explicit binding using 'call()' allows us to specify the value of the keyword 'this' as the object 'person2'.

Despite the confusing variability of the 'this' keyword in JavaScript, a good tip to keep at the back of your mind is that the 'this' keyword will always refer to the object that is currently executing or invoking the function where 'this' is used.
In this article we have tried to elaborate on the various use cases of the 'this' keyword. By reaching the end of this article, you should hopefully be able to interpret the context of 'this' the next time you encounter it.

Design patterns: Event delegation for cleaner, more concise code.

Joshua Ng'ang'a Raphael — Wed, 14 Feb 2024 11:27:59 +0000

Event delegation is a design pattern where an event listener is applied to a parent element container instead of applying one to each individual child element. Events that occur within the children elements are then handled by the parent element.

Day to day event delegation

In a given office,the manager may be placed in charge of several groups of workers. The number of workers may be too many for the manager to individually handle and supervise. Rather than individually micromanaging each worker, the office manager may assign team leaders to each group of workers.
With the appointment of team leaders, the manager who now represents our parent element can then assign tasks to each team through the team leaders who represent event listeners attached to our parent element (manager) and receive feedback from the multiple workers who represent our children elements via the assigned team leaders.
Similarly, in event delegation we attach an event listener to our parent container rather than to each individual child element. An event that occurs to any of the children elements is bubbled up to the parent element and the parent's event listener handles it.

Use cases for event delegation

In this article we showcase an example of event delegation implemented using JavaScript.
We attach an event listener to the 'Ul' parent element using its id selector 'Parent on which upon the occurrence of a click event, our function checks if the element clicked on is a 'li' element. If the element is confirmed as a list item, it has its CSS class 'highlight' toggled to an either active or inactive state.

Why use event delegation?

The ability to manipulate the behavior of multiple elements using only one event listener (dynamic contextual handling) is just but one of the benefits offered by event delegation. Event delegation is also advantageous by providing;

Cleaner, more concise code - providing an easily maintainable codebase.
Reduced memory consumption - arising as a result of fewer attached event listeners.
Flexibility and scalability - as events in large scale applications are more easily handled.

In this article we discuss event delegation and showcase one of its use cases in handling (dynamic contextual handling) using a single event listener attached to a parent element.

Event delegation is definitely one of the more simpler design patterns programmers should look to implement in an attempt to improve the quality of their code.