DEV Community: Karen Efereyan

A conversation with the 'this' keyword in Javascript

Karen Efereyan — Fri, 18 Sep 2020 11:24:25 +0000

'This' is one of the most confusing concepts in Javascript. Here's the sad news. It is just as important to understand it as it is hard to understand it. Hahaha. No pun intended. I managed to get a closed interview with 'this' and in here I will share what we talked about.

Karen : Hi 'this'. It is an absolute pleasure to meet you. On behalf of developers all around the world, we have a great need to get to know you better.

this : Hi Karen! That's absolutely fine. I'm suprised that you had the courage to approach me. Time and time again, the other developers have been too scared to talk to me. What would you like to know?

Karen : Thanks for the compliment. I would like to know more about you. Who are you, 'this'?

this : Well, at the very basic. I am a property of any execution context in which I am called. The value I hold depends on the context or situation in which I am used. This value is determined by how the context I am used in is called during runtime.

Karen : Waow. That is amazing. I can almost imagine you as a chameleon. You can change whenever you want to. Can you give us a few examples of how your value might change based on execution context?

this : Absolutely! Let's get started. You're Karen right? How old are you and what is your profession?

Karen : Hmmn! I'm 17 and I am a full stack developer.

this : Lit! First, I will show you what my execution context is when I am used inside an object method. Permit me to quickly create an object called Karen, like so....

const developerKaren = {
  age: 17,
  profession: "Full stack Developer",
  func :function() {
    return this.age;
  },
};

console.log("Karen, it is so nice to know that you are " + 
 developerKaren.func());

Now, can you guess what the value of the console.log will be?

Karen : I am not sure! You tell me

this: Okay, in this case, the console.log will output the following.. Karen, it is so nice to know that you are 17.

Karen : Hmmn! That's a little weird. this.age translated to 17? How's that?

this : Well, remember I said that my value depends on the context in which I am called. In this case, since I am being used inside an object method, which is how functions inside objects are called in javascript, I refer to the object whose method is called. In this case, I am being called on the developerKaren object and hence one of my keys, age can be accessed.

Karen : Hmmn! I think I get you now.

this : Just so we are sure, what do you think the console.log outputs in this case?

var karen = {
 age : 17, 
 profession : "Full Stack Developer"
}

function standAlone(){
return this.age;
}

karen.func = standAlone;
console.log(karen.func());

Karen : Mad oh! Now I'm confused!

this : Hahaha! You need not be. Let's look at it together. In the first block, karen is still an object with two keys, age and profession. Now I created a new function called standAlone that returns this.age.

Karen: Exactly my point. Just what does this refer to here?

this : That's a good question. It doesn't refer to anything just yet. But what happens when I say, karen.func = standAlone?

Karen : I still don't get it.

this : That's fine. Can you remember what karen is?

Karen : Sure! That's an object with the keys age and profession.

this: Exactly, now by saying karen.func = standAlone, I just created a third key in the karen object and that key holds the function standAlone as its value. Can you now figure out what 'this' will refere to?

Karen : Oh now! I get it. this now refers to the karen object and it now has three keys, age, profession and func.

this : Exactly! I knew you were brilliant

Karen : Thanks! So, in essence, this is the same as the previous example.

this : You can say so. I brought out this example to prove a point. My value when used in an object method is not affected by where the function is defined. What matters is that the function, or better called method is invoked as a member of an object. That way, I can refer to the object and then I can be used to access all the object's other properties.

Karen : Waow! That was such a beautiful explanation.

this : Thanks, Karen

Karen : Are there any other contexts in which you can be used?

this : You bet! Let's talk of another context in which my value will be different. When I am used in the Global context. The global context in simple terms means that I am invoked outside of any function. In this case, I refer to the global object.

Karen : What is the global object?

this : I knew you'd ask. The global object simply refers to the window object , especially in web browsers. Take a look at this example,

console.log(this === window); 

a = 37;
console.log("The value of this in the global context is " + this.a); 

this.b = "MDN";
console.log(this.b)  
console.log(window.b)

What do you think the value of the first console.log will be?

Karen : That would be true

this : that's right. since this in the global context is equal to window object then they would be equal. How about the second console.log()?

Karen : The value of this in the global context is 37?

this : That's right. How did you reach that conclusion?

Karen : Well, since a is not declared inside any function or class, its just sitting on the window object, hence this.a will be the value of a on the window object which will be 37

this : That's absolutely correct. The same applies for the last two console logs(). their values will be MDN since window. b = "MDN" and this.b ="MDN" is simply assigning the value MDN to a the window object as a member. Have you been enjoying our discussion so far?

