Javascript questions which don't deserve their own thread.

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Javascript questions which don't deserve their own thread.

AlphaKeny1: Feb 17, 2006

I'm doing a deep dive into JS to prepare for getting grilled in interviews. I read most of the "Javascript the good parts". I'm on class instantiation/OOP and prototyping right now and I think I somewhat get it. My background on OOP is from using Java in school, so JS is pretty different.

Anyway I'm reading this medium article and I'm a little lost on the subclassing section.
https://medium.com/@ariel.salem1989/pseudoclassical-subclass-instantiation-in-javascript-6e54a13ea3c4

quote:

Subclassing:
You may be thinking to yourself, that�s cool, but what if I wanted to use our redCar instantiation properties on some other car? Here�s where Subclassing comes into play. Much like Class Instantiation, we can create a Subclass based on the Class operator that inherits characteristics from the Class operator AND has its own unique properties:

var Location = function(color, movementSpeed, location) {
this.location = location;
Car.call(this, color, movementSpeed); // calling the previous
// Class operator allows our new subclass to inherit its
// properties.
}

Location.prototype = Object.create(Car.prototype); // this sets up
// the prototype relationship between the Subclass instantiation
// and the original Class (Car).
Location.protoytpe.constructor = Location.prototype; // since the
//previous line overwrote our prototype constructor, we must
//setup our Subclass relationship to its Constructor prototype
//object.
Now if we wanted to create a redCar and yellowCar with the same properties, we can do so without having to rewrite the location method one both of them:

var redCar = new Location("red", 10, 12);
//redCar = {color:"red", movementSpeed: 10, location: 12};
var yellowCar = new Location("yellow", 8, 15);
//yellowCar = {color:"yellow", movementSpeed: 8, location: 15};
var blueCar = new Car("blue", 6);
//blueCar = {color:"blue", movementSpeed: 6};
Since the blueCar is an instance of the Car Class, it does not have access to the Location subclass properties. This one-way relationship allows the Location Subclass to inherit properties from the Car Class while preventing the Car Class from accessing those properties.

So you can .call() on a class to pass it's this to a function/class, allowing your new function to inherit whatever you called? I'm lost on the next two lines, assigning Object.create(Car.prototype) and overwriting the constructor on the Location prototype. I don't think I get that part.

Also, are there any tips for what I should know and prepare for? My last job hunt I was never really asked a lot of front end/JS questions in an interview setting.

# ¿ Jun 11, 2022 21:59

Adbot: ADBOT LOVES YOU

# ¿ Apr 29, 2024 10:06

AlphaKeny1: Feb 17, 2006

I have a reference who mentioned the phrase pseudoclassical instantiation for a FAANG+ and I had no idea what it was so I was looking into it this morning.

And yeah I loving hate this in JS.

Why would you .call() for an object to inherit this... can't I just stick to binding methods?

Also my team moved to light OOP in JS so guess why I'm interviewing.

# ¿ Jun 11, 2022 23:23

AlphaKeny1: Feb 17, 2006

Thank you for the writeup, that is literally how I used classes in my last project complete with the extends keyword. Like I haven't used prototype poo poo that I have been reading in any of these places. I will def read that link you posted.

# ¿ Jun 12, 2022 01:22

AlphaKeny1: Feb 17, 2006

echinopsis posted:

the notion of arrow functions is less intuitive to me, but I am working on that.

Think of it as just another way of declaring a function.

const example = (parameter) => {
}

is the same as

const example = function(parameter) {
}

it's easier to write the arrow function.

So the w3school has this example in their event listener page:
element.addEventListener("click", function(){ alert("Hello World!"); });

which of course can be re-written to:
element.addEventListener("click", () => {alert("Hello World!");});

which is way easier.

# ¿ Jun 12, 2022 08:17

AlphaKeny1: Feb 17, 2006

I think for me it's an issue of consistency. Like if I'm doing

code:

.then(result => {

});

// or

addEventListener("click", e => handleClick(e));

// or

[...nodeElements].forEach(node => {
	// manipulate node
})

it makes sense for me to declare other functions that way

# ¿ Jun 12, 2022 22:52

AlphaKeny1: Feb 17, 2006

Yeah that was my guess too, when you are doing your index-x and index+x you should make sure that they are numbers and not strings. You can console log and even check the typeof, like console.log(typeof x).

# ¿ Aug 16, 2022 11:41

AlphaKeny1: Feb 17, 2006

Jabor posted:

For arbitrary objects that you know absolutely nothing about there's no "quick" way. Ultimately what you need to do is check the first object in the first array against every object in the second array to see if anything matches, and likewise for the second, third etc. objects in the first array - and that's not going to be a quick process for large arrays.

If I understand correctly, yeah I think this is correct. It would be better to take care of this when storing your data but if you can't and if your only option is to deal with two arrays of different objects then it might help to transform it using a data structure and then make comparisons after.

For example, iterate through the first array and create a hash map/set. Then iterate through the second array and compare it to the map using hasOwnProperty() or something. It will be "fast" in that it will be O(n) time but require additional space to create your map. There might be other optimization techniques as well.

# ¿ Dec 26, 2022 13:15

AlphaKeny1: Feb 17, 2006

I'm also glad you used const instead of let to assign the DOM node to a variable

edit: correct me if I'm wrong but I think your first example is a holdover from jquery where you'd have to query the selector each and every time you want to do something? Don't use jquery.

AlphaKeny1 fucked around with this message at 20:21 on Feb 17, 2023

# ¿ Feb 17, 2023 20:18

AlphaKeny1: Feb 17, 2006

wtf I didn't even know that was in js, I come from java and so I'm used to parseInt or Number. I guess I can see the case that you're typing less.

# ¿ Mar 6, 2023 20:36

AlphaKeny1: Feb 17, 2006

I'm not sure I understand, you can add new fullCalendars and sometimes it initializes at 0 width/height? Can you fix that initialization? Is something happening that causes these dimensions to change after page load, where fullCalendar needs to fit into each individual div which may or may not be different?

When you add a calendar it expands something and changes other dimensions?

It kind of sounds like you might want to fix those things first if you can. Hide/unhide handlers should just do hide/unhide things without other complicated calculations imo. Needing to put in mutation observers seems unnecessary unless you're building on top of something you can't change in which case yeah you do have a few options but it depends on what exactly is happening.

edit: are the dimensions fixed? Like can you just use css?

AlphaKeny1 fucked around with this message at 08:56 on Jul 20, 2023

# ¿ Jul 20, 2023 08:43

Adbot: ADBOT LOVES YOU

# ¿ Apr 29, 2024 10:06

AlphaKeny1: Feb 17, 2006

https://dev.to/zachgoll/a-complete-guide-to-javascript-dates-and-why-your-date-is-off-by-1-day-fi1

I believe this article covers it.

And yeah don't use javascript date objects, use some library like moment.js

edit: nm don't use moment

# ¿ Mar 19, 2024 20:36

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Javascript questions which don't deserve their own thread.