4.5 Years Experienced Best Javascript Interview | Chakde Frontend Interview EP - 01
HTML-код
- Опубликовано: 20 июн 2024
- "Chakde Interviews" Season 2 is here, and this time we are launching mock interviews. Unlike last season, where we discussed the processes candidates underwent, this time around, the focus is on providing real-time interview support to you all.
Connect to learn & grow together in our career❤️:
✅ Linkedin: / engineerchirag
✅ Twitter: / engineerchirag
✅ Instagram: / engineerchirag
Music track: Wanderer by walen
Source: freetouse.com/music
No Copyright Background Music
#interview #react #javascript #chakdeinterviews #frontenddevelopment #mockinterview
Candidate is good with her skills…she is making some of the topics which are bit complicated into very simple thing..that’s shows the experience 👏
Great video! Looking forward to more episodes from chakde interviews!
More video are in pipeline. Turn on the notification on channel for every Saturday 10AM
This video has a lot of great information, but as a beginner, I didn't fully understand some parts like the callback in the initial question, memoization, and other detailed concepts. I plan to watch it again after more practice, and I'm sure I'll understand everything better then. Thank you, Chirag Goel Sir.
This was actually a challenging question for first timer.
Thank you sir for this a great series. One of the most awaited series.
We have just started. This release will be one stop solution for frontend interviews
memoize problem was very good. learnt a new thing. very nice video.
Glad it was helpful! ❣️
Wow this is a fantastic addition. Thanks Chirag sir for this series and all the best for season - 2
🔥🔥🔥
More to come soon 🚀
@@engineerchirag Thanks you sir❤. we love this series.
very informative video...waiting for more
More to come! Stay tuned 🚀
If you put the questions in the description section of the video, it will super helpful to practice along, Please consider it from next videos !! Btw great choice of questions!!
Agree 💯
2021 me aapke git videos but were unable to understand but now again I am here after almost 3 years to watch machine coding round questions. Thanks for such awesome content
It's my pleasure. That I can bring you back ❤️
Above video is of Machine coding interview format? In machine code don’t wee have to develop a small functionality?
Superb question and answers. Thank you chirag.
🥰
i hope this EP - 01 will be increase.
thanks from bangladesh
Block your calendar for 10AM every Saturday 🙂
Loved it
❣️
18:35 we need to create a closure (that holds the cache nothing but arguments and result) and return it ... then it will work independent of function that we are passing. until the functions are pure
I was thinking the same, right now cache is at global level all memoised functions will access the same cache. Each memoised function must have it's own cache.
Great insights!
Glad you enjoyed it!
Want more interview videos with different types of questions for experienced Frontend developer, thanks a lot for sharing this knowledge.
More to come! Stay tuned 🙂
If possible share videos of debugging the issue in front-end development in detail.
Easy peasy 🔥🔥
❤️
Good interview, Loved it ❤
Glad you enjoyed it! Stay tuned for more upcoming video 🚀
❤❤❤ Great 👍👍👍👍
❤️
Kindly put the interview stuff in the description you doing great job ❤
Noted
Great Questions!!! @chirag.
🙏
I think we could use currying concept for the memoisation problem.
The problem is that similar questions are being asked since about 3-4 years now. I understand that they do a good job on checking the conceptual knowledge of the candidate and reinventing the wheel might not be possible every time but majority of the candidates I’ve seen just learn the solutions by heart and sometimes can’t even deal with a follow up question. People should understand that this is not an exam where you would just empty your pockets when you see a question you’ve already solved or practiced and call it easy. Ofc the interviewer will be more experienced and can read between the lines. We can always try to focus on the concepts as opposed to just going through interview questions.
Maja aagya sir 🎉
❣️
18:35
I think we should concept of decorator function
A decorator allow to add new functionality to an existing fun without modifying its structure and return modified fun
Decorator doesn't exist in javascript
@@Shyam_Mahanta are you sure?
@@jacquelynecarmen typescript has full support for decorator but in js its just arghhhhhh.....
Great Video, Please schedule more mock interview for Senior developers also.
Stay tuned for 10 Am every Saturday 🙂
❤
❤️
Thank you, Chirag Goel. Amazing video. I also tried to solve this problems by myself.
Kudos to the interviewee
❤️
awesome sir...
Keep watching 🚀
please make sure you be consistent & complete it 🙏
Every Saturday 10AM 🙂 Block your calendar 😜
damn shes so good. . ithink the hardest is the 2nd to the last problem, icant even know ,how to memoize a the result. haha
Great, thanks for making this video. Curious which platform you used for assessment?
Thanks for feedback. DM me on LinkedIn for details 😊
memoizeOne function will not work here if we call memoizeOne with different callbacks
Eg: if we call memoizeOne with add , and also we call memoizeOne with sub results will be inconsistent
because cache map is global one it will be shared by both add and sub callback memoizeOne calls
So we need create cache map for each memoizeOne call and return arrow function from memoizeOne
Her explanation is great although the implementations are okay at best. First problem could be solved used Object.groupBy (I guess he was expecting that), the memorization problem took way too long and then the recursion problem doesn't need an array initialized out side the function. The overall interview also seemed easy for anyone with 2.5-3+ yoe.
Hi, thank you for the feedback.
The points you gave are genuine and valid and I personally feel the same that solution could have been provided/presented in a better manner.
@@krupapanchal9908 Hey! Didn't expect you to reply. Again, your communication is amazing and that alone will take you places. Hope I didn't come off too strong with my comment. All the best!
🎉 Excited for Season 2 of Chakde Interviews! Mock interviews sound like a fantastic addition. As I'm working through Namaste Frontend System Design, I've learned so much from you, Chirag. Thanks a lot for the invaluable insights! 👏
Wonderful! Keep watching, keep sharing, keep growing 🚀
@@engineerchirag 😁😇
Come Satuarday. I leave everything to watch Chirag's video at 10AM.
❤️
Thank you Chirag bhai pls do some videos on machine coding as well
Yes, it's coming soon. Stay tuned!
thank you
Welcome!
Overall that's a good interview.
Optimized solutions are-
Q 2. We can use closures here as mentioned by him will looks like -
function memorizeOne(fn){
const cache = {};
return function (...args){
const key = JSON.stringify(args); // Creating unique keys because objects are reference type
if (key in cache) {
console.log("Using memoized result");
return cache[key];
} else {
console.log("Calculating result");
const result = fn(...args);
cache[key] = result;
return result;
}
}
}
const add = (a, b) => a + b;
const memorize = memorizeOne(add);
console.log(memorize(1, 2)); // Calculates result: 3
console.log(memorize(1, 2)); // Uses memoized result: 3
console.log(memorize(2, 3)); // Calculates result: 5
console.log(memorize(1, 2)); // Uses memoized result: 3
Q 3. Her solution was also good but here I used reduce method
const obj = [
{ key: 'Sample 1', data: 'Data1' },
{ key: 'Sample 1', data: 'Data1' },
{ key: 'Sample 2', data: 'Data2' },
{ key: 'Sample 1', data: 'Data1' },
{ key: 'Sample 3', data: 'Data1' },
{ key: 'Sample 4' }
];
function groupBy(arr) {
return arr.reduce((value, item) => {
const { key, data } = item;
if (!value[key]) {
value[key] = [];
}
value[key].push({ key, data });
return value;
}, {});
}
const output = groupBy(obj);
console.log(output);
Your explanation of questions are great Krupa. Will wait for next part of the series.
Thanks for sharing 🙏❣️
const add = (a: number, b: number) => a + b;
const CACHE: Record = {};
function memoizedAdd(n: number, m: number) {
const argArray = Array.from(arguments);
const key = JSON.stringify(argArray);
console.log(CACHE);
if (key in CACHE) {
console.log('Accessing CACHE');
return CACHE[key];
} else {
console.log('Computing');
const result = add(n, m);
CACHE[key] = result;
return result;
}
}
console.log(memoizedAdd(1, 2));
console.log(memoizedAdd(1, 2));
Sorry I have a doubt, this is my solution. Why would we need another temp function inside the memo function ?? Could you explain if possible please
@@KannadaLofi As I understand your question, you are talking about the function which passed as an argument.
It is because we want to make memorize function generic which can memorize any function output.
In your code "console.log(memoizedAdd(1, 2));" you are calling it for to memorize add with two arguments, but if we have more arguments ?
So need to make it generic.
Great interview, though in my country (Poland) such questions are asked in junior level interviews
Thanks for the info. Would you mind sharing the kind of questions which are asked in Poland?
I think this is fine from my side! Anyone can improve this?
function memoised(fn){
const cache=new Map();
return (...args)=>{
const key=args.join('-');
if(cache.has(key)) return cache.get(key);
const ans=fn(...args);
cache.set(key,ans);
return ans;
}
}
good apporch
can object.entries not be used in the input output snippet?
First question in which foreach use have compile error. forEach() is not closed
Hello Sir,
1. How do you stay active and energetic always? 🤔
2. Can we use internet in machine coding rounds if we dont remember the syntax? Thank you,
My energy is from love and support ❣️.
Yes, we can ask the interviewer to allow you to check syntax on the internet.
Sorry to point out , but first Output based code won't run , there should be one closing ')' after console.log(x). Other than that her explanation was great 👍🏻
Thanks for highlighting, but syntax wasn't the main consideration in this interview
the memoize one is the challenging one and she tackled it very well......btw how i can give interview to you ?
Fill the form
Bro, title to shi rkh lete..she said she has 2 years of experience and you mentioned 4.5 years in video title...phle 1 min me hi video ki authenticity smjh aa gyi
She has 2 years experience as a frontend developer. She was a software engineer from 2019.
I'm here to provide authentic content 💯
CODE FOR QUESTION 4 :-
const a = [1, 2, 3, [4, [5, 6]], 7, 8];
const func = (arr, output) => {
arr.forEach((item) => {
if(typeof(item) === 'number') {
output.push(item);
}
else {
func(item, output);
}
})
}
const flattenArray = (arr) => {
const output = [];
func(arr, output);
return output;
}
console.log(flattenArray(a));
23:11 did you just cut off the video and told her the solution?
35:02 here too
CODE FOR QUESTION 3 :-
const add = (a, b) => a + b
const memoizeOne = (add) => {
const map = new Map();
return (a, b) => {
const obj = {
args: [a, b]
}
if(map.has(JSON.stringify(obj))) {
console.log('Add function is not executed: previous result is returned -> ', map.get(JSON.stringify(obj)));
}
else {
const output = add(a, b);
map.set(JSON.stringify(obj), output);
console.log('Add function is called to get new value -> ', output);
}
}
}
const memoizeAdd = memoizeOne(add);
memoizeAdd(1, 2);
memoizeAdd(1, 2);
memoizeAdd(2, 3);
memoizeAdd(2, 3);
a lot to take away by watching this video.
Glad you liked it. More to come, stay tuned 🙂
Flatten array was asked to me in interview with ServiceNow ❤
and Data transformation question was also asked
Great! ❤️
❤️
where are curly braces in foreach question
i am a 1 yrs experienced guy but feels like having 6 or 7 years of experience 😢. There was a time where there is less competition for skills for software jobs, now people are having enough skills but very hard to get a job 😕
Not understood brother what you are trying to say can you elaborate more plzz.
@@virajtandel24 the demand for skills and the level of difficulty in interviews are increased so much recently. That is what i said.
all things are great but how to prepare for these kind of question when I google I mostly see theoretical question only
On Chakde Frontend Interview series every Saturday 😛
sir please next video for freshers
Noted!
function memoize(fn) {
let memo = new Map();
return function() {
const context = this;
const args = arguments;
if (memo.has(args.toString())) {
console.log("return from memoize");
return memo.get(args.toString())
}
let result = fn.apply(context, args)
console.log(result);
memo.set(args.toString(), result);
return result
}
}
Clement mihailescu came in my mind while watching this video. 😅
😛
Hi Chirag, I'd love to give mock interview with you if you are taking candidates for subsequent videos. Let me know. Thanks
Please share your linkedin profile here.
Will this type of questions asked to freshers ???
Freshers related videos are coming soon!
except memoization (maybe for a 1+ yrs experienced canditate), the other questions were pretty basic.
Can you asked how to browser render html code?
Sure, in one of the upcoming interviews I will ask 🙂
Her sister is a Indian cricketer Jemimah rodrigues
😛 I just released. Who knows she is only giving interview
she have 4.5 years of experience and you ask him this basic questions.🙄
Please dont get my hopes up...please tell me these are not the questions asked in a real 4+ exp interview
I feel these are too easy, maybe for around 1-2 yrs exp?
Can you tell me some concepts which are asked in 4+ according to you brother??
@@virajtandel24 After talking to my seniors, I feel it is more focused on design approach questions after 4-5+ yrs experience. Maybe the memoized question was okay to be put in as a starter...but the rest are way too basic.
But it always depends on the company and the interviewer.
what I'm sure is that interview would not be this easy
Thanks brother I will prepare acoordingly now
CODE FOR QUESTION 2 :-
const obj = [
{ key: 'Sample 1', data: 'Data1' },
{ key: 'Sample 1', data: 'Data1' },
{ key: 'Sample 2', data: 'Data2' },
{ key: 'Sample 1', data: 'Data1' },
{ key: 'Sample 3', data: 'Data1' },
{ key: 'Sample 4', data: 'Data1' },
]
const normalize = (obj) => {
let output = {}
obj.forEach(({ key, data }) => {
if(!output.hasOwnProperty(key)) {
output[key] = [];
}
output[key] = [ ...output[key], { key, data } ]
})
return output;
}
console.log(normalize(obj))
What was the question? I couldn't understand it properly.
@@payelbhowmik9060 The question states that you have to rearrange (or normalize) the data in such a way that the output is an object. This is generally done to reduce the Time Complexity from array O(N) to object O(1) because to access an element in an array we have to traverse it completely but to access it in an object we can use dot notation or even square brackets. Good Luck🤞
let obj = [
{
key:"sample 1",
value:"d1"
},
{
key:"sample 2",
value:"d1"
},
{
key:"sample 1",
value:"d1"
}, {
key:"sample 3",
value:"d1"
},
{
key:"sample 4",
value:"d1"
},
]
let output = {}
obj.forEach((item,idx)=>{
if(output[`${item.key}`]){
output[`${item.key}`].push(item)
}else{
output[`${item.key}`] = [item]
}
})
console.log(output)
flattened array simple solution :
const a = [1,2,3,[4,[5,6]],7,8];
const newArr= a.flat(2);
console.log(newArr);
is she really 4.5 year experience, looks like fresher.🧐
Don’t judge a book 📕 by its cover 😮
Why so?
I feel looking like 8 years experience
Looking young im guessing@@engineerchirag
I feel like 10 yrs experienced guy now
4.5 exp , memorised Question takes hardly 3-4mins
Hi, your point is valid. However, as I was fairly new to this type of interview setup, it took time for me to get comfortable and perform at my best level.
The interview is more about how you approach a problem and navigate towards the solution after hints are provided. In how much time you complete the problem is a secondary point of consideration.
Buddy It has nothing to do with experience, someone might not came across this usecase, it depends on what industry or problem candidate worked on solving early.
Knowing something now a days are very easy and if she doesn't come across that situation just google, thats all it takes 😅. he already instructed her to take help from google to know how to get arguments of a function
@@phoenixgaming3045 Thank you for the suggestion. Added "Google" to my "Need to learn" list.
🤣🤣🤣
🤣🤣🤣
Great video!!, Thank you. and small update in memoization, if combination of arguments changed that has to be handled. ✌
// Memoization
const hashMap = new Map();
function memoizeAdd (fun) {
return function (...arg) {
const key = arg.join('_')
const reverseKey = arg.reverse().join('_')
let result = ''
if (hashMap.has(key) || hashMap.has(reverseKey)) {
console.log('from memo')
result = hashMap.get(key) || hashMap.get(reverseKey);
}
else result = fun(...arg);
hashMap.set(key, result)
return result;
}
}
let addTwoValues = (a, b) => a + b;
const addNumber = new memoizeAdd(addTwoValues);
console.log(addNumber(2,3));
console.log(addNumber(2,3));
console.log(addNumber(3,2));
Sir I am searching for a Frontend Developer job please help me sir if you have any vacancy
Thanks
👍
I am also starting Frontend Interview Preparation, with an amazing group where we discuss important questions in Zoom meetings regularly. if anyone who is really seriously wants to join let me know.(MERN with JavaScript)
Yes
This is not at all a real scenario in an interview even freshers interview are not taken like this anymore please don't prepare according to this interview example this sort of interview are used to happen in 2016 to 2019 only even freshers code better than this nowadays so if you want a job and want to really crack a interview please don't refer this as good interview yet you can refer it as a easy mock interview
Would love to know what kind of questions are expected nowadays 😊
In my recent interview I was asked to design a tic tc toe with a dynamic board , and in my previous interview I was asked to design a polyfill for map, and one of the interview also asked to implement deag and drop functionality as he asked me to refer trello for for it 😊
Don't worry, all of such questions are already in pipeline. You will get the best and variety of questions in this series. Trust me this series is going to "The Best and One Stop" solution for all frontend interviews . Stay tuned 🚀
Btw check this out - tictactoe question - ruclips.net/video/rtKwy1k9lYY/видео.html
seems like scripted interview for youtube and views
You can yourself experience it by giving an interview 😜 or wait for upcoming video, you will get to know 🙂
Ohh jaa km kr apna . I didn't even subscribe to ur channel.
Btw this me: www.linkedin.com/in/engineerchirag/ , would love to know why you think it's scripted? Because candidate did it well? 😛
console.log('A');
setTimeout(()=> {
console.log("B")
},[])
['C','D'].forEach(element =>
console.log(element);
console.log("E") there is no bracket closing it will show error right
Indeed, the forEach function has no closing parentheses. She didn't noticed , and he ignored it.
Hi,
I came here becuase of random suggestion on utube,although i hate utube algo becuase they show me irrelevant most of time but this time it landed me on this page and I m happy and I m big fan of akshay saini and now ur also
apart from that i m not that experienced guy as the cadidiate is ,she is damn good but i figured out this solution ,if u can check please give me ur feedback
const addSum=(a,b)=>a+b;
function memoizedFn(fn)
{
let cache={};
return function(...args)
{
let key=JSON.stringify(args);
if(cache[key])
{
console.log("result is already there")
return cache[key];
}
else
{
let result=fn(...args);
cache[key]=result;
return result;
}
}
}
const memoizedSum=memoizedFn(addSum);
console.time();
console.log(memoizedSum(3,5))
console.timeEnd();
console.time();
console.log(memoizedSum(3,5))
console.timeEnd();
❣️❣️
function memomization(fn) {
let results = {};
return function(...args) {
let cache = JSON.stringify(arguments);
if(!results[cache]) {
results[cache] = fn(...args)
return results[cache]
}
return results[cache]
}
}
function add(a,b) {
console.log("calling .... ")
for(let i = 0;i
In this code:
console.log('A')
setTimeout(() => {
console.log('B')
}, 1000)
['C','D'].forEach((x )=>
console.log(x))
console.log('E')
// Output:
1
Showing Type Error when the code
['C','D'].forEach((x )=>
console.log(x))
executed due to semicolon not there end of setTimeOut().