<a href="https://www.freepik.com/free-psd/3d-female-character-reading-book_13678507.htm" target="_blank" rel="noreferrer noopener">Person sitting on books (Opens in a new tab)</a> and <a href="https://www.freepik.com/free-vector/realistic-3d-shapes-floating-background_13397766.htm" target="_blank" rel="noreferrer noopener">Background 3d composition (Opens in a new tab)</a> by <a href="https://www.freepik.com/author/freepik" target="_blank" rel="noreferrer noopener">Freepik (Opens in a new tab)</a>, <a href="https://www.freepik.com/free-psd/website-coding-icon-3d-illustration_28638422.htm" target="_blank" rel="noreferrer noopener">Cute round interface (Opens in a new tab)</a> by <a href="https://www.freepik.com/author/ekayasadesign" target="_blank" rel="noreferrer noopener">Ekayasa.Design (Opens in a new tab)</a>

Learning JavaScript

The good perk of having a lot of people who code around you is that you end up discussing things that you don't get to see on a day-to-day basis as a simpleton frontend developer.

This time, I landed on the __concept of symbols in JavaScript__, which is something I don't have to deal with at work, but something that JavaScript offers and it'd be nice to understand what it is and why it is :D

## What is a Symbol?

__A symbol is a unique and immutable data type in JavaScript__.

If that doesn't tell you anything (which indeed didn't for me), know that a symbol is one of the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#primitive_values" target="_blank" rel="noreferrer noopener">JavaScript primitive data types (Opens in a new tab)</a> just as string, boolean, integer etc. but it works like a *special identifier to access object properties*, and it can be used more or less like a property key.

Let's imagine that we have an object where we store a person's `name`, an `id` and their `age`.

```javascript
let person = {
 name: "Sophia",
 id: 12345678,
 age: 24, // (yes, I'm a trailing comma person)
};
```

If we want to access the value of the `id` property, we'd just do:

```javascript
console.log(person.id); // will give us 12345678
```

It is fair to assume that `id` won't change as often as the other characteristics of a person, and tailor our work around that assumption.

Let's try to use a symbol as a key by creating it. This can be done using the `Symbol()` constructor:

```javascript
let symbolIDKey = Symbol("id");
let person = {
 name: "Sophia",
 [symbolIDKey] = 12345678,
 age: 30,
};
console.log(person[symbolIDKey]); // outputs 12345678
```

You could, in theory, use no `"id"` parameter (properly referred as __descriptor__), but if you were to use more than one symbol key, it'd be more challenging to know which is which.

## Why symbols then?

Using symbols as object keys will provide you with a unique and guaranteed way of accessing object properties, __even if other code adds or modifies properties with the same key__.

For example:

```javascript
let symbolIDKey = Symbol("id");
let person = {
 name: "Sophia",
 [symbolIDKey] = 12345678,
 age: 30,
};
```

Some other code, for whatever reason, will try to do

```javascript
person.id = 00000000;
```

You will be left with

```javascript
let symbolIDKey = Symbol("id");
let person = {
 name: "Sophia",
 [symbolIDKey] = 12345678,
 age: 30,
 id: 00000000,
};

console.log(person.id); // will output 00000000
console.log(person[symbolIDKey]); // will output our more expected 12345678
```

The symbol key is allowing us to preserve the original value even if some other code might try to alter the property `id`.

> With symbols you can add private properties to an object that are not intended to be modified or accessed directly by other code.

But beware! Symbols keys are not enumerated, which means that __they do not show up in the list of keys of the object__ if you try to access them by loops and mappings.

You cannot even access the symbol keys of an object with <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys" target="_blank" rel="norefferer noopener">`keys()` (Opens in a new tab)</a> nor with <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames" target="_blank" rel="norefferer noopener">`getOwnPropertyNames()` (Opens in a new tab)</a>!

You will need to be aware of the structure of your object and if you need to access the symbol keys, you'll have to use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols" target="_blank" rel="norefferer noopener">`getOwnPropertySymbols()` (Opens in a new tab)</a>.

...

And that's it! I don't see myself using this approach anytime soon, but it's good to know that, should I be concerned with the integrity of the data I work with, there are ways for me to preserve some information in the flimsy world that JavaScript often creates for us.

JavaScript symbols are a unique and immutable data type that can be used as object property keys to prevent external code to unexpectedly modify properties. That's it, but if it doesn't yet make sense to you, reading the article might actually help.

Javascript Symbols

Custom

JavaScript

ELI5

JavaScript Symbols

<a href="https://www.freepik.com/free-psd/concept-mobile-application-cloud-services-male-character-sits-big-cloud-sign-with-phone-3d-illustration_26314276.htm" target="_blank" rel="noreferrer noopener">Concept mobile application and cloud services character (Opens in a new tab)</a> by <a href="https://www.freepik.com" target="_blank" rel="noreferrer noopener">Freepik (Opens in a new tab)</a>, <a href="https://www.freepik.com/free-vector/realistic-white-monochrome-background_16223330.htm" target="_blank" rel="noreferrer noopener">Realistic white monochrome background (Opens in a new tab)</a> by <a href="https://www.freepik.com" target="_blank" rel="noreferrer noopener">Freepik (Opens in a new tab)</a>

