State Dalam Pemrograman Pengertian Fungsi Dan Contoh

Understanding State and Functions in Programming

State is simply the collection of all the variables and data your program is holding at any given moment. Functions are the blocks of code that read that state, change it, or return new values based on it. This is not a particularly profound realization, but people tend to overcomplicate it on day one. When you're writing a login form in JavaScript, the state might be an object like { user: null, isAuthenticated: false, loading: true }. A function handles the submission, flips those values, and triggers a re-render. That's it. The entire architecture of modern frontend frameworks is built on this relationship between state and functions.

State Dalam Pemrograman Pengertian Fungsi Dan Contoh

Let me walk through how this actually works under the hood before we get into any frameworks. Take a basic counter example that doesn't use React, Vue, or anything fancy: The variable count holds the state. The functions increment() and reset() are the only interfaces allowed to modify it. That encapsulation matters more than people realize. In Python, the same concept looks different because of how scope works:

class Counter:
    def __init__(self):
        self.count = 0

    def increment(self):
        self.count += 1
        return self.count

    def reset(self):
        self.count = 0
        return self.count

c = Counter()
print(c.increment())  1
print(c.increment())  2
print(c.reset())      0

The class instance here is essentially a state container. Each method is a function that mutates or reads that container. This pattern scales to thousands of lines of code without fundamentally changing. I spent three days once debugging an issue where a form component was displaying stale data after a user navigated away and back. The state was being cached at the module level instead of being tied to the component lifecycle. Every time the route reloaded, the old value persisted because the module had already been initialized and never re-initialized. The fix was straightforward but non-obvious if you don't understand module-level caching in JavaScript. Moving the state into component-local storage instead of a shared module variable resolved it. The lesson: state lives where the thing that owns it lives. If a module persists across navigation, don't put per-view state there.

Another common pitfall involves reference types. In JavaScript, arrays and objects are passed by reference. If a function receives an object and mutates it directly, the original state changes too. This causes cascading bugs that are nearly impossible to trace if you don't know what to look for.

function updateUserProfile(profile) {
  profile.lastModified = Date.now(); // mutates the original object
  return profile;
}

let myProfile = { name: "Alex", age: 30 };
let result = updateUserProfile(myProfile);
console.log(myProfile === result); // true — same reference

The workaround is either to create a copy before mutating or to use immutable update patterns: This returns a new object instead of mutating the existing one. The original myProfile stays untouched. It costs a bit more memory but prevents half the bugs I've seen in production. Once your application grows past a single page with a handful of variables, managing state manually becomes unsustainable. This is where tools like Redux, Zustand, MobX, and the React Context API exist. They don't change the fundamental concept — state is still data, functions still mutate it — but they add structure around how that happens.

Redux, for example, enforces a strict unidirectional data flow. State can only change through dispatched actions processed by pure reducer functions. No direct mutation. This convention costs you boilerplate but makes large codebases predictable. You can trace every state change back to a specific action type and a specific reducer. Zustand takes a different approach. It gives you a store where you call functions directly to update state, with no dispatcher or reducer required. It's faster to write and easier to read. The tradeoff is that you lose some of the auditability that Redux provides. Neither is universally better. Redux shines when you need to debug complex state transitions across a large team. Zustand works fine for smaller applications where the overhead isn't justified. Pick based on the actual size and maintenance needs of your project, not what's trending.

State in Different Paradigms

The concept isn't limited to imperative or object-oriented programming. Functional programming handles state differently — it tends to avoid mutable state altogether and passes data through a chain of pure functions instead. Libraries like Immutable.js in JavaScript or the Elm architecture demonstrate this. In Erlang and Elixir, state is managed through processes. Each process has its own isolated state, and communication happens through message passing. There's no shared mutable state between processes, which eliminates an entire category of concurrency bugs. This approach is overkill for a simple web app but essential for systems that need to handle thousands of simultaneous connections reliably. Databases are another form of persistent state. When you save a user's preferences to PostgreSQL, that's state that survives across application restarts. The functions that interact with it are your API endpoints or ORM queries. Understanding the boundary between ephemeral state (in memory) and persistent state (in a database) is critical design work, not just an implementation detail.

Common Mistakes to Avoid

Putting derived data into state. If you can calculate a value from existing state, don't store it separately. Storing fullName when you already have firstName and lastName means you have to keep three values in sync manually. Compute the derived value on demand instead. Spreading state too thin. Splitting a related group of values into separate variables across different scopes makes it hard to understand what belongs together. Group related state logically, even if it means having a slightly larger state object. Ignoring state initialization. Every piece of state needs a sensible default. An undefined user object, a null string, or an empty array — these are all valid defaults depending on the context. But leaving state uninitialized until it's needed creates race conditions, especially in asynchronous code where the timing of renders and data fetches is unpredictable.

Mutating state in render functions. In React, if you modify state directly during rendering instead of inside an event handler or effect, you'll get unpredictable behavior and potential infinite re-renders. The render phase should be pure — it reads state and produces output, nothing more.

Practical Example: A Todo App

Here's a complete, minimal example in JavaScript that demonstrates state and functions working together without any framework: The IIFE (immediately invoked function expression) creates a private scope. The todos array and nextId variable are the state. The returned functions are the only way to interact with that state from the outside. Nothing else can reach in and corrupt it. This pattern is simple, testable, and doesn't require any library. There are scenarios where traditional state management breaks down. Real-time collaborative applications where multiple users edit the same document simultaneously require conflict resolution strategies like CRDTs (Conflict-free Replicated Data Types). Standard setState calls and reducers don't handle concurrent edits gracefully.

Large-scale analytics dashboards that query gigabytes of data often find that client-side state management becomes a bottleneck. In those cases, keeping state on the server and only caching frequently accessed subsets on the client is the practical solution. The "state lives where the data lives" principle applies here too. Another failure mode is when state becomes coupled to the UI layer. If your state structure mirrors your component hierarchy exactly, refactoring either becomes painful. Decouple the data model from the presentation layer. Let the UI reflect the state without being married to its structure. Understanding state and functions in programming comes down to recognizing that everything your application does is either reading data, changing data, or both. The tools and frameworks change, but that core relationship stays constant. Get comfortable with it early and the rest of the learning curve flattens considerably.