Javanoscript + 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.
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 #javanoscript #interview87
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 #javanoscript #interview87
Javanoscript + 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.
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 #javanoscript #interview87
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 #javanoscript #interview87
Javanoscript + 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.
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 #javanoscript #interview87
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 #javanoscript #interview87
Javanoscript + 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.
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 #javanoscript #interview87
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 #javanoscript #interview87
Javanoscript - 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
Arrays will be recursively flattened as per the rules above.
Values can be mixed.
Falsey values are ignored.
@danceswithcode
@alithecodeguy
#js #javanoscript #interview87
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 #javanoscript #interview87
Javanoscript - Day 24
Data Merging
A data set of gym sessions looks like this:
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:
Data of user 7 and user 2 are merged into the first occurrence of that user.
@danceswithcode
@alithecodeguy
#js #javanoscript #interview87
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 #javanoscript #interview87
Javanoscript - 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:
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 #javanoscript #interview87
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 #javanoscript #interview87
Javanoscript - 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
@danceswithcode
@alithecodeguy
#js #javanoscript #interview87
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 #javanoscript #interview87
Javanoscript + 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
Hint
You might find the Window.getComputedStyle() method helpful.
@danceswithcode
@alithecodeguy
#js #javanoscript #interview87
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 #javanoscript #interview87
Javanoscript + 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
@danceswithcode
@alithecodeguy
#js #javanoscript #interview87
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 #javanoscript #interview87
Javanoscript - 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
Other types
@danceswithcode
@alithecodeguy
#js #javanoscript #interview87
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 #javanoscript #interview87