some nice js fundamentals in here

matts-special-js-quiz.js

// 1. Create an object that has four properties. One property should be set so that the value is a number, another property set to a string, the third to an array, and the fourth to a function. This function should simply console.log the value of the first property.

const obj = {
    num: 1,
    string: 'string',
    array: [1,2,3],
    func: function() {
        // remember that arrow functions don't work with this keyword
        console.log(this.num)
    }
}
obj.func()

// 2. Write a factory function (to create objects) that takes one argument. It should use that argument to set the value of the first key of the object. The second key should be given the value ‘red’.

function Car(colour) {
    return {
        colour: colour,
        brand: 'holden',
        gears: 4,
        manual: true
    }
}
const redHolden = Car('red')
console.log(redHolden)

// 3. Make a bike object with a functional class pattern

function Bike(colour) {
    this.colour = colour,
    this.brand = 'giant',
    this.gears = 6,
    this.frame = 'carbon fiber'
}
const blueBike = new Bike('blue')
console.log(blueBike)

// 4. Can you access variables defined outside of functions within the scope of functions in JS? Show a simple example of this being used? (Define a constant in global scope and use that in a very simple function.)

// Yes you can!

const colours = ['red','blue','green','yellow']
function printColours() {
    // see here that colours is passes into printColours
    // javascript looks inside of the function for colours and can't find it so it then goes outside to the global scope where it finds it
    colours.forEach((colour) => console.log(colour))
}
printColours()

// 5. What two ways can be used to access the properties of objects in JS? Give examples of both (although assume the objects have been defined).

// dot notation
const num = obj.num
// square brackets
const arr = obj['array']
// destructuring
const { string } = obj

// 6. What is JSON? Be clear but concise.

// JSON stands for javascript object notation. It uses key value pairs in storing the data associated to it. It's just a very common data format / structure that we use in programming.

// 7. What is a callback?

// A callback is a concept in javascript that allows us to pass a function as an argument in a a method call 
// A callback can be sync or async
// A great example of this is using the getCurrentPosition method call, we don't know how long it will take to get the returned coordinate data, so this function takes an anonymous function as a parameter which itself takes the returned position data
// This function is only executed when the coordinate data is returned

// 8. Define a function with that takes two number arguments and a callback. The function will add the two numbers and pass them to the callback as an argument. Now call this function and in the callback simply console.log out the argument that has been passed through.

const addToCallback = (num1, num2, callback) => {
    const sum = num1 + num2
    return callback(sum)
}

addToCallback(10, 2, (sum) => console.log(sum))

// 9. Why do we use promises?

// Promises are used to represent the eventual successful completion (or failure) of an asynchronous operation 

// We use promises to take advantage of things like chaining, it's an easier way of handling multiple asynchronous operations

// 10. What are the two methods at our disposal if we have hold of a promise? What are the names of the functions that are related to these functions (that are called when the promise is fulfilled or fails)

// the two methods we have at our disposal are resolve and reject, in our promise we can execute some code (it might be asynchronous) and if it's successful we can call resolve, if it's unsuccessful we call reject
// the names of the functions that are related are .then and .catch, .then receives the value that was passed into the resolve method call as a parameter in it's callback
// same applies to .catch, it gets the value that was passed into the reject method call as a parameter in it's callback

// 11. What is the DOM?

// the DOM stands for the document object model
// it represents html (or xml) as a tree like structure where each node is an object representing a part of the document
// it's a logical tree, each branch of a tree ends in a node, and each node can contain many objects
// DOM methods like .querySelector allow you to programmatic access to the tree, whereby you can change the documents structure, style or content

const element = document.querySelector('.class')
element.innerText = 'something'