Javascript + React - Day 18

useArray

Implement a useArray hook that manages an array of items with additional utility methods.

It is more convenient to use useArray over plain useState because in the latter case, you would always have to create a new array, mutate it, then set state to use the new array, which can be quite cumbersome.

The hook should work generically with arrays of any types.

const defaultValue = ['apple', 'banana'];

export default function Component() {
  const { array, push, update, remove, filter, set, clear } = useArray();

  return (
    <div>
      <p>Fruits: {array.join(', ')}</p>
      <button onClick={() => push('orange')}>Add orange</button>
      <button onClick={() => update(1, 'grape')}>
        Change second item to grape
      </button>
      <button onClick={() => remove(0)}>Remove first</button>
      <button onClick={() => filter((fruit) => fruit.includes('a'))}>
        Keep fruits containing 'a'
      </button>
      <button onClick={() => set(defaultValue)}>Reset</button>
      <button onClick={clear}>Clear list</button>
    </div>
  );
}

Arguments

- defaultValue: The initial array of items

Returns

The hook returns an object with the following properties:

- array: The current array of items
- set: (newArray) => void: A function that sets the array of items. This must be the same type as the setter function of useState
- push: (item) => void: A function that adds an item to the end of the array
- remove: (index: number) => void: A function that removes an item from the array by index
- filter: (predicate) => void: A function that filters the array based on a predicate function. predicate must be the same type as the argument of Array.prototype.filter
- update: (index: number, newItem) => void: A function that replaces an item in the array at index
- clear: () => void: A function that clears the array

@danceswithcode
@alithecodeguy

#js #javascript #interview87

Javascript + React - Day 19

useDebounce

Implement a useDebounce hook that delays state updates until a specified delay has passed without any further changes to the provided value.

export default function Component() {
  const [keyword, setKeyword] = useState('');
  const debouncedKeyword = useDebounce(keyword, 1000);

  return (
    <div>
      <input value={keyword} onChange={(e) => setKeyword(e.target.value)} />
      <p>Debounced keyword: {debouncedKeyword}</p>
    </div>
  );
}

The observable outcome of using useDebounce is quite similar to React's useDeferredValue, the former returns an updated value after a fixed duration while the latter always returns the updated value but updates to the DOM relies on React's priority system.

Arguments

1. value: The value to debounce
2. delay: number: The delay in milliseconds

Returns

The hook returns the debounced value.

@danceswithcode
@alithecodeguy

#js #javascript #interview87

Javascript + React - Day 20

useSet

Implement a useSet hook that manages a JavaScript Set of items with additional utility methods.

It is more convenient to use useSet over plain useState because in the latter case, you would always have to create a new Set, mutate it, then set state to use the new set, which can be quite cumbersome.

The hook should work generically with items of any types.

export default function Component() {
  const { set, add, remove, toggle, reset, clear } = useSet(new Set(['hello']));

  return (
    <div>
      <button onClick={() => add(Date.now().toString())}>Add</button>
      <button onClick={() => remove('hello')} disabled={!has('hello')}>
        Remove 'hello'
      </button>
      <button onClick={() => toggle('hello')}>Toggle hello</button>
      <button onClick={() => reset()}>Reset</button>
      <button onClick={() => clear()}>Clear</button>
      <pre>{JSON.stringify(Array.from(set), null, 2)}</pre>
    </div>
  );
}

Arguments

- initialState: The initial Set of items

Returns

The hook returns an object with the following properties:

- set: The current set of items
- add: (item) => void: A function that adds item to the set
- remove: (item) => void: A function that removes item from the set
- toggle: (item) => void: A function that toggles the presence of item in the set
- reset: () => void: A function that resets the set to initialState
- clear: () => void: A function that removes all items in the set

@danceswithcode
@alithecodeguy

#js #javascript #interview87

Javascript + React - Day 21

useTimeout

Implement a useTimeout hook that invokes a callback function after a specified delay.

Note that the hooks can be called again with different values since the initial call:

