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
@danceswithcode
@alithecodeguy
#js #javascript #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 #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
Other types
@danceswithcode
@alithecodeguy
#js #javascript #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 #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
@danceswithcode
@alithecodeguy
#js #javascript #interview87
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
@danceswithcode
@alithecodeguy
#js #javascript #interview87
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
@danceswithcode
@alithecodeguy
#js #javascript #interview87
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.
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
@danceswithcode
@alithecodeguy
#js #javascript #interview87
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
@danceswithcode
@alithecodeguy
#js #javascript #interview87
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
Any keys with null-ish values (null and undefined) are still included in the returned object.
It should also work with properties that have arrays as the value:
Empty keys should be treated as if that "layer" doesn't exist.
@danceswithcode
@alithecodeguy
#js #javascript #interview87
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.
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
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.).
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
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