Lambda School Pre-course 19: Learn to create methods on Objects, and utilize the ‘this’ keyword

There are nine units in Lambda School’s Full Stack Web Development Pre-course. I’m going to summarize what the pre-course covers for each of them. This material is basically ground-floor information that students need to know before they start the full course.

precourse19

Methods

The value of a variable in an object does not have to be a string, number or boolean right from the onset. It can be a function. Functions saved in an object are called methods, just like baked-in methods such as .length, .push and .pop.

A key (variable) can be declared in an object and its value can be set to a function. So, whatever value is in the function, or whatever value it reduces down to once its run, becomes the key’s value.

Methods are called using dot notation and trailing parenthesis and can include arguments, like any other function.

const newObject = {
  sayHiMethod: function() {
    console.log(‘Hi Everyone!’);
  },
}

newObject.sayHiMethod(); // Hi Everyone!

for…in Loops

Iteration is essentially the process of looping until a condition is met that ends the loop.

As per the Lambda School text:

Sometimes we want to iterate over each key:value pair in our object. With arrays we used a standard for loop and an index number variable. Objects do not contain numerical indexes so the standard loop will not work for objects. Javascript has a second type of for loop built in called the “for…in” loop. It is slightly different syntax, it starts the same but in the parentheses we will declare a variable, the keyword in, and the name of the object. This will loop over each key in the object and finish when all of the keys have been iterated over. We can use this key, and bracket notation, in our for loop to access the value associated with that key.

A “for/in” statement loops through each of the properties of an object. It runs a specified block of code from inside the loop once for each property. It does not follow a set order for each iteration – it essentially visits each key randomly until that iteration is complete, so its advised not to add or remove keys from an object using a for/in loop.

Apparently, the most practical use for the loop is to display the value of each key in an object for debugging purposes.

const user = {
  username: ‘dan.frehner’,
  password: ‘abc123’,
  lovesJavascript: true,
  favoriteNumber: 42,
};

for (let key in user){
  console.log(key);
  console.log(user[key]);
}

// username
// 'dan.frehner'
// password
// 'abc123'
// lovesJavascript
// true
// favoriteNumber
// 42

The ‘this’ Keyword

The this keyword refers to the object that it belongs to. Its basically a keyword that points to the object that owns it, mainly to simplify typing and coding. It makes code a little more readable, because when inside of an object, instead of essentially having type something like objectName.keyName, a programmer can use this.keyName to refer to a key inside of an object. Think of it like saying his/her instead of using a formal name when referring to someone in a group.

As per the Lambda School text:

Objects have a self referential keyword that may be applied in each object called this. When called inside of an object it is referring to that very object. this can be used to access other keys in the same object, and is especially useful in methods:

const user = {
  username: ‘dan.frehner’,
  password: ‘abc123’,
  lovesJavascript: true,
  favoriteNumber: 42,

  userSaysHi: function(){
    console.log( this.username + ’ says hi!’);
  },
};

user.usersaysHi(); // 'dan.frehner says hi!'

Note: the this keyword can sometimes be one of the more difficult topics in Javascript. We are using it very basically here, but the topic gets much more complex very soon.

Objects in Javascript

tl;dr: Everything in JavaScript is an object!

As per the Lambda School text:

In this lesson we learned what Objects are and the many ways to access values, call methods, and assign values. Many of these techniques looked very familiar, as if we had used them in virtually every aspect of our learnings so far. There is a pattern here, that is because EVERYTHING in Javascript is an Object. Arrays are just objects with numerical keys, Strings are objects under the hood with built in methods, functions are actually objects with their own special properties, the entire Javascript runtime is an object (window in a browser, or global in Node.js). The more you work with Javascript the more this will start to make sense to you. Just remember, everything is an object.

Leave a comment