# Typescript - Tips & Tricks - Readonly Array

> function sortAndReverse(list: number[]): number[] { return list.sort().reverse(); } const list =...

- **Author**: Luca Del Puppo (@puppo92) — AI Native Engineer at Nearform
- **Published**: Mar 10, 2021
- **Canonical URL**: https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-readonly-array/
- **Series**: TypeScript - Tips & Tricks (Part 11 of 21) — https://delpuppo.net/blog/series/ts-tips-and-tricks/
- **Series LLMs.txt**: https://delpuppo.net/blog/series/ts-tips-and-tricks/llms.txt
- **Category**: TypeScript
- **Tags**: typescript, webdev
- **Hashnode Mirror**: https://blog.delpuppo.net/typescript-tips-tricks-readonly-array
- **Dev.to Mirror**: https://dev.to/playfulprogramming/typescript-tips-tricks-readonly-array-jg2
- **Blog Index LLMs.txt**: https://delpuppo.net/blog/llms.txt

## Series Context: TypeScript - Tips & Tricks

- Part 1: [Typescript - Tips & Tricks - typeof](https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-typeof/)
- Part 2: [Typescript - Tips & Tricks - Literal Types](https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-literal-types/)
- Part 3: [Typescript - Tips & Tricks - keyof](https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-keyof/)
- Part 4: [Typescript - Tips & Tricks - Union and Intersection](https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-union-and-intersection/)
- Part 5: [Typescript - Tips & Tricks - Overloaded Functions](https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-overloaded-functions/)
- Part 6: [Typescript - Tips & Tricks - this parameter](https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-this-parameter/)
- Part 7: [Typescript - Tips & Tricks - any vs. unknown](https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-any-vs-unknown/)
- Part 8: [Typescript - Tips & Tricks - Optional modifier](https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-optional-modifier/)
- Part 9: [Typescript - Tips & Tricks - Index Signature](https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-index-signature/)
- Part 10: [Typescript - Tips & Tricks - readonly modifier](https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-readonly-modifier/)
- Part 11: [Typescript - Tips & Tricks - Readonly Array](https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-readonly-array/) **(Current Article)**
- Part 12: [Typescript - Tips & Tricks - Tuple](https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-tuple/)
- Part 13: [Typescript - Tips & Tricks - Non-null assertion operator](https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-non-null-assertion-operator/)
- Part 14: [Typescript - Tips & Tricks - Never type](https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-never-type/)
- Part 15: [Typescript - Tips & Tricks - Assert Function](https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-assert-function/)
- Part 16: [Typescript - Tips & Tricks - Type Guard](https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-type-guard/)
- Part 17: [Typescript - Tips & Tricks - Conditional Type](https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-conditional-type/)
- Part 18: [Typescript - Tips & Tricks - infer keyword](https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-infer-keyword/)
- Part 19: [Typescript - Tips & Tricks - Mapped Types](https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-mapped-types/)
- Part 20: [Typescript - Tips & Tricks - Advanced Types](https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-advanced-types/)
- Part 21: [Typescript - Tips & Tricks - Rest Parameters & Rest Arguments](https://delpuppo.net/blog/ts-tips-and-tricks/typescript-tips-tricks-rest-parameters-rest-arguments/)

---

```ts
function sortAndReverse(list: number[]): number[] {
  return list.sort().reverse();
}

const list = [1, 4, 5, 2];
sortAndReverse(list);
console.log(list);
```
What's the result of the final console log?
1. [ 1, 4, 5, 2 ]
2. [ 5, 4, 2, 1 ]
3. [ 2, 5, 4, 1 ]

Unfortunately, the correct answer is the second one.
![Unfortunately](https://media.giphy.com/media/XHwN2ViWQR6vmBoRdd/source.gif)

In this stupid example, you can see how some array methods can have some side effects. The sort and the reverse methods return a new array with the result but also they change the initial array.
Typescript can help us to prevent these side effects using read-only arrays.
The read-only arrays identify the methods that modify the initial array and raise an error when you call these methods.
But now, how can you use the read-only array? It's easy guys, you need to indicate the readonly modifier before the type of your array.
So, the previous example can change in this way
```ts
function sortAndReverse(list: readonly number[]): number[] {
  return list.slice().sort().reverse();
}

const list = [1, 4, 5, 2];
sortAndReverse(list);
console.log(list);
```
In this case, the _sortAndReverse_ method returns as result "[ 5, 4, 2, 1 ]" like in the first example, but more important is that the final console log returns "[ 1, 4, 5, 2 ]", the initial value of the "list" array.
If in this case, you try to remove the "slice" method, you can see how typescript indicates an error (Property 'sort' does not exist on type 'readonly number[]'), and it helps you to prevent strange side effects.

It's all for today!
Bye Bye Guys!