typescript destructuring assignment with type

Object destructuring with types in TypeScript

Object destructuring is a powerful feature of JavaScript and TypeScript that can help you write cleaner and more expressive code. This syntax allows you to extract properties from an object and assign them to variables or parameters.

You can use object destructuring to create variables, assign default values, rename properties, or omit some properties.

In TypeScript, you can also specify the type of the object or the properties that you are destructuring. There are two ways to do this:

• You can use a type annotation after the destructuring pattern, like this:

This tells TypeScript that the object you are destructuring has two properties, name and age, and they are both of type string and number respectively.

• You can use an interface or a type alias to define the shape of the object, and then use it as a type annotation, like this:

This tells TypeScript that the object you are destructuring conforms to the Person interface, which has two properties, name and age, of type string and number respectively.

Using an interface or a type alias can be more convenient and reusable than writing the type annotation inline, especially if you have complex or nested objects.

You can also use object destructuring in function parameters, which can make your code more concise and readable. For example, instead of writing a function like this:

You can write it like this:

This way, you don’t have to repeat the person parameter inside the function body, and you can directly access the name and age properties.

You might also like

Object destructuring with types in TypeScript

New Courses Coming Soon

Join the waiting lists

I was using TypeScript in Deno to build a sample project and I had to destructure an object. I am familiar with TypeScript basics but sometimes I hit a problem.

Object destructuring was one of those.

I wanted to do

I tried adding the string and number types like this:

But this didn’t work. It apparently worked, but in reality this is assigning the name property to the string variable, and the age property value to the number variable.

The correct syntax is this:

The best way to approach this would be to create a type or interface for that data:

Then you can write the above in this way, which is shorter:

Here is how can I help you:

• COURSES where I teach everything I know
• CODING BOOTCAMP cohort course - next edition in 2025
• BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
• Follow me on X

Destructuring Object parameters in TypeScript functions

Last updated: Feb 27, 2024 Reading time · 3 min

# Destructuring Object parameters in TypeScript functions

When destructuring object parameters in a function, separate the destructured parameters and the type for the specific properties with a colon

Unfortunately, when destructuring parameters in TypeScript functions, we have to repeat the properties when typing them.

The first example shows how to destructure the name and age properties of an object parameter.

We didn't provide default values for the properties in the first example and both of the properties are required because they weren't marked as optional using a question mark.

# Destructuring Object parameters with default values

The second example shows how to destructure two properties from an object and set a default value for one of the properties.

We set a default value for the name property when destructuring it. Note that we used a question mark to mark the property as optional.

If you have default values for all of the object's properties, set a default value for the entire object instead.

This is better than setting a default value for each property when destructuring because you'd still have to pass an empty object to the function.

Even though we provided default values for all of the object's properties when destructuring, we are still required to pass an empty object because the object itself is required.

# Using a Type Alias or an Interface

If your function declaration gets too busy, use a type alias .

This is a bit easier to read, as we can clearly see that the name property has a default value and the function expects an object of type GetPersonParams .

# Using destructuring inside of a function's body

Alternatively, you can use destructuring inside of the function's body.

Which approach you pick is a matter of personal preference. You can set default values when destructuring inside of the function's body as well.

If you need to pass a function as a parameter, check out the following article .

Borislav Hadzhiev

Web Developer

Copyright © 2024 Borislav Hadzhiev

Typing Destructured Object Parameters in TypeScript

In TypeScript, you can add a type annotation to each formal parameter of a function using a colon and the desired type, like this:

That way, your code doesn't compile when you attempt to call the function with an argument of an incompatible type, such as number or boolean . Easy enough.

Let's now look at a function declaration that makes use of destructuring assignment with an object parameter, a feature that was introduced as part of ECMAScript 2015. The toJSON function accepts a value of any type that should be stringified as JSON. It additionally accepts a settings parameter that allows the caller to provide configuration options via properties:

The type of the value parameter is explicitly given as any , but what type does the pretty property have? We haven't explicitly specified a type, so it's implicitly typed as any . Of course, we want it to be a boolean, so let's add a type annotation:

However, that doesn't work. The TypeScript compiler complains that it can't find the name pretty that is used within the function body. This is because boolean is not a type annotation in this case, but the name of the local variable that the value of the pretty property gets assigned to. Again, this is part of the specification of how object destructuring works.

Because TypeScript is a superset of JavaScript, every valid JavaScript file is a valid TypeScript file (set aside type errors, that is). Therefore, TypeScript can't simply change the meaning of the destructuring expression { pretty: boolean } . It looks like a type annotation, but it's not.

