DEV Community: Ehab Hussein

OOP (Object-Oriented Programming) in JavaScript

Ehab Hussein — Mon, 01 Apr 2024 14:06:03 +0000

Introduction to Object-Oriented Programming in JavaScript

Object-Oriented Programming (OOP) is a popular programming paradigm that helps organize and structure code by treating objects as the fundamental building blocks of a program. It provides a way to model real-world entities and their relationships, making code more modular, reusable, and easier to maintain. In this blog post, we will explore the basics of OOP in JavaScript, including prototype definition, prototypal inheritance, and the prototype chain.

In a normal object literal you would define keys and values:

const person = {
  id: "1",
  name: "John",
  age: 30,

  sayHello() {
    console.log(`Hello ${this.name}`);
  }
}

without OOP you will repeat the same code over and over each time you want to define another person.

in OOP we can define the person as a model just once and then instantiate real objects from this model.
Ex: (This is not a valid code. just for demonstration)

// Person model
const Person = {
  id
  name
  age

  sayHello() {
    console.log(`Hello ${this.name}`);
  }
}

const john = new Person('1', 'John', 30);
const doe = new Person('2', 'Doe', 45);

To create a model in javascript there are actually three different ways.

But we will take here the right one that allows you to understand it easily.

With constructor functions, you can create a model or a blueprint.
A constructor function is a special type of regular functions, it is used with the new keyword to create instances of a model. This is what makes a function to be a constructor function that constructs a model.

Great, let's define a constructor function to build our model from the previous example (Person):

const Person = function(id, name, age) {
  this.id = id;
  this.name = name;
  this.age = age;
}

Since it is a regular function like any other function, we can leverage the function's arguments to assign values to the properties of each Person instance.
Here we have assigned each argument to its corresponding property.

This is great, but how can we create instances of this model?

Here the new keyword comes into play:

To create an object, we have to call the function with the 'new' keyword:
const john = new Person('1', 'John', 30)

Actually, when we call a function with the 'new' keyword there are 4 things happened:

A new object is created.
The function is called and 'this' will point to the newly created object.
The prototype object of the constructor function will be linked to the object. (later)
The function automatically returns the object.

console.log(john); // Person { id: '1', name: 'John', age: 30 }
Now, john's object is created and we can access its property like any other object:
console.log(john.name); // John

Now, let's talk about the third feature that 'new' keyword gave to us.

Every JavaScript object has a prototype, which serves as a blueprint for that object.
For our example, the prototype of john is Person.

What does it useful for?
Well, we can take advantage of this behavior by defining our methods in the prototype of john which is Person.prototype
and use it whenever an object needs to use it.
So the function in the prototype defined once. this approach is increasing the performance of our web app.

const Person = function(id, name, age) {
    this.id = id;
    this.name = name;
    this.age = age;
};

Person.prototype.sayHello = function() {
  return `Hello ${this.name}`;
};

const john = new Person('1', 'John', 30);
console.log(john.sayHello()) // Hello John;
console.log(john.__proto__); // prints the prototype of John: Person { sayHello: [Function] }

Now we can access this method by any object of type Person. this approach is called prototypal inheritance, in which the objects is inheriting the methods from its prototype.

But never define a function inside the constructor function:

const Person = function(id, name, age) {
    this.id = id;
    this.name = name;
    this.age = age;
    this.sayHello = function() {
    return `Hello ${this.name}`;
    }
};

const john = new Person('1', 'John', 30);
console.log(john.sayHello()) // Hello John;
console.log(john.__proto__); // {}

With this approach, we are copying the function to each object created. Imagine we've created 1000 objects of type Person, this will define sayHello function for each object, which of course damaging our performance.

Prototype Chain
JavaScript uses a prototype chain to find properties and methods of an object. If a property or method is not found on an object, JavaScript looks up the prototype chain until it finds it.

For example, when we call john.sayHello(), JavaScript first checks if john has a sayHello method. If not, it looks for it in the Person prototype.

Conclusion
Understanding OOP and the prototype chain is essential for writing clean and efficient JavaScript code. By leveraging constructor functions and prototypes, we can create modular and reusable code that is easier to maintain.

The Versatile 'this' keyword

Ehab Hussein — Thu, 28 Mar 2024 20:36:00 +0000

Many developers find the 'this' keyword confusing, but with a bit of practice, you can grasp its concept easily.