Karen : Absolutely! Let's move on

this : Sure, the next context to talk about is the function context. When used in a function, the value I hold will depend on how the function is called. Here is an example:

function f1() {
  return this;
}

f1();

What do you think 'this' refers to in this case?

Karen : This is a little confusing. I'm thinking the window object? But I am not sure.

this : That's fine. You are right. But we need to be sure. Why would I refer to the window object in this case? Look carefully and see if you can figure out the reason.

Karen: Hmmn! I think it refers to the window object since at the point of its call, it is not been explictly bound to an object or anything of that sort.

this : Exactly! You saw above that while the place where the function is defined doesn't really matter, where it is invoked matters because that will determine the value of 'this'. In this case f1() is being invoked, but not as a member of an internal object so it automatically defualts to the global object.

Karen : Okay! That makes a lot of sense.

this : However, while still under this function execution context. I have to introduce you to a friend. He's called 'strict'

Karen : Waow!

Strict : Hi there, Karen. I see that you've been having a fruitful discussion with my friend 'this'.

Karen : That's true. It's a pleasure to meet you. Can I get to know you?

Strict : Sure, I am strict and I prevent you from writing sloppy code.

Karen : Nice to know!

this : So strict, could you explain how using you can affect what I refer to while in the function context?

Strict: Sure! Karen, take a look at this example

function f2() {
  'use strict';
  return this;

f2();
}

what do you think this would refer to in this case?

Karen : The window object?

Strict: Nah! Look closer. Do you see this string 'use strict'?

Karen : Yes, I see it.

Strict : If you were writing sloppy code, this would have referred to the window object but not when I am around. Since I am here when f2() is invoked, it will not refer to the global object. Rather, it's value will be undefined.

Karen: hmmn! That's weird.

Strict : Is it though? Think of it logically. Would you really want a function invocation to refer to the window object? Anyways, even if you did, that would be sloppy code and I would not allow it.

Karen: Hmmn, Strict. You sound like someone who doesn't take nonsense.

Strict : To be fair, I play a lot but I am strict when it comes to allowing people to write sloppy code. We don't do that here.

Karen : hahaha! Noted!

this : Thanks friend. Karen, are you tired yet?

Karen : Not a bit. This is so much fun! Any more gems to share?

this : Sure! Let's talk about what I refer to in the class context. There are some similarities between my value in classes and functions but there are little cavaets. Let's discuss them.
Within a class constructor, 'this' is a regular object. All the non-static methods of the class are added to the prototype of this.

Karen : This time around, I don't get it at all.

this : No worries! I'll explain as best as I can. Understanding what I mean in this context has to be the most difficult. Let's use an example to explain

class Example {
  constructor() {
    console.log(this.first);
  }
  first(){
  return("I am a nonstatic member of class Example")
  }
  second(){}
  static third(){}
}

new Example();

In this example, there are certain things we must understand. First, a constructor is a method that is automatically called every time an object is created out of a class. In this case, within the constructor function, I am logging this to the console. Can you guess what the value will be?

Karen : Not at all

this : Within the class constructor, I am a regular object, ie one that can access all the other non-static members of the class, like the first and second functions. Therefore, in this example, once the new object of class example is created, it automatically runs the construtor in which case, this is returned ...

second(){
return ("I am another member of this class")
}

I will drop some helpful resources to help you read more on my usage in the 'class context'

Karen : Okay! That will be helpful

this : There are about 2 or 3 more contexts to talk about. But I am getting tired.

Karen : Awwn! You've been a huge help to me today. I'm sure the other developers will be happy to learn all you've taught me so far. Maybe we could schedule another interview soon?

this : Definitely! It was wonderful speaking to you, Karen.

SUMMARY

Here are the common contexts in which the 'this' keyword can be used. We have spoken about some of them. Be sure to read up on the others.

Global Context
Function Context
Class Context
Derived Class Context
this in arrow functions
this in object methods
this as a constructor .... and much more.

That was a hypothetical interview between me and the 'this' keyword. I hope in some way, I have simplified your understanding of this difficult concept. I did not want the article to be too long so that full understanding can be derived. If you would like a part two where I dive deep into the other contexts where the 'this' keyword finds usage, kindly let me know. Also, this is the first post in a series, where I aim to help us attain mastery of some of the weirdest Javascript concepts. Yes, myself included. If you would be interested in that series, please drop a comment down below.

In the meantime, here are some helpful articles to help you solidify your understanding of the 'this' keyword.