# Typing Immediately Destructured Parameters

Of course, TypeScript offers a way to provide an explicit type annotation. It's a little verbose, yet (if you think about it) consistent:

You're not directly typing the pretty property, but the settings object it belongs to, which is the actual parameter passed to the toJSON function. If you now try to compile the above TypeScript code, the compiler doesn't complain anymore and emits the following JavaScript function:

# Providing Default Values

To call the above toJSON function, both the value and the settings parameter have to be passed. However, it might be reasonable to use default settings if they aren't explicitly specified. Assuming that pretty should be true by default, we'd like to be able to call the function in the following various ways:

The function call #1 already works because all parameters are specified. In order to enable function call #2, we have to mark the pretty property as optional by appending a question mark to the property name within the type annotation. Additionally, the pretty property gets a default value of true if it's not specified by the caller:

Finally, function call #3 is made possible by providing a default value of {} for the destructuring pattern of the settings object. If no settings object is passed at all, the empty object literal {} is being destructured. Because it doesn't specify a value for the pretty property, its fallback value true is returned:

Here's what the TypeScript compiler emits when targeting "ES5" :

When targeting "ES6" , only the type information is removed:

# Extracting a Type for the Settings Parameter

With multiple properties, the inline type annotation gets unwieldy quickly, which is why it might a good idea to create an interface for the configuration object:

You can now type the settings parameter using the new interface type:

TypeScript: Destructuring Objects with Types

Learn the simple yet effective way to destructure objects with type annotations in typescript. this post breaks down the common pitfalls and provides a clear guide to using types with object destructuring, making your typescript code cleaner and more reliable..

Published Jan 31, 2024

Recently, I ran into a little issue while using TypeScript in a project. I was trying to pull out some values from an object, something I’ve done a bunch of times. But this time, I wanted to make sure those values were the right type.

Here’s what I started with:

I thought I could just slap the types right in there like this:

Turns out, that wasn’t right. TypeScript thought I was trying to rename title to string and pages to number , which wasn’t what I wanted.

The right way to do it is to put the types after the whole thing:

But then I found an even cooler way. If I make a type or interface first, like this:

I can keep it super simple when I pull out the values:

This little adventure showed me that even when you think you know something, there’s always a twist or a new trick to learn, especially with TypeScript.

You might also like

• TypeScript Best Practices: Writing Clean and Maintainable Code
• TypeScript Generics Demystified: Unlocking the Power of Parametric Polymorphism
• TypeScript vs. JavaScript: Making the Right Choice for Your Project
• Mastering TypeScript: A Beginner's Guide

How to do object destructuring with types in TypeScript?

April 12, 2021 - 2 min read

Sometimes when you destructure object properties in TypeScript, you may want to define the type for the property you are destructuring.

For example, let's say I have an object called John with some properties like age , isAdult like this,

Now let's use the destructuring operator ( {} curly braces) to get the age property from the John object like this,

To set or define a type on the age property we can use a colon : after the destructuring operator and then open a curly brace and then define the type of the age property inside that curly brace like this,

See the above code live in codesandbox

There is one more way of defining the type using an interface like this,

That's it! 😃

Feel free to share if you found this useful 😃.

DEV Community

Posted on Feb 23, 2022 • Originally published at daily-dev-tips.com

Object destructuring in TypeScript

The cool part about TypeScript is that we can define types for certain variables. However, there is a scenario that might prove a bit difficult.

And this is destructuring an object.

Let's take the following example:

By using this destructuring, we extract specific properties from an object.

But how do we now define the types for this destructured object?

TypeScript casting a destructured object type

You might immediately think the following will work:

But this assigns the firstname variable to be string and the age variable to be called number .

And when we introduce two of the same type, we are hit with an error since we are redefining a variable.

This is because when we destructure an object, we can rename the properties like so:

To define these types, we have to assign them after the destructuring.

Which would look like this:

Do note you can still rename the variables, and we must still use the types for the original names.

We can make this a bit nicer by using TypeScript interfaces .

That looks way nicer, right?

And there you go the correct way to typecast a destructured object in TypeScript.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (1)

Templates let you quickly answer FAQs or store snippets for re-use.

• Email [email protected]
• Location India
• Work 100Devs
• Joined Jan 20, 2022

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

Superset embedded dashboard setup: templ components, golang backend

Inna - May 15

Building a Tic-Tac-Toe Game in Python: A Step-by-Step Guide

Thevinu Senaratne - May 15

RUST Programming Full Course 2024

Bek Brace - May 22

Connecting to a Remote Linux Server Using SSH

Emmanuel Oyibo - May 15

