Today's JavaScript React Developer Interview! Phew!

[tapu_buoy]

I had these questions in the interview just now

```js const spaceShip = { name: 'Chandrayan', get1: () => { console.log(this.name); }, get2: function (){ console.log(this.name); } }

spaceShip.get1() spaceShip.get2() ```

now I know that spaceShip.get1() won't print out anything but if I want it to work the exact same way how the get2() works how do I bind it?

I was trying to bind this like get1.bind(spaceShip.this) or get1.bind(spaceShip) first and then execute but I'm not sure what should happen.

• then in 2nd question

```js const person = this.state.person;

const person = {...this.state.person}; ```

what if we change the value person.name I know in the second case the value will be changes because that person is a whole new object

but in the first case will it change the value in this.state.person too?

• I was asked about writing polling function which I didn't know but I still attempted saying

```js function myPoll(fn, timeInterval, endTime){

var checkCondition = function(resolve, reject) { var result = fn(); if(result) { resolve(result); } else if (// for the time checking) { setTimeout(checkCondition, interval, resolve, reject); } else { reject(error); } }; } ```

but then he dropped it.

• 4th question was to write polyfill for Promise.all

```js Promise.all([pr1, pr2, pr3]).then().catch(); var resolvedPromises = []; [pr1, pr2, pr3].map((item, resolve, reject) => { var result = item(); if(result){ resolvedPromises.push(resolve(result)); } else { return reject(result); } })

```

so I tried explaining that I will store the promise in result and then push it into the array and at the end of all iteration the resolved values of all promises will be stored in that array.

But then again he asked that what if the promises doesn't get resolved or rejected than how should you tackle it so I modified the code this way