- Different callback: The pending timer should invoke the latest callback. If the timer has already expired, the callback is not executed and no new timer will be set
- Different delay: The previous timeout should be cancelled if the timer hasn't expired, a new timer is set with the new delay value

The primary benefit of useTimeout is so that you don't have to manually clear call clearTimeout() if the component unmounts before the timer expires.

export default function Component() {
  const [loading, setLoading] = useState(true);

  useTimeout(() => setLoading(false), 1000);

  return (
    <div>
      <p>{loading ? 'Loading' : 'Ready'}</p>
    </div>
  );
}

Arguments

1. callback: () => void: A function to be called after the specified delay
2. delay: number | null: The delay in milliseconds before the invocation of the callback function. If null, the timeout is cleared

Returns

Nothing.

@danceswithcode
@alithecodeguy

#js #javascript #interview87

Javascript + React - Day 22

useWindowSize

Implement a useWindowSize hook that returns the current height and width of the window (window.innerHeight and window.innerWidth). It should re-render the component if the screen properties changes.

export default function Component() {
  const screen = useWindowSize();

  return (
    <div>
      <p>The current window dimensions are:</p>
      <code>{JSON.stringify(screen, null, 2)}</code>
    </div>
  );
}

Arguments

Nothing.

Returns

The hook returns an object with the following properties:

- height: number: Current height of the screen
- width: number: Current width of the screen

@danceswithcode
@alithecodeguy

#js #javascript #interview87

Javascript - Day 23

Classnames

classnames is a commonly-used utility in modern front end applications to conditionally join CSS class names together. If you've written React applications, you likely have used a similar library.

Implement the classnames function.

Examples

classNames('foo', 'bar'); // 'foo bar'
classNames('foo', { bar: true }); // 'foo bar'
classNames({ 'foo-bar': true }); // 'foo-bar'
classNames({ 'foo-bar': false }); // ''
classNames({ foo: true }, { bar: true }); // 'foo bar'
classNames({ foo: true, bar: true }); // 'foo bar'
classNames({ foo: true, bar: false, qux: true }); // 'foo qux'

Arrays will be recursively flattened as per the rules above.

classNames('a', ['b', { c: true, d: false }]); // 'a b c'

Values can be mixed.

classNames(
  'foo',
  {
    bar: true,
    duck: false,
  },
  'baz',
  { quux: true },
); // 'foo bar baz quux'

Falsey values are ignored.

classNames(null, false, 'bar', undefined, { baz: null }, ''); // 'bar'

@danceswithcode
@alithecodeguy

#js #javascript #interview87

Javascript - Day 24

Data Merging

A data set of gym sessions looks like this:

[
  { user: 8, duration: 50, equipment: ['bench'] },
  { user: 7, duration: 150, equipment: ['dumbbell'] },
  { user: 1, duration: 10, equipment: ['barbell'] },
  { user: 7, duration: 100, equipment: ['bike', 'kettlebell'] },
  { user: 7, duration: 200, equipment: ['bike'] },
  { user: 2, duration: 200, equipment: ['treadmill'] },
  { user: 2, duration: 200, equipment: ['bike'] },
];

Each session has the following fields:

- user: User ID of the session's user.
- duration: Duration of the session, in minutes.
- equipment: Array of equipment used during the sessions, in alphabetical order. There are only 5 different equipments.

Implement a method mergeData, which is used to return a unified view of each user's activities by merging data from each user. It has the interface mergeData(sessions). Sessions from the same user should be merged into one object. When merging:

- Sum up the duration fields.
- Combine all the equipment used, de-duplicating the values and sorting alphabetically.

The order of the results should always remain unchanged from the original set, and in the case of merging sessions with the same users, the row should take the place of the earliest occurrence of that user. The input objects should not be modified.

Examples
The following example uses the data set above:

mergeData(sessions);
// [
//   { user: 8, duration: 50, equipment: ['bench'] },
//   { user: 7, duration: 450, equipment: ['bike', 'dumbbell', 'kettlebell'] },
//   { user: 1, duration: 10, equipment: ['barbell'] },
//   { user: 2, duration: 400, equipment: ['bike', 'treadmill'] },
// ];