We're a place where coders share, stay up-to-date and grow their careers.

• Web Development

How to Assign a Type to Rest Params in TypeScript When Destructuring an Array?

• Daniyal Hamid
• 18 Dec, 2020

When using the destructuring assignment syntax in JavaScript, you can capture all remaining items in an array with the "rest" pattern in the following way:

In such cases, to properly type the rest parameters, you can use the following methods:

Add Type for Array Elements Having the Same Type

If the type of all elements in the array is the same, then we can simply add a common type like so:

Add Types for Array Elements Having Different Types

To apply different types to different elements in an array, we can use tuples like so:

In the case above, the first destructured element will have the type string and the remaining elements will have the type number .

Now, let's consider the following array where we have a mix of different types of elements in an array:

This would translate to something like the following:

This post was published 18 Dec, 2020 by Daniyal Hamid . Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post .

Was this page helpful?

More on Functions

Functions are the basic building block of any application, whether they’re local functions, imported from another module, or methods on a class. They’re also values, and just like other values, TypeScript has many ways to describe how functions can be called. Let’s learn about how to write types that describe functions.

Function Type Expressions

The simplest way to describe a function is with a function type expression . These types are syntactically similar to arrow functions:

The syntax (a: string) => void means “a function with one parameter, named a , of type string , that doesn’t have a return value”. Just like with function declarations, if a parameter type isn’t specified, it’s implicitly any .

Note that the parameter name is required . The function type (string) => void means “a function with a parameter named string of type any “!

Of course, we can use a type alias to name a function type:

Call Signatures

In JavaScript, functions can have properties in addition to being callable. However, the function type expression syntax doesn’t allow for declaring properties. If we want to describe something callable with properties, we can write a call signature in an object type:

Note that the syntax is slightly different compared to a function type expression - use : between the parameter list and the return type rather than => .

Construct Signatures

JavaScript functions can also be invoked with the new operator. TypeScript refers to these as constructors because they usually create a new object. You can write a construct signature by adding the new keyword in front of a call signature:

Some objects, like JavaScript’s Date object, can be called with or without new . You can combine call and construct signatures in the same type arbitrarily:

Generic Functions

It’s common to write a function where the types of the input relate to the type of the output, or where the types of two inputs are related in some way. Let’s consider for a moment a function that returns the first element of an array:

This function does its job, but unfortunately has the return type any . It’d be better if the function returned the type of the array element.

In TypeScript, generics are used when we want to describe a correspondence between two values. We do this by declaring a type parameter in the function signature:

By adding a type parameter Type to this function and using it in two places, we’ve created a link between the input of the function (the array) and the output (the return value). Now when we call it, a more specific type comes out:

Note that we didn’t have to specify Type in this sample. The type was inferred - chosen automatically - by TypeScript.

We can use multiple type parameters as well. For example, a standalone version of map would look like this:

Note that in this example, TypeScript could infer both the type of the Input type parameter (from the given string array), as well as the Output type parameter based on the return value of the function expression ( number ).

Constraints

We’ve written some generic functions that can work on any kind of value. Sometimes we want to relate two values, but can only operate on a certain subset of values. In this case, we can use a constraint to limit the kinds of types that a type parameter can accept.

Let’s write a function that returns the longer of two values. To do this, we need a length property that’s a number. We constrain the type parameter to that type by writing an extends clause:

There are a few interesting things to note in this example. We allowed TypeScript to infer the return type of longest . Return type inference also works on generic functions.

Because we constrained Type to { length: number } , we were allowed to access the .length property of the a and b parameters. Without the type constraint, we wouldn’t be able to access those properties because the values might have been some other type without a length property.

The types of longerArray and longerString were inferred based on the arguments. Remember, generics are all about relating two or more values with the same type!

Finally, just as we’d like, the call to longest(10, 100) is rejected because the number type doesn’t have a .length property.

Working with Constrained Values

Here’s a common error when working with generic constraints:

It might look like this function is OK - Type is constrained to { length: number } , and the function either returns Type or a value matching that constraint. The problem is that the function promises to return the same kind of object as was passed in, not just some object matching the constraint. If this code were legal, you could write code that definitely wouldn’t work:

Specifying Type Arguments

TypeScript can usually infer the intended type arguments in a generic call, but not always. For example, let’s say you wrote a function to combine two arrays:

Normally it would be an error to call this function with mismatched arrays:

If you intended to do this, however, you could manually specify Type :

Guidelines for Writing Good Generic Functions

Writing generic functions is fun, and it can be easy to get carried away with type parameters. Having too many type parameters or using constraints where they aren’t needed can make inference less successful, frustrating callers of your function.