The 'this' keyword is specially made to point to objects, the value of the 'this' keyword is determined by how a function is called. as example if a function is called in the global context or the global scope it will point to the window object, if it is called inside an object (object's context) as a method it will point to that object.

To understand this, let's start with its behavior in the global scope:

console.log(this); // Prints the global object (window in browsers)

In the global scope, the value of the 'this' will be the global object, which makes sense because it's the surrounding context.

Now, let's consider an example where we define a global-scoped function:

const sayHello = function(name) {
  console.log(this);
};

sayHello('John');

Since the function is called in the global scope it will point to the window object.

Let's attach the same function to an object, so instead of calling it globally, let's call it with our object and see how the 'this' keyword will behave:

const person = {
  firstName: "John",
  lastName: "Doe",
  sayHello: sayHello
};

console.log("----Function called with object----");
person.sayHello('Ehab');
console.log("----Function called globally----");
sayHello();

As we said, the 'this' keyword for function 'sayHello' will look for its context. is the function called inside a context like the object literal or it is called in the global scope? and then 'this' will be assigned to the object of a context.

But not with arrow functions, since arrow functions do not have the 'this' keyword, they inherit it from the parent scope.

const person = {
  firstName: "John",
  lastName: "Doe",
  fullName: () => {
    console.log(this); // Prints the window object
    return `${this.firstName} ${this.lastName}`;
  }
};

console.log(person.fullName()); // Prints "undefined undefined"

In the previous example, it prints the window object because the arrow function inherited the 'this' keyword from its parent scope which is the global scope. so if you need to use the 'this' keyword do not define arrow functions, just use regular functions

DOM (part 1)

Ehab Hussein — Thu, 28 Mar 2024 02:18:36 +0000

DOM stands for Document Object Model, which is a web API provided by the web browser for the JavaScript engine in order to style and access the HTML elements from Javascript code
as a conceptual model, it is represented as a tree structure due to its hierarchical nature.

The browser converts this to the below tree structure:

as you can see the document object is leading the tree, actually it isn't the root of the tree but all tree nodes inherit the base functionalities from it. such as addEventListener which is an inherited function for every HTML element in our tree that allows you to add event to occur on any HTML element you want.
ex:

document.body.addEventListener('click', function() {
        // Change the body's background color to yellow
        this.style.backgroundColor = 'yellow';

the real root here is the HTML object since it is the root element of any HTML file. all children branches branch from it forming the tree structure so it can accessed and manipulated easily

as example if you want to access the root element which is HTML tag

document.documentElement

access body element:

document.body

Accessing Body Elements:
To access elements within the <body> of an HTML document, the document object provides various methods and properties. One commonly used method is getElementById(), which allows you to retrieve an element by its unique ID attribute. For example:

var myElement = document.getElementById('myElementId');

This retrieves the element with the ID "myElementId" from the document's DOM tree.

Additionally, you can use methods like getElementsByClassName(), getElementsByTagName(), and querySelector() to access elements based on their class names, tag names, or CSS selectors, respectively.

var - let - const

Ehab Hussein — Wed, 27 Mar 2024 21:48:08 +0000

In the early years of JavaScript, they introduced the only variable declaration keyword "var" that can make you declare a variable.

1- var
var is global-scoped or function-scoped, but what does that mean?

global scope means that the variable is available to be used at any level in the code after the line where it is declared. Ex:

  var height = 20;
  console.log(height); // output: 20;

  if (true) {
    var width = 20;
  }
  console.log(width); // output: 20;

function-scoped because when we declare a variable inside a function we can't access it out of that function.

function testVar() {
    var test = "Tested";
  }

console.log(test); // ReferenceError: test is not defined

Can be reassigned.

  var height = 20;
  height = 0;
  console.log(height) // output: 0

Can be redeclared.

  var height = 20;
  var height = 10;
  console.log(height) // output: 10

It is important to note that developers abandoned using var keyword due to its global scope and re-declaration behavior since it can be prone to errors. imagine you are writing 200 lines of code and at line 201 you decide to declare a variable that you have already declared but you forgot that you have this variable already initialized above, you need some error message to tell you that you already have this variable initialized. and also to reduce errors you shouldn't access a variable out of its scope.

2- let
Let is block-scoped, that means it will be available to use only at its scope but not in any outer scopes.

Ex:

  let height = 20;
  console.log(height); // output: 20;

  if (true) {
    let width = 20;
  }
  console.log(width); // ReferenceError: width is not defined

  function testVar() {
    let test = "Tested";
  }

  console.log(test); // ReferenceError: test is not defined

Can be reassigned, but can't be redeclared.

  let height = 20;
  height = 0;
  console.log(height) // output: 0

3- const
same as let keyword it is block-scoped but can't be reassigned or redeclared, as the name suggests it is constant and can't be changed.

Ex:

  let height = 20;
  console.log(height);
  // output: 20;

  if (true) {
    let width = 20;
  }
  console.log(width);
  ReferenceError: width is not defined

  function testVar() {
    let test = "Tested";
  }

  console.log(test);
  ReferenceError: test is not defined

Day 1 of #100DaysOfCode Hash Tables

Ehab Hussein — Sun, 24 Mar 2024 19:05:41 +0000

🔍 Efficient Data Retrieval: Arrays offer O(1) access, but the linear search takes O(n). Hash tables leverage hash functions for O(1) insertion and access.

Note: hash function: Is a function that spits out the index of an available slot of the list to to insert new data or to retrieve data if data exists.

⚙️ Dynamic Data Management: Arrays require shifting elements for insertion, while linked lists demand traversal. Hash tables, through hash functions, ensure O(1) insertion regardless of position.

🔑 Key-Value Pairing: Hash tables resolve the search complexity (O(n)) by associating each element with a key. A hash function maps the key to its location, facilitating rapid retrieval.

➖ Smart Removal Technique: Additionally, hash tables employ intelligent removal methods. By leveraging the key, removal becomes an O(1) operation, maintaining efficiency.

🔗 Collision Resolution: I also explored collision scenarios where different keys map to the same location, leading to chaining and linear probing techniques. Chaining involves linking collided elements in a linked list, while linear probing explores adjacent slots for placement.

hash_table.h:

bucket.h (slots of the table)

person.h (value of the table)