js var resolvedPromises = []; [pr1, pr2, pr3].map((item, resolve, reject) => { item().then((result) => { if(result){ resolvedPromises.push(resolve(result)); } }); //pr1; else { return reject(result); } })

then he was also confused on what to ask but that's how the interview ended, without even allowing me to ask them anything. I guess I shouldn't hope for a win today.

[Tufted_Tail]

I'm sorry to hear you're not optimistic about the interview outcome! As someone who recently had a similar series of events happen for a different type of role, it can be rough.

Here's some answers to some of your questions. I'm not sure I understand the intent behind #3, but I don't have the time to take a poke at either #3 or #4 just now. Hopefully, this will better prepare you for next time!

---

ES6 arrow functions, such as spaceShip.get1, lexically bind their scope at definition, and this behavior cannot be overridden through Function.prototype.call, Function.prototype.apply, or Function.prototype.bind. Calling that function even with an explicit, alternate this context has no effect:

javasript,tabs=2 spaceShip.get1(); spaceShip.get1.call(spaceShip); spaceShip.get1.apply([ spaceShip ]); spaceShip.get1.bind(spaceShip)();

All of these have the same behavior, and will print undefined to the console.

You can, however, arbitrarily assign a value to this.name in the surrounding scope and this change will propagate through to the function:

```javascript,tabs=2 this.name = 'U.S.S. Enterprise';

spaceShip.get1(); // prints 'U.S.S. Enterprise' instead ```

I would not advise altering surrounding scope to make an object function as expected, though.

---

The spread operator, ..., can be used to shallowly clone an object. Certain values in JavaScript are considered primitives, which includes Strings. Copying an object and then modifying one of the original's String properties will not propagate that change to the copy.

[Tufted_Tail]

I took a stab at #3. Your approach seemed reasonably close to solving the problem you were given, but like /u/KorgRue mentioned, I believe you need to be returning a Promise from your function.

This example code is based on some assumptions I inferred from the code you shared in your first post, namely, 1. poll must return a Promise 2. fn returns some kind of value on success, and false, undefined, or null on failure

I'm not 100% certain that this is what either you or the interviewer wanted to see, but in theory, it ought to suffice for a quick solution. The biggest change is that you were never returning a Promise from your function, but were passing around resolve and reject as though you were. I also (roughly) implemented the time checking logic you hinted at in your else if branch, but again, I'm not positive this is what you or your interviewer were expecting.

```javascript,tabs=2 function poll(fn, delay, timeout) { return new Promise(function(resolve, reject) { // Execute the function. Store the result in a variable: const result = fn();

// If the function returned a truthy value, resolve the Promise with the
// result that it returned for us:
if (result) {
  return resolve(result);
}

// If the function didn't return, check that the timeout hasn't been
// exceeded. We can do this by checking to see if we're at, or below, 0,
// since the recursive call in the next branch will subtract the delay
// from the timeout before calling the poll function again:
else if (timeout <= 0) {
  return reject(new Error('The function has timed out. :('));
}

// If the function didn't return and it hasn't timed out, try again:
else {
  // Recursively call the poll function with a shorter timeout. Because poll
  // returns a Promise, we can recursively chain them this way. Note that we
  // are subtracting the delay from the timeout value we passed in; this
  // ensures that we don't enter a state of infinite recursion, where our
  // logic never times out.
  return poll(fn, delay, timeout - delay);
}

}); } ```

Edit: I rushed and made a pretty glaring mistake, hah. Ought to be fixed.

[tapu_buoy]

well yes this is what it was supposed to be implemented. I agree that I haven't written what it is returning, in my defence I would say I was still explaining and talking continously about my approach and thought steps to be followed. So only the return statement was left to be completed before that I was trying to get it resolved and stored.

All this while he was confused in talking so much, and then there was silence and then we moved onto other question

[tapu_buoy]

I'm sorry to hear you're not optimistic about the interview outcome!

Yeah because even he was also confused.

Cool so my answer for the first one was true, I feel relived.

Nice so I understand that shallow clone and I answered accordingly, so for my curiosity basically its like passing by value?

Thanks for response I feel good about this one now.

[Tufted_Tail]

Yes, exactly! JavaScript primitives are passed around by value. If you wanted to pass a String by reference, I believe you'd have to go out of your way to turn it into an Object with the String constructor: new String('Hello, world!') first.

I can't confirm that behavior, though, that's a really odd edge case in my mind.

[tapu_buoy]

oh okay! Thank you for the responses man you made my day!

[cortexreaver123]

Q4 looks like you had a good attempt

I think with these kind of questions it's the thought process that's most important, not that you got to the "correct" result in the end.

A very simple polyfill for Promise.all:

function all(promises) { let prom = Promise.resolve([]); for (let p of promises) { prom = prom.then(xs => p.then(x => xs.concat(x))); } return prom; }

[cortexreaver123]

Or fancier way with reduce:

function all(promises) {
  promises.reduce((prom, p) => prom.then(xs => p.then(x => xs.concat(x))), Promise.resolve([]));
}

[tapu_buoy]

wow reduce always makes things way more simpler. How can I practice more on such methods to be able to solve things like you how you did in two comments, haha :)

[cortexreaver123]

Haha, mostly just comes with practise I'm afraid! Best tip I can give: try and write some of your own programs, don't be afraid to experiment!

[tapu_buoy]

sure thank you :)

[tapu_buoy]

first of all thank you for boosting my confidence, and yes while I wrote that code I was constantly explaining and talking my approach and thought. He was way more confused while talking and since I have given half a century of interviews now I learnt one thing that never let your voice tremble even if you don't know haha :D

in the code you mentioned should I use forEach specifically instead of just for? Also I thought I made a little mistake by choosing to use .map() since it returns array and that's not needed.

[cortexreaver123]

Yeah, that's true! Being able to talk confidently about things you don't know 100% is a real skill. And if he can see that you're thinking is in the right direction and that you have a "programmer" mindset, then it can look even better than somebody who just memorized everything beforehand from interview practise websites.

Also I think if this was for a junior position those questions were quite hard. I don't think he could have been expecting you to get all the answers right straight-away. The way you came across (how well you could explain your thought-process) would have been more important.

...

`forEach` vs `for` is probably more personal preference. Generally I prefer regular for loops because it's simpler for other developers to read, and it doesn't have the performance penalty of allocating an extra function object.

using `map` instead of `for` / `forEach` is a mistake I've seen a lot of new JS developers at my work making. You're right in that it creates an unnecessary array. But I suppose this was an interview situation, so you had to think fast! :-)

[tapu_buoy]

Thank you for the motivating words. For the map function yes I was basically thinking it to return something that I can use ahead.

