
# Named parameters: a modern and elegant approach

## Introduction

When we are developing complex applications, a typical problem we may face is that we call a function or method that has many parameters, and we need to remember what the correct order is:

<Code language="javascript">
```javascript

updateSomeState(oldState, newState, true, 0); // is this even right 🤔 ?

````

</Code>


<Note type="info">
  At this point you may think that we aren't separating the logic properly, and you may be right, but it's for example's sake.
</Note>

A good approach to solving this problem is parameters destructuring (or named parameters). But first, let's review the destructuring syntax.

### Basic destructuring

<Code language="javascript">

```javascript
const IKodi = {
  author: "Genaro Bonavita",
  topics: ["programming", "JavaScript", "web development"]
};


const { author, topics } = IKodi; // creates two constants called 'author' and 'topics'

console.log(author); // "Genaro Bonavita"
console.log(topics[2]); // "web development"
````

</Code>

<br />

### Default values

If the properties we are looking for are not defined, the variables (or constants) are `undefined`, but we can avoid this by setting a default value:

<Code language="javascript">

```javascript
const { author = "Anonymous", topics = [] } = IKodi;

console.log(author); // if not defined, it will be assigned "Anonymous"
console.log(topics[2]); // if not defined, it will be assigned []
```

</Code>

<Note type="warn">
  The default assignment only applies if the property is `undefined`, meaning
  that if it's `null` (or any other _falsy_ value) the created variable will be
  assigned that _no-undefined_ value.
</Note>

### Renaming destructured properties

Usually (for example when handling APIs responses), a property has the same name as one of our variables, or it's not descriptive enough (e.g. "data" or "response") and we want to rename it. We can rename the destructured property like so:

<Code language="javascript">

```javascript
const { author: postAuthor, topics: postTopics } = IKodi;

console.log(postAuthor); // all OK 👍
console.log(postTopics[2]); // all OK 👍

console.log(author); // ReferenceError ⚠️ because doesn't exists
console.log(topics[2]); // ReferenceError ⚠️ because doesn't exists
```

</Code>

### Combined syntax

An example combining destructuring, default values and properties renaming:

<Code language="javascript">

```javascript
const { author: postAuthor = "Anonymus", topics: postTopics = [] } = IKodi;

console.log(postAuthor); // "Genaro Bonavita", but "Anonymus" if not defined
console.log(postTopics[2]); // "web development", but [] if not defined
```

</Code>

First we put the name of the original property, then the new name, and finally the default value.

## Named Parameters

All these destructuring concepts apply to function parameters as well.

<Note type="warn">
  If you are using the modern parameter syntax explained above, you won't be
  able to use the _use strict_ mode inside the function body.
</Note>

<Code language="javascript">

```javascript
// with normal parameters
function removeRepeatedItems(items) {
  return Array.from(new Set(items));
}

// with named parameters
function removeRepeatedItems({ items = [] }) {
  return Array.from(new Set(items));
}
```

</Code>

The second `removeRepeatedItems` function takes an _object_ as argument and **destructures** the _items_ property.

So, going back with the first example in this article, we can do the following:

<Code language="javascript">

```javascript
updateSomeState({ oldState, newState, priority: true, destroyedNodes: 0 }); // this is more descriptive now
```

</Code>

## Wrapping Up

In this article, we learned the _destructuring syntax_, and combined it with named parameters, in order to have a better control over our code.

As you can see, it can be a useful approach when working on a large or complex codebase, because we're taking advantage of a native feature to reduce complexity, while improving the readability and maintainability of our code.

However, it is in your hands to decide if using it can help more than hinder. In the end, you have one more tool at your disposal.


Named Parameters: a modern and elegant approach


# Working with the Local Storage API in JavaScript

_Local Storage_ is a **browser API** that let us **persist information** in the
browser storage, allowing us to save useful information about _user
preferences_, such as theme, language, etc...

As you can imagine, it is a very convenient way to personalize user experience.

<Note type="warn">
  Due it is a browser API, you can't use it in runtimes like Node, Deno, Bun,
  etc.., though there are several alternatives for the server.
</Note>
---

## Main Concepts

The way Local Storage stores data is similar to an ordinary JavaScript object, that is a set of _key_ and _value_ pairs:

<Code language="javascript">

```javascript
const object = {
  firstKey: "hello",
  secondKey: "world"
};
```

</Code>

<br />

We can access the Local Storage data table directly in the browser DevTools:

1. Open a new empty tab
1. Go to the developer tools.
1. Navigate to _Application > Storage > Local Storage_
   ![Application window](/img/first.png)
1. Select the first URL from the list
   ![URLs list](/img/second.png)

You can see something like this:
![Local Storage data table](/img/third.png)

<br />