Data of user 7 and user 2 are merged into the first occurrence of that user.


@danceswithcode
@alithecodeguy

#js #javascript #interview87

Javascript - Day 25

Event Emitter

In the observer pattern (also commonly known as the publish-subscribe model), we can observe/subscribe to events emitted by publishers and execute code whenever an event happens.

Implement an EventEmitter class similar to the one in Node.js that follows such an observer pattern.

Example usage of the EventEmitter class:

const emitter = new EventEmitter();

function addTwoNumbers(a, b) {
  console.log(`The sum is ${a + b}`);
}
emitter.on('foo', addTwoNumbers);
emitter.emit('foo', 2, 5);
// > "The sum is 7"

emitter.on('foo', (a, b) => console.log(`The product is ${a * b}`));
emitter.emit('foo', 4, 5);
// > "The sum is 9"
// > "The product is 20"

emitter.off('foo', addTwoNumbers);
emitter.emit('foo', -3, 9);
// > "The product is -27"

Implement the following APIs:

* new EventEmitter()

Creates an instance of the EventEmitter class. Events and listeners are isolated within the EventEmitter instances they're added to, aka listeners shouldn't react to events emitted by other EventEmitter instances.

* emitter.on(eventName, listener)

Adds a callback function (listener) that will be invoked when an event with the name eventName is emitted.

eventName : string : The name of the event.
listener : Function : The callback function to be invoked when the event occurs.

Returns the EventEmitter instance so that calls can be chained.

* emitter.off(eventName, listener)

Removes the specified listener from the list of listeners for the event with the name eventName.

eventName : string : The name of the event.
listener : Function : Callback function to be removed from the list of listeners for the event.

Returns the EventEmitter instance so that calls can be chained.

* emitter.emit(eventName[, ...args])
Invokes each of the listeners listening to eventName with the supplied arguments in order.

eventName : string : The name of the event.
...args : any : Arguments to invoke the list of listener functions with.

Returns true if the event had listeners, false otherwise.

@danceswithcode
@alithecodeguy

#js #javascript #interview87

Javascript - Day 26

Flatten

Implement a function flatten that returns a newly-created array with all sub-array elements concatenated recursively into a single level.

Examples

// Single-level arrays are unaffected.
flatten([1, 2, 3]); // [1, 2, 3]

// Inner arrays are flattened into a single level.
flatten([1, [2, 3]]); // [1, 2, 3]
flatten([
  [1, 2],
  [3, 4],
]); // [1, 2, 3, 4]

// Flattens recursively.
flatten([1, [2, [3, [4, [5]]]]]); // [1, 2, 3, 4, 5]

@danceswithcode
@alithecodeguy

#js #javascript #interview87

Javascript + HTML - Day 27

getElementsByStyle

Implement a method getElementsByStyle() that finds DOM elements that are rendered by the browser using the specified style. It is similar to Element.getElementsByClassName() but with some differences:

- It is a pure function which takes in an element, a property string, and a value string representing the style's property/value pair to be matched on the elements descendants. E.g. getElementsByStyle(document.body, 'font-size', '12px').

- Similar to Element.getElementsByClassName(), only descendants of the element argument are searched, not the element itself.

- Return an array of Elements, instead of an HTMLCollection of Elements.

Do not use document.querySelectorAll() which will make the problem trivial otherwise. You will not be allowed to use it during real interviews.

Examples

const doc = new DOMParser().parseFromString(
  `<div>
    <span style="font-size: 12px">Span</span>
    <p style="font-size: 12px">Paragraph</p>
    <blockquote style="font-size: 14px">Blockquote</blockquote>
  </div>`,
  'text/html',
);

getElementsByStyle(doc.body, 'font-size', '12px');
// [span, p] <-- This is an array of elements.

Hint
You might find the Window.getComputedStyle() method helpful.

@danceswithcode
@alithecodeguy

#js #javascript #interview87

Javascript + HTML - Day 28

HTML Serializer

Given an object which resembles a DOM tree, implement a function that serializes the object into a formatted string with proper indentation (one tab (\t character) per nesting level) and one tag per line.

