DEV Community

mthomas7503
mthomas7503

Posted on

THIS is my first, subject related, post

I have just started coding pretty recently. I am learning how to code via a bootcamp, Flatiron Schools, and trying to juggle that with work.

So far, I have enjoyed every aspect of coding from learning strings right down to Big O and context. Personally, I think context is my favorite subject so far as the variable this and the overall concept is just incredibly interesting to me.

The way I understand it, as a newbie, is that the context is something created at the START of a program or invocation of a function and this represents an object that is passed onto a function the moment the function context, the memory allocated when the function is invoked, is created. However, the object passed is dependant upon where the function is invoked. If it's invoked globally, it is the global object or browser window, for JS in HTML, that is the object. If it is within an actually object, it is the ENTIRE OBJECT ITSELF. Suffice to say, this can be complicated, but it can also be helpful because you can use it to find out the properties and methods of an object if you call the variable or you can pass it to a function so that the it take the values from another object and work with them. I had a couple labs with this one and struggled particularly with bind() simply because it's built in return is a function that needs to be invoked rather than the invocation of the function it is to which it is attached.

For example:

const sweetSalad = {}

function createSalad() { this.vegetable = "lettuce";
this.fruit = "mandarin oranges"
this.dressing = "balsamic vinegarette"}
Enter fullscreen mode Exit fullscreen mode

If I call this function, this will have the value of the global object of either JS or the window, but ultimately it won't add anything to sweetSalad. Instead it will add, or try to add, it to the global context.

from the browser: window.fruit is now mandarin oranges

Using bind I could explicitly set it like so:

createSalad.bind(sweetSalad) 
Enter fullscreen mode Exit fullscreen mode

However, this will just return a functions that needs to be invoked.

The fun part for me comes in tying it together and using context and explicitly setting it to put all the pieces together and filling that object.

So,

const SweetSalad() = {};

function createSalad() { this.vegetable = "lettuce";
this.fruit = "mandarin oranges"
this.dressing = "balsamic vinaigrette"};

const tastySalad = createSalad.bind(sweetSalad);

tastySalad(); (invoking to create the object)

sweetSalad
//=> expect 
{vegetable: 'lettuce', 
fruit: 'mandarin oranges', 
dressing: 'balsamic vinegarette'}

Enter fullscreen mode Exit fullscreen mode

Of course, there is always the easier way of just using createSalad() as a constructor function and taking out the working of making a new variable like so:


const newSalad = new createSalad()

However the long way can also be fun sometimes just to help understand everything.

Regardless, I found myself using this quite often simply because it was better to use when constructing an object because constructor functions are fun, I.e.

const mtgLegendaries = new Color()

and because it just gives me more insight into what JS is doing under the hood. Will I use it more often as I learn code? I don't doubt. As such I will be looking into how to use this a bit more as time goes on because quite frankly, I am happy coding!

Top comments (0)