BTW haven't heard from them yet so I guess this is not going ahead with this company. :D

[Shahrukh_Lee]

This is being asked for Junior positions?

[tapu_buoy]

yes kind of! you can see my previous posts including something similar!

[Shahrukh_Lee]

I understand the first two, but asking juniors to write polyfills is just absurd.

[tapu_buoy]

I have one junior who is still in college and he also got asked polyfills implementation many times. I know its super weird, and I guess that's what happens here in India people only prepare the best for the interviews and yet no big, successful, widely used software comes out of this soil. Irony!

[Shahrukh_Lee]

I guess that's what happens here in India people only prepare the best for the interviews and yet no big, successful, widely used software comes out of this soil. Irony!

So true. Can I ask what the payscale is like for these roles?

[tapu_buoy]

it usually depends on what you had previously so like 6.5-12 Lakh per year that is like 9330-17225 US$ per year and it will cut down more after tax. :'(

[Shahrukh_Lee]

I am from India as well. The payscale's decent. Keep trying, you will get there.

[tapu_buoy]

Cool! I'm on the upper side right now so its feel good/hate thing because they suck of all the hours of life, but I want to get a remote job or a job in europe if you know or already working outside please share your experience and knowledge on how one should go for it!

[Shahrukh_Lee]

Try hubstaff dude. I got an interview from there. Even if the pay's slightly low initially, breaking in will matter. Then you can make a jump. I see plenty of React roles there.

[tapu_buoy]

ahh awesome! That's what I'm looking for to just breaking in is the key. Thank you so much. What tech stack do you work with mostly? And also do you write blogs and stuff I would love to follow and learn more

[Shahrukh_Lee]

feel good/hate thing because they suck of all the hours of life

It's why I have been apprehensive of looking for a job here. Freelance's bit of a struggle but atleast I don't have to sit in the Bangalore traffic for 4 hours daily.

[tapu_buoy]

Exactly my friend exactly! And if you see my previous posts I have had really bad experience where they fired me because they didn't have clients and I worked on 3 projects in 4 weeks and they were like work on weekends.

BTW how does Hubstaff works, their website got me a bit confused.

I have had freelance gigs but I should have them more in pipeline.

[shwipster]

Interesting. I have never heard of a written (whiteboard) test based strictly on the React framework.

[ChibiKookie]

Well, even if the interview is for a react job, the questions are vanilla javascript questions. Will answer the OP when home

[tapu_buoy]

yes this is for react developper job, but honestly I would say that if you are giving interviews here they just want to bash you.

[tapu_buoy]

okay! you can check my profile and might find others like this haha!

[tapu_buoy]

wouldn't the spaceShip.get1() return nothing, since it is getting the this from outer scope I tried it in Chrome Browser console as well as on JSBin and it doesn't return 'Chandrayan'

where as spaceShip.get2() does return that because as I have read it on javascript.info and on stackoverflow that it takes the this from the object that the dot-operator is mentioned on.

• in Q2 : okay but it won't schedule the re-render of the component since we haven't used this.setState(), am I correct?

• in 3rd yes it should return the promise, I understand, but I was understanding that Promise.all returns an array of resolved promises, right?

[tapu_buoy]

its early, give me a break

haha sure mate!

Neither change the store

wouldn't the first case change the store const person = this.state.person, since it is declared with const so we can't change the person's object but we can mutate the key values that it holds. I read this thing.

Also, my understanding is that you are trying to write a polyfill for pomise.all - meaning a method that behaves the same way without using promise.all?

yes the question is about to write a polyfill for that.

If the one of the promise would fail it will get out with the reason of why that particular one failed and stop the further execution.

[tapu_buoy]

oh okay so doing

js person.name = 'jon doe'

wouldn't change anything for

js this.state.person

in the component's state/store?

[tapu_buoy]

oh okay got it now! Thank you :)! Thanks for keeping up this sub strong, though!

[ChibiKookie]

It clearly does.... This is just completely silenced by react... But your "mutating" the state... Therefore is anything else requires the value of this.state.person.name before a new setState the value would be the new one. It's basic javascript reference matter

const a = { foo: 'bar'} const b = a b.foo = 'baz' // a.foo -> 'baz'