Examples

const tree = {
  tag: 'body',
  children: [
    { tag: 'div', children: [{ tag: 'span', children: ['foo', 'bar'] }] },
    { tag: 'div', children: ['baz'] },
  ],
};

serializeHTML(tree);
// Output:
`<body>
  <div>
    <span>
      foo
      bar
    </span>
  </div>
  <div>
    baz
  </div>
</body>`;

@danceswithcode
@alithecodeguy

#js #javascript #interview87

Javascript - Day 29

JSON.stringify

Implement a function jsonStringify, similar to JSON.stringify that converts a JavaScript value into a JSON string.

- Only JSON-serializable values (i.e. boolean, number, null, array, object) will be present in the input value.

- Ignore the second and the third optional parameters in the original API.

Examples

jsonStringify({ foo: 'bar' }); // '{"foo":"bar"}'
jsonStringify({ foo: 'bar', bar: [1, 2, 3] }); // '{"foo":"bar","bar":[1,2,3]}'
jsonStringify({ foo: true, bar: false }); // '{"foo":true,"bar":false}'

Other types

jsonStringify(null); // 'null'
jsonStringify(true); // 'true'
jsonStringify(false); // 'false'
jsonStringify(1); // '1'
jsonStringify('foo'); // '"foo"'

@danceswithcode
@alithecodeguy

#js #javascript #interview87

Javascript - Day 30

List Format

Given a list of strings, implement a function listFormat that returns the items concatenated into a single string. A common use case would be in summarizing the reactions for social media posts.

The function should support a few options as the second parameter:

- sorted: Sorts the items by alphabetical order.
- length: Show only the first length items, using "and X other(s)" for the remaining. Ignore invalid values (negative, 0, etc).
- unique: Remove duplicate items.

Examples

listFormat([]); // ''

listFormat(['Bob']); // 'Bob'
listFormat(['Bob', 'Alice']); // 'Bob and Alice'

listFormat(['Bob', 'Ben', 'Tim', 'Jane', 'John']);
// 'Bob, Ben, Tim, Jane and John'

listFormat(['Bob', 'Ben', 'Tim', 'Jane', 'John'], {
  length: 3,
}); // 'Bob, Ben, Tim and 2 others'

listFormat(['Bob', 'Ben', 'Tim', 'Jane', 'John'], {
  length: 4,
}); // 'Bob, Ben, Tim, Jane and 1 other'

listFormat(['Bob', 'Ben', 'Tim', 'Jane', 'John'], {
  length: 3,
  sorted: true,
}); // 'Ben, Bob, Jane and 2 others'

listFormat(['Bob', 'Ben', 'Tim', 'Jane', 'John', 'Bob'], {
  length: 3,
  unique: true,
}); // 'Bob, Ben, Tim and 2 others'

listFormat(['Bob', 'Ben', 'Tim', 'Jane', 'John'], {
  length: 3,
  unique: true,
}); // 'Bob, Ben, Tim and 2 others'

listFormat(['Bob', 'Ben', '', '', 'John']); // 'Bob, Ben and John'

@danceswithcode
@alithecodeguy

#js #javascript #interview87

Javascript - Day 31

Memoize

A memoize function is a higher-order function that takes in a function and returns a memoized version of it. The memoized function caches the results of expensive function calls and returns the cached result when it receives the same inputs again. This can significantly improve the performance of functions that involve complex processing / significant latency and are called with the same arguments repeatedly.

Implement a function memoize(func) that takes in a function parameter func and returns a memoized version of the function. You may assume that func only accepts a string or number as its only argument.

Examples

function expensiveFunction(n) {
  console.log('Computing...');
  return n * 2;
}

// Create a memoized version of the function.
const memoizedExpensiveFunction = memoize(expensiveFunction);

// First call (computes and caches the result).
console.log(memoizedExpensiveFunction(5)); // Output: Computing... 10

// Second call with the same argument (returns the cached result).
console.log(memoizedExpensiveFunction(5)); // Output: 10

// Third call with a different argument (computes and caches the new result).
console.log(memoizedExpensiveFunction(10)); // Output: Computing... 20