Push Type Parameters Down

Here are two ways of writing a function that appear similar:

These might seem identical at first glance, but firstElement1 is a much better way to write this function. Its inferred return type is Type , but firstElement2 ’s inferred return type is any because TypeScript has to resolve the arr[0] expression using the constraint type, rather than “waiting” to resolve the element during a call.

Rule : When possible, use the type parameter itself rather than constraining it

Use Fewer Type Parameters

Here’s another pair of similar functions:

We’ve created a type parameter Func that doesn’t relate two values . That’s always a red flag, because it means callers wanting to specify type arguments have to manually specify an extra type argument for no reason. Func doesn’t do anything but make the function harder to read and reason about!

Rule : Always use as few type parameters as possible

Type Parameters Should Appear Twice

Sometimes we forget that a function might not need to be generic:

We could just as easily have written a simpler version:

Remember, type parameters are for relating the types of multiple values . If a type parameter is only used once in the function signature, it’s not relating anything. This includes the inferred return type; for example, if Str was part of the inferred return type of greet , it would be relating the argument and return types, so would be used twice despite appearing only once in the written code.

Rule : If a type parameter only appears in one location, strongly reconsider if you actually need it

Optional Parameters

Functions in JavaScript often take a variable number of arguments. For example, the toFixed method of number takes an optional digit count:

We can model this in TypeScript by marking the parameter as optional with ? :

Although the parameter is specified as type number , the x parameter will actually have the type number | undefined because unspecified parameters in JavaScript get the value undefined .

You can also provide a parameter default :

Now in the body of f , x will have type number because any undefined argument will be replaced with 10 . Note that when a parameter is optional, callers can always pass undefined , as this simply simulates a “missing” argument:

Optional Parameters in Callbacks

Once you’ve learned about optional parameters and function type expressions, it’s very easy to make the following mistakes when writing functions that invoke callbacks:

What people usually intend when writing index? as an optional parameter is that they want both of these calls to be legal:

What this actually means is that callback might get invoked with one argument . In other words, the function definition says that the implementation might look like this:

In turn, TypeScript will enforce this meaning and issue errors that aren’t really possible:

In JavaScript, if you call a function with more arguments than there are parameters, the extra arguments are simply ignored. TypeScript behaves the same way. Functions with fewer parameters (of the same types) can always take the place of functions with more parameters.

Rule : When writing a function type for a callback, never write an optional parameter unless you intend to call the function without passing that argument

Function Overloads

Some JavaScript functions can be called in a variety of argument counts and types. For example, you might write a function to produce a Date that takes either a timestamp (one argument) or a month/day/year specification (three arguments).

In TypeScript, we can specify a function that can be called in different ways by writing overload signatures . To do this, write some number of function signatures (usually two or more), followed by the body of the function:

In this example, we wrote two overloads: one accepting one argument, and another accepting three arguments. These first two signatures are called the overload signatures .

Then, we wrote a function implementation with a compatible signature. Functions have an implementation signature, but this signature can’t be called directly. Even though we wrote a function with two optional parameters after the required one, it can’t be called with two parameters!

Overload Signatures and the Implementation Signature

This is a common source of confusion. Often people will write code like this and not understand why there is an error:

Again, the signature used to write the function body can’t be “seen” from the outside.

The signature of the implementation is not visible from the outside. When writing an overloaded function, you should always have two or more signatures above the implementation of the function.

The implementation signature must also be compatible with the overload signatures. For example, these functions have errors because the implementation signature doesn’t match the overloads in a correct way:

Writing Good Overloads

Like generics, there are a few guidelines you should follow when using function overloads. Following these principles will make your function easier to call, easier to understand, and easier to implement.

Let’s consider a function that returns the length of a string or an array:

This function is fine; we can invoke it with strings or arrays. However, we can’t invoke it with a value that might be a string or an array, because TypeScript can only resolve a function call to a single overload:

Because both overloads have the same argument count and same return type, we can instead write a non-overloaded version of the function:

This is much better! Callers can invoke this with either sort of value, and as an added bonus, we don’t have to figure out a correct implementation signature.

Always prefer parameters with union types instead of overloads when possible

Declaring this in a Function

TypeScript will infer what the this should be in a function via code flow analysis, for example in the following:

TypeScript understands that the function user.becomeAdmin has a corresponding this which is the outer object user . this , heh , can be enough for a lot of cases, but there are a lot of cases where you need more control over what object this represents. The JavaScript specification states that you cannot have a parameter called this , and so TypeScript uses that syntax space to let you declare the type for this in the function body.