To add a new key/value pair, double click below the _key_ column and enter a key (for example _"message"_). Then go to the _value_ field and enter a value (for example _"local storage"_).

If we reload the page, we can see that the data we've just added is still there:
![Data is still there](/img/fourth.png)

<br />

Now: how can we bring this to JavaScript?

Well, it's pretty simple, but you need to know something very important first: **Local Storage can only store data as a _string_**, so we need to stringify it first.

The way JavaScript lets us do it is via the global `JSON` object methods:

- `JSON.stringify()` accepts a valid JavaScript value (object, array, number, etc...) and returns a stringified copy:

<Code language="javascript">

```javascript
JSON.stringify({
  name: "foo",
  age: 23
}); // returns "{name:"foo",age:23}"
```

</Code>

- `JSON.parse()` accepts a valid **stringified** JavaScript
  value and returns its equivalent JavaScript value:

<Code language="javascript">

```javascript
JSON.parse("{name:'foo',age:23}");
// returns  {
//   name: "foo",
//   age: 23
// }
```

</Code>

<br />

With this in mind, we are ready to interact with the Local Storage via JavaScript.

The Local Storage API provides us the following methods:

<Code language="javascript">

```javascript
localStorage.setItem(<key>, <stringified-data>) // to save data

localStorage.getItem(<key>) // to get saved data by key

localStorage.key(<index>) // to get saved data by index

localStorage.removeItem(<key>) // to remove saved data by key

localStorage.clear() // to empty storage
```

</Code>

---

## A Real Use Case

So, let's imagine a real-world example: We need to remember the user's preferred language every time they enter the app.

For this example, i'm going to use vanila JS, but it is easily extrapolated to any library/framework.

<Code language="html">

```html
<select name="language" id="language-select">
  <option value="en">English</option>
  <option value="es">Español</option>
  <option value="pt">Português</option>
  ...
</select>
```

</Code>

We create a _select_ element with language options and we add it the _language-select_ id.

<br />

<Code language="javascript">

```javascript
// we listen for "change" events in the document
document.addEventListener("change", event => {
  // we check if the event comes from our select element
  if (event.target.matches("#language-select")) {
    // if so, we get the selected value
    const selectedLanguage = event.target.value;

    // and we save it in the Local Storage
    localStorage.setItem("language", selectedLanguage);
  }
});
```

</Code>

With JavaScript, we add an _event listener_ for the entire document.

<Note type="info">
  When I work with vanila JavaScript, I add only one event listener for each
  event I need to handle, in order to prevent _event propagation_ and reduce the
  number of event listeners in the app.
</Note>

Once we've added our _change_ event listener, we check if the event target (the element that fired the event) is our _select_. If so, we get its value (in our example it would be _en_, _es_ or _pt_) and save it in the Local Storage.

<Note type="warn">
  Note that we are not converting our value to a string because it is already a
  string.
</Note>

Now, we can do the following:

<Code language="javascript">

```javascript
document.addEventListener("DOMContentLoaded", () => {
  const userLanguage = localStorage.getItem("language");

  setLanguage(userLanguage);
  // ...
});
```

</Code>

When the page has loaded and the DOM is ready, we get the saved language from Local Storage. From here, we can use it for whatever we need.

Also, a good feature is that users can reset their language preference, and for this we would need to remove it from Local Storage:

<Code language="javascript">

```javascript
function resetLanguage() {
  localStorage.removeItem("language");
}
```

</Code>

And, finally, in an unlikely scenario, we could completly empty the Local Storage:

<Code language="javascript">

```javascript
localStorage.clear();
```

</Code>

---

## Wrapping Up

Through this tutorial, we've learned how to interact with a very useful API and its main concepts, in addition to a real use case.

If you wish to delve into topics like performance, security or best practices for this API, you can check out the articles below:

- Performance:

  - [Measuring Local Storage performance](https://www.stevesouders.com/blog/2014/02/11/measuring-localstorage-performance/)
  - [How fast is vanilla JS Local Storage?](https://gomakethings.com/how-fast-is-vanilla-js-localstorage/)

- Security:

  - [Is Local Storage safe to use?](https://snyk.io/blog/is-localstorage-safe-to-use/)
  - [Local Storage security limitations](https://vhudyma-blog.eu/the-limitations-and-security-of-localstorage-in-javascript/)

- Best practices:
  - [Local Storage is cool but be mindful how you use it](https://medium.com/geekculture/localstorage-is-cool-but-be-mindful-how-you-use-it-2fedf02d37e4)
  - [Please stop using Local Storage](https://dev.to/rdegges/please-stop-using-local-storage-1i04)


IKodi

a blog about web development

Latests Posts ✍️

Named Parameters: a modern and elegant approach

07-12-2022

2min

Working with the Local Storage API in JavaScript

30-11-2022

3min 20sec