Ezekiel Lawson
7 Dec 2021
•
4 min read
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.
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:
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:
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.
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:
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.
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:
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.
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.
Now, let's look at another example on codepen:
In the above code example in our Codepen, we create a counter which increases a number with the following steps:
N.B: Your data is the only arbiter of truth, which makes upgrading the user interface more straightforward and consistent.
Several reasons why managing your state is ideal:
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.
Ezekiel Lawson
Detailed-oriented Front End developer with 2+ years of experience working with HTML, CSS, JavaScript,VueJs, and Git. Worked on single and collaboration
See other articles by Ezekiel
Ground Floor, Verse Building, 18 Brunswick Place, London, N1 6DZ
108 E 16th Street, New York, NY 10003
Join over 111,000 others and get access to exclusive content, job opportunities and more!