This pattern is common with callback-style APIs, where another object typically controls when your function is called. Note that you need to use function and not arrow functions to get this behavior:

Other Types to Know About

There are some additional types you’ll want to recognize that appear often when working with function types. Like all types, you can use them everywhere, but these are especially relevant in the context of functions.

void represents the return value of functions which don’t return a value. It’s the inferred type any time a function doesn’t have any return statements, or doesn’t return any explicit value from those return statements:

In JavaScript, a function that doesn’t return any value will implicitly return the value undefined . However, void and undefined are not the same thing in TypeScript. There are further details at the end of this chapter.

void is not the same as undefined .

The special type object refers to any value that isn’t a primitive ( string , number , bigint , boolean , symbol , null , or undefined ). This is different from the empty object type { } , and also different from the global type Object . It’s very likely you will never use Object .

object is not Object . Always use object !

Note that in JavaScript, function values are objects: They have properties, have Object.prototype in their prototype chain, are instanceof Object , you can call Object.keys on them, and so on. For this reason, function types are considered to be object s in TypeScript.

The unknown type represents any value. This is similar to the any type, but is safer because it’s not legal to do anything with an unknown value:

This is useful when describing function types because you can describe functions that accept any value without having any values in your function body.

Conversely, you can describe a function that returns a value of unknown type:

Some functions never return a value:

The never type represents values which are never observed. In a return type, this means that the function throws an exception or terminates execution of the program.

never also appears when TypeScript determines there’s nothing left in a union.

The global type Function describes properties like bind , call , apply , and others present on all function values in JavaScript. It also has the special property that values of type Function can always be called; these calls return any :

This is an untyped function call and is generally best avoided because of the unsafe any return type.

If you need to accept an arbitrary function but don’t intend to call it, the type () => void is generally safer.

Rest Parameters and Arguments

Background Reading: Rest Parameters Spread Syntax

Rest Parameters

In addition to using optional parameters or overloads to make functions that can accept a variety of fixed argument counts, we can also define functions that take an unbounded number of arguments using rest parameters .

A rest parameter appears after all other parameters, and uses the ... syntax:

In TypeScript, the type annotation on these parameters is implicitly any[] instead of any , and any type annotation given must be of the form Array<T> or T[] , or a tuple type (which we’ll learn about later).

Rest Arguments

Conversely, we can provide a variable number of arguments from an iterable object (for example, an array) using the spread syntax. For example, the push method of arrays takes any number of arguments:

Note that in general, TypeScript does not assume that arrays are immutable. This can lead to some surprising behavior:

The best fix for this situation depends a bit on your code, but in general a const context is the most straightforward solution:

Using rest arguments may require turning on downlevelIteration when targeting older runtimes.

Parameter Destructuring

Background Reading: Destructuring Assignment

You can use parameter destructuring to conveniently unpack objects provided as an argument into one or more local variables in the function body. In JavaScript, it looks like this:

The type annotation for the object goes after the destructuring syntax:

This can look a bit verbose, but you can use a named type here as well:

Assignability of Functions

Return type void.

The void return type for functions can produce some unusual, but expected behavior.

Contextual typing with a return type of void does not force functions to not return something. Another way to say this is a contextual function type with a void return type ( type voidFunc = () => void ), when implemented, can return any other value, but it will be ignored.

Thus, the following implementations of the type () => void are valid:

And when the return value of one of these functions is assigned to another variable, it will retain the type of void :

This behavior exists so that the following code is valid even though Array.prototype.push returns a number and the Array.prototype.forEach method expects a function with a return type of void .

There is one other special case to be aware of, when a literal function definition has a void return type, that function must not return anything.

For more on void please refer to these other documentation entries:

• v2 handbook
• FAQ - “Why are functions returning non-void assignable to function returning void?”

Understand how TypeScript uses JavaScript knowledge to reduce the amount of type syntax in your projects.

Object Types

How TypeScript describes the shapes of JavaScript objects.

The TypeScript docs are an open source project. Help us improve these pages by sending a Pull Request ❤

Last updated: May 23, 2024  

• skip navigation KendoReact Product Bundles DevCraft All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with: NEW : Design Kits for Figma

The React useState Hook

React Hooks have transformed the way we build and manage state in functional components. By extracting logic from a component, they enable us to write clearer, more intuitive code. In this article, we’ll discuss the most fundamental hook of React—useState.

React Hooks have transformed the way we build and manage state in functional components. By extracting logic from a component, they enable us to write clearer, more intuitive code.

