DEV Community: Jymo

JavaScript Classes: Like a pro-2

Jymo — Tue, 01 Apr 2025 10:38:04 +0000

JavaScript class methods and this keyword

The "this" keyword in JavaScript classes is not as complicated as it seems. Let's see why. But we have to understand a few things first.
• Class methods.
• Constructors

Each JavaScript class has a unique method called a constructor.
Only one constructor is allowed in each class, and its function is to define the initial state of a class.
Another property of a class is a method. A single class can have several of these. Methods define the behavior and actions of the resulting object.
A class can lack methods, but a constructor must be included otherwise, the class creates an empty object when initialized.

class Person {
  constructor(name, gender){
    this.name = name;
    this.gender = gender;

  }

}
const james = new Person ("James","Male");
console.log(james) // Person { name: 'James', gender: 'Male' };

Let's add more functionality to our object person. The resulting person should be able to greet people. Right?

class Person {
  constructor(name, gender){
    this.name = name;
    this.gender = gender;

  }
  sayHi(){
    console.logHi friend? I am ${this.name}. I am ${this.gender}.);
  }

}
const james = new Person ("James","Male");
console.log(james); // Person { name: 'James', gender: 'Male' }
   james.sayHi();   //   Hi friend? I am James. I am Male

The method now allows our resulting object to be a bit dynamic. Try initializing the code with different details. Compare the output from the two instances. How different are the results? Each instance is meant to be unique and independent of all other instances.

const james = new Person ("James","Male");
const james = new Person ("Lucy","Female");

From the examples, methods:

are defined within a class.
Have access to class data, state, and other class methods.
can take arguments.
are invoked on instances/ are independent of each other.

Understanding the "this " keyword in a class

The keyword "this" in a class represents the resulting object (current instance). For example, if we console logged "this" within the constructor, like in the code below, the output is an object that holds the details of the resulting object.

// Output Person { name: 'James', gender: 'Male' }


class Person {
  constructor(name, gender){
    this.name = name;
    this.gender = gender;
    console.log(this) // Person { name: 'James', gender: 'Male' };

  }
}
const james = new Person ("James","Male");
console.log(james) // Person { name: 'James', gender: 'Male' };
}
const james = new Person ("James","Male");
console.log(james) // Person { name: 'James', gender: 'Male' };

The two console logs print out the same thing. Person { name: 'James', gender: 'Male' }. Which is the current instance. Therefore, this refers to the created object (class instance)

When we initialize a new class, a blank object Person{} is created, and the "this" keyword of the class is then used to assign values to the newly created object. In a constructor, it is mostly used to define where class states are stored when a class is initialized.
Example
this.name in the example below creates a persistent instance property for each created object and stores the assigned property “name” of each instance.

const james = new Person ("James","Male"); // initializing a class

Example
this.name = name; //saves property "name" on this.name instance.

Sharing class instances between classes or between a class and a function

On mastering these basics, it is intuitive how to manipulate classes. For example, let us try to share a class instance between a class and a function.

Example

function sayGreetersName(user){
  console.logyour name is ${user.name}.); 
}
class Person {
  constructor(name, gender){
    this.name = name;
    this.gender = gender;
   }

checkName(){
  sayGreetersName(this)
}
}
const james = new Person ("James", "Male")
james.checkName();
// Output - your name is James. Outputs the value “James” as assigned to an instance //property “name”.

Conclusion

The key takeaway from the lessons is that a class is a template for creating an object.

A constructor helps us define the initial state of our object. A class without a constructor creates an empty object.

Methods add functionality to the resulting object.

Understanding "this" keyword in a class allows us to manipulate JavaScript classes better.

JavaScript Classes: Like a pro-1

Jymo — Mon, 24 Mar 2025 16:32:17 +0000

Classes in JavaScript is a relatively complex topic for most people working with or learning JavaScript. Most tutorials try to simplify the topic but, unfortunately, end up complicating the topic for most of us. I think the best way to get done with this topic once and for all is to concentrate on the things most tutorials don’t talk about, important terms about JavaScript classes. Example, state, and instances of a class. Most people who are relatively new to programming may not initially get an intuition of what these terms mean in programming, but we will try to keep things as simple as possible.

The lesson might be long, so we will divide it into several articles.

Learning goals:
What is a class?
What does a class do?
What is initializing a class?
Difference between a constructor and a super
What is an instance of a class?
What is a state in a class?
When to and not use this in a class.
What is a class?

A class in object-oriented programming (OOP) is a template. It acts as a predefined framework that simplifies and standardizes the creation of objects. Example:

class User {
  constructor (name, age, occupation) {
    this.occupation = occupation;
    this.name = name;
    this. age = age;

  }
}
const user1 = new User ("john" , 25, "chef");
console.log(user1);
 // output: User { occupation: 'chef', name: 'john', age: 25 }

As seen from the output, we can create a concrete object from the class blueprint. Or what we call a class instance.
A class instance is a single, concrete object created from a class blueprint.

// This is a class instance.
User { occupation: 'chef', name: 'john', age: 25 }

How to Create an Instance
We use the new keyword:

const user1 = new User ("john" , 25, "chef");

Each class instance holds data. For example, this class holds the data concerning our first object. That is the name, age, and occupation of our first user, John. This data is what is referred to us as the state of a class.
A state refers to the data (properties) stored inside an object at any given time. It represents the object's current condition or configuration.
The first instance of a class:

class User {
  constructor (name, age, occupation) {
    this.occupation = occupation;
    this.name = name;
    this. age = age;

  }
}
const user1 = new User ("john" , 25, "Chef");
console.log(user1);
//Below is the first instance of our class User and its state.
 // output: User { occupation: 'Chef', name: 'john', age: 25 }
