John'Sters
John'Sters

Reputation: 195

JavaScript studies. How Map() code are being executed?

Good evening.

I'm really struggling to get my head around this and I'm not sure if I'm missing something really stupid, but here is my code and my question.

const question = new Map();

question.set('question', 'What is the official name of the latest major JavaScript version?');
question.set(1, 'ES5');
question.set(2, 'ES6');
question.set(3, 'ES2015');
question.set(4, 'ES7');
question.set('correct', 3);
question.set(true, 'Correct answer :D');
question.set(false, 'Wrong, please try again!');

for (let [key, value] of question.entries()) {
    if (typeof(key) === 'number') {
        console.log(`Answer ${key}: ${value}`);
    }
}

const ans = parseInt(prompt('Write the correct answer'));

console.log(question.get(ans === question.get('correct')));

Can someone please explain to me how, when I insert the right value into the prompt box; the interpreter?... knows to check the next line of code to display "Correct" or "Wrong in the console? depending on my input. I know we have a key of correct and its value is set to 3 but when do we tell it to execute the next lines of code depending on my answer? Does it just parse through the whole code, see a true statement and then executes whatever it is attached too, else execute the false statement? How, why? Apologies if I'm not coming through very clearly.

Upvotes: 0

Views: 50

Answers (1)

trincot
trincot

Reputation: 350657

Your Map has an entry for key true and one for false. One of them is retrieved by using a key that corresponds to this expression:

ans === question.get('correct')

This expression returns true when the given answer is equal to the correct one, and false otherwise. This boolean result is then used as key for the next lookup in your set:

question.get(ans === question.get('correct'))

This effectively retrieves the value for either false or true -- as stored in your Map. And so the correct phrase is retrieved (and displayed).

If you would write that magic line a bit more verbose, it could look like this:

let output;
if (ans === question.get('correct')) { // get() returns 3 here.
    output = question.get(true); // This retrieves 'Correct answer :D'
} else {
    output = question.get(false); // This retrieves 'Wrong, please try again!'
}
console.log(output); 

But realise how ans === question.get('correct') is a boolean expression, meaning it represents false or true, exactly what you want to pass as value to question.get in order to retrieve the phrase to be output.

So, instead of the if construct you can do:

let isCorrect = (ans === question.get('correct')); // false or true 
let output = question.get(isCorrect); // This retrieves one of the two phrases
console.log(output); 

And what those three lines do can be shortened into just one line:

console.log(question.get(ans === question.get('correct')));

NB: using Maps in this way doesn't look right. You should really use an array for the questions, and plain object(s) for the other stuff.

Upvotes: 2

Related Questions