We’ve explored hooks in previous articles with a focus on useEffect , useContext and useReducer . Today, we delve deep into the most fundamental hook of React— useState .

Component State

Before we dive into understanding how the useState() hook can be used, we first need to understand a core concept of React— state .

At the heart of every dynamic React application lies the concept of “state.” State can be thought of as any data that determines the output or appearance of a component and can change over time. It’s what allows our React applications to be interactive and responsive to user inputs or system changes.

Historically, component state was managed within class components using constructs like this.state and this.setState() . However, with the introduction of hooks in React, state can now be managed in a more elegantly and concisely within functional components, with the useState() hook.

The useState() hook allows us to add React state to functional components. The useState() hook takes a single argument which is the initial value of the state property being created and returns an array of two values:

• The state property we want to create.
• A function used to update the state value.

In programming languages, an array that returns a fixed number of elements whose values are of a known type is often recognized as a “tuple.”

Here’s an example of using the useState hook to create a message state property with an initial value of “Hello World!”

From the useState hook, we can also de-structure a function that can be used to change the value of the state property being created. In our use case, we’ll call this function setMessage() .

We’re returning the first and second items of the array with array destructuring , a feature introduced in ES6.

We’ll display the value of the message state property in our component and also have a <button> that when clicked triggers the setMessage() function.

When the HelloWorld component is first rendered, the “Hello World!” message is shown. When the user clicks the <h2> element, the setMessage() function updates the message state property to a new value of "The message has changed!" . If the value of a state property is ever changed, React re-renders the component to show the new state value.

Try the above example in the following CodeSandbox .

Initializing State with a Function

We’ve mentioned that the useState hook takes a single argument which is the initial value of the state property being created. However, sometimes, the initial state value isn’t a simple string or number; it might require some computation. To avoid unnecessary calculations every time our component re-renders, instead of providing a direct value, we can pass a function that returns the desired initial value. This function is only executed once during the component’s initial render.

For example, we can have a function return the value of "Hello World!" as the argument passed into the useState() hook.

Providing a function to initialize state can be useful if we ever wanted to compute the initial value of a state property through some expensive computation.

Functional Updates

The function provided by useState() to update the state (in our case, setMessage() ) is versatile. Besides accepting new values directly, it can also receive a function that gets the previous state as its argument. This capability is particularly useful when the new state depends on the previous one.

To illustrate this, let’s consider an enhancement to our HelloWorld component. Imagine we want to append an exclamation point (!) to the message every time a button is clicked. Instead of knowing the exact current state of our message, we would utilize the previous state to make the change.

In the above example, the setMessage() function uses the current message (retrieved as prevMessage ) to append an exclamation point. This way, every time the button "Add Exclamation" is clicked, an exclamation point will be added to the end of the current message.

Try the above in the following CodeSandbox .

The functional update ensures that the state update relies on the most recent value of the state, making it both dynamic and dependent on the previous state.

When working with the useState() hook, it’s important to keep in mind the following points.

State Updates are Asynchronous

It’s always important to remember that state updates are asynchronous . As a result, React batches state updates for performance reasons. Therefore, always use the functional form of making state changes when the next state depends on the previous one .

Avoid Side Effects in useState

If initializing state with a function, the function used for this initialization should be pure. In other words, it should not have side effects or depend on mutable variables outside its scope .

Remember Re-renders

Always remember that changing state will cause the component to re-render! This point is important to be kept in mind to avoid unnecessary renders or infinite loops.

The useState() hook is a cornerstone of state management in functional React components. Its versatility, from functional initialization to functional updates, makes it indispensable. As we’ve seen with other hooks, understanding its nuances can help us write clean, efficient and intuitive React code.

Hassan Djirdeh

Hassan is currently a senior frontend engineer at Doordash. Prior to Doordash, Hassan worked at Instacart and Shopify, where he helped build large production applications at-scale. Hassan is also a published author and course instructor and has helped thousands of students learn in-depth fronted engineering tools like React, Vue, TypeScript and GraphQL. Hassan’s non-work interests range widely and, when not in front of a computer screen, you can find him at the gym, going for walks or running through the six.

Related Posts

The react usecontext hook, the react usereducer hook, a breakdown of the react useeffect hook, all articles.

• ASP.NET Core
• ASP.NET MVC
• ASP.NET AJAX
• Blazor Desktop/.NET MAUI
• Design Systems
• Document Processing
• Accessibility

Latest Stories in Your Inbox

Subscribe to be the first to get our expert-written articles and tutorials for developers!

All fields are required

Progress collects the Personal Information set out in our Privacy Policy and the Supplemental Privacy notice for residents of California and other US States and uses it for the purposes stated in that policy.

