Question: Consider the simple following HTML code:

```
<input id="dict_field" type="text"/>
<button id="translate_btn" type="button" class="btn">translate</button>

```

The user inputs something and clicking the button triggers a function that returns a translation.

And the JQuery code:

```
$(document).ready(function(){

  $('#translate_btn').click(function(){
    var word = $('#dict_field').val();
    var translation = "";
    translation = translate(word (, dictionary?));
    // For simplicity for now just display the result in the same input field
    $('#dict_field').val(translation)
  });

});

// pseudo code. How to implement this and build the dictionary I need?

function translate(word (, dictionary?)){
  if word in dictionary.keys() -> return dictionary[word]
  else return "no such word in dict"
}

```

Given the following:

1. The translation needs only to be one way (key to value).
2. The dictionary is custom made (meaning I have to build it, I cannot count on external API such as Google's).
3. I estimate the size of the dictionary keys could be of the order of thousands, say between 1 and 5000.
4. Not sure if related but eventually I'd like the translation to happen in real time (as soon as the user finishes the input without need of a button click). This for now is secondary.

What is a good way, "objectively", to build a map/dictionary {key:value} to implement a translation function/API? Any detail can be considered, such as speed, scalability, cost etc., keeping in view my above requirements.

I've little experience with this kind of things, but I have some thoughts, such as:

1. Use a very long js file containing the dictionary (might not be a good idea)
2. Store everything in a text file and read from there
3. Look at some database (but won't that be overkill?)

Appreciate valuable suggestions. Thanks for any help.

Answer: 
Store it as a text file, e.g. CSV.

```
foo,bar
baz,quux

```

Then fetch it with ajax, and split it. You can optimize this, but not likely required.

```
var dict = text
  .split('\n')
  .map(function(x) { return x.split(',') })
  .reduce(function(acc, pair) { acc[pair[0]] = pair[1]; return acc }, {});

```

Then `dict['bar'] === 'quux'`.
You can use an object `{"key":"value"}` or an array of arrays `[["key", "value"]]` or an array or array of objects `[{"key":"value0"}, {"key":"value1"}]`; where the latter two would allow more than one definition for the same word, to handle equivocal languages; and the ability to include metadata relating to the word or term within the array or object, for example an [audio representation of the spoken word](https://stackoverflow.com/questions/44346410/how-to-create-or-convert-text-to-audio-at-chromium-browser).