Convert HTML Entities: how and why my code can be simplified

JavaScript
1

Tell us what’s happening:
The first block of code was my original solution. The second block of code was my updated solution after looking at solution#3 for the problem. Both are solutions to the problem but one is better than the other.

Both solutions make sense to me but I wasn’t able to condense my original code on my own without seeing solution #3. I want to be able to see the redundancies and make my code more efficient.

Can someone explain why my original code was redundant ?
How I could have connected the dots from original solution to updated solution?

I want to be able to write more efficient code and I’m not sure of a process that can help me see my redundancies.

Thank you,
Lauren

Your code so far Part 1

function convertHTML(str) {
  //object where properties names are 
  let entities = {
    "&": "&",
    "<": "&lt;",
    ">": "&gt;",
    '"': "&quot;",
    "'": "&apos;"
  }
  
  //splits string into array of characters 
  let arr=str.split("")

  //iterates through array to find elements that are a property key in object, entities. If found, delete and replace with entities' property value
  arr.map((x)=>{
    if (entities.hasOwnProperty(x)){
      arr.splice(str.indexOf(x),1,entities[x]);
    }
  });
  //joins array back into a string
  str=arr.join("");
  return str;
}

console.log(convertHTML("Dolce & Gabbana"));//Dolce &amp; Gabbana
console.log(convertHTML("Schindler's List"));//Schindler&apos;s List```


**Your code so far Part 2**
      
```js

function convertHTML(str) {
//object where properties names are 
let entities = {
  "&": "&amp;",
  "<": "&lt;",
  ">": "&gt;",
  '"': "&quot;",
  "'": "&apos;"
}

return str.split("").map((x)=>entities[x] || x).join("");
}

console.log(convertHTML("Dolce & Gabbana"));//Dolce &amp; Gabbana
console.log(convertHTML("Schindler's List"));//Schindler&apos;s List

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36.

Challenge: Convert HTML Entities

Link to the challenge:

2

Some of what makes the second solution shorter is just less verbose syntax. The big one there is the syntactic sugar of the ||. entities[x] || x; is functionally the same as

if(entities[x]) {
    return entities[x];
} else {
    return x;
}

The only logic in your code that you don’t need is the splicing. The Array.map() method will replace the current array item (x, in this case) with the return value of its callback. So your if block could have been:

if(entities.hasOwnProperty(x)){
    return entities[x];
}

And your code would have been functionally the same.

1 Like
3

I believe you are over thinking this.

Just get each word in string
see if entities[wordInString] exists
if so replace wordInString with entities[wordInString]

4

@ArielLeslie beat me to it. She explains it well!

Another thing to note: using bracket notation to access keys on an object will return undefined if the key does not exist.

Example: entities["hello"] would return undefined, which allows us to use the || operator in the shortened solution.

1 Like
5

really great explanation! thank you!