You can also ask us not to share your Personal Information to third parties here: Do Not Sell or Share My Info

By submitting this form, I understand and acknowledge my data will be processed in accordance with Progress' Privacy Policy .

I agree to receive email communications from Progress Software or its Partners , containing information about Progress Software’s products. I understand I may opt out from marketing communication at any time here or through the opt out option placed in the e-mail communication received.

By submitting this form, you understand and agree that your personal data will be processed by Progress Software or its Partners as described in our Privacy Policy . You may opt out from marketing communication at any time here or through the opt out option placed in the e-mail communication sent by us or our Partners.

We see that you have already chosen to receive marketing materials from us. If you wish to change this at any time you may do so by clicking here .

Thank you for your continued interest in Progress. Based on either your previous activity on our websites or our ongoing relationship, we will keep you updated on our products, solutions, services, company news and events. If you decide that you want to be removed from our mailing lists at any time, you can change your contact preferences by clicking here .

• Trending Now
• Foundational Courses
• Data Science
• Practice Problem
• Machine Learning
• System Design
• DevOps Tutorial

How to Change Directories in Command Prompt?

• How to Change Colours in Command Prompt in Windows?
• How to Format a Hard Drive Using the Command Prompt?
• How to Manage Directories in Linux?
• How to Change the Directory in Linux | cd Command
• How to Execute C# Program on cmd (command-line)?
• How to execute PHP code using command line ?
• How to Fix in R: Cannot change working directory
• How to Copy a Directory in Linux
• How to Copy a File to Multiple Directories in Linux
• How to Create Directory in Linux | mkdir Command
• How to remove a directory in R?
• How to use 'cp' command to exclude a specific directory
• How to Get directory of Current Script in Python?
• C++ Program to Get the List of Files in a Directory
• C# Program to Search Directories and List Files
• C# Program For Listing the Files in a Directory
• Add a directory to PATH in ZSH
• Change current working directory with Python
• How to Display Path of an Executable File in Linux | Which Command

The Windows Command Line Tool comes up with a feature that allows you to move inside any Windows Directory with some specific Windows Commands & Symbols .

In this article, we will learn How to Change Directories in Command Prompts , Change Directories at Different Levels , and Troubleshooting Problems While Changing Directories .

What are Directories?

Before diving into the specifics, let’s understand what are Directories , Different Operations on Directories, and how to change directories at different levels.

Directories are nothing but a File System on OS that contains information needed to access files. It’s like folders on your computer where you can organize and store files. They form a hierarchical structure, which means they have different levels, similar to a Tree Data Structure .

Different Levels of Directories

• Roots Directory
• Parent Directory
• Subdirectory
• Nested Subdirectory
• Leaf Directory

How to Change Directories in CMD at Different Levels?

Before moving ahead with Changing Directory to Windows Folders , we have to understand Directory Changing to Different Levels . Let us discuss all the methods for Changing Directories in CMD at different levels:

Level 1: Change Directories in the Root Level

Open Command Prompt . To change to a directory in the root directory (Like “C:\” on Windows) , you can use the `cd` command followed by the directory name. For example:

Changing Directories in the Root Directory

Level 2: Change Directories in the Parent Level

Open Command Prompt . To move to a directory within the parent directory (like going from “Documents” to “Users”), simply use the `cd` command followed by `..` to go up one level, and then the name of the parent directory. For example:

Changing Directories in the Parent Directory

Level 3: Change Directories to Subdirectories Level

Open CMD or Command Prompt . To enter a subdirectory within your current directory (like going from “Documents” to “Photos”), just use the `cd` command followed by the name of the subdirectory. For example:

Changing Directories to Subdirectories

Level 4: Change Directories in Nested Subdirectories Level

Open CMD . To navigate to a deeply nested subdirectory (like going from “Documents” to “Work > Projects”), use the `cd` command with each subdirectory name, separated by a backslash (\). For example:

Changing Directories in Nested Subdirectories

Level 5: Change Directories to Leaf Level

Open Command Prompt . If you want to enter a directory that doesn’t contain any subdirectories (like going to a folder with just files), use the `cd` command followed by the leaf directory’s name. For example:

Changing Directories to Leaf Directories

Note: Remember, you can always type `cd ..` to go up one level and explore different directories easily.

How to Change Directories in Command Prompt to Different Folders?

Now, after discussing Directory Change in Different Levels , we will now discuss all the possible methods that are required to Change Directories to Folders in the Windows Command Line Tool .

Method 1: Change Directories in Command Prompt using Drag and Drop

