Writing a JSON Parser in JS pt 1: primitives

I'm gonna be teaching some students how to build a JSON parser, so I'll walk y'all through it first.

We can start our journey by understanding JSON.stringify, since we're basically going to reverse whatever it does. Let's feed some primitive values through it.

JSON.stringify(true) // returns 'true'
JSON.stringify(null) // returns 'null'
JSON.stringify('hello') // returns '"hello"'
JSON.stringify("hello") // returns '"hello"'
JSON.stringify(123) // returns '123'

JSON.stringify gives us a string back. This is good, because we can simply iterate through our string line by line, and figure out what sort of actions we need to take in order to create data that reflects the contents of this string.

How do we reason about this?

Luckily for us, the first character of our string will actually be enough information to let us know what type of data we've got. Let's start by thinking about primitives. They are as follows:

• String
• boolean
• null
• undefined
• number

Let's go down the list and talk about how we can identify each one. Luckily, each of these types of data starts with a different character, so we can simply check the first character of our JSON string to figure out what it is.

String

In JSON format, the first character of a string will always be a double quote. If we see a double quote at the beginning of our JSON string, we can simply chop off the first and last characters of the string (the starting and ending quotes) and return the resulting string.

We'll start our code here, by building a JSON primitive parser.

function JSONParser(jstring){
  if(jstring[0] === '"') return jstring.slice(1, jstring.length-1);
}

If we give it our '"hello"', we'll get 'hello' back.

So let's move on to the next type

Boolean

There are two possibilities here, a true or a false. We'll check for a t or f and return values accordingly

function JSONParser(jstring){
  if(jstring[0] === '"') return jstring.slice(1, jstring.length-1);
  if(jstring[0] === 't') return true;
  if(jstring[0] === 'f') return false;
}

Undefined / Null

We'll condense these two into one, since it's basically the same concept as the booleans. 'u' or 'n' instead of 't' or 'f'

function JSONParser(jstring){
  if(jstring[0] === '"') return jstring.slice(1, jstring.length-1);
  if(jstring[0] === 't') return true;
  if(jstring[0] === 'f') return false;
  if(jstring[0] === 'u') return undefined;
  if(jstring[0] === 'n') return null;
}

Numbers

Finally, if our first character is a number, we can simply convert it from a string to a number using Number. This is a bit different, since any character between 0 and 9 would let us know that we're dealing with a number.

Personally, I believe that the nicest way to do this is to avoid creating additional data structures, and avoid creating 10 more if checks.

function JSONParser(jstring){
  if(jstring[0] === '"') return jstring.slice(1, jstring.length-1);
  if(jstring[0] === 't') return true;
  if(jstring[0] === 'f') return false;
  if(jstring[0] === 'u') return undefined;
  if(jstring[0] === 'n') return null;
  if(jstring.charCodeAt() >= 48 && jstring.charCodeAt() <= 57) return Number(jstring); 
}

Why charCodeAt? charCodeAt checks the ASCII code of a specific character, and 0-9 are sequential. Thus, if our character falls between 48 and 57 (inclusive), we know it's a number. In this case, we can simply call Number on our string, and it'll convert the string into an int or float as needed.

Next, we'll deal with composite data, starting with arrays