Exercises: Recursion - Javascript In Depth

[@Abulkhair1995]

love you nader you deserve the best

[@thandomncube3480]

I'm starting to reconsider this career. My goodness Recursion ! LOLOL!

[@mdd972]

Thank you Nader for the amazing content!
I've been following the entire javascript series and this lesson is the hardest so far, I feel like I understand "recursion' but when it comes to the exercices I really struggled

[@erahia8702]

just wanted to say your videos are really helpful, thanks!

[@TechWithNader]

Thanks Erahia! This one was especially tough, so I'm glad you found it useful! 😊

[@Gerrrawwrr]

Hi Nader! I used a ready function for exercise #2. Well i used the "Array.flat()". And here it is my code :
const flatten = (arr) => {
array_flatened = arr.flat();
for (element of array_flatened) {
if (typeof element === "object") {
flatten(array_flatened);
}
}
return array_flatened;
};

[@dimadeloseros1]

Dude keep it up. Your videos are extremely helpful to me. I love your way of teaching / followed by a video of exercises.
I'm sure that you will get lots of subs in no time.

[@TechWithNader]

Thanks Dima - that means a lot! 😊
I'm really glad that the format is working about as intended. I sometimes wonder if I'm trying a bit too hard with the story-telling and analogies in some of these videos, so it's nice to know it's appreciated, haha! Don't hesitate to let me know if there's any topics you are interested in that might work well with this approach too!
Also, if you're interested, here's a Discord link to our server if you would like a more real-time way to chat with the community we're building: discord.gg/K4nkugP7Gd

[@dimadeloseros1]

@@TechWithNader For the time being you are in point with your videos of the basics. Perhaps 1 or 2 more videos of the interview questions / process with different candidates would be nice, or perhaps you could switch it up for a React interview since you have already one video of a JavaScript.

[@TechWithNader]

@@dimadeloseros1 That is a great idea, yes! I wonder if it would be useful to do a “backend” style one too where we could talk about APIs and servers etc alongside the React one 🤔

[@dimadeloseros1]

@@TechWithNader Oh that is a wonderful idea. I have a very slim experience when it come to backend in web development.
But as soon as you wrote your comment a very good idea came up. For the past couple of days i was looking for videos on TH-cam about any tutorials of Next.js and I really didn't want to get onto the first most popular one because I heard that the new version *13* changes a lot. Perhaps you could make a video about that if you are familiar with Next.js.
Note - I know that in your case, that perhaps jumping straight away from doing videos of basics in Js onto something as new and as advance as Next.js is a very big jump, therefore I would totally understand if you would like to take one step at the time with your content.

[@TechWithNader]

@@dimadeloseros1 That’s a good idea and I’d like to get to Next at some point but I’d like to focus on the DOM and then React first to really get the fundamentals down as you mentioned. I tend to really hesitate when it comes to specific frameworks because they change so often and are all based on the underlying language of JS anyways, haha. React is at least stable enough to probably get into since it’s so popular now, but even that had a huge change from classes to functional style 😂 I use Next a lot and love it so might create some kind of content around it, just need to think of how best to do it 🤓 So many videos and things to talk and get excited about… so little time 🤔

[@644sixfortyfour4]

With these advanced topics, I'm starting to really appreciate your long videos Nader, especially the exercises, so thank you for putting so much into these videos. 😇
I did take my time to solve the exercises myself first, and went through your solutions after, but I will need more time to master it though.

[@TechWithNader]

Thanks! I’m glad the long form is paying off as I really think it’s the only way to learn these things as deep as we’re going. It’s awesome to see you progressing through these so quickly and keeping up with the exercises - nice work! 🤓

[@aissanadjemeddine1330]

Thanks for this amazing video , very helpful

[@timothyrees6318]

