How to make function parameters optional in TypeScript?
Tags: typescript
Published: 2022-01-02 00:00:00

---
  title: How to make function parameters optional in TypeScript?
  published: true
  tags: TypeScript
  date: Sun Jan 02 2022 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/make-function-parameters-optional-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-789f6872f81c5cffe5fb0fa672f0657a.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/make-function-parameters-optional-typescript)
  
To make the function parameters optional, we can use the `?` symbol (question mark) after the parameter name when defining function in TypeScript.

### TL;DR

```ts
// a simple function that returns
// a greeting with an optional name parameter
function sayGreeting(name?: string) {
  return name ? `Hey ${name}` : `Hey Person`;
}

// call the function
sayGreeting("John Doe"); // Hey John Doe

// call the function
// but with no value
sayGreeting(); // ✅ Ok. Hey Person
```

For example, let's say we have a simple function called `sayGreeting` which has a parameter called `name` and returns a greeting with the `name` value.

It may look like this,

```ts
// a simple function that returns
// a greeting with the name
function sayGreeting(name: string) {
  return `Hey ${name}`;
}
```

Now if we call the above function with `John Doe` as an argument, it will return the string `Hey John Doe` which is the correct behavior.

It can be done like this,

```ts
// a simple function that returns
// a greeting with the name
function sayGreeting(name: string) {
  return `Hey ${name}`;
}

// call the function
sayGreeting("John Doe"); // Hey John Doe
```

Let's try to call the `sayGreeting` function and pass no value as an argument to the function like this,

```ts
// a simple function that returns
// a greeting with the name
function sayGreeting(name: string) {
  return `Hey ${name}`;
}

// call the function
sayGreeting("John Doe"); // Hey John Doe

// call the function
// but with no value
sayGreeting(); // ❌ Error. Expected 1 arguments, but got 0.
```

As you can see that the TypeScript compiler shows us an error that says `Expected 1 arguments, but got 0.`. In simple terms, it means that we need to pass at least one value as an argument to the function.

So to make the `name` parameter as an optional argument we can use the question mark symbol (`?`) before the parameter name like this,

```ts
// a simple function that returns
// a greeting with an optional name parameter
function sayGreeting(name?: string) {
  return `Hey ${name}`;
}

// call the function
sayGreeting("John Doe"); // Hey John Doe

// call the function
// but with no value
sayGreeting(); // ✅ Ok.
```

Now everything is good ✅.

Now to avoid the `undefined` value if no value is passed to the `name` parameter we can add a `ternary operator` check to see if the `name` parameter is empty and return the result according to it.

It can be done like this,

```ts
// a simple function that returns
// a greeting with an optional name parameter
function sayGreeting(name?: string) {
  return name ? `Hey ${name}` : `Hey Person`;
}

// call the function
sayGreeting("John Doe"); // Hey John Doe

// call the function
// but with no value
sayGreeting(); // ✅ Ok. Hey Person
```

Yay! 🥳. We have successfully made an optional function parameter in TypeScript.

See the above code live in [codesandbox](https://codesandbox.io/s/make-function-parameters-optional-typescript-ve1c5?file=/src/index.ts).

That's all 😃!

### Feel free to share if you found this useful 😃.

---