selfup/common_js_questions.md

## common_js_questions.md

      
    Raw
  

              common_js_questions.md
            
          
    Iterators

What is the difference between forEach and map in JS?
forEach:
const arr = [1, 2, 3];

const eachExample = () => arr.forEach(e => e);

console.log(eachExample());
What will the console.log print? Guess without running the code.
map:
const arr = [1, 2, 3];

const mapExample = () => arr.map(e => e);

console.log(mapExample());
bonus map example:
const arr = [1, 2, 3];

const mapExample = () => arr.map(e => { e });

console.log(mapExample());
What will the console.log print in the basic map example? In the bonus map example? Guess. Run no code.
References

How does JS deal with references?
Examples to refresh your mind. Do not run the code.
const a = [1, 2, 3];

const b = a;

b[0] = 90;

console.log(a);
What will the zeroth element in a look like? Guess without running the code.
const a = [1, 2, 3];

const b = a.map(e => e);

const c = a.slice(0);

b[0] = 90;

c[0] = 100;

console.log(a, b, c);
What will the zeroth elements be on each array? Guess without running code.
Events

What is event delegation? Bubbling?
When would you delegate?
<ul id="list">
  <li>Hi</li>
  <li>Hello</li>
  <li>Hello again</li>
</ul>
With one event listener, how can I console.log the text from a specific list item?
No jQuery. No this.
Template for JS answer:
document
  .querySelector('#list')
  .addEventListener(/* your code goes here */);
You should not need curly braces to console.log the text of a list item.
Variables


Why is const preffered over var and let?


Is a let the same as a var?


Functions

const wow = () => 'wow';

console.log(wow());
How would you write this is ES5?
Asynchronous Resolutions

Promise.resolve().then(() => console.log('one'));
(async () => console.log('two'))();
setTimeout(() => console.log('three'), 0);
In what order will the three statements above print to the console?
(This is more just for fun, as it's an obviously contrived situation.)
Default Parameters

function test({hello='world'}) {
  console.log(hello);
}
test();
What will test() print to the console? (Careful, pay attention to the way this example is written)
function test(obj={hello:'world'}) {
  console.log(obj.hello);
}
test({foo: 'bar'});
What about now? What will test({foo: 'bar'}); print to the console?
Closures

const addOne = () => {
  let num = 0;
  return () => num += 1;
}
What happens if I do:
let a = addOne();

a();

a();
Currying

const addNums = num1 => num2 => num3 => num1 + num2 + num3;
What happens if I do:
addNums(3);
What happens if I do:
addNums(3)(4)(5);
Destructuring

const obj = {
  ok: 'wow ok',
  wow: 'wow wow',
};

const { ok } = obj;

console.log(ok);
What will the console.log print?
Classes

class Wow {
  constructor() {
    this.wow = 'wow';
  }
};

class Ok extends Wow {
  constructor() {
    super();
  }

  printWow() {
    console.log(this.wow);
  }
};

const ok = new Ok();
ok.printWow();
Is this blowing your mind yet?
What will ok.printWow() do?
Binding

<div id="entry">
  <h1>wow</h1>
</div>
const printDomStuff = new class {
  constructor() {
    this.entry = document.querySelector('#entry');
    this.fromClass = 'from class';
  }

  printWowOnClick() {
    this.entry.addEventListener('click', function(e) {
      console.log(this.fromClass);
      console.log(e.target.innerText);
    });
  }
};

printDomStuff.printWowOnClick();
How do we make console.log(this.fromClass) work?
What will console.log(this) print inside of the 'click' callback?
Passing by Reference

const reassignWow = wow => {
  wow = { ok: 'neat' };
}

let x = { ok: 'cool!' };

reassignWow(x);

console.log(x.ok);
What will console.log(x.ok) print?
const doStuffToWow = wow => {
  wow.ok = 'cool!';
}

let x = { ok: 'neat' };

doStuffToWow(x);

console.log(x.ok);
What will console.log(x.ok) print?
Hoisting

const printWow = () => {
  console.log(x);
  let x = 'wow';
}
What will console.log(x) print?
Calling

class Demo {
  constructor() {
    this.ok = 'ok';
  }

  printStuff(stuff) {
    console.log(this.ok + stuff);
  }
};

const d = new Demo();

const ok = function printOk() {
  this.ok = 'weird stuff';
  d.printStuff.call(this, " wasn't that cool");
}

ok();
What will ok() print?
Call Bonus (Mostly Senior Level)

class Wow {
  constructor() {
    this.wow = 'wow';
  }
};

class Demo extends Wow {
  printWowAndDemo() {
    console.log(this.wow, this.demo);
  }
};

const d = new Demo();

const ok = function doWeirdStuff() {
  this.demo = 'demo';
  d.printWowAndDemo.call(/* what do we need to do here? */);
}

ok();
How can we make d.printWowAndDemo() actually print both this.wow and this.demo?
Hint You only need one trick in the .call(...).
Think: Object.
WTF (Only once you get the bonus)

class Wow {
  constructor() {
    this.wow = 'wow';
  }
}

class Demo extends Wow {
  printWowAndDemo() {
    console.log(`${this.wow} and ${this.demo}`);
  }
}

const d = new Demo();

const ok = function doWeirdStuff() {
  this.demo = 'demo';
  d.printWowAndDemo.call(Object.assign({}, this, d));
}

const omg = () => d.printWowAndDemo.call(this);

omg.bind(ok);

// guess!!!

ok();

omg();
What is going on here?

<div>
  <ul id="list">
    <li data-id="23">hi</li>
    <li data-id="24">wow</li>
  </ul>
</div>
const currentTarget = {};

document
  .querySelector('#list')
  .addEventListener('click', ({ target }) => {
    const { innerText, dataset } = target;
    const { id } = dataset;
    Object.assign(currentTarget, {innerText, id});
    console.log(currentTarget);
  });