Great video as always! But very difficult topic. Took me many hours. This is my solution to exercise 2:
let flat = [];
const flatten = (arr)=>{
for(let i = 0; i

[@timothyrees6318]

let objectFlat = {};
const flatten = (obj)=>{
for(const key in obj){
// for(const [key,value] of Object.entries(obj)){
if(typeof obj[key] === "object"){
flatten(obj[key])
}
else objectFlat[key] = obj[key];
}
return objectFlat;
}

[@akashrattan2975]

Love the video, in-depth exercises, and everything on the video 💯 overall!!!!! Thanks for the constant uploads 😊

[@TechWithNader]

Thanks Akash! I’ll keep them coming - can’t wait for the upcoming ones 😊

[@thandomncube3480]

I was able to smash to warm-up actually and flatten the array. Still need more practice for myself I must say.

[@Kerwell]

i think the hardest thing about recursion is the mentality you have to adopt. Took me 2 days and fully gave up on bonus exercise. It makes sense in retrospect, but it takes me a really long time to think in recursion.
ex1.
const palindrome = (string) => {
if (string.length === 0) return false;
if (string.length === 1) return true;
if (string[0] === string[1]) return true;
if (string[0] !== string[string.length - 1]) return false;
if (string[0] === string[string.length - 1]) {
let arr = string.split(""); // convert string to array
arr.pop();
arr.shift();
string = arr.join("");
return palindrome(string);
}
};
ex2. this one was no joke, i just assume we couldn't use any loops until I saw how you solved it lol...
const flatten = (array) => {
if (array.length === 0) {
return array;
}
if (Array.isArray(array[0])) {
array.splice(0, 1, ...array[0]);
return flatten(array);
}
return [array[0], ...flatten(array.slice(1))];
};
ex3.
const flatten = (object) => {
let flattened = {};
for (const [key, value] of Object.entries(object)) {
if (typeof value === "object") {
flattened = { ...object[key] };
delete object[key];
return flatten((flattened = { ...object, ...flattened }));
}
}
return object;
};
I fully gave up on bonus exercise. It was easy in retrospect, but it's really hard for me to adopt the thought process.

[@tomboolery]

I'm not even gonna lie these exercises hurt. I thought I had a good enough grasp on the topic just off of the lecture but it's clear this is just going to be something I need to practice more.
I was only able to solve two of these exercises, with one being the warmup and the other being exercise 2. The thing is I solved exercise 2 in an entirely differently way and kind of feel like I cheated (?) after seeing your solution:
// GOAL: Create a function that takes an array as its argument. The function must return a flattened version of the array no matter how NESTED it is.
const flatten = (arr) => {
// Array.isArray() evaluates whatever value is passed into it and determines whether or not it is an array!
if (Array.isArray(arr) === true) {
return console.log(`${arr}`);
}
if (Array.isArray(arr) === false) {
return console.log(`${arr}, is not an array`);
}
// .flat() is an ARRAY METHOD that flattens all nested arrays. It creates a new, flattened array =)
return flatten(arr.flat(arr));
};
console.log(flatten([1, 2, 3]));
console.log(flatten([1, 2, 3, [1, 2, 3]]));
console.log(flatten([1, [4, 5, 6, [7, 8, 9]], 2, 3]));
console.log(flatten("ayo"));
I'm hoping to move onto react and the DOM series soon but I really want to ensure my JS is as sharp as it can be. Feeling humbled. Tough stuff. Thanks as always Nader.

[@trueknowledge1981]

by the way what happens to the flattened undefined, null and str function call

[@TechWithNader]

Hey True! Good question - they should still be able to be used as normal. However, technically we should have a slightly fancier Object checker that is a bit more robust so this code might not work in every possible case (for example, null is technically an "Object" in JS haha). But in general, the flattened items are either copies or references to the inner items, so things like arrays, objects, functions etc that are references should continue to work as expected, just at the root/parent level in the Object. Hope that helps! 🙂

[@GeorgieDeTechie]

technically array, function, null and undefined are all of type object, array object has its indexes as keys and elements as values but function, null and undefined has no properties(keys and values) to display, so they were treated like an object {empty object}, and therefore they lost their place because they had no property to show.
null and undefined can never have values but you can assign properties(keys and values) to the function, afterwards, it will be accessed by the code like the array .
lastly, you can get stricter on the object type by using this clause rather ''if(value === Object(value)) to only check for objects that can have properties, in this case, null and undefined will be treated as values

[@jjjj5452]

this one kicked my butt

[@frq9293]

Took me ages but this was my solution for flatten... I was trying to not use loops at all for some reason
function flatten(arr, i=0){
if(i===arr.length-1) return arr
if(!Array.isArray(arr[i])) return flatten(arr, i+1)
const sub = arr[i];
arr.splice(i, 1)
arr.splice(i, 0, ...sub)
return flatten(arr, i)
}

[@EliHacıyev-p7v]

Thanks 😊

[@ThanhTran-vn8tp]

Here is my version of the bonus exercise:
const constructDOM = (object) => {
let result = "";
for (const [key, value] of Object.entries(object)) {
if (key === "nodeName") {
result += ``;
}
if (key === "childNodes") {
for (const obj of value) {
result += constructDOM(obj);
}
if (Object.hasOwn(object, 'nodeName')) {
result += ``;
}
}
if (key === "innerText") {
result += `${value}`;
}
}
return result;
}

[@BrantK147]

Here's my solution to Exercise 2:
function flatten(arr) {
const nextNestedArray = arr.find(el => Array.isArray(el));
const indexOfNextNestedArray = arr.indexOf(nextNestedArray);
// Base cases:
if(arr.length === 0 || !nextNestedArray) return arr;
// Recursive case:
let newArr = arr.toSpliced(indexOfNextNestedArray, 1, ...nextNestedArray);
return flatten(newArr);
}

[@kamilzmuda694]

Great channel and videos! 😄
It's a real pleasure to learn following your tutorials.
I would like to get some feedback about my solution for exercise 2 - flatten the array. Let me know what you guys think! 😅
CODE:
const flatten = (arr) => {
if (!arr.some(element => Array.isArray(element))) { // base case - check if at least 1 element of passed array is an array, if not return we arr
return arr;
} else {
arr = arr.flat() // if any of the elements is an array we assign arr.flat( ) to arr and make a recursive call by passing arr flattened by 1 level
return flatten(arr)
}
}

[@ShivamSharma-dq4pu]

function flatten(array) {
let result = [];
for (const item of array) {
if (Array.isArray(item)) {
result = [...result, ...flatten(item)];
} else {
result.push(item);
}
}
return result;
}
console.log(flatten([1, 2, 3]));
console.log(flatten([1, 2, 3, [1, 2, 3]]));
console.log(flatten([1, [4, 5, 6, [7, 8, 9]], 2, 3]));