2

Vendo um pouco sobre a linguagem JavaScript, observei um código em que uma sintaxe que não conhecia.

No código em questão tenho duas variáveis com linguagens contendo os valores passados para a função e a função que retorna umobjeto:

let languages = 'Javascript';
let notExist = 'Go';
const program = (languages) => ({
  'Javascript': 'Belongs to the js universe!',
  'Typescript': 'Belongs to the js universe!',
  'Ecmascript': 'Belongs to the js universe!',
  'Default': 'Does not belong to the js universe!!'
})[languages];

console.log(program(languages));

console.log(program(notExist) ? program(notExist) : program('Default'));

Minha dúvida se trata da declaração do array no final da função contendo a variável languages:

  • Para que serve o array e qual sua utilidade?
  • No final de funções assim, posso declarar outros tipos de valores como {} por exemplo?

2 Respostas 2

5

Primeiro eu sugiro mudar a estratégia de aprendizado. Primeiro aprende os conceitos depois vai para códigos. Estamos vendo muitas pessoas perguntando aqui usando a mesma estratégia que você e nossa observação é que não está dando certo, as pessoas vão patinando no aprendizado.

Array

Começo pela pergunta explicitamente colocada na pergunta.

Para que serve o array, qual sua utilidade?

O que é na verdade o array?

Especificamente esse array funciona mais como um array associativo, também chamado em algumas situações de dicionário, um hash table ou mapa. Pode ver mais em Qual a diferença entre um mapa, um dicionário, um array associativo e uma tabela hash?.

E é assim que JavaScript monta seus objetos. Veja também Objetos são semelhantes a arrays?.

Então nesse caso você tem uma lista de elementos com chave e valor. A chave servirá para acessar um dos elementos e obterá o valor correspondendo.

A outra pergunta é confusa não sei responder e a outra resposta não responde também, se era importante deveria reescrever essa parte para ficar mais claro.

Código adequado

Em um exemplo assim faz pouco sentido porque todas informações estão disponíveis e esse código em específico é uma enorme complicação. Ele serve apenas para apresentar o mecanismo. É bom deixar isso bem claro.

Então através da variável languages será determinado qual é o elemento que está interessado. Note que se a variável vier um dado que não bate com qualquer chave existente dará erro. Esse código não é um bom exemplo por isso também.

E na verdade demonstra que esse mecanismo está bem errado, um simples switch resolveria bem o caso.

Aí entramos em outro uso errado do mecanismo, que é criar uma função anônima para algo que não precisa ser anônimo.

O que estou querendo dizer é que está usando um exemplo complexo e provavelmente vai pegar vícios de programação fazendo assim.

Entender um conceito é bom, aprender como um mecanismo funciona é bem interessante, mas muitos exemplos que colocam por aí não ensinam onde usar, como usar, não dão um contexto, e por isso ensinam errado.

Vou te passar como esse código pode ser melhor escrito, mesmo que seja diferente do que está originalmente na pergunta porque é assim que deveria fazer. O código da pergunta desensina.

function program(languages) {
    switch (languages) {
    case 'Javascript':
    case 'Typescript':
    case 'Ecmascript': return 'Belongs to the js universe!';
    default : return 'Does not belong to the js universe!!'
    }
}

console.log(program('Javascript'));
console.log(program('Go'));

Coloquei no GitHub para referência futura.

Talvez um if funcionasse até melhor, mas sei lá se depois isso não seria mudado. Exatamente assim acho que funcionaria bem até com um operador condicional:

function program(languages) {
    return (languages === 'Javascript' || languages === 'Typescript' || languages === 'Ecmascript') ? 'Belongs to the js universe!' : 'Does not belong to the js universe!!';
}

console.log(program('Javascript'));
console.log(program('Go'));

Coloquei no GitHub para referência futura.

Além de mais simples tende a ser mais rápido de execução, e um pouco mais robusto.

No contexto usado não tem porque usar algo mais complicado que isso. Pode existir contextos que algo parecido seja útil? Pode, mas ele precisaria ser demonstrado por completo, colocado desta forma leva as pessoas programarem de forma confusa.

Claro, todo mundo pode escolher a forma que acha melhor fazer, eu só dei a simples. Por exemplo, alguém deve ter achado que essa forma é errada por ter negativado a resposta, é típico de quem prefere coisas confusas.

