4. Objects - JSON

Alright! One of the major pieces of any JS program are objects. Objects take many forms, but today we'll focus on JSON (JavaScript Object Notation). Compared to other types of objects, JSON objects tend to be a little more free-form.

Objects are collections of key/value pairs. You can almost think of them as a more structure array. Let's see one real quick.

Once again, messing with your pogram a bunch here

async function main() {
    let obj = {
        key1: "value1",
        key2: "value2"
    };

    console.log(obj);
}

main();

Output should be pretty simple

{ key1: 'value1', key2: 'value2' }

Alright! Let's discuss! We use some simple notation let obj = {} then crammed in a few key/value pairs. When we log that out, we get a list of those key/value pairs. In the case of this object, all the values were simple strings.

Let's get more interesting!

async function main() {
    let obj = {
        string: "My cool string!",
        number: 128,
        boolean: true,
        someThing: undefined
    };

    console.log(obj);
    console.log(obj.string);
}

main();

Look at this stuff huh? You can name your keys anything you want (as long as it's unique to that obj), and the values can be just about anything. More wonderfully, you get any value by accessing its key!

Think to how much more helpful this could be in a lot of situations compared to using an array. In an array, to access a specific value, you'd go to know the right index. With objects, this becomes way more easy to reference!

Let's mix this up a bit

async function main() {
    let obj1 = {
        string: "My cool string!",
        number: 128,
        boolean: true,
        someThing: undefined
    };

    let obj2 = {
        string: "My other cool string!",
        number: 256,
        boolean: false,
        someThing: "Look this one is defined!!!!"
    };

    let arr = [obj1, obj2]

    console.log(arr);
    console.log(arr[1].string);
}

main();

Here we've got a couple objects, each with a unique variable name. They have the same keys, but that's ok, since inside the object, the key names are unique.

We initialize a new array with two items, obj1 and obj2. From there, we can actually specify an index of the array, and access a key in that object!! That becomes supremely useful when we get into functions!!

To help prep you for some future posts, here's a thing that's soooooooo helpful about Objects when you get into functiosn (next big post).

async function main() {
    let obj1 = {
        string: "My cool string!",
        number: 128,
        boolean: true,
        someThing: undefined,
        "key with spaces": "Does spaces mean something in keys?"
    };

    let keysArr = Object.keys(obj1);

    console.log(keysArr);
    console.log(obj1["key with spaces"])
    console.log(obj1[keysArr[4]])
}

main();

That Object.keys() thing is a method for Objects that's built into JavaScript. What it does is gives you back a shiny little array of all the keys (represented as a string - that's important) from the object you choose! Note that keys can be strings, and with the [] brackets we can type in the string to get its value. Since the keysArr is an array of strings of each key in obj1, we even get fancy by using the value of a specific index in the array, to indicate the key want. Whew. That was a mouthful.

On to functions!