this - MDN
this - W3Schools
this - tutorialsTeacher

Contact Me:
Twitter

Chrome Extensions Every Developer Should Have

Karen Efereyan — Mon, 14 Sep 2020 11:36:35 +0000

Yesterday, I was having a google meet call with a developer. In the middle of the call, she had to show me something on her github profile and so she shared her screen. The first thing I noticed was that her github was in dark mode. How cool is that, I thought? I had always hated light mode. It gave me headaches. So I asked her, how were you able to implement dark mode on your github profile? Then she told me about OctoTree. What is octoTree I asked? Never mind, I said. I'll make my research on google.

My research led to me finding out not only about OctoTree but about some more awesome chrome extensions that I think every developer should know about and start using. Let's dive in.

AWESOME CHROME EXTENSIONS FOR EVERY DEVELOPER

1.OctoTree : This extension enhances Github code review and exploration. Added to that are some features like dark mode(My fav), code font setting, book marking, sidebar docking etc. Octotree feels a lot like Visual Studio Code in Github. My thoughts.....

Here is how it looks

Cute, innit?
Here is a direct download link : https://chrome.google.com/webstore/detail/octotree/bkhaagjahfmjljalopjnoealnfndnagc

2.Wappalyzer : This browser extension is a technology profiler that shows you what websites and web applications are built with. Curious as to what technologies, frameworks, Javascript libraries and more are used to build a website or a web application? Just use Wappalyzer.

Here is how it looks

Here is a direct link to add it to your browser :
https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg?hl=en

3.Web Developer : What a weird name for an extension. What is does is far from weird though. It's amazing. This browser extension adds a little toolbar button with various web developer tools pertaining to images, forms etc.

Here's how it looks

Here is a direct link to add it to your browser :
https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm

4.Windows Resizer : Responsive web design is one of the most important aspects of development. This extension helps you re-size the browser's window in order to emulate various device resolutions. It helps web designers and developers test their layouts on different browser resolutions.
The resolutions list is completely customizable (add/delete/re-order).
You can set the window's width/height, window's position, preset icon (phone, tablet, laptop, desktop) and even the option to apply the new dimensions to the entire window or just to the viewport.
It also features customizable global key shortcuts, an option to export your settings and import them on another computer! So amazing.

Here is how it looks

Here is a direct link to add it to your browser: https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=en

5.Check My Links : This browser extension is a link checker that crawls through your webpage and looks for broken links. It is well suited for web developers working on a web application or website with multiple links. It saves you the stress of manually searching for broken links. It highlights for you the links that are broken, valid, redirect to another page and more.. So handy.

Here is how it looks
Here is a direct link to add it to your browser : https://chrome.google.com/webstore/detail/check-my-links/ojkcdipcgfaekbeaelaapakgnjflfglf?hl=en

6.What Font : Knowing what typefaces are used on web applications and websites has never been easier. With this extension, you could inspect web fonts by just hovering on them.It also detects the services used for serving web fonts. Supports Typekit and Google Font API.

Here is how it looks

Here is a direct link to add it to your browser :
https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en

7.ColorZilla : This is a browser extension that assists web developers and graphic designers with color related tasks. Simply hover over an element in a website or application to get all the information related to its color. It includes a Color Picker, Eye Dropper, Gradient Generator and much more....
It is very similar to Color By Fardos. Be sure to check that out too.

Here is how it looks

Here is a direct link to add it to your browser :
https://www.colorzilla.com/chrome/

8.Web Developer Checklist: This browser extension helps to analyze and check their websites or web applications for violations of best practices in web design.

Here is how it looks

Here is a direct link to add it to your browser : https://chrome.google.com/webstore/detail/web-developer-checklist/iahamcpedabephpcgkeikbclmaljebjp?hl=en

9.CSS Viewer: This browser extension makes it so simple to access the CSS properties of an element by simply hovering over on it. It is very similar in functionality to the Code Cola extension.

Here is how it looks

Here is a direct link to add it to your browser :
https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce?hl=en

10.Pesticide: This is the absolute easiest way to visualize box sizing in CSS. Don't believe me? Take a look at this. With pesticide, you see every element as a box with borders around them. See how the borders, margins, paddings and more affect the element. It is a pretty great extension.

Here is a direct link to add it to your browser:
https://chrome.google.com/webstore/detail/pesticide-for-chrome-with/eipbgplchlidkojmppclhkechkhmlefi?hl=en

Which of these extensions will you be trying out?
Comment below

If you found this article useful, please share it.

Contact Me :
Twitter : https://twitter.com/EfereyanK