Typescript

Sometimes I wonder whether I love or hate Typescript. I see the benefits of implementing it in the majority of frontend solutions, but I struggle with the syntax and the mumbo jumbo names that don't tell me anything. "Generics" would be one of those, as the name kindly suggests too, it's a name that could mean anything 🤷 When I find myself in the situation where I think I have grasped something but I haven't quite, the best solution is to try to write something about it to bring in clarity!

## So what are Generics?

Generics in TypeScript provide a way to create reusable data structures (arrays, stacks, queues, linked lists etc.), components and functions that can work with different data types.

Take for example:

```typescript
interface Dictionary<T> {
 [key: string]: T;
}
````

With generics you can create a container type that can hold different types of values based on needs, e.g.:

```typescript
const myDictionary: Dictionary<number> = {
 age: 30,
 height: 180,
};

const myOtherDictionary: Dictionary<string> = {
 name: 'John',
 city: 'New York',
};
```

This is useful when you want to create a __flexible and type-safe container__, such as a dictionary or a set. You'll be guaranteed, whether the structure will accommodate strings or numbers, that it will follow the interface `Dictionary` and expect an object with keys whose value will reflect the data you use it with (=== if you have `Dictionary<string>` the values of the keys can only be `string`, if you have `Dictionary<number>` the values of the keys can only be `number`).

Let's make another practical example; let's say you want to have a function that allows you to print whatever type of array in a particular format, like an ordered list. In this case, __the type of the data passed is not relevant to you__, you only care that it's presented in an ordered list.

```typescript
function printArray<T>(array: T[]): string {
 const items: string = array.map(item => `<li>${item}</li>`).join('');
 return `<ol>${items}</ol>`;
}
```

Now you can use this function to format the arrays before appending them to a div:

```typescript
function printArray<T>(array: T[]): string {
 const items: string = array.map(item => `<li>${item}</li>`).join('');
 return `<ol>${items}</ol>`;
}

// An example function to append HTML content to a div element
function appendToDiv(containerId: string, content: string): void {
 const container = document.getElementById(containerId);
 if (container) {
 container.innerHTML = content;
 }
}

// Our data types
const numbers: number[] = [1, 2, 3, 4, 5];
const strings: string[] = ['apple', 'banana', 'orange'];

// Our data types formatted through the printArray function
const numbersListHTML: string = printArray(numbers);
const stringsListHTML: string = printArray(strings);

// Append the lists to an hypotetical div container that shows the list
appendToDiv('orderedLists', numbersListHTML);
appendToDiv('orderedLists', stringsListHTML);
```

In the example, `printArray` doesn't care whether the array inputted is a numeric or a string one, but it makes sure to guarantee type safety based on the data type you pass to it.

Not bad, right?

<hr/>

## What is a somewhat more practical application of generics in the real-life coding world?

Generics can be useful when working with promises and asynchronous operations, allowing you to specify the type of the resolved value.

```typescript
// Function that returns a promise to fetch data from an API
function fetchData<T>(url: string): Promise<T> {
 return fetch(url)
 .then(response => {
 if (!response.ok) {
 throw new Error('Network response was not ok');
 }
 return response.json() as Promise<T>;
 })
 .catch(error => {
 console.error('Error fetching data:', error);
 throw error;
 });
}

// Usage
interface UserData {
 id: number;
 name: string;
 email: string;
}

const apiUrl = 'https://api.example.com/users/1';

fetchData<UserData>(apiUrl)
 .then(data => {
 // Here, 'data' will be of type UserData
 console.log('User Data:', data);
 })
 .catch(error => {
 console.error('Error fetching user data:', error);
 });
```

While this example is not perfect, it offers us a great way to dynamically query for various URLs, and for each case we have the possibility to provide the type we expect to receive: we query for `https://api.example.com/users/1` - we expect to receive a response containing user information - so we provide the interface `UserData` to the function `fetchData<UserData>(apiUrl)` and if the request doesn't fail, our response will be already using the correct interface. Neat!

<hr />

## Challenges with Generics

Not all that shines is gold, and the same can be said about generics. While they offer this __great versatility__, you can imagine __they also provide a lot of complexity to a codebase__, as they will require developers to pay better attention to the data flow and make sure that things won't go as unexpected.

Together with the broader learning curve proposed to developers, there are also various limitations of type inferring that might make generics limiting to a practical application. No idea about those limits, will let you know when I stumble on those :D 

## Long story short

If you use them, make sure it makes sense on why you're using them and that they actually bring benefits on what you're doing. __If you're working on a npm package that needs to accommodate different solutions__ (idk, a table with columns that can sort according to the data type provided, where you might not know ahead of time what values will be entered), __generics might be very well what you're looking for__! Bear in mind however, that they will always create an extra layer of complexity that you need to account for your code and for all your team mates!

Let's figure out together what do we do with all those weird Ts in Typescript :D Believe it or not, they can let you work with different data types in a safe and reusable way, so you can build cool stuff with confidence!

oh-no.ooo

ELI5

Articles

JavaScript Symbols

Generics in Typescript and how to use them