3
  • Valeu pela explicação Maniero, conheço sobre arrays, só não havia entendido o seu uso ali naquele contexto declarado logo depois da função. Obrigado!
    – user194399
    Commented 6/07/2020 às 14:02
  • Você explicitamente perguntou sobre isso: Para que serve o array e qual sua utilidade?. Eu introduzi isso e te mostrei que nesse contexto essa não é a forma correta de fazer esse código e justifiquei na resposta.
    – Maniero
    Commented 6/07/2020 às 14:04
  • 1
    No primeiro parágrafo já ganhou meu voto de utilidade, tem que o deixar em negrito. Commented 6/07/2020 às 18:41
4

Fora a notação similar, isso nada tem a ver com array. Nesse caso, os colchetes denotam um assessor de propriedades.

Note, no seu exemplo, que você está criando um objeto através de sua forma literal:

{
  'Javascript': 'Belongs to the js universe!',
  'Typescript': 'Belongs to the js universe!',
  'Ecmascript': 'Belongs to the js universe!',
  'Default': 'Does not belong to the js universe!!'
}

Existem duas principais formas de acessar as propriedades de objetos:

  • Notação ponto;
  • Notação colchete.

Veja a diferença entre elas:

const obj = {
  'Javascript': 'Belongs to the js universe!',
  'Typescript': 'Belongs to the js universe!',
  'Ecmascript': 'Belongs to the js universe!',
  'Default': 'Does not belong to the js universe!!'
};

// Notação ponto:
console.log(obj.Javascript);
console.log(obj.Typescript);

// Notação colchete:
console.log(obj['Ecmascript']);
console.log(obj['Default']);

Mas note que, na sintaxe de assessor via colchetes, você pode passar uma string, o que te permite um certo dinamismo nesse acesso, diferentemente da outra notação de ponto, que é "hard-coded".

Esse dinamismo te permite fazer coisas como:

const obj = {
  'Javascript': 'Belongs to the js universe!',
  'Typescript': 'Belongs to the js universe!',
  'Ecmascript': 'Belongs to the js universe!',
  'Default': 'Does not belong to the js universe!!'
};

const prop = 'Ecmascript';

console.log(obj[prop]);

A partir daí você pode mapear um valor a outro. No caso da pergunta, você está mapeando o nome de uma linguagem de programação a uma determinada string.

Note que, conforme visto anteriormente, a notação de colchete nos permite acessar essas propriedades dinamicamente, veja:

let exist = 'Javascript';
let notExist = 'Go';

const obj = {
  'Javascript': 'Belongs to the js universe!',
  'Typescript': 'Belongs to the js universe!',
  'Ecmascript': 'Belongs to the js universe!',
  'Default': 'Does not belong to the js universe!!'
};

console.log(obj[exist]);
console.log(obj[notExist]); // undefined

Note, no exemplo acima, que declaramos duas variáveis par atingir isso. Contudo, isso não é algo necessário. Objetos te permitem fazer isso diretamente, assim:

console.log(
  {
    name: 'Foo',
    age: 100
  }.name
); // Foo

console.log(
  {
    name: 'Foo',
    age: 100
  }['age']
); // 100

Assim você pode criar funções (como foi feito na pergunta) que isolam esse comportamento. Você pode ainda criar uma função que retorna um valor padrão caso a propriedade não exista (e retorne undefined):

function getLanguageFeature(language) {
  return {
    'Go': 'Simple',
    'JS': 'Bizarre',
    'TS': 'JavaScript, but type safe'
  }[language] || 'Unknown language';
}

console.log(getLanguageFeature('Go')); // Simple
console.log(getLanguageFeature('JS')); // Bizarre
console.log(getLanguageFeature('TS')); // JavaScript, but type safe
console.log(getLanguageFeature('WOOT')); // Unknown language

Note que utilizamos o operador OR (||) (em sua função de curto circuito) para garantir que retornemos a string Unknown language no caso de buscarmos por uma linguagem que não foi declarada no mapa. Isso porque os assessores de propriedade retornam undefined caso a propriedade acesada não exista.

Isso pode ser visto como uma alternativa para o switch statement. Em Python, por exemplo, essa construção não existe e dicionários são frequentemente utilizados como substitutos.

1
  • Show Luiz, muito bem explicado! Valeu :)
    – user194399
    Commented 6/07/2020 às 13:57

Você deve fazer log-in para responder a esta pergunta.