//when a variable is declared with let, it is only available within that block
                //var is scoped to the function (scope is too wide)
                //const is like let, however it is not reassignable. Use let only when you need to reassign variables.

                for(let i = 0; i < 5; i++) {
                    console.log(i)
                }
                //i is not accessible here

                const x = 5;

            const person = {
                name: "Mosh",
                //walk is a "METHOD" inside the person object
                //NEW -> we don't need to write key: function example(), etc... we can just write example()
                walk() {},
                talk() {}
            }
            person.talk()

            const targetMember = 'name'
            //We could dynamically change the property accessed in the object by assigning a variable inside the brackets
            person[targetMember] = "John"
            console.log(person.name)

            const person = {
                name: "Mosh",
                walk() {
                    //'this' always returns a reference to the current object
                    console.log(this)
                },
            }
            person.walk()

            //Not calling walk method, just getting reference to the function
            const walk = person.walk
            console.log(walk)

            //walk() returns undefined... 'this' when called within an object, returns reference to the object
            //BUT in this case below, 'this' when called as a function outside of an object returns undefined --- when you are in 'strict mode'
            //If 'strict' is not enabled, it returns the window object
            walk()

            const person = {
                name: "Mosh",
                walk() {
                    console.log(this)
                },
            }
            person.walk()

            //FUNCTIONS ARE OBJECTS IN JAVASCRIPT... they have the bind method
            //When we call bind, the first argument is used to determine which object we refer to for the value of 'this'
            const walk = person.walk.bind(person)
            walk()

            //These two functions are exactly the same
            const square = function(number) {
                return number * number
            }
            const square2 = (number) => number*number

            console.log(square(5))
            console.log(square2(5))

            const jobs = [
                { id: 1, isActive: true},
                { id: 2, isActive: true},
                { id: 3, isActive: false}
            ]
            //Filter iterates over the array. It takes each element in the job object and returns true or false. Made easy with arrow functions.
            const activeJobs = jobs.filter(job => job.isActive)

            console.log(activeJobs)

            //Arrow functions do not rebind 'this'
            const person = {
                talk() {
                    //The function in the setTimeout function is not attached to the person object
                    //OLD way is to set the following variable:
                    var self = this;
                    setTimeout(function() {
                        console.log("self", self)
                    }, 1000)
                }
            }
            const person2 = {
                talk() {
                    //Arrow functions do not rebind 'this' - in other words, if we change the callback function to an arrow function
                    //It will inherit the 'this' keyword. Returns 'this' in the context where the code was called
                    setTimeout(() =>
                        console.log("this", this)
                    , 1000)
                }
            }
            person.talk()
            person2.talk()

            //In React, we used map() to render lists
            const colors = ['red','green','blue']
            //Pass a callback function into map() and transform each element in the array (does not modify original array)
            //We also utilize template literals using the key next to 1 (back tick) **literals not working here
            const items = colors.map(color => <li>$color}</li>)
            console.log(items)

            const address = {
                street: 'HI',
                city: 'MY',
                country: 'NAME'
            }
            // //These 3 lines are directly equivalent
            // const street = address.street
            // const city = address.city
            // const country = address.country

            // //To this 1 line!
            // const {street,city,country} = address

            // //Targets the street key
            // const {street} = address

            //Changes the name of the street key for use later
            const {street: st} = address

            console.log(st)

            let first = [1,2,3]
            let second = [4,5,6]

            //Old way of doing things
            let combined = first.concat(second)

            //New way! Spread operator ... Shortens code and also lets you view the array as if it will look
            combined = [...first,'a',...second,'b']

            //Easily clone an array
            let clone = [...first]

            console.log(first)
            console.log(clone)

            //Apply spread operator on object
            first = { name: 'Mosh' }
            second = { job: 'Instructor' }
            combined = {...first,...second, location: 'Australia'}

            console.log(combined)

            clone = {...first}

            console.log(clone)

            //Classes are useful because duplicating objects reuses methods
            class Person {
                constructor(name) {
                    this.name = name
                }

                walk() {
                    console.log("walk")
                }
            }
            const person = new Person("Paul")