Writing a JSON Parser in JS pt 1: primitives
Tags: json, javascript, parser
Published: 2019-05-15 05:47:36

---
title: Writing a JSON Parser in JS pt 1: primitives
series: JSON parser
published: true
description: 
tags: JSON, javascript, parser
---

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.

```javascript
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.

```javascript
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

```javascript
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'`

```javascript
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.

```javascript
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](https://dev.to/tttaaannnggg/json-parser-pt2-arrays-2gbn)