JS Interview Help (part 3): Apply/Call/Bind, Async JS, Callback, Promises, Async & Await

Picture of Ernie and Lucy, the wiener dog
Picture of Ernie and Lucy, the wiener dog

Apply/Call/Bind

Bind

const module = {
lucysDeadSnakes: 2,
getLucysDeadSnakes: function() {
return this.lucysDeadSnakes + ' dead snakes!';
}
};
const unboundGetLucysDeadSnakes = module.getLucysDeadSnakes;
console.log(unboundGetLucysDeadSnakes());
// undefined dead snakes!
const boundGetLucysDeadSnakes = unboundGetLucysDeadSnakes.bind(module);
console.log(boundGetLucysDeadSnakes());
//2 dead snakes!

Call/Apply

const lucy = {
first: 'Lucy',
last: 'Bade',
twoSnakes: function() {
let name = this.first + ' ' + this.last;
return name;
}
};
let killedAnimals = function(animal, number) {
console.log(this.twoSnakes() + ' killed ' + number + ' ' + animal + 's today!');
};
killedAnimals.call(lucy, 'snake', 2);
//Lucy Bade killed 2 snakes today!
killedAnimals.apply(lucy, ['snake', 2]);
//Lucy Bade killed 2 snakes today!

Async JS

const lucysTasks = ['hunt', 'nap', 'dinner', 'bath'];
  • What if hunting takes longer than expected, and while it’s 9 pm she’s only hunted 1 snake? If Lucy were thinking in a synchronous way, she would have to keep hunting until she finds the 2nd snake. It may take an hour, or a whole week, and Lucy would be malnourished, sleepy-deprived, and worst of all, incredibly smelly.
  • What if one task takes a long time to prepare (like filling a bath tub with warm water), while shorter tasks (like eating dinner) can be done while the tub is filling up?

Callback

let lucysDestruction = [1, 2, 4, 7, 3, 5, 6];
lucysDestruction = [1 + 2, 4, 7, 3, 5, 6];
lucysDestruction = [3 + 4, 7, 3, 5, 6];
lucysDestruction = [7 + 7, 3, 5, 6];
lucysDestruction = [14 + 3, 5, 6];
lucysDestruction = [17 + 5, 6];
lucysDestruction = [22 + 6];
lucysDestruction = 28;
function isOddNumber(lucysDestruction, currentNumberOfToys) {
return lucysDestruction + currentNumberOfToys;
}
const oddNumbers = lucysDestruction.reduce(isOddNumber);
console.log(oddNumbers);
// 28
let lucysDestruction = [1, 2, 4, 7, 3, 5, 6];function isOddNumber(lucysDestruction, currentNumberOfToys) {
return lucysDestruction + currentNumberOfToys;
}
const oddNumbers = lucysDestruction.reduce(isOddNumber);console.log(oddNumbers);
// 28

Promises

  • A promise or “thenable” is an object that supplies a standard-compliant .then() method.
  • A pending promise may transition into a fulfilled or rejected state.
  • A fulfilled or rejected promise is settled, and must not transition into any other state.
  • Once a promise is settled, it must have a value (which may be undefined). That value must not change.
let fetchedDogs = fetch('https://dog.ceo/api/breeds/image/random');fetchedDogs;
// Promise {<fulfilled>}
fetchedDogs
.then(resp => console.log(resp));
// Response { type: "basic", url: "...", redirected: false, status: 200, ... }
// Promise {<fulfilled>}
fetchedDogs
.then(resp => resp.json())
.then(dogs => console.log(dogs));
// {message: 'image-of-dog.jpg', status: 'success'}
fetch('https://dog.ceo/api/breeds/image/bones')
.then(resp => resp.json())
.then(dogs => console.log(dogs))
.catch(error => console.log(error));
// {status: 'error', message: 'No route found for "GET /api/breeds/image/bones....," code: 404}

Async & Await

const request = () => 
promisedJSON()
.then(data => {
console.log(data)
return 'done'
})
request()
const request = async () => {
console.log(await promisedJSON())
return 'done'
}
request()
  • Our request function has the async keyword before it, and await can only be used in functions with async. await promisedJSON() implies that the console.log call will wait until promisedJSON() promise resolves and prints its value.

Resources:

--

--

--

Michael Bade is a Full Stack Web Developer, with a passion for making abstract ideas come to life! Find me on LinkedIn to connect and talk code!

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

New to React? Confused where to start?

Laravel Toastr Notification and Error’s

Weeknotes 6th–9th April 2020

Everything You Need to Know About Koa js

Top 10 ways to write fast code in javascript

Build infinite pagination with ES6 async generators and iterables

How a simple log line can stop your business

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Michael Bade

Michael Bade

Michael Bade is a Full Stack Web Developer, with a passion for making abstract ideas come to life! Find me on LinkedIn to connect and talk code!

More from Medium

NoSQL Databases: Defined and Explained

React Form Validations Using formik.

563. Binary Tree Tilt 🚀

Which should you use: Node.js or Springboot Java?