The second instance of a class:
class User {
  constructor (name, age, occupation) {
    this.occupation = occupation;
    this.name = name;
    this. age = age;

  }
}
const user2 = new User ("James”, 13, "Student");
console.log(user2);
// Below is the second instance of our class User and its state.
 // output: User { occupation: 'Student', name: 'James, age: 13 }

Updating State
The state of a class can be modified after object creation.

const user2 = new User ("James”, 13, "Student"); // creating user2
user2.age = 26; // updating age state of user2 once user2 has been created

From the examples, you can see why we are referring to a class as a template. We are able to create several objects (class instances) from a single class initialization.

Characteristics of instances and states

Class Instances and why they are useful.

Instances allow us to create numerous objects where each class has its own state. It is important to note that each instance of a class is different from its predecessor in that it has its own copy of properties.
Instances share method. Methods are like functions and are a major property of a class. Learn about them in the next article, where we learn how to appropriately use this in a class.

State and why it is useful.

We can update the state of a class. Refer to the example given earlier in the article.
The state of a class is used to cause dynamic behavior of class methods based on the prevailing state of a class. See the next lesson.
Encapsulation—allows for each class instance to be manipulated independently without interfering with other class instances available at a given time.
Memory Efficiency—possible to apply different coding patterns, e.g., the flyweight pattern, to effectively conserve space when working with class instances.

Conclusion
I hope understanding these terms helps demystify classes. If this article was helpful, check the follow-up article(JavaScript Classes: Like a pro-2) where we look at class methods and the this property of JavaScript classes.

The Thin Line Between Web Development and UI/UX Design

Jymo — Tue, 18 Mar 2025 17:25:08 +0000

Despite being a good developer, I could not deliver a project. As a web developer.

If you are yet to work with UI/UX designers, it is easy for you to overlook their purpose in a project. In this article, we appreciate the UI/UX designers and look at the need to keep taking note of common UI/UX development patterns as web developers.

I have been disregarding UI/UX design since I started learning web development at the Odin project. I should have known better; it was the basis of a project, the cornerstone of most projects, and the tool that allows stakeholders, developers, product managers, and marketers to work in harmony.

I am sure I am not the only one who has been overlooking UI/UX designs and the role of web app designers. Clients and other developers must be doing it too. Clients may disregard UX/UI developers for two reasons. First, they may consider it as an unnecessary cost, or most clients are unable to distinguish the important role played by web developers and web designers in a project. This has left me wondering, how many freelance web developers charge for web development and web design separately?

Difference between web developers and web designers (UI/UX designers)

1. Web developers: are responsible for the technical implementation of a website or application. They write code, build databases, and ensure that the site functions smoothly across devices and browsers. Their expertise lies in programming languages like HTML, CSS, and JavaScript, and frameworks like React or Angular.

2. UI/UX Designers: on the other hand, focus on the user experience and interface design. They create wireframes, prototypes, and visual designs that prioritize usability, accessibility, and aesthetics. Their goal is to ensure that users can navigate the product effortlessly and enjoy the experience.

It is unfortunate for me that it had to take an experience for me to bow to the reality that a perfect project is a result of a perfect blend of good web development and UI/UX design skills.

Learning UI/UX is equally important.

Late last year a friend in the web development field entrusted a project to me as a way of showing support and welcoming me into the field of web development. The project involved editing a popular theme, PHPTRAVELS, to suit the client's needs. The hardest part of the project was mastering the technologies used in the theme, that is, PHP, Laravel, jQuery, and a few others. So, I thought. In a few weeks, I had mastered all the corners of the project, both front-end and back-end. I could make any changes to the project in a blink. However, there was an issue. My progress in changing the theme to suit what the client desired was questionable.

Weeks passed and there was very little to show for it. I was not satisfied with the already completed sections. Some components were complex and served no purpose. Sections were not fitting in as desired. How? And I am a good coder/web developer. I believe in my skills 🤗. I was wasting a lot of time with less to show for it.

I had to take a break and figure out the dilemma. Turns out, I was mostly wasting a lot of time coding and dismantling sections. There was a lot of unnecessary code and components that were trying to communicate my coding prowess but were neither aesthetically nor functionally fit for the project. The issue: I did not have a blueprint for the project. I wasted a lot of time hopping from one website to the other seeking design inspirations for the website. The result was a lot of experimenting, a lot of moving back and forth, and very complicated code that would not be so useful to the end user.

Why Design Matters

After my ordeal, I have come to appreciate the role the UI/UX designers play. They may be expensive, but the repercussions of not having one are costlier. Some of the advantages of having a UI/UX designer include:

- Providing a Clear Blueprint for Development

no more building in the dark among developers.

- Reducing Development Time and Costs - like in my case, I experimented a lot with the web development trends; I tried to fit it all in the project but ended up wasting a lot of time.

- Bridging the Gap Between Creativity and Technical Feasibility

there should be a balance between aesthetics and functionality.

- Creating User-Centered Designs — They can anticipate user behavior and create designs that feel natural and effortless to navigate. easy-to-use features.

- Collaboration and Communication — where designs of a project are available, there is better collaboration among stakeholders, developers, product managers, and marketers.

- Ensuring Consistency Across the Product — of UI/UI designs leads to better adherence to product designs and guidelines among developers.

Conclusion: A Call to Action

My urge to developers is to start working towards understanding basic aspects of UI/UX design. They must learn how to work with application design tools like Figma, Adobe XD, Sketch, InVision Studio, Axure, Webflow, Canva, and the like.

My vow is to always work on UI/UX designs first before diving into coding a project.

The greatest lesson I picked through this ordeal is that clients' needs are first met through a proper and perfect UI/UX design because the design phase is where the vision, functionality, and user experience of a product are defined.

My final appeal is before investing in a web developer, consider investing in quality web design.