// Fourth call with the same argument as the third call (returns the cached result).
console.log(memoizedExpensiveFunction(10)); // Output: 20

@danceswithcode
@alithecodeguy

#js #javascript #interview87

Javascript - Day 32

Middlewares

Implement a middlewares function that takes any number of middleware functions and composes them into a single callable function. This composed function accepts a context, returns a Promise, and calls each middleware in order.

Each middleware is a function that receives two arguments:

- context: An object shared across all middlewares
- next: A function that invokes the next middleware in the chain

When next() is called, the next middleware should run. If a middleware does not call next, the chain stops.

The execution should be asynchronous and sequential, similar to how middleware works in frameworks like Koa.

Examples

async function fn1(ctx, next) {
  ctx.stack.push('fn1-start');
  await next();
  ctx.stack.push('fn1-end');
}

async function fn2(ctx, next) {
  ctx.stack.push('fn2-start');
  await new Promise((resolve) => setTimeout(resolve, 1000));
  await next();
  ctx.stack.push('fn2-end');
}

function fn3(ctx, next) {
  ctx.stack.push('fn3-start');
  next();
  ctx.stack.push('fn3-end');
}

const composedFn = middlewares(fn1, fn2, fn3);

const context = { stack: [] };
await composedFn(context);

console.log(context.stack);
// ['fn1-start', 'fn2-start', 'fn3-start', 'fn3-end', 'fn2-end', 'fn1-end']

@danceswithcode
@alithecodeguy

#js #javascript #interview87

Javascript - Day 33

Promise.all

" Promise.all() is a method that takes an iterable of elements (usually Promises) as an input, and returns a single Promise that resolves to an array of the results of the input promises. This returned promise will resolve when all of the input's promises have resolved, or if the input iterable contains no promises. It rejects immediately upon any of the input promises rejecting or non-promises throwing an error, and will reject with this first rejection message / error. "

Promise.all() is frequently used when there are multiple concurrent API requests and we want to wait for all of them to have completed to continue with code execution, usually because we depend on data from both responses.

const [userData, postsData, tagsData] = await Promise.all([
  fetch('/api/user'),
  fetch('/api/posts'),
  fetch('/api/tags'),
]);

Let's implement our own version of Promise.all(), a promiseAll function, with the difference being the function takes in an array instead of an iterable. Be sure to read the description carefully and implement accordingly!

Examples

// Resolved example.
const p0 = Promise.resolve(3);
const p1 = 42;
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('foo');
  }, 100);
});

await promiseAll([p0, p1, p2]); // [3, 42, 'foo']

// Rejection example.
const p0 = Promise.resolve(30);
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('An error occurred!');
  }, 100);
});

try {
  await promiseAll([p0, p1]);
} catch (err) {
  console.log(err); // 'An error occurred!'
}

@danceswithcode
@alithecodeguy

#js #javascript #interview87

Javascript - Day 34

Promise.any

Note: If you haven't completed the Promise.all question, you should attempt that first.

" Promise.any() takes an iterable of elements (usually Promises). It returns a single promise that resolves as soon as any of the elements in the iterable fulfills, with the value of the fulfilled promise. If no promises in the iterable fulfill (if all of the given elements are rejected), then the returned promise is rejected with an AggregateError, a new subclass of Error that groups together individual errors. "

" If an empty iterable is passed, then the promise returned by this method is rejected synchronously. The rejected reason is an AggregateError object whose errors property is an empty array. "

Let's implement our own version of Promise.any(), a promiseAny function, with the difference being the function takes in an array instead of an iterable and AggregateErrors returned just have to return an array of error reasons, the message doesn't have to be set. Refer to the AggregateError constructor examples on MDN.

Be sure to read the description carefully and implement accordingly!

Examples

const p0 = Promise.resolve(42);
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(21);
  }, 100);
});

await promiseAny([p0, p1]); // 42

const p0 = new Promise((resolve) => {
  setTimeout(() => {
    resolve(42);
  }, 100);
});
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('Err!');
  }, 400);
});

