JavaScript Intermediate Flashcards

1
const p = new Promise((resolve, reject) => {
2
  setTimeout(() => resolve("done"), 1000);
3
});
4
p.then(val => console.log(val)); // "done"

1
async function fetchData() {
2
  const res = await fetch("https://api.example.com/data");
3
  const json = await res.json();
4
  return json;
5
}

1
console.log(0 == "0");  // true  (coercion)
2
console.log(0 === "0"); // false (strict)

1
function Animal(name) { this.name = name; }
2
Animal.prototype.speak = function() {
3
  console.log(this.name + " makes a noise.");
4
};
5
const a = new Animal("Dog");
6
a.speak(); // "Dog makes a noise."

1
function greet(greeting) {
2
  console.log(greeting + ", " + this.name);
3
}
4
const obj = { name: "Alice" };
5
greet.call(obj, "Hello");        // Hello, Alice
6
greet.apply(obj, ["Hi"]);        // Hi, Alice
7
const fn = greet.bind(obj, "Hey");
8
fn();                            // Hey, Alice

1
const nums = [1, 2, 3, 4];
2
const doubled = nums.map(n => n * 2);
3
console.log(doubled); // [2, 4, 6, 8]

1
const [a, b] = [10, 20];
2
const { name, age } = { name: "Ali", age: 30 };
3
console.log(a, b);       // 10 20
4
console.log(name, age);  // Ali 30

1
const arr1 = [1, 2, 3];
2
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]
3
const obj1 = { a: 1 };
4
const obj2 = { ...obj1, b: 2 }; // { a: 1, b: 2 }

1
function sum(...nums) {
2
  return nums.reduce((acc, n) => acc + n, 0);
3
}
4
console.log(sum(1, 2, 3, 4)); // 10

1
function* counter() {
2
  yield 1;
3
  yield 2;
4
  yield 3;
5
}
6
const gen = counter();
7
console.log(gen.next().value); // 1
8
console.log(gen.next().value); // 2

1
const id = Symbol("id");
2
const user = { [id]: 123, name: "Alice" };
3
console.log(user[id]); // 123

1
const val = null ?? "default"; // "default"
2
const zero = 0 ?? "default";   // 0

1
const user = { address: { city: "Amman" } };
2
console.log(user?.address?.city);  // "Amman"
3
console.log(user?.phone?.number);  // undefined

1
const wm = new WeakMap();
2
let obj = {};
3
wm.set(obj, "secret");
4
console.log(wm.get(obj)); // "secret"

1
const a = [1, 2, 3].map(n => n * 2);    // [2, 4, 6]
2
[1, 2, 3].forEach(n => console.log(n));  // undefined returned

1
const p1 = Promise.resolve(1);
2
const p2 = Promise.resolve(2);
3
Promise.all([p1, p2]).then(values => {
4
  console.log(values); // [1, 2]
5
});

1
const handler = {
2
  get(target, key) {
3
    return key in target ? target[key] : "N/A";
4
  }
5
};
6
const p = new Proxy({ name: "Ali" }, handler);
7
console.log(p.name);  // "Ali"
8
console.log(p.age);   // "N/A"

1
function debounce(fn, delay) {
2
  let timer;
3
  return (...args) => {
4
    clearTimeout(timer);
5
    timer = setTimeout(() => fn(...args), delay);
6
  };
7
}

1
function throttle(fn, limit) {
2
  let inThrottle;
3
  return (...args) => {
4
    if (!inThrottle) {
5
      fn(...args);
6
      inThrottle = true;
7
      setTimeout(() => (inThrottle = false), limit);
8
    }
9
  };
10
}

1
function memoize(fn) {
2
  const cache = new Map();
3
  return function(...args) {
4
    const key = JSON.stringify(args);
5
    if (cache.has(key)) return cache.get(key);
6
    const result = fn(...args);
7
    cache.set(key, result);
8
    return result;
9
  };
10
}

1
const add = a => b => a + b;
2
const add5 = add(5);
3
console.log(add5(3)); // 8

1
const counter = (() => {
2
  let count = 0;
3
  return {
4
    increment: () => ++count,
5
    getCount: () => count,
6
  };
7
})();
8
counter.increment();
9
console.log(counter.getCount()); // 1

1
(function() {
2
  const x = 10;
3
  console.log(x); // 10
4
})();
5
// x is not accessible outside

1
const obj = { a: 1, b: { c: 2 } };
2
// Shallow copy
3
const shallow = { ...obj };
4
shallow.b.c = 99; // also mutates obj.b.c
5

6
// Deep copy
7
const deep = JSON.parse(JSON.stringify(obj));

1
// true = capturing phase, false (default) = bubbling phase
2
element.addEventListener("click", handler, true);

1
const range = {
2
  [Symbol.iterator]() {
3
    let n = 1;
4
    return { next: () => n <= 3 ? { value: n++, done: false } : { done: true } };
5
  }
6
};
7
for (const x of range) console.log(x); // 1 2 3

1
console.log(false && doSomething()); // false, doSomething never called
2
console.log(true  || doSomething()); // true,  doSomething never called

1
function highlight(strings, ...vals) {
2
  return strings.reduce((acc, str, i) =>
3
    acc + str + (vals[i] ? `<b>${vals[i]}</b>` : ""), "");
4
}
5
const name = "Alice";
6
console.log(highlight`Hello ${name}!`); // Hello <b>Alice</b>!

1
function sum() {
2
  return Array.from(arguments).reduce((a, b) => a + b, 0);
3
}
4
console.log(sum(1, 2, 3)); // 6