For those who prefer a graphical approach, changing directories using drag and drop is simple. You can open File Explorer , locate the desired directory, and drag it to the Command Prompt window. This action automatically populates the Command Line with the directory path.

Change Directories Using Drag and Drop

Method 2: Change Directories in Command Prompt using Commands

Changing directories using commands may seem tricky at first, but it’s essential to get the hang of it in Command Prompt. Here are some easy methods to do it:

1. Absolute Paths:

This is like using a full address to find a place. In Command Prompt, you can use the full path to a folder to get there directly. This will take you straight to your “Documents” folder. For instance:

2. Relative Paths:

Think of this as giving directions from where you are. You can use `..` to move up one level and the folder name to go into a subfolder. This will take you up one level from where you are right now. For example:

using Relative Paths

3. Drive Letters:

Imagine switching between different drives as changing streets. To switch to a different drive, just type its letter and a colon. This will take you to the D: drive. For example:

using Drive Paths

4. Environment Variables:

These are like shortcuts to important places. You can use names like `%USERPROFILE%` to go to common folders without typing the whole path. This will take you to your user profile folder. For example:

using Environment Variable

5. Tab Auto-Completion:

Think of this as your Command Prompt assistant. When you start typing a folder name and press Tab, Command Prompt will try to finish it for you. If there’s more than one option, it will show you a list.

6. Previous Directory (`cd ..`):

This is like having a “go back” button. If you want to return to the folder you were in before, just type ` cd .. `. It’s like a quick way to backtrack.

7. Using Wildcards:

Wildcards are like search filters. You can use `*` to find folders based on patterns. This will take you to a folder with a name starting with “sep”. For example:

8. Using the “dir” command:

It is used to list all Windows Files and Directories (folders) in the current directories. This helps the users to quickly see what Files and Directories are present in a particular location

For example, if you want to list the content of ” C:\Users\GFG0338\Desktop\mystuff\my_Doc “, you would type the following. This will give you a list of Files and Directories in that folder along with respective attributes.

using dir Command

How Do I Navigate to a Specific Folder in Command Prompt?

When you want to go to a specific folder using Command Prompt, it’s like giving your computer directions. Here’s how to do it in simple steps:

• Open Command Prompt: First, you need to open Command Prompt. You can do this by pressing the Windows key, typing “Command Prompt,” and hitting Enter.
• Understand Your Starting Point: Before you start, it’s good to know where you are. Command Prompt opens in a default location, usually your user folder.
• Type ‘cd’ and Space: To tell Command Prompt you want to change the folder, type `cd` (which stands for “change directory”) followed by a space.
• Enter the Folder Name: Now, type the name of the folder you want to go to. If your folder name has spaces, put it in double quotes. For example, if you want to go to a folder named “My Stuff,” you’d type: cd “My Stuff”
• Hit Enter: Press the Enter key on your keyboard. This tells Command Prompt to follow your directions and take you to the folder.
• Check Your Location: To make sure you’re in the right place, you can type `cd` without any folder name and press Enter. Command Prompt will show you the full path of where you are.

Note: Remember, you can always use the `cd ..` command to go up one level if you ever want to backtrack.

The complete guide on “How to Change Directories in CMD (Command Prompt)” is discussed above. Don’t worry if it feels a bit confusing at first. With time, you’ll become a Command Prompt Expert . Practice will make you more comfortable with these Simple Windows Commands for changing Directories at Different Levels in Command Prompt .

• Most Useful CMD Commands in Windows
• 10 Ways to Open the Command Prompt in Windows 10

How to Change Directories in Command Prompt – FAQs

How can i change the quotes used in directory of command prompt in windows.

To change the directory in the Command Prompt of Windows, the CD Command will be highly used. The CD Command along with the Directory Name or the entire path will lead you into the desired Directory.

How to Change Directories C to D in CMD?

To switch to a different drive, just type its letter and a colon. For example: if you want to change Drive from C to D, type `D:`

How to go back to the previous Directory in CMD?

If you want to return to the previous folder you were in before, just type ` cd .. `. It’s like a quick way to backtrack.

How to reset or empty the command prompt screen?

type cls and hit enter, It will clear all the previous commands on the CMD screen.

How can I list all items in any Directory using CMD?

To list all the items of any directory in Command Prompt, first, browse inside the Directory using the CD command or complete file path. Then, use the DIR command only. Executing the DIR Command will list all the items along with their details in CMD.

Please Login to comment...

Similar reads.

• Command Prompt
• Windows 10 Tricks

Improve your Coding Skills with Practice

What kind of Experience do you want to share?