await promiseAny([p0, p1]); // 42

const p0 = new Promise((resolve) => {
  setTimeout(() => {
    reject(42);
  }, 400);
});
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('Err!');
  }, 100);
});

try {
  await promiseAny([p0, p1]);
} catch (err) {
  console.log(e instanceof AggregateError); // true
  console.log(e.errors); // [ 42, "Err!" ]
}

@danceswithcode
@alithecodeguy

#js #javascript #interview87

Javascript - Day 35

Squash Object

Implement a function that returns a new object after squashing the input object into a single level of depth where nested keys are "squashed" together with a period delimiter (.).

Examples

const object = {
  a: 5,
  b: 6,
  c: {
    f: 9,
    g: {
      m: 17,
      n: 3,
    },
  },
};

squashObject(object); // { a: 5, b: 6, 'c.f': 9, 'c.g.m': 17, 'c.g.n': 3 }

Any keys with null-ish values (null and undefined) are still included in the returned object.

const object = {
  a: { b: null, c: undefined },
};
squashObject(object); // { 'a.b': null, 'a.c': undefined }

It should also work with properties that have arrays as the value:

const object = { a: { b: [1, 2, 3], c: ['foo'] } };
squashObject(object); // { 'a.b.0': 1, 'a.b.1': 2, 'a.b.2': 3, 'a.c.0': 'foo' }

Empty keys should be treated as if that "layer" doesn't exist.

const object = {
  foo: {
    '': { '': 1, bar: 2 },
  },
};
squashObject(object); // { foo: 1, 'foo.bar': 2 }

@danceswithcode
@alithecodeguy

#js #javascript #interview87

Javascript + React - Day 36

useInputControl

Implement a useInputControl hook that manages a controlled input value and tracks additional form input states like:

[Property : Tracks : When it becomes true : When it becomes false]

* Touched : If input has been focused then blurred : When the user blurs the input (focus -> blur) : Never resets automatically

* Dirty : If value has been changed before : When the user types something Never resets automatically : -

* Different : If value is different from the original : When the value is different from the initial : When the value is same as the initial

The handleX functions returned by the hook are meant to be called on the relevant event handlers of <input> in order for the hook to work as intended.

export default function Component() {
  const nameInput = useInputControl('Oliver');

  return (
    <form>
      <div>
        <label htmlFor="name">Name</label>
        <input
          id="name"
          value={nameInput.value}
          onChange={nameInput.handleChange}
          onBlur={nameInput.handleBlur}
        />
      </div>
      <p>Touched: {nameInput.touched.toString()}</p>
      <p>Dirty: {nameInput.dirty.toString()}</p>
      <p>Different: {nameInput.different.toString()}</p>
      <button type="submit" disabled={!nameInput.different}>
        Submit
      </button>
      <button type="button" onClick={nameInput.reset}>
        Reset
      </button>
    <form>
  );
}

Arguments

- initialValue: string: The initial value of the input

Returns

The hook returns an object with the following properties:

- value: string: The current value of the input
- dirty: boolean: Whether the user has been modified at least once
- touched: boolean: Whether the input was focused and blurred
- different: boolean: Whether the value is different from the initial value
- handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void: A function that updates the value of the input
- handleBlur: (event: React.FocusEvent<HTMLInputElement>) => void: A function that to be called when the input is blurred
- reset: () => void: A function to reset to the initial value as well as the value of all states

@danceswithcode
@alithecodeguy

#js #javascript #interview87

Javascript + React - Day 37

useMediaQuery

Implement a useMediaQuery hook that subscribes and responds to media query changes (e.g. screen size, resolution, orientation, etc.).

export default function Component() {
  const isSmallDevice = useMediaQuery('only screen and (max-width: 768px)');

  return <div>{isSmallDevice && <a href="#">Menu</a>}</div>;
}

Hint: The window.matchMedia API would be helpful.

Arguments

- query: string: The media query to match. It must be a valid CSS media query string

Returns

The hook returns a boolean value that indicates whether the media query is a match.

@danceswithcode
@alithecodeguy

#js #javascript #interview87