Thanks for having me again Don! Brian was a champ. This is a great example of how even when you get a question right, there's still lots of room for improvement in an interview.
Seeing the interview and getting feedback from both sides is a huge help. Thanks Matt and Brians for this experience! Thanks Don for making this possible!
Just decided to go down this path after being in the Networking / System Admin side of IT. I'll be honest, seeing this as "entry level" is pretty intimidating. Going to suck it up and get to it anyway.
This one was interesting - I knew Brian had a good foundation since he had been grinding Leetcode. I think the best takeaway here is the mechanics of the interview - asking clarifying questions, testing your code, and continuing to improve your solution after it's working. The fluency and speed only comes with time and deliberate practice. You can be a good amount slower than this, but with accuracy and good interview strategy pass an entry level interview.
I feel similarly, I've been learning programming the past 9 months and have built a few simple web projects on my own but I would fail this interview hard at the moment. Lots of work to do yet, I can follow along and understand everything but reproducing it on my own from scratch without any reference, I'm just not there yet.
It's only intimidating because it's your first time looking at the "last stage" of what a developer is required to do. The pathing to it which includes incremental learning is what makes it "easy" for the developer and "presumed difficult" for the new watcher Believe me, it gets easier the harder it gets (the more you do hard stuff, the easier these questions get)
Thank you Matt and Brian, insightful interview! I was expecting to see more feedback from the interviewers side during the coding challenge so this is showing me that it pays off to be proactive and show as much knowledge as you can and to not take silence as a bad sign. I also coded along and tried to sove the problems myself and these were my solutions: function formatQueryString(str) { if(str === null || str === undefined) { throw new Error("No input given."); } const keyValuePairs = str.slice(1).split("&").map(decodeURIComponent); const output = {}; for (let pair of keyValuePairs) { const [key,value] = pair.split("=") if(key) { if(output[key]) { output[key] = [output[key], value ?? "true"].flat() } else output[key] = value ?? "true"; } } return output; } And: function fromObjectToQueryString(obj) { const queryStringArray = []; function clearTrue(value) { return value === "true" ? "": "=" + value } for(let key in obj) { if(typeof obj[key] === "object") { for(let i of obj[key]) { queryStringArray.push(`&${key}${clearTrue(i)}`); } } else { queryStringArray.push(`&${key}${clearTrue(obj[key])}`); } } return "?" + queryStringArray.join("").slice(1) }
You definitely want to decode after splitting on '='. Imagine a key or value that has an = encoded. That would break your parsing. Using a .flat() is a nice way to reduce the if conditions. In your string builder function, I think it's more elegant to .join('&'). Solid approaches though, and the .flat() is a nice addition - likely deserving of a comment for readability though.
This is war really fun to follow. I'm trying to get a job entry level even though I've been working with JavaScript for a while now. My code came out different than his, but it passed all the corner cases. I can only hope that when I get an interview, they're like this.
🎯 Key Takeaways for quick navigation: 00:00 Introduction to the mock interview setup. 00:11 Discussion about a challenging algorithm problem. 00:25 Request for the interviewee to introduce themselves. 00:39 The interviewee (Brian) introduces himself, mentioning his background and transition into software development. 01:07 Brian talks about his favorite project, a UA-cam clone with a unique comment system. 01:48 Discussion about technical challenges faced while implementing the comment system, focusing on extracting timestamps and integrating React components. 53:35 Advice on managing nervousness before interviews. 54:04 Further discussion on the UA-cam clone project, specifically regarding threading comments and timestamps. 55:11 The importance of handling multiple features without breaking existing functionality. 55:24 Challenges related to supporting threads, pagination, and timestamps. 56:47 The significance of acknowledging limitations in projects. 57:00 Suggestions for discussing technical challenges in-depth during interviews. 57:55 Exploring opportunities to showcase teaching experiences with peers. 59:35 Advice on presenting stories about teaching experiences. 01:00:32 Consideration of questions to ask for further clarification. 01:00:45 Focusing on the interview as a conversation and paying attention to the interviewer's interests. 01:02:38 Reviewing feedback and preparing to share code changes. 01:02:52 Acknowledging logic proficiency but recognizing the need to slow down. 01:03:20 Mentioning the use of pseudocode to structure problem-solving. 01:03:34 Consideration of picking up edge cases before running tests. 01:06:51 The importance of revisiting and optimizing working solutions. 01:07:19 Encouragement to ask questions and seek clarification.
Great interview! Though I think the formatQueryString can be solved easily using reduce; only about 15 lines: const formatQueryString = str => { let qs = '' if (str.includes('?')) qs = str.slice(str.indexOf('?') + 1) else return {} return qs.split('&').reduce((acc, val) => { let [key, value] = val.split('=') if (acc[key]) { value = [...acc[key], value] } return { ...acc, [key]: value || 'true' } }, {}) }
you could also just set 'value' before this assignment, since 'value' will probably used in multiple places. But if you wanna stick with the above then just shorten it to: ( o[key] = value || 'true' ). No need for a ternary here
With regard to the additional feature request to assign the string 'true' if the key has no value. Could you not use let instead of const to declare key, value and then just check if the value exists and assign the value that way? if (!value) value = 'true' would love to know if i am completely off the mark here or not! awesome video though, Brian was very good!
You can certainly update the variable, but simply checking the truthiness with !value will incorrectly convert the empty string (a perfectly valid falsey value) to the string "true". For a correct solution you'd need ot instead do: if (value === undefined) value = 'true'; You may find the shorter syntax more readable if you're familiar with it.
Brian was extremely fluent (and fast) with his JavaScript here, especially for a new developer. You can still pass this interview while being slower, but it's necessary to be more mindful and proactive around corner cases and not introducing regressions as features are added. Some truth data from me interviewing candidates in my decade of experience: I've asked this question to at least 50 candidates, and roughly 50% of them pass. Those that don't pass typically have difficulty with managing the complexity introduced with each phase of the problem. Some candidates simply have trouble with parsing the string via split and looping through arrays.
Don't be demotivated if you don't have the fluency or speed that Brian had here. Few do. He did very well in that regard. Focus instead on sound interview strategy - defining the problem, testing your code along the way, and always looking for opportunities for improvement. These strategies can come quickly with deliberate effort. Fluency and speed will only come if you're consistently putting forward the effort. For context, I saw Brian is a 2022 App Academy grad and has been grinding Leetcode when he applied to be on this video - his solid solutions sold me.
@@CaliburPANDAs Yes. The inverse function (building a query string from a parsed query) was a bonus. If someone gets through the original problem without significant hints and shows good technique it's usually a pass for me. This is representative of other entry level interviews for top tech companies. Additionally, this is one of the more approachable problems for these kinds of interviews.
After hearing the requirements and thinking how else it could have been done, I wanted to try and solve this challenge using reduce method. After getting it done this way, I really can't shake off the feeling that I would struggle in the interview environment, because of the pressure const output = (string) => string.slice(1).split('&').reduce((acc, curr) => { const [key, value] = curr.split('='); if (!key) return acc; if (!acc[key] && !value) { acc[key] = 'true'; return acc; } if (acc[key]) { if (typeof acc[key] === 'string') { acc[key] = [acc[key], value ? value : 'true']; return acc; } else if (Array.isArray(acc[key])) { acc[key] = [...acc[key], value ? value : 'true']; return acc; } } acc[key] = value; return acc; }, {}); I would like to hear thoughts on this solution, cause I'm trying to get an entry level JS position myself
This is a good functional programming approach. Notice though the 3 return statements. Consolidate the ifs to if/elses and simply return acc at the end. Alternatively, use forEach instead of reduce and modify a variable crated in the parent scope. (it's ok to mix imperative programming with functional programming - it often makes sense!) Additionally, I think a .filter(x => x) more elegantly removes the '' case, or writing an alternative implementation of .split that returns the empty array when given an empty string and a non-empty string delimiter.
I would say its clever, but not really best practice. Handing this off to another developer, the logic could be less readable at first glance than typical for loop and logical operations, in terms of maintainability this wouldn't be ideal. Also, have you checked if this works if two or more duplicate fields in the query have no value? For comparison see how the logic is easier to follow here: function parseQueryString(str) { const assignValueHelper = (value) => value || "true"; const output = {}; const keyvaluepairs = str.slice(1).split("&"); for (const item of keyvaluepairs) { const [key, value] = item.split("="); if (!key) continue; if (!output.hasOwnProperty(key)) { output[key] = assignValueHelper(value); } else { if (!Array.isArray(output[key])) { output[key] = [output[key]]; } output[key].push(assignValueHelper(value)); } } return output; }
@@MCroppered Good point - the reduce could more simply be a forEach, and at that point it could be an imperative for loop. Also, your assignValueHelper has a bug - the empty string is a perfectly valid value but also falsey, and your function would return "true" given ""
Thanks for having me again Don! Brian was a champ. This is a great example of how even when you get a question right, there's still lots of room for improvement in an interview.
Thanks for coming on again. You both did a great job with this.
Seeing the interview and getting feedback from both sides is a huge help. Thanks Matt and Brians for this experience! Thanks Don for making this possible!
Just decided to go down this path after being in the Networking / System Admin side of IT. I'll be honest, seeing this as "entry level" is pretty intimidating. Going to suck it up and get to it anyway.
This one was interesting - I knew Brian had a good foundation since he had been grinding Leetcode. I think the best takeaway here is the mechanics of the interview - asking clarifying questions, testing your code, and continuing to improve your solution after it's working. The fluency and speed only comes with time and deliberate practice. You can be a good amount slower than this, but with accuracy and good interview strategy pass an entry level interview.
I feel similarly, I've been learning programming the past 9 months and have built a few simple web projects on my own but I would fail this interview hard at the moment. Lots of work to do yet, I can follow along and understand everything but reproducing it on my own from scratch without any reference, I'm just not there yet.
I thought that exact thing the whole way through lol. I'm glad I came to the comments and found I'm not the only one.
It's only intimidating because it's your first time looking at the "last stage" of what a developer is required to do.
The pathing to it which includes incremental learning is what makes it "easy" for the developer and "presumed difficult" for the new watcher
Believe me, it gets easier the harder it gets (the more you do hard stuff, the easier these questions get)
I just started a coding boot camp, so I was curious what "entry level" looks like. Oh lordy.
Thank you Matt and Brian, insightful interview! I was expecting to see more feedback from the interviewers side during the coding challenge so this is showing me that it pays off to be proactive and show as much knowledge as you can and to not take silence as a bad sign.
I also coded along and tried to sove the problems myself and these were my solutions:
function formatQueryString(str) {
if(str === null || str === undefined) {
throw new Error("No input given.");
}
const keyValuePairs = str.slice(1).split("&").map(decodeURIComponent);
const output = {};
for (let pair of keyValuePairs) {
const [key,value] = pair.split("=")
if(key) {
if(output[key]) {
output[key] = [output[key], value ?? "true"].flat()
}
else output[key] = value ?? "true";
}
}
return output;
}
And:
function fromObjectToQueryString(obj) {
const queryStringArray = [];
function clearTrue(value) {
return value === "true" ? "": "=" + value
}
for(let key in obj) {
if(typeof obj[key] === "object") {
for(let i of obj[key]) {
queryStringArray.push(`&${key}${clearTrue(i)}`);
}
} else {
queryStringArray.push(`&${key}${clearTrue(obj[key])}`);
}
}
return "?" + queryStringArray.join("").slice(1)
}
You definitely want to decode after splitting on '='. Imagine a key or value that has an = encoded. That would break your parsing. Using a .flat() is a nice way to reduce the if conditions. In your string builder function, I think it's more elegant to .join('&'). Solid approaches though, and the .flat() is a nice addition - likely deserving of a comment for readability though.
Thank you for commenting and pointing out the issue. And thank you for helping us developers looking for our first swe job.
Appreciate the mock interview. Helpful for learning how to prepare for my own interviews. Hope to see more 👍👍
Great real life interview. Super helpful!
This is war really fun to follow. I'm trying to get a job entry level even though I've been working with JavaScript for a while now. My code came out different than his, but it passed all the corner cases. I can only hope that when I get an interview, they're like this.
Great work, Brian. Looking forward to more of these.
This is pretty good! Please keep making more of such videos!
🎯 Key Takeaways for quick navigation:
00:00 Introduction to the mock interview setup.
00:11 Discussion about a challenging algorithm problem.
00:25 Request for the interviewee to introduce themselves.
00:39 The interviewee (Brian) introduces himself, mentioning his background and transition into software development.
01:07 Brian talks about his favorite project, a UA-cam clone with a unique comment system.
01:48 Discussion about technical challenges faced while implementing the comment system, focusing on extracting timestamps and integrating React components.
53:35 Advice on managing nervousness before interviews.
54:04 Further discussion on the UA-cam clone project, specifically regarding threading comments and timestamps.
55:11 The importance of handling multiple features without breaking existing functionality.
55:24 Challenges related to supporting threads, pagination, and timestamps.
56:47 The significance of acknowledging limitations in projects.
57:00 Suggestions for discussing technical challenges in-depth during interviews.
57:55 Exploring opportunities to showcase teaching experiences with peers.
59:35 Advice on presenting stories about teaching experiences.
01:00:32 Consideration of questions to ask for further clarification.
01:00:45 Focusing on the interview as a conversation and paying attention to the interviewer's interests.
01:02:38 Reviewing feedback and preparing to share code changes.
01:02:52 Acknowledging logic proficiency but recognizing the need to slow down.
01:03:20 Mentioning the use of pseudocode to structure problem-solving.
01:03:34 Consideration of picking up edge cases before running tests.
01:06:51 The importance of revisiting and optimizing working solutions.
01:07:19 Encouragement to ask questions and seek clarification.
Great interview! Though I think the formatQueryString can be solved easily using reduce; only about 15 lines:
const formatQueryString = str => {
let qs = ''
if (str.includes('?'))
qs = str.slice(str.indexOf('?') + 1)
else return {}
return qs.split('&').reduce((acc, val) => {
let [key, value] = val.split('=')
if (acc[key]) {
value = [...acc[key], value]
}
return { ...acc, [key]: value || 'true' }
}, {})
}
Yes, exactly what I needed
Amazing. Thank you Don!
Great job Brian
Such a great vid!
Thank god, i was able to do all the questions by myself !!! (but not with some effiecient approch yeah 😅😅)
second question..you can just test the value is its not there just pas 'true'. ( obj[key]=value ? value : 'true' )
you could also just set 'value' before this assignment, since 'value' will probably used in multiple places. But if you wanna stick with the above then just shorten it to:
( o[key] = value || 'true' ). No need for a ternary here
App Academy alum!
the font-size very small
🔥
With regard to the additional feature request to assign the string 'true' if the key has no value. Could you not use let instead of const to declare key, value and then just check if the value exists and assign the value that way?
if (!value) value = 'true'
would love to know if i am completely off the mark here or not!
awesome video though, Brian was very good!
You can certainly update the variable, but simply checking the truthiness with !value will incorrectly convert the empty string (a perfectly valid falsey value) to the string "true". For a correct solution you'd need ot instead do: if (value === undefined) value = 'true';
You may find the shorter syntax more readable if you're familiar with it.
@@CoachMatt_io Thanks for clearing that up. if (value === undefined) value = 'true' does make more sense!
Quick question, what is Brian continuously looking at on his second monitor?
I had the video call on one monitor and the code on the other.
@@brianlam7287 I was hoping you’d reply. I thought you may have had notes on methods or something. Good job though, cheers.
Js Code:
1)
function getValueXArgObj(str){
str= str.substring(1);
if(str=='')
return {};
const sentencesString= str.split('&');
const valueXArgObj={};
for(let sentence of sentencesString){
if(sentence.includes('=')){
const valueXArgStr= sentence.split('=');
const value= valueXArgStr[0];
const arg= valueXArgStr[1];
if (valueXArgObj[value]) {
if (Array.isArray(valueXArgObj[value]))
valueXArgObj[value] = valueXArgObj[value].concat(arg);
else
valueXArgObj[value] = [valueXArgObj[value], arg];
}
else
valueXArgObj[value]= arg;
}
else
valueXArgObj[sentence]= true;
}
return valueXArgObj;
}
-------------------------------------------------------------------------------------------------------------------
function getQueryString(obj){
let queryStr='?';
for(let key in obj){
const value= obj[key];
if(!Array.isArray(value)){
const sentence= key+'='+value+'&';
queryStr+= sentence;
}
else{//is array
let sentence=''
for(let element of value){
const subSentence= key+'='+element+'&';
sentence+= subSentence;
}
queryStr+= sentence;
}
}
return queryStr.substring(0,queryStr.length-1);
}
-------------------------------------------------------------------------------------------------------------------
done
This interview is for an experienced developer absolutely not for a beginner
Brian was extremely fluent (and fast) with his JavaScript here, especially for a new developer. You can still pass this interview while being slower, but it's necessary to be more mindful and proactive around corner cases and not introducing regressions as features are added.
Some truth data from me interviewing candidates in my decade of experience: I've asked this question to at least 50 candidates, and roughly 50% of them pass. Those that don't pass typically have difficulty with managing the complexity introduced with each phase of the problem. Some candidates simply have trouble with parsing the string via split and looping through arrays.
This is not entry level ffs. He's super experienced obvious hire.
then give example of entry level
Don't be demotivated if you don't have the fluency or speed that Brian had here. Few do. He did very well in that regard. Focus instead on sound interview strategy - defining the problem, testing your code along the way, and always looking for opportunities for improvement. These strategies can come quickly with deliberate effort. Fluency and speed will only come if you're consistently putting forward the effort.
For context, I saw Brian is a 2022 App Academy grad and has been grinding Leetcode when he applied to be on this video - his solid solutions sold me.
@@CoachMatt_io thanks coach Matt
@@CaliburPANDAs Yes. The inverse function (building a query string from a parsed query) was a bonus. If someone gets through the original problem without significant hints and shows good technique it's usually a pass for me. This is representative of other entry level interviews for top tech companies. Additionally, this is one of the more approachable problems for these kinds of interviews.
Holy over complexity. Use the built-in array methods and make your life easier. Array.reduce can solve these quite easily{
const makeQueryString = parsed => {
return Object.entries(parsed).reduce((acc, val, idx) => {
const [key, value] = val
let str = idx === 0 ? '?' : '&'
if (Array.isArray(value)) {
for (const v of value) {
str += `${key}=${v}&`
}
str = str.slice(0, str.length - 1)
}
else {
str += `${key}=${value}`
}
return acc += str
}, '')
}
After hearing the requirements and thinking how else it could have been done, I wanted to try and solve this challenge using reduce method. After getting it done this way, I really can't shake off the feeling that I would struggle in the interview environment, because of the pressure
const output = (string) => string.slice(1).split('&').reduce((acc, curr) => {
const [key, value] = curr.split('=');
if (!key) return acc;
if (!acc[key] && !value) {
acc[key] = 'true';
return acc;
}
if (acc[key]) {
if (typeof acc[key] === 'string') {
acc[key] = [acc[key], value ? value : 'true'];
return acc;
} else if (Array.isArray(acc[key])) {
acc[key] = [...acc[key], value ? value : 'true'];
return acc;
}
}
acc[key] = value;
return acc;
}, {});
I would like to hear thoughts on this solution, cause I'm trying to get an entry level JS position myself
This is a good functional programming approach. Notice though the 3 return statements. Consolidate the ifs to if/elses and simply return acc at the end. Alternatively, use forEach instead of reduce and modify a variable crated in the parent scope. (it's ok to mix imperative programming with functional programming - it often makes sense!)
Additionally, I think a .filter(x => x) more elegantly removes the '' case, or writing an alternative implementation of .split that returns the empty array when given an empty string and a non-empty string delimiter.
I would say its clever, but not really best practice. Handing this off to another developer, the logic could be less readable at first glance than typical for loop and logical operations, in terms of maintainability this wouldn't be ideal. Also, have you checked if this works if two or more duplicate fields in the query have no value? For comparison see how the logic is easier to follow here:
function parseQueryString(str) {
const assignValueHelper = (value) => value || "true";
const output = {};
const keyvaluepairs = str.slice(1).split("&");
for (const item of keyvaluepairs) {
const [key, value] = item.split("=");
if (!key) continue;
if (!output.hasOwnProperty(key)) {
output[key] = assignValueHelper(value);
} else {
if (!Array.isArray(output[key])) {
output[key] = [output[key]];
}
output[key].push(assignValueHelper(value));
}
}
return output;
}
@@MCroppered Good point - the reduce could more simply be a forEach, and at that point it could be an imperative for loop.
Also, your assignValueHelper has a bug - the empty string is a perfectly valid value but also falsey, and your function would return "true" given ""
@@CoachMatt_io Ah yes! should have remained value === undefined? "true": value; I overlooked that when refactoring.
@@MCroppered I think the cleanest would be nullish coalescing - const getVal = str => str ?? 'true'; Or, explicitly check === undefined