320 lines
6.7 KiB
Markdown
320 lines
6.7 KiB
Markdown
---
|
|
title: Explicação
|
|
description:
|
|
published: true
|
|
date: 2026-07-20T17:50:25.085Z
|
|
tags:
|
|
editor: markdown
|
|
dateCreated: 2026-06-22T19:40:46.381Z
|
|
---
|
|
|
|
# Explicacao Didatica do Trecho `chartData`
|
|
|
|
## Trecho analisado
|
|
|
|
```javascript
|
|
const chartData = this._dashboardDataset
|
|
.filter(item => item.Type === 'MATERIAL_STATUS')
|
|
.map((item) => ({
|
|
...item,
|
|
DisplayStatus: ColorMaterialFormatter.colorMaterialSubtitle(item.Key2)
|
|
}));
|
|
```
|
|
|
|
asdasd
|
|
|
|
## Objetivo geral do codigo
|
|
|
|
Esse trecho pega uma lista maior de dados chamada `this._dashboardDataset`, seleciona apenas os itens que representam status de material e cria uma nova lista com esses itens, adicionando um campo novo chamado `DisplayStatus`.
|
|
|
|
Em outras palavras:
|
|
|
|
1. Filtra somente os itens importantes para esse caso.
|
|
2. Monta um novo array com os mesmos dados do item original.
|
|
3. Acrescenta uma informacao formatada para exibicao.
|
|
|
|
## Explicacao linha por linha
|
|
|
|
### 1. Declaracao da constante
|
|
|
|
```javascript
|
|
const chartData = ...
|
|
```
|
|
|
|
- `const` cria uma constante.
|
|
- `chartData` sera a variavel que vai guardar o resultado final.
|
|
- Esse resultado sera um novo array.
|
|
|
|
## 2. Uso de `this._dashboardDataset`
|
|
|
|
```javascript
|
|
this._dashboardDataset
|
|
```
|
|
|
|
- `this` normalmente representa o objeto atual, por exemplo um controller ou classe.
|
|
- `_dashboardDataset` parece ser uma propriedade desse objeto.
|
|
- O nome indica que ela armazena os dados usados no dashboard.
|
|
|
|
Entao o codigo esta comecando a trabalhar sobre esse array principal.
|
|
|
|
## 3. A funcao `filter`
|
|
|
|
```javascript
|
|
.filter(item => item.Type === 'MATERIAL_STATUS')
|
|
```
|
|
|
|
### O que `filter` faz
|
|
|
|
A funcao `filter()` percorre todos os itens de um array e retorna um novo array contendo apenas os itens que passam em uma condicao.
|
|
|
|
### Como funciona aqui
|
|
|
|
Para cada `item` do array:
|
|
|
|
```javascript
|
|
item.Type === 'MATERIAL_STATUS'
|
|
```
|
|
|
|
Essa expressao verifica se a propriedade `Type` do item e exatamente igual a `'MATERIAL_STATUS'`.
|
|
|
|
### Resultado do `filter`
|
|
|
|
- Se for verdadeiro, o item permanece no array novo.
|
|
- Se for falso, o item e descartado.
|
|
|
|
### Exemplo
|
|
|
|
Se o array original for:
|
|
|
|
```javascript
|
|
[
|
|
{ Type: 'MATERIAL_STATUS', Key2: 'A' },
|
|
{ Type: 'OTHER', Key2: 'B' },
|
|
{ Type: 'MATERIAL_STATUS', Key2: 'C' }
|
|
]
|
|
```
|
|
|
|
Depois do `filter`, o resultado sera:
|
|
|
|
```javascript
|
|
[
|
|
{ Type: 'MATERIAL_STATUS', Key2: 'A' },
|
|
{ Type: 'MATERIAL_STATUS', Key2: 'C' }
|
|
]
|
|
```
|
|
|
|
## 4. A arrow function usada no `filter`
|
|
|
|
```javascript
|
|
item => item.Type === 'MATERIAL_STATUS'
|
|
```
|
|
|
|
Essa e uma **arrow function**, que e uma forma curta de escrever funcao em JavaScript.
|
|
|
|
Ela equivale a algo assim:
|
|
|
|
```javascript
|
|
function(item) {
|
|
return item.Type === 'MATERIAL_STATUS';
|
|
}
|
|
```
|
|
|
|
Ou seja, para cada item, ela retorna `true` ou `false`.
|
|
|
|
## 5. A funcao `map`
|
|
|
|
```javascript
|
|
.map((item) => ({
|
|
...item,
|
|
DisplayStatus: ColorMaterialFormatter.colorMaterialSubtitle(item.Key2)
|
|
}));
|
|
```
|
|
|
|
### O que `map` faz
|
|
|
|
A funcao `map()` percorre um array e transforma cada item em outro valor.
|
|
|
|
No final, ela devolve um novo array com a mesma quantidade de itens, mas cada item pode ter sido modificado ou recriado.
|
|
|
|
### Como funciona aqui
|
|
|
|
Depois do `filter`, o `map()` pega cada item que sobrou e cria um novo objeto com:
|
|
|
|
- todos os campos do item original
|
|
- mais um campo novo chamado `DisplayStatus`
|
|
|
|
## 6. O que significa `...item`
|
|
|
|
```javascript
|
|
...item
|
|
```
|
|
|
|
Isso e o **spread operator**.
|
|
|
|
Nesse contexto, ele copia as propriedades do objeto `item` para dentro do novo objeto.
|
|
|
|
Exemplo:
|
|
|
|
Se `item` for:
|
|
|
|
```javascript
|
|
{
|
|
Type: 'MATERIAL_STATUS',
|
|
Key1: 'MAT1',
|
|
Key2: 'RED'
|
|
}
|
|
```
|
|
|
|
Entao:
|
|
|
|
```javascript
|
|
{
|
|
...item
|
|
}
|
|
```
|
|
|
|
vira algo equivalente a:
|
|
|
|
```javascript
|
|
{
|
|
Type: 'MATERIAL_STATUS',
|
|
Key1: 'MAT1',
|
|
Key2: 'RED'
|
|
}
|
|
```
|
|
|
|
Isso e muito util para reaproveitar os dados existentes sem precisar escrever propriedade por propriedade.
|
|
|
|
## 7. Criacao do campo `DisplayStatus`
|
|
|
|
```javascript
|
|
DisplayStatus: ColorMaterialFormatter.colorMaterialSubtitle(item.Key2)
|
|
```
|
|
|
|
Aqui o codigo cria uma nova propriedade chamada `DisplayStatus`.
|
|
|
|
O valor dela vem da chamada:
|
|
|
|
```javascript
|
|
ColorMaterialFormatter.colorMaterialSubtitle(item.Key2)
|
|
```
|
|
|
|
### O que isso faz
|
|
|
|
- `ColorMaterialFormatter` parece ser um objeto utilitario de formatacao.
|
|
- `colorMaterialSubtitle(...)` parece ser uma funcao desse objeto.
|
|
- `item.Key2` e o valor enviado para essa funcao.
|
|
|
|
Provavelmente essa funcao pega um codigo interno e devolve um texto melhor para exibicao.
|
|
|
|
### Exemplo possivel
|
|
|
|
Se:
|
|
|
|
```javascript
|
|
item.Key2 = 'RED'
|
|
```
|
|
|
|
e a funcao retornar:
|
|
|
|
```javascript
|
|
'Vermelho'
|
|
```
|
|
|
|
o novo objeto passara a ter:
|
|
|
|
```javascript
|
|
DisplayStatus: 'Vermelho'
|
|
```
|
|
|
|
## 8. Por que ha parenteses em volta do objeto no `map`
|
|
|
|
```javascript
|
|
(item) => ({
|
|
...item,
|
|
DisplayStatus: ...
|
|
})
|
|
```
|
|
|
|
Esses parenteses extras existem porque a arrow function esta retornando um objeto diretamente.
|
|
|
|
Sem esses parenteses, o JavaScript poderia interpretar as chaves como bloco de codigo, e nao como objeto.
|
|
|
|
## 9. Resultado final de `chartData`
|
|
|
|
No final, `chartData` sera um novo array contendo:
|
|
|
|
- apenas itens com `Type === 'MATERIAL_STATUS'`
|
|
- todos os campos originais desses itens
|
|
- mais o campo `DisplayStatus`
|
|
|
|
## Exemplo completo
|
|
|
|
### Array original
|
|
|
|
```javascript
|
|
this._dashboardDataset = [
|
|
{ Type: 'MATERIAL_STATUS', Key1: 'MAT1', Key2: 'RED' },
|
|
{ Type: 'OTHER', Key1: 'X', Key2: 'Y' },
|
|
{ Type: 'MATERIAL_STATUS', Key1: 'MAT2', Key2: 'GREEN' }
|
|
];
|
|
```
|
|
|
|
### Supondo que:
|
|
|
|
```javascript
|
|
ColorMaterialFormatter.colorMaterialSubtitle('RED') // 'Vermelho'
|
|
ColorMaterialFormatter.colorMaterialSubtitle('GREEN') // 'Verde'
|
|
```
|
|
|
|
### Resultado em `chartData`
|
|
|
|
```javascript
|
|
[
|
|
{
|
|
Type: 'MATERIAL_STATUS',
|
|
Key1: 'MAT1',
|
|
Key2: 'RED',
|
|
DisplayStatus: 'Vermelho'
|
|
},
|
|
{
|
|
Type: 'MATERIAL_STATUS',
|
|
Key1: 'MAT2',
|
|
Key2: 'GREEN',
|
|
DisplayStatus: 'Verde'
|
|
}
|
|
]
|
|
```
|
|
|
|
## Diferenca importante em relacao ao `forEach`
|
|
|
|
Nesse caso, o codigo usa `map()`, que cria um novo array com novos objetos.
|
|
|
|
Isso e diferente de um `forEach()` alterando diretamente os objetos originais.
|
|
|
|
### Vantagem disso
|
|
|
|
- o codigo fica mais declarativo
|
|
- evita alterar a lista original sem necessidade
|
|
- facilita manutencao e leitura
|
|
|
|
## Resumo simples
|
|
|
|
Esse trecho:
|
|
|
|
1. pega os dados do dashboard
|
|
2. filtra apenas os itens do tipo `MATERIAL_STATUS`
|
|
3. cria uma nova versao de cada item
|
|
4. adiciona o campo `DisplayStatus` com um valor formatado para exibicao
|
|
|
|
## Conclusao
|
|
|
|
Para um dev junior, a ideia principal e lembrar:
|
|
|
|
- `filter()` serve para **selecionar**
|
|
- `map()` serve para **transformar**
|
|
- `...item` serve para **copiar as propriedades do objeto**
|
|
- `ColorMaterialFormatter.colorMaterialSubtitle(item.Key2)` serve para **formatar um valor para exibicao**
|
|
|
|
Esse e um padrao muito comum em JavaScript moderno quando trabalhamos com listas de dados.
|