We use cookies and other tracking technologies to improve your browsing experience on our site, analyze site traffic, and understand where our audience is coming from. To find out more, please read our privacy policy.

By choosing 'I Accept', you consent to our use of cookies and other tracking technologies.

We use cookies and other tracking technologies to improve your browsing experience on our site, analyze site traffic, and understand where our audience is coming from. To find out more, please read our privacy policy.

By choosing 'I Accept', you consent to our use of cookies and other tracking technologies. Less

We use cookies and other tracking technologies... More

Login or register
to publish this job!

Login or register
to save this job!

Login or register
to save interesting jobs!

Login or register
to get access to all your job applications!

Login or register to start contributing with an article!

Login or register
to see more jobs from this company!

Login or register
to boost this post!

Show some love to the author of this blog by giving their post some rocket fuel 🚀.

Login or register to search for your ideal job!

Login or register to start working on this issue!

Login or register
to save articles!

Login to see the application

Engineers who find a new job through JavaScript Works average a 15% increase in salary 🚀

You will be redirected back to this page right after signin

Blog hero image

Managing your State Application in Javascript

Ezekiel Lawson 7 December, 2021 | 4 min read

Introduction

Redux, Vuex, and other technologies come to mind when we hear the phrase state in Javascript. But in this article, I'm going to give an in-depth explanation of what state is and how to manage your state application in pure Javascript.

As a developer, you'll hear the term state quite frequently. But what exactly is the term "State"? It turns out that it's not a tough or React-specific idea. You'll be working with state whether you're doing frontend or backend web development, using JavaScript, a framework like React, Angular, or Vue, or not.

Prerequisites

This course assumes you know how to use JavaScript at a basic level. You'll need a rudimentary understanding of variables, Dom, arrays, functions, ES6+ JavaScript features, and objects, but you don't need any prior experience managing state in javascript as this tutorial will give you an in-depth explanation of what state is and how to manage the state of your application.

This article will cover the following:

  • Brief intro to State in Javascript?
  • What is State in Programming?
  • How does it work?
  • Why Should I manage the state of my application?
  • Conclusion

Brief intro to State in Javascript?

It's your data's current "state."... You update your data object rather than trying to target and change components in the DOM when the user does something. In other words, the state is anything that can change based on user input.

Now, let's look at a simple explanation of state:

Example One

Think of state in a real-world

A person walks into a restaurant placed an order and then the food is brought to him now the current state of that food is hot and if the person leaves the food for some minute it gets cold and then the new state of the food is cold, This is what state means in a real-world example an object changing from its current state to a new state.

What is State in Programming?

The state of an object in object-oriented programming is the sum of the object's original values plus any changes made to them. A process, transaction, or setting's current or last-known status or condition. Keeping track of the process is known as "maintaining state" or "managing state."

Now, let's look at an example of state in programming:

Join our newsletter
Join over 111,000 others and get access to exclusive content, job opportunities and more!

Example Two

let name =" "

In the preceding example, we create a variable name that has an empty string, now the current state of the variable is undefined because no value is passed to the variable.

undefined.png

In the following example, a name is being passed to the variable and then it returns the current state of the variable with the name of the person.

let name ="John"

Output:

john.png

N.B. State is the current state of your program.

Now that we know the definition of state, let's look at a quick code example to understand it better.

Example Three: A simple Message Request

In the following code example, we will work with a component in our state.

First, let's create a simple component with a messageRequest function.

let messageRequest = function () {
    return '<p>' + messageRequest.state.greeting + messageRequest.state.name + ', ' + messageRequest.state.message + '? </p>';
};

Next, we create an object which contains the state of our data.

messageRequest.state = {
    greeting: 'Hello ',
    name: ' John Smith ',
    message: ' I would love you to add me to your Linkedin network '
}

Now that we have created an object which contains the state of our data, let's move to the next step:

The next step is to render our application.

let app = document.querySelector('#app');
app.innerHTML = messageRequest();

Finally, this is the output of our application.

Hello John Smith, I would love you to add me to your Linkedin network?

Bonus tip: The benefit of assigning state to a component like this is that you no longer have to worry about targeting particular parts and altering certain aspects of them.

You change the state and then render the template with a scoped component. You don't have to go looking for specific items.

How does it work?

Now, let's look at another example on codepen:

Codepen

In the above code example in our Codepen, we create a counter which increases a number with the following steps:

  • First, we create an object which will represent our data's starting state
  • Next, we create our components that return a template string.
  • Now, for the changes to update in our DOM we create a render function.
  • We create a function that updates the current number when we click on the increment button

N.B: Your data is the only arbiter of truth, which makes upgrading the user interface more straightforward and consistent.

Why should I manage the State of my Application?

Several reasons why managing your state is ideal:

  • It helps you write well-structured, responsive code without having to worry about your bundle getting too big.
  • It increases the flexibility and robustness of your JavaScript coding!
  • Manipulation of the DOM and state logic is simple and feasible.
  • Managing the state of your application also provides you with a snapshot of all of your data at a specific point in time. As a result, you'll always know where your data is, which will speed up your work.
  • Only when data changes or new data is added will a request to the server be sent.

Conclusion

A state is a JavaScript object that stores the dynamic data of a component and allows it to follow changes between renderings. It's a combination of all those different states. For instance, if the user is not authenticated, is the modal open.

Managing the state of your application is extremely hard I think this is one of the reasons why applications tend to become complex. Hopefully, this article has given you a good understanding of what state is and how to manage your application without any library.

Author's avatar
Ezekiel Lawson
I'm Lawson Ezekiel, a software developer who has more development experience in frontend building responsive website sites using these web technologies like Javascript, VueJs, HTML and CSS, Bootstrap Tailwind CSS. And I love teaching and sharing my technical experience through an article.

Related Issues

open-editions / corpus-joyce-ulysses-tei
open-editions / corpus-joyce-ulysses-tei
  • Started
  • 0
  • 4
  • Intermediate
  • HTML
open-editions / corpus-joyce-ulysses-tei
open-editions / corpus-joyce-ulysses-tei
  • Started
  • 0
  • 4
  • Intermediate
  • HTML
open-editions / corpus-joyce-ulysses-tei
open-editions / corpus-joyce-ulysses-tei
  • Started
  • 0
  • 5
  • Intermediate
  • HTML
open-editions / corpus-joyce-ulysses-tei
open-editions / corpus-joyce-ulysses-tei
  • Started
  • 0
  • 1
  • Intermediate
  • HTML

Get hired!

Sign up now and apply for roles at companies that interest you.

Engineers who find a new job through JavaScript Works average a 15% increase in salary.

Start with GitHubStart with Stack OverflowStart with Email