Forem: Gus Pear 🍐

Time for a change? 6 questions to decide if changing careers or moving abroad is the right move

Gus Pear 🍐 — Sat, 06 May 2023 03:49:50 +0000

I feel like I face these types of “life-changing” questions every couple of years.

You as well at some point had to face(or are about to) decisions with the potential to completely shape your path.

And being stuck in indecision hell is a position is the worst part of it(I’ve been in several times and it sucks big time).

Once you make a decision it feels like all the weight has been lifted from your shoulders.

I’ll share with you a fear-setting/decision-making exercise I borrowed from Tim Ferris(who borrowed from Seneca) that I assure will get you a yes or no decision within 10 minutes no matter how big the change you’re facing.

You only need to answer these 6 questions:

#1 What is the worst-case scenario if I pursue this goal?

Fear may be the most powerful motivator for taking action (google: fear for driving action in copywriting)
Here’s an example:

Say you are considering quitting your job to learn to code in 6 months and pursue a career as a Software developer.

What is the worst-case scenario that can happen?

You use up all your savings
You realize it will take longer than 6 months
You quit the developer dream and go broke.

In the worst-case scenario, you are broke and unemployed with two-thirds of the knowledge you need to get a job as a Developer and had (hopefully) a great 6 months of studying, reading, and drinking lattes.

Nobody died and you are not in jail.

Is it as bad as you thought?

#2 What is the most likely outcome if I take action toward this goal?

This is not even the best-case scenario, we are talking about the most likely outcome.

Let’s see how good it can be.

I’ll take the same want-quit-my-job-to-be-a-dev example.

The more likely outcome?

You gain 12GB of new knowledge
You use up your savings
You receive a job offer at the end of the 6 months
It’s not 100K/year (like in the youtube videos you watch) but is a great start

At the end of 6 months, you got the job you wanted. You are poorer than before (which you knew was going to happen and hopefully prepared for) and started a new career.

Not bad, not bad…

#3 What can I do to prevent the worst-case scenario from happening?

This is where you limit your losses.

What was the worse scenario again?

You are broke and unemployed with two-thirds of the knowledge you need to get a job as a Developer
Ok.

What can you do to prevent this scenario from ever happening?

Create a study plan for your 6 months
Use the Seinfeld technique to make sure you show up every day
Make friends that are attempting the same change to keep each other motivated
Reduce your cost of living to the bare minimum to maximize your savings (or just save more money beforehand)
Have a backup plan to get back to your old career if it all fails

#4 What steps can I take to recover from a worst-case scenario if it does happen?

If it does happen(very unlikely) and you are now broke and unemployed here are a few things you can do to get back on your feet:

Move back with your parents for a short while (if that is an option)
Get in touch with people within your old industry to try to be referred to a job position
Keep studying while you don’t find a job(you might get the one-third of knowledge you need for a jr dev role)
Apply for dev jobs regardless of being ready or not(you’ll never feel ready anyway)
If it all fails, show up at your closest construction site ready to work and ask for a job or at the nearby restaurant.

#5 Will this change take me closer or further from my ideal future?

I know it’s hard to have a clear vision of your ideal future (trust me, I struggle with this one)

On the other hand, if I ask you right now to tell me something you don’t want to do, or someone you don’t want to be like, you will likely give me an answer on the spot.

That is why I find it easier to create an anti-future-vision.

As an example, here are a few things in my anti-future vision:

I work on weekends/holidays/night shifts
I work traveling
I don’t spend time with my family
I don’t read anymore
I am out of shape
I am an expert procrastinator

The list goes on…

Being afraid of not changing will force you to change.

Again, fear may be the most powerful motivator for taking action.

#6 Will you regret not making this decision on your deathbed?

If you are still unsure about taking or not the leap, try the ultimate question:

Will I regret not having done this on my deathbed?

That is as far as I can help you.

And last but not least important consider items 1 and 5 of this tweet:

Ryan Holiday

@ryanholiday

5 Stoic lessons from Seneca:

1. We suffer more in imagination than in reality
2. Associate only with people who improve you
3. The greatest remedy for anger is delay
4. Value your time more than your possessions
5. Death is not in the distant future. We are dying every day

16:00 PM - 01 May 2023

Best of luck in your new beginning.

Here here to watch a video of the original fear-setting exercise from Tim Ferris

How To Read For Maximum Retention

Gus Pear 🍐 — Mon, 27 Mar 2023 11:03:14 +0000

“This reading technique put me in the top 2% of all my classes from undergrad school to my masters at Berkley.” - North Caroline University’s Professor Jeffrey Kaplan

What is the purpose of reading if you don’t remember any of it later?

Distraction.

If you read to learn and not for distraction(nothing wrong with that), pay attention because this has the potential to skyrocket your learning.

But only if you say yes to this question.

Would you read 50% slower to retain 10x more?

It sounds like a no-brainer to me.

Retaining more means:

Actually acquiring knowledge
Be able to tap into that knowledge at will
Be able to write efficiently from memory

Unfortunately…

Most people are interested in reading 2x faster

To brag about how many books they read in a month (without retaining anything)

You don’t want to post that it took you 1 month to read a 200-page book or that your read only 5 books last year, do you?

I don’t think so.

But the truth is that the number of books you read or your reading speed is irrelevant if you are reading to gain knowledge and not to pass time.

If retaining knowledge is what you are after, here is how you can read for maximum retention.

Step 1: Summarize the first 3 paragraphs into a single sentence each

This is called “synthesis”.

When you summarize a block of text down to a single sentence, you are forced to understand the meaning of that text.

You encourage your brain to find relationships and patterns.

Here’s how I’d do it for the following 3 paragraphs.

The easiest way to drive intrinsic value is by writing a list with pen and paper
Write 25 things you are curious about to the point of spending a weekend studying it
Be specific, the more detail the better.

Step 2: Summarize the 3 sentences into a single one.

You’ll have to leave stuff out.

That is the point.

Your brain is forced to find and pick what it considers the most important points.

Here’s how I’d do it for my 3 sentences above:

Write down in detail 25 things you are very curious about.

Step 3: Rince and repeat for the rest of the book

No, it’s not easy.

It’ll take you twice the time to read the book.

But you’ll 10x your retention.

I suggest skimming through the book to see if the content is worth retaining.

If so, this is retention in steroids.

As usual: Easy choices, hard life. Hard choices, easy life.

14 Research-Backed Techniques To Learn To Code 2x Faster

Gus Pear 🍐 — Wed, 15 Mar 2023 21:18:04 +0000

I’ve been fascinated by “how to learn anything faster” since I was 18.

I found an online course promising English fluency in 6 months (I’m Brazilian).

I was sold.
It took me 10 years.

After studying countless articles and half a dozen books on the topic, In the following 12 years, I learned more stuff than most people will learn in their entire lives.

Some of the things I've become:

A pencil portrait artist
Translator
A qualified carpenter
A commercial airplane pilot
A software developer

Here are the 14 researched-backed techniques to

Learn to code 2x faster
Don’t forget what you learn
And Understand hard concepts

#1 Make your practice as close as possible to the goal

If you are getting prepared for a white-board style interview, you should try and simulate the real interview conditions as closely as possible:

Use a white-board(duh) or pen and paper to solve the problems
Set a 45min timer (or whatever time they usually give at interviews)
Describe your reasoning as you code (as if talking to the interviewer) The closer your practice resembles the real thing, the more prepared you’ll be.

#2 Passive learning doesn’t work

In coding (as in most other things) passive learning has little effect.

You have to code things out to learn.
Just read about the merge sort algorithm? Now get your PC and write it out.

Watched a tutorial on how to build a menu navbar? Now it’s time to try it out for yourself.

1 hour of active learning = 10 hours of passive learning (maybe more)

#3 Practice with purpose

You should set specific goals for your coding practice and focus on areas that need improvement.

For example:
Goal
I want to build a chrome plugin using chatGPT and notion APIs that does x.
Steps
Divide the goal into tasks and choose to complete a single task every morning.

#4 Connect new concepts to things you already know

For example, if you're learning about object-oriented programming, think about how it relates to other programming paradigms you've learned or to things in the real world (e.g. the class is like a factory and the object instance is like one product of that factory).

#5 Create mental models

Create mental models of coding concepts to better understand them.

For example, if have are learning about recursion, try to sketch out a diagram to help you understand the flow of the code
Like in this post

#6 Always try to recall from memory

Say you have just learned a concept or a piece of syntax. Now, try to recall it from memory without looking it up.

For example, after reading about a for loop, try to write out an example of one from memory.

You don't have to get it right to reap the benefits, you just have to try.

#7 Space it out

Practice a little regularly rather than a lot once.

For example, code for 1 hour every day instead of for 7 hours once a week.

#8 Mix it up

For example, if you are solving coding problems, don’t solve all array problems, then all graph problems, then all linked list problems. Instead, solve them randomly.

You’ll have to figure out what type of algorithm and data structure is needed to solve that problem(like in a real code interview, no one is going to tell what the problem is about).

#9 Reflect on what you have learned

After a coding session, take a few minutes to reflect on what you learned and what you found challenging. Write down any questions or areas you need to work on.

#10 Tune it up

Regularly check your skills and understanding by testing yourself with quizzes or coding challenges or asking for feedback from others.

#11 Break it up

Break larger coding tasks into smaller, more manageable pieces. For example, if you're building a website, break it down into specific pages or features.

#12 Ask for feedback

These days you can also tell chatGPT to play the role of a grumpy senior dev to check your code.

Try to get feedback on your coding from more experienced developers. Use feedback to improve.

#13 Rehearse mentally

I used this one a lot during my pilot training(it’s free to fly in your head)

When you are commuting to work for example and don’t have a computer with you, you can for example, mentally go over the steps needed to create a button that toggles a sidebar.

#14 Rest and recharge

This is as important as the other ones.
In the beginning, you don’t give a s***, but when you feel the burnout creeping in:

Take breaks and engage in activities that allow for mental recovery and relaxation.
Go for a walk or watch a movie.

Wish You Had More Time? They Did Too…

Gus Pear 🍐 — Wed, 08 Mar 2023 20:52:00 +0000

Did you ever stop to think that most of the world’s great men achieved their life work, not in their day job, but in their spare time?

I had not.

I thought they were privileged and could work on their passion all day, every day.

I was wrong.

Just like you and I, they had a day job that paid the bills and put food on the table. They made the most of the little spare time they had and changed their lives (and ours)

Abraham, Edison, and Alexander

After a long day of hard work, while his fellow workers slept or goofed off, a tired rail-splitter spent his evenings studying his worn-out books by the light of a candle or fire. Abraham Lincoln cut out his path to immortality in his spare time.

Despite being overworked and underpaid, a telegraph operator with unwavering faith in his fantastic dreams gave up precious hours of sleep or leisure time at night to bring them to fruition. The world is now reaping the benefits of what Edison accomplished during his spare time.

An instructor in a little-known college, burdened by the tedious work he despised, found comfort in tinkering with a strange device during his evenings and holidays, much to the amusement of his colleagues. However, Alexander Graham Bell ultimately went on to invent the telephone during his spare time.

There's not enough time. Period.

There is never enough time to do everything. But there is always enough time to do the most important things. – Brian Tracy

If you are waiting for when you have enough time to do stuff you want to do, you are going to wait your entire life.

Time is a constraint we have to learn to live with.

Time is valuable and scarce.

We don’t make spoons out of diamonds (unless you are filthy rich and bored), do we? That is because diamonds are valuable and scarce, so we use them wisely, we don’t waste them.

Our time is way more important than diamonds. But we are still eating breakfast with a diamond spoon.

It’s all a matter of priorities and systems.

The 2 things you can do about it

I started writing online a couple of months ago.

I met Leo on Twitter, he is 43, has a full-time job, a wife, 2 boys, and still finds the time to crush it online by talking about his passion(growth strategies)

He probably has less free time than you or me (unless you have 2 jobs and 3 kids)

How did he achieve such exponential growth on Twitter in such a short time?

Prioritized: He wrote every single day since November (9.757 tweets so far)
Systematized: He created a system to help him write faster and better even when he doesn’t feel like so I have a tone to learn from Leo.

That’s the only 2 things you can do about your time (not including wasting it).

Prioritize the things that’ll help you achieve your goals.
Create systems to make it easier to keep consistent.

It’s one of those things that are much easier said than done (like most important things). I struggle with prioritizing every day. I have bad days, lazy days, sick days, and normal days when I don’t feel like writing (or have no ideas to write about). That is how life is. But we can do better, our future selves will thank us.

The person you’ll be in 2 years is the sum of what you’ll do every day for the next 730 days.

What are you going to be better at?

C# FileStream For Lazy Developers In A Hurry. The Bare Minimum

Gus Pear 🍐 — Tue, 28 Feb 2023 21:19:07 +0000

If you:

Have no idea what a stream is
Have a blurry idea but need a better analogy
Don't know how to use(understand) streams in actual code

This post is for you.

This is my brain trying to understand streams last week.

What Are Streams?

A Stream is the flow of data(bytes) that moves from one point to another, just like a stream of water flowing down a river.

Streams are used to read and write data to and from:

Files
Networks
Memory
Other streams

An Analogy To Help Us Navigate The Examples

Imagine a huge tank of muddy water(you don't know how much water is in there) and you need to clean this water and fill another tank with clean water.

This tank has a faucet on the outside that you can open and let the muddy water flow out.

You find a hose that has a water filter in it.

You connect the hose to the muddy water tank and put the other end in the clean water tank.

As you turn on the tap, the water flows through the hose, is filtered and clean water comes out.

The stream is the flow of water(not the water itself).
The muddy tank is the source you are trying to read(file in our case).
The filter is a helper class that helps us clean the water(convert bytes to text).
The clean water tank is like the output on the other end(in our case we'll be logging the file content to the console as it comes)

C# classes to work with streams

These are the classes to use when reading and writing to and from different sources like files, memory, network, other streams, etc(I don't know what else).

Stream is the abstract class that provides methods to transfer bytes to and from the source(file, memory, network, etc). It is the core class to transfer bytes.

If a class wants to read or write from a source(file, memory, or network) it needs to implement the Stream class.

We'll only focus on the FileStream and the helper classes StreamWriter and StreamReader in this post.

How To Read a File Using the FileStream

Let's create a simple method that takes a string path and reads the content of the file and outputs it to the console

using System.IO;

public static void ReadFile(string path) //E.g. @"d:\text.txt"
{
       var fileStream = new FileStream(path, FileMode.Open, FileAccess.Read);
       var buffer = new byte[fileStream .Length];
       fileStream.Read(buffer);
       var result = Encoding.UTF8.GetString(buffer);
       Console.WriteLine(result);

       fileStream.Flush(); // ensure that any data still in the buffer(bytesArray) is written to the file
       fileStream.Close(); //release any system resources associated with the object
}

The file path is the muddy water in the tank(but instead of mud we have bytes)
The FileStream object is the muddy water tank's faucet(you open and bytes flow out instead of muddy water)
The Encoding.UTF8.GetString() method is the filter cleaning the muddy water. In this case, it converts bytes into text.

A simplified way to write this method is with the using block. When the variable you declared inside of the using falls out of scope, it calls the .Dispose() method which internally calls .Flush() and .Close() automatically for us.

using System.IO;

public static void ReadFile(string path) //E.g. @"d:\text.txt"
{
       using (var fileStream = new FileStream(path, FileMode.Open, FileAccess.Read))
       {
           var bytesArray = new byte[fileStream.Length];
           fileStream.Read(bytesArray);
           var result = Encoding.UTF8.GetString(bytesArray);
           Console.WriteLine(result);
       }
}

What if I don't want to deal with bytes directly is there a way to make this more high-level?

Here is where the helper class StreamReader comes in.
Have a look at the same code as above but using StreamReader instead:

using System.IO;

public static void ReadFile(string path) //E.g. @"d:\text.txt"
{
    using (var streamReader = new StreamReader(path))
    {
        var result = streamReader.ReadToEnd();
        Console.WriteLine(result);
    }
}

Note: This is only one way of doing it. There are others, e.g. File.ReadAllText(path).

In the above example, we don't even need to use the FileStream. The StreamReader deals with the FileStream under the hood to make our lives simpler.

Let's have a look at another example.

What if we are reading a file that is bigger than our available RAM?

One thing is for sure, we cannot read the whole file in memory at once! We have to use the Hannibal Lecter approach and do it piece by piece(forgive my analogy)

Here is one way you can do it(Lower level version):

using System.IO;

public static string ReadLargeFile(string path)
{
    const int bufferSize = 4096; // read the file in 4KB chunks
    var builder = new StringBuilder();

    using (var fileStream = new FileStream(path, FileMode.Open, FileAccess.Read))
    using (var streamReader = new StreamReader(fileStream))
    {
        char[] buffer = new char[bufferSize];
        int bytesRead;

        while ((bytesRead = streamReader.ReadBlock(buffer, 0, bufferSize)) > 0)
        {
            builder.Append(buffer, 0, bytesRead);
        }
    }

    return builder.ToString();
}

Note that in the above example, we use one of the StreamReader constructors that take a FileStream as a parameter. We do that because we need more control over the stream in this case.

Can we do away with the ugly lower-level code?
Yes, here we go:

using System.IO;

public static string ReadLargeFile(string path)
{
    StringBuilder sb = new StringBuilder();

    using (FileStream fileStream = new FileStream(path, FileMode.Open, FileAccess.Read, FileShare.Read))
    using (StreamReader streamReader = new StreamReader(fileStream))
    {
        string line;
        while ((line = streamReader.ReadLine()) != null)
        {
            sb.AppendLine(line);
        }
    }

    return sb.ToString();
}

In the above case:

We are not dictating the size of the buffer to be read at a time(just do it line by line, however much that is)
we don't have to keep track of the bytes read.

It is much simpler to use.

What about writing a file? Let's have a look next.

How To Write A File Using The FileStream

This simple method takes a string path, creates a file a writes some content to it.

Using the FileStream

using System.IO;

public static void WriteText(string path) //E.g. @"d:\text.txt"
{
   string text = "hey my dude!";
   byte[] bytesArray = Encoding.UTF8.GetBytes(text);

   using (var fileStream = new FileStream(path, FileMode.Create))
   {
      fileStream.Write(bytesArray);     
   }
}

Using the StreamWriter helper:

using System.IO;

public static void WriteText(string path) //E.g. @"d:\text.txt"
{
    using (var s = new StreamWriter(path))
    {
        s.WriteLine(text);
    }
}

Note: The File class provides some handy methods as well. The above example could've been written as: File.WriteAllText(path, text);

Let's raise the same size problem again.

What if you want to write a big ass file that is too large to fit in your RAM at once?

You can use the same break it up as you write the same way we did when reading:

Using the FileReader only:

public string WriteFile(string path, string content)
{
    // Create a new file at the specified path
    using (FileStream stream = new FileStream(path, FileMode.Create, FileAccess.Write))
    {
        // Write the content to the file in chunks
        byte[] buffer = Encoding.UTF8.GetBytes(content);
        int chunkSize = 1024;
        for (int i = 0; i < buffer.Length; i += chunkSize)
        {
            int remainingBytes = buffer.Length - i;
            int bytesToWrite = remainingBytes < chunkSize ? remainingBytes : chunkSize;
            stream.Write(buffer, i, bytesToWrite);
        }
    }
}

Using FileReader and StreamWriter:

public static void WriteLargeFile(string path, string content)
{
    int bufferSize = 4096;
    byte[] buffer = new byte[bufferSize];
    int bytesRead = 0;

    using (var stream = new FileStream(path, FileMode.Create, FileAccess.Write, FileShare.None, bufferSize, FileOptions.SequentialScan))
    {
        using (var writer = new StreamWriter(stream))
        {
            int offset = 0;
            while (offset < content.Length)
            {
                int bytesToWrite = Math.Min(bufferSize, content.Length - offset);
                var chunk = content.Substring(offset, bytesToWrite);
                writer.Write(chunk);
                writer.Flush();
                offset += bytesToWrite;
            }
        }
    }
}

In this case, you can see that you still have to deal with the file chunks more directly.

Conclusion

I hope streams make more sense to you now as it does for me.

Thanks again for reading!

If you like this article:

Leave a comment (You can just say hi!)
Let's connect on Twitter @theguspear

Catch you next week,

Gus.

The Recursion Explanation I Wish I Had Read As A Self-Taught Developer

Gus Pear 🍐 — Thu, 16 Feb 2023 02:53:23 +0000

It took me several attempts to understand recursive functions.

Once I understood how it works, I figured I didn't completely understand 2 things:

Function’s Return Value
The Callstack

Once I understood these 2, recursion made sense.

This post is how I’d teach my beginner-self recursion if I could go back.

#1 Function’s Return Value

When a function returns a value, the function itself is replaced by the return value.

Let me try to exemplify:

This is a function that returns the square of a number

function square(x) => x * x;

This:

const num = 1 + square(3);

Is the same as:

const num = 1 + 9;

square(3) is "replaced" by 9, since 9 is the value that the function returned.

Cool? Great.

Do you remember that in Maths sometimes the order or the operations mattered? This is the case when working with functions. The code interpreter can’t add 1 to square(3) before it knows what the heck is the value of that square(3) returns. So functions have to be executed before the other calculations on the same line.

Example:

function square(x) => x * x; //line 1
const num = 1 + square(3);   //line 2
console.log(num) //10        //line 3

The interpreter will run the above code in the following order:

Line 1 (read the function declaration)
Line 2 (Oh there is a function here, let's call this function passing the value 3 into it)
Line 1 (function is called with 3 and returns with the value 9)
Line 2 (it replaces the function with 9 and now can calculate 9 + 1 and assign it to num)
Line 3 Finally we log 10 to the console.

The takeaway is that every time there is a function call, the interpreter:

Stops on that line and calls the function
It runs the function code with the value passed in(if any)
It goes back to the line that called it
Replaces the function call with the returned value
Resume from there

It is essential to understand this to understand recursion(this was one of the things I had problems with that made it harder to understand recursion).

#2 The Callstack

The call stack is how the interpreter(like the javascript interpreter in this browser) keeps track of the functions called by the script.

That is how the interpreter knows how to come back to the line that has called the function.

I’d like to think of it as a box to store the books you read and in which page and line you stop at each.

Say you are in your local library.

You start reading the book “Sapiens”. On page 72 line 87 it mentions the diprotodon(the biggest marsupial to walk on earth) which itches your curiosity. So you put a marker on the page and write down the line you are at and put the book in the box.

Then you find a book about the diprotodons. But on page 94 line 138 it mentions the giant sloths and again curiosity kicks in. You put a marker on page 94 and write the line you are at on it and put it in the box.

As you read more about the giant sloths you realize it’s time to go home. You put another marker on page 121 line 147 and put the book in the box.

The next morning you rush to the library to finish your readings.

How do you know in what book, page, and line you left off? Since you were organized with your stack of books and markers, the answer is easy. Just pick the top book from the box, the marker inside the book will tell the page and line.

Know you can make your way back to the initial book("Sapiens") and keep reading until the end(or until curiosity strikes again)

The analogy is:

The box is the call stack
Each book is a function call
Each marker is in which line the function was called

If I'd translate this example into code it would look something like this:

function readSapiens(){
   //read until page 72 line 87
   readDiprotodonsBook();
   //finish reading sapiens(when we are back from reading about diprotodons)
}

function readDiprotodonsBook(){
   //read until page 94 line 138
   readGiatSlothsBook();
   //finish reading diprotodon's book(when we are back from reading about giant sloths)
}

function readGiatSlothsBook(){
   //read until page 121 line 147
   debugger
}

readSapiens();

If you hit f12 now, copy this code, paste it on the console, hit enter, and go to the sources tab you can see the call stack.

It will look like this:

The code is paused inside the third function call.

See that there is no magic, everything is built on top of data structures.

Now we are prepared to go over an actual recursive function example.

Basic Example

The simplest example I can think of is a function that adds all numbers until the number you passed in.

function addNums(x){
   if(x === 1) return x;
   return x + addNums(x - 1);
}

Note: I am not taking into account 0 or negative numbers to simplify the example.

addNums(3) //6
addNums(5) //15

Let's go through it line by line:

function addNums(x){          //line 1
   if(x === 1) return x;      //line 2
   return x + addNums(x - 1); //line 3
}                             //line 4
                              //line 5
let sumThree = addNums(3);    //line 6
console.log(sumThree); //6    //line 7

[Lines 1 to 5]: Smooth execution, it just declares the function(now we can call it when need to)
[Line 6]: The interpreter declares the variable sumThree but before it assigns the value addNums(3) he realizes that it is a function, so it has to call the function first(passing 3 into it) to then assign the return value to the variable sumThree

2.1. [Waiting on Line 6]: It calls the function on line 1, passing 3 into it. 3 is not equal to 1 so we move past line 2. On line 3 we should return 3 + addNums(3 - 1) but wait, this is another function call. So it has to call it first passing 2 into it.

2.2. [Waiting on Line 6 [waiting on Line 3]]: It calls the function on line 1, passing 2 into it. 2 is not equal to 1 so we move past line 2. On line 3 we should return 2 + addNums(2 - 1) but wait, this is another function call. So it has to call it first passing 1 into it.

2.3. [Waiting on Line 6 [waiting on Line 3 [waiting on Line 3]]]: It calls the function on line 1, passing 1 into it. This time we hit the base case. 1 === 1 is true, so for the first time we return a value from a function call.

2.4. [Waiting on Line 6 [waiting on Line 3]]: It goes back to line 3 of the previous function call. It now can calculate 2 + addNums(2 - 1) because it now knows that addNums(2 - 1) is 1. So this function now can return 3.

2.5. [Waiting on Line 6]: Lastly it goes back to the initial call on line 6. It can now calculate 3 + addNums(3 - 1) because it now knows that addNums(3 - 1) is 3. So this function now can finally return 6.

[Line 7]: It logs 6 to the console.

I also tried to explain it visually(to the best of my abilities), have a look:

Conclusion

If you read this far, first I want to thank you, it means a lot to me. Second, if you got lost at any point in this post, can you do me a favor?

Leave a quick comment saying where I lost you.

I'll try to improve this post so it can help you that like me once had a hard time understanding recursion.

Thanks again for reading!

If you like this article:

Leave a comment (You can just say hi!)
Let's connect on Twitter @theguspear

Catch you next week,

Gus.

6 Reasons Mastering DSA Can Double Your Paycheck, Make You A Better Dev And Boost Your Confidence

Gus Pear 🍐 — Sat, 04 Feb 2023 13:53:20 +0000

I am sitting in a room with another 6 candidates.

My hands are sweating and my heart pounding fast. It's hands down the most anxious I've felt my entire life. The door opens. The guy calls my name. It's my turn. I want to run away, instead, I stand up and mechanically follow him out of the room.

This is not a software engineer interview.

This is a simulator test to be an airline pilot.

Developers are not the only ones doing scary interviews, aspiring pilots go through a sh** load to get a job. If you are wondering, I failed that interview 🤷‍♀️. But fast forward to today, I am glad I did.

What both interviews have in common is that they require huge preparation.

And the single skill that will get you in is DSA Data Structure and Algorithms

Why? Here's:

Reason #1 You Need them To Pocket The Fattest Paychecks In The Industry

Not sure about you but I work for the money.

I'm not a greedy dude, I couldn't care less about material stuff(I still use clothes from 10 years ago). But money buys something nothing else can. Freedom. And I want that very much.

Mastering DSA is the fastest way to make +100k/year(not the easiest)

Whether you like them or not, if you don't learn them you are missing out on the potential to be working for the coolest and highest-paying companies out there. Unfortunately(or fortunately for those who mastered them) that is how most big companies to interview.

The fastest you accept that this is how things work, and start putting in the work. The fastest you'll land your dream job dream paycheck.

Reason #2 They Are The Cornerstone Of Computer Science

I remember watching a mock whiteboard code interview on TY(Clement's channel) just after starting to learn to code.

The problem seemed so complex, so out of my league I literally had no clue what was going on. Somehow the idea that I could have the knowledge to solve that kind of problem exited me. But I had a sea of concepts to navigate to get there.

I've barely come a few miles off the shore.

All software is built on top of DSA.

The algorithm controls the logic and flow and data structures organize the data efficiently. This stuff won't be out of date next year(like javaScript frameworks) it hasn't changed since it was created. It's what I call perpetual knowledge. It makes everything else you learn after make more sense.

You and I should spend our time using the ratio:

80% foundations

Algorithms
Data structures
Design pattern
Mastering 1 Language

20% on the rest.

Frameworks
Tools

Reason #3 It Sharpens You Problem Solving Skills(The Most Important Skill In Life)

The first few Leetcode puzzles I tried to solve were both eye-opening and discouraging.

I didn't even know how to get started. I didn't know what the question was asking for. Problem-solving is a skill just like any other, it requires you to learn and practice to improve.

My axe was dull.

You are probably not going to be implementing merge sort or Dijkstra's algorithm on your daily job. Not even in Google.

These problems are actually much harder than those you'll face daily. It's more like: if he can solve these problems he won't have a problem with his daily tasks. Companies want to know what is your thinking process for solving a problem(do you ask for clarification? for help? can you clearly explain what and why you are doing?)

Problem-solving is the most sought-after skill in the industry.

It's a sure way to fast-track your career.

Reason #4 It Improves Your Ability To Understand Complex Topics

Have you tried reading a DSA book from cover to cover?

If you didn't fall asleep before the end of the first chapter you are my hero.

The most effective way you and I learn anything is by using active learning methods(learn it, code it, run it, and test it). Especially complex topics like DSA. You won't learn it by passively reading a book or watching YT videos(no matter how many). You don't have to reinvent the wheel, smart people have developed systems that we can borrow to learn complex stuff.

I like using Feynman's Technique for most things.

Mastering DSA will show that you, above all, know how to learn, have a system to understand complex stuff, and can break down complex topics into understandable bits. And that is a skill that not a lot of people have.

Tell me, if you have mastered DSA(you can solve and explain most problems) do you think you'll have any trouble understanding any other CS topic?

And to top it off it shows you are committed and persistent.

Reason #5 It Gives You All The Tools You'll Need To Do Your Job Better And Faster

Think of a carpenter that only has a hammer and a handsaw.

He might be able to get away with those two but in most cases:

screws would be a better choice for fastening
a jigsaw for irregular cuts
a circular saw for long-straight cuts

He would do his job 5x faster and better just by using the right tools

It's like the old saying: If you only have a hammer every problem will seem like a nail.

Then, this same tradesman finds a bag of money and buys all the tools, and signs up for workshops to learn to operate all of them given by master craftsmen. This guy would easily double his earnings after that, wouldn't he?

That is how I see learning DSA for devs.

The difference is that we don't need to find a bag of money, you can learn it all for FREE online.

This is the greatest advantage of a tech career.

You can train as much as you want. It's only up to you.

Reason #6 All Of The Above Will Make You A Much More Confident Dev And Person.

Do you know anyone with sloppy skills but that somehow gets great jobs?

I bet this guy is confident.

At the end of the day knowledge alone will only get you so far(80% of the way). You have to convince people that you know what your CV says you know. And they have to believe it to hire you.

Scott Adams the creator of the comic strip Dilbert in his book “How to Fail At Almost Everything And Still Win Big” tells that he bullshitted his way to the top of the corporate world simply because he was good at interviews. He was a good communicator and therefore good at making people believe he was capable.

If you are confident you show that:

you value yourself
you can take risks
you can meet new challenges
you can deliver

And last but not least it helps you get a job.

My Plan To Master DSA

I don't plan on memorizing the implementation of every Data Structures or Algorithms.

This would be like cramming for an exam. You might pass the exam but 1 week later you won't remember a thing. My intention is quite the opposite. I want to chuck DSA into my long-term memory.

I want to persist this knowledge in my hard drive, not my RAM.

Here is my plan:

The roadmap
The most common patterns
Practice the blind 75 questions
I'll use the Feynman Techique and storytelling to make algorithms more memorable

I plan on writing posts as I go.

Conclusion

It's 11:53pm on a Saturday night.

I am the only one awake at home. I am working on my consistency by writing one article per week for at least 6 months. So here is the wrapper.

If you don't plan on interviewing for a FANG(like me, at least not soon) I think you should still do it.

It will make you a significantly better programmer It will give you a Free confidence boost

Grind now, and rip the benefits later.

Time to hit the sack.

Thanks for reading!

If you like this article:

Leave a comment (You can just say hi!)
Let's connect on Twitter @theguspear

Catch you next week,

Gus.

5 Life-Changing Lessons I Learned From Being Laid Off That Will Put You Ahead Of 97% Of People

Gus Pear 🍐 — Sat, 28 Jan 2023 02:21:09 +0000

I am sitting in this auditorium with 50 other coworkers.

Our manager and the HR lady are there. They hand us paper and a pen, and that's when I realize we are all being fired. We had only been working there for over a year.

In that year, my wife and I bought an apartment that cost us $1800 per month. That alone was more than what I made in my previous job.

From one day to the next, I was unemployed and +200k in debt.

Here are the lessons I learned.

Lesson #1 When People Are Fearful Is Time To Get Prepared

The job market is like the stock market.

When the media says that a company is doing amazingly well(stock price rises)

Most people rush to buy it
Smart investors hold or sell

When the media says that a company is going through tough times(stock price falls)

Most people sell desperately
Smart investors buy more

The job market behaves the same way

When the media says that tech jobs are in high demand

Most people start to get prepared to get a tech job
Smart people are already prepared

When the media says that the tech sector will lay off 40k jobs

Most people give up on finding a tech job and go do something else
Smart people get prepared

Get prepared when most people are discouraged and you'll come out ahead.

Lesson #2 When People Are Fearful There Is Less Competition

Bad news clears away the weak-minded competition.

When most people are reluctant about the future, there are only a few consistent and diligent cats putting in the effort to get what they want(hopefully you are one of them)

This plummets the candidates per job ratio.

When hiring resumes, guess who is getting the jobs?

Lesson #3 Get Practical. Focus On What Is Within Your Control

I sure didn't want to be fired, we had just bought an apartment!

My bank account was as dry as the desert.

Did I whine and moan about how unfair life was?

Shit no, I saw that time as an opportunity and I went and got my commercial pilot's license during that time.

We spend far too much energy focusing on what is out of our control.

It's wasted energy since there is nothing you can do about it.

I learned to reframe the problem into a question that focuses on what I can do.

For example:
Big techs are laying people off and there are fewer jobs.

Reframe it to:
What can I do to improve my chances of getting hired now that big techs are laying people off and there are fewer jobs?

Lesson #4 Rethink Your Lifestyle And Priorities

As a flight attendant, I made 6x what I used to in IT Support.

The same was true for most of my colleagues. But then, most of them upscaled their lifestyle to match their bigger salary. 1 year later, they were used to driving a new car, wearing fancy clothes, and eating at expensive restaurants.

After getting fired, they had an awful time downscaling their newly acquired tastes and handing over their new cars to the bank.

I was the same old dude, driving my old car, wearing the same clothes, and still eating cheaply.

The most important stuff in life costs little or nothing.

A good book
Quality time with your family
Coffee with a friend
A walk in nature

Less stuff, more knowledge, and experiences.

Lesson #5 Consistency Pays Off

I didn't learn this one when I was laid off(just couldn't leave it out of the list)

This one took me a long time and many shoves to understand.

I know how hard it is to keep consistent when all the odds seem to be against you.

The reality is that nothing that has the potential to change your life will happen in a month. Meaningful things like great work take time to be created. If you want to escape mediocrity, you have no other choice but to learn to be consistent.

If you are like I was, you'll probably need to read:

Can't Hurt Me (David Goggins)
So Good They Can't Ignore You (Cal Newport)

Conclusion

Life is not a straight line.

At times you are on top, at others you are at the bottom. What you'll always have is the choice to focus your energy where you are now or where you want to go. Learn to choose the apple over ice cream, the book over Netflix.

If you:

Get prepared when people are fearful and competition is the lowest
Get practical and focus on what is within your control
Rethink your lifestyle and priorities
And be consistent

I guarantee you'll be ahead of 97% of those around you within a year.

Note: This post above all is a reminder to myself. The closest ears to my mouth are my own.

Thanks for reading!

If you like this article:

Leave a comment (You can just say hi!)
Let's connect on Twitter @theguspear

Catch you later,

Gus.

5 Reasons To Choose JavaScript Maps Over Objects For Storing Key-Value Pairs(With Examples)

Gus Pear 🍐 — Sat, 21 Jan 2023 09:51:29 +0000

At 18 I started my "career" as an IT support guy.
At 20 I was flying 80 hours per month as a flight attendant.
At 22 I got my commercial airplane pilot license.
At 29 I was a carpenter and today at 32 I work as a software developer.

If there's one thing I know how to do well, it is how to keep up with changes. Because if you don't, you are left behind. I know firsthand how comfortable it is to use stuff you know by heart instead of giving the 'new' a try.

But discomfort is what makes you grow, as a human and as a dev.

Let's dive head first and see what the "newish" Map can teach us today.

What is the Map object?

Here's the holy source's (MDN) definition:

The Map object holds key-value pairs and remembers the original insertion order of the keys. Any value (both objects and primitive values) may be used as either a key or a value.

To put it simply, Map is JavaScript's native hash or dictionary data structure.

Syntax: Map vs Object

Here's a handy cheat sheet that does a great job at showing their syntax differences, posted by Andrej on Twitter.

He also recorded performance tests if you are interested.

Reason 1: You Won't Overwrite Default Keys By Accident

Map
By default, a Map does not contain any keys. It is a clean slate. It only has what you put into it.

Neither more nor less.

Object
Objects by default have their prototype, so it contains default keys that could potentially clash with your own keys.

This can be bypassed by passing null as the prototype when creating a new Object: Object.create(null)

Check out the difference:

New Object

New Object with null prototype

Reason 2: It Accepts Any Type As Key

Map
Maps accept any type of key. That includes functions, objects, and all primitives(string, number, boolean, symbol, undefined, null, and bigint).

let obj = { 'a': 'a' };
let func = () => 'hey';

//you can also initialize multiple values at once using array syntax
let map = new Map([[123, true], [true, 123], [obj, 'object'], [func, 'function']])

map.keys() // 123, true, Object, () => 'hey'
map.get(obj) // 'object'
map.get(func) // 'function'
map.get({ 'a': 'a' }) // undefined 
//Object and Functions are stored by reference, so { 'a':'a' } and obj are different objects)

Object
Object's key must be either a String or a Symbol.

let obj1 = { 'a': 'a' };
let func = () => 'hey';

let obj = { 123: true, true: 123, obj1: 'object', func: 'function' };
Object.keys(obj) 
// ['123', 'true', 'obj1', 'func'] converts all keys to strings

obj[func] //undefined
obj['func'] // 'function'

Reason 3: Maps Are Iterable

Map
Maps are natively iterable. That means you can loop over them with for of or .forEach() loops.

const map = new Map();
map.set(0, 'zero').set(1, 'one'); //you can chain .set()

for (const [key, value] of map) {
  console.log(`key: ${key}, value: ${value}`);
}
// key: 0, value: zero
// key: 1, value: one

//if you just want the 'values' or just the 'keys'
for (const key of map.keys()) { // or map.values()
  console.log(key);
}
// 0
// 1

map.forEach((value, key) => console.log(`key: ${key}, value: ${value}`));
// key: 0, value: zero
// key: 1, value: one

Object
Objects are not iterable, even though you can iterate over them using for in and Object.Entries()

let obj = { 0: 'zero', 1: 'one' }

for(let key in obj){
    console.log(`key: ${key}, value: ${obj[key]}`)
}
// key: 0, value: zero
// key: 1, value: one

Object.entries(obj).forEach((item) => console.log(`key: ${item[0]}, value: ${item[1]}`))
// key: 0, value: zero
// key: 1, value: one

Reason 4: Maps Can Be Merged With Arrays, And Converted To Arrays

Map
Maps are Arrays are 100% compatible, making it intuitive move from one to another.

Here's how you can convert a Map into an Array

let map = new Map([ [1, 'one'], [2, 'two'] ]);
Array.from(map) //[ [1, 'one'], [2, 'two'] ] exactly the same array you initially passed in

//or you can use the spread operator
const newArr = [...map];

An Array into a Map

let arr = [ [1, 'one'], [2, 'two'] ];
new Map(arr); //{ 1 => 'one', 2 => 'two' }

Here's how you can merge a Map and an Array

let map = new Map([ [1, 'one'], [2, 'two'] ]);
let arr = [3, 'three']

let combinedMap = new Map(...map, arr); 
// { 1 => 'one', 2 => 'two', 3 => 'three' }

let combinedArr = [...map, arr];
// [ [1, 'one'], [2, 'two'], [3, 'three'] ]

Object
Concerting an Object into an Array

let obj = { 1: 'one', 2: 'two'};
Array.from(obj) // [] doesn't work

//you'd have to do
Array.from(Object.entries(obj))
//[ ['1', 'one'],['2', 'two'] ]

//or
[...Object.entries(obj)]
//[ ['1', 'one'],['2', 'two'] ]

Reason 5: You Can Easily Check The Size

Map
Map has a built-in size property that returns its size.

let map = new Map([1, 'one'], [true, 'true']);
map.size // 2

Object
To check the size of an object you have to combine Object.keys() with .length

let obj = { 1: 'one', true: 'true' };
Object.keys(obj).length // 2

The downside? No Native Method For Serialization And Parsing

Map
Maps have no native support for serialization or parsing to and from JSON.

The documentation suggests implementing your own by using the replacer argument that can be passed to JSON.stringify(obj, replacer) and the reviver argument passed to JSON.parse(string, reviver)

You can find the suggested implementation here

Object
You can natively serialize and parse an Object to and from JSON using JSON.stringify() and JSON.parse() respectfully.

2 Examples of how you can replace `Object` with `Map`

#1 Calculating the total price and items of an eCommerce shopping cart

This is one of the examples from the Complete Guide To JavaScript .reduce() Function

Given the following array

const shoppintCart = [
  { price: 10, amount: 1 },
  { price: 15, amount: 3 },
  { price: 20, amount: 2 },
]

We want to return an Object like { totalItems: 6, totalPrice: 45 }

This is the original code

shoppintCart.reduce(
  (accumulator, currentItem) => {
    return {
      totalItems: accumulator.totalItems + currentItem.amount,
      totalPrice:
        accumulator.totalPrice + currentItem.amount * currentItem.price,
    }
  },
  { totalItems: 0, totalPrice: 0 } //initial value object
)
// { totalItems: 6, totalPrice: 45 }

This is a version using Map

shoppintCart.reduce(
  (accumulator, currentItem) => {
      accumulator.set('totalItems', accumulator.get('totalItems') + currentItem.amount);
      accumulator.set('totalPrice', accumulator.get('totalPrice') + currentItem.price);
      return accumulator;
  },
  new Map([['totalItems', 0], ['totalPrice', 0]])
)
// { 'totalItems' => 6, 'totalPrice' => 45 }

#2 A Different Way To Remove Duplicate Objects From An Array

This is a piece of code I actually used in the bookshelf app I made when I started learning JavaScript.

Googling about how to remove duplicate objects from an array led me to the example I share below.

This is an array with one duplicate object

const books = [
  { id: 1, title: 'How To Win Friends And Influence People', author: 'Dale Carnegie' },
  { id: 1, title: 'How To Win Friends And Influence People', author: 'Dale Carnegie' },
  { id: 2, title: 'The Alchemist', author: 'Paulo Coelho' },
]

Here's a peculiar way to remove the duplicate:


const uniqueObjsArr = [
   ...new Map(books.map(book => [book.id, book])).values()
];

There is a bit too much happening on the above one-liner.
Let's break it down into chunks so it is easy to digest.


// 1. map the array into an array of arrays with `id` and `book`

const arrayOfArrays = books.map(book => [ book.id, book ])
// arrayOfArrays:
/*
[ 
   [ 1, {id: 1, title: 'How To Win Friends And Influence People', author: 'Dale Carnegie' } ],
   [ 1, {id: 1, title: 'How To Win Friends And Influence People', author: 'Dale Carnegie' } ],
   [ 2, { title: 'Alchemist', author: 'Paulo Coelho' } ]
]
*/

// 2. The duplicate is automatically removed as keys have to be unique

const mapOfUniqueObjects = new Map(arrayOfArrays)
// mapOfUniqueObjects: 
/*
{
   1 => {id: 1, title: 'How To Win Friends And Influence People', author: 'Dale Carnegie'},
   2 => { title: 'Alchemist', author: 'Paulo Coelho' }
}
*/

// 3. Convert the values back into an array.

const finalResult = [...mapOfUniqueObjects.values()];
// finalResult:
/*
[
   {id: 1, title: 'How To Win Friends And Influence People', author: 'Dale Carnegie'},
   {id: 2, title: 'The Alchemist', author: 'Paulo Coelho'}
]
*/

Conclusion

If you need to store key-value pairs(hash or dictionary) use Map.

If you're only using string-based keys and need maximum read performance, then objects might be a better choice.

Other than that, use whatever you want because, at the end of the day, this is just a blog post of a random dude on the internet Lol.

Here's what we covered:

What is the Map object?
Syntax: Map vs Object
Reason 1: You Won't Overwrite Default Keys By Accident
Reason 2: It Accepts Any Type As Key
Reason 3: Maps Are Iterable
Reason 4: Maps Can Be Merged With Arrays, And Converted To Arrays
Reason 5: You Can Easily Check The Size
The downside? No Native Method For Serialization And Parsing
2 Examples of how you can replace Object with Map

Thanks for reading!

If you like this article:

*Leave a comment below(You can just say hi!)
*Follow me on Twitter@theguspear

Catch you later,

Gus.

9 Common JavaScript Interview Questions You Might Not Know The Answer For.

Gus Pear 🍐 — Sat, 14 Jan 2023 03:32:41 +0000

Whether you like them or not, tricky questions are still asked by interviewers in the wild.

The reason is, these questions can tell a lot about your core understanding of the language, and therefore if you are a fit for the job.

Common concepts addressed in these questions include:

Hoisting
Closure
Scope
Value vs Reference type
Prototype inheritance

Today we will kill two birds with one stone.

Prepare to ace your next interview and brush up on the core concepts, at once.

Why typeof `f` is undefined?

var y = 1;
if (function f() {}) {
  y += typeof f;
}

console.log(y); // 1undefined

Explanation

The condition statement if(function f() {}) returns function f() {} which is truthy, so the code executes inside the if statement.
typeof f returns undefined because the function f(){} was never declared outside the if statement, so it doesn't "exist" outside the if brackets if (f(){}) { It doesn't exist here }

This is how we would "fix" this code snippet:

var y = 1;

function f() {}; //declare function outside if brackets

if (f) { //f exists so we enter the if block
  y += typeof f; //here typeof f is function
}

console.log(y); // 1function

Write an example of closure

function createFunction(msg) {
    return function(name) {
        return msg + name;
    }
}

let myFunc = createFunction("Hey ");
console.log(myFunc("Dude")); // Hey Dude

Explanation

The first function (createFunction) returns an anonymous function
The anonymous function returns the parameter msg from the outer function(createFunction()) + name from itself.

When we declare the variable javascript let myFunc = createFunction("Hey ") the variable myFunc holds a reference to the anonymous function returned by the outer

What is interesting is that when you call javascript myFunc("Dude") (passing just the 'name' parameter) it still "remembers" the value of msg that was passed in when createFunction() was executed.

The ability to access variables from the outer 'scope' where the function was created is one of the definitions of closure.

Learn more about closures here

Write a multiply() function that can be called like multiply(2)(5)(10) and returns 100

This is similar to the example above, the difference being that we are retuning an additional function and invoking all of them straight away(no using variables for holding references)

function multiply(x) {
    return function(y){
        return function(z) {
          return x*y*z;
        };
    }
}

multiply(2)(5)(10) //100

By invoking multiply like

javascript multiply(2)(5)(10)

We are invoking the returned functions one after the other.

We could use intermediate variables to make it clearer. Let's have a look:

let func1 = multiply(2); // x is 2
console.log(func1) // function(y) { return function(z) { return x*y*z } }

let func2 = func1(5); // y is 5
console.log(func1) // function(z) { return x*y*z }

func2(10); // z is 10
// finally has all 3 values and returns their product.

Learn more aboute Nested Functionshere

`delete` operator on a local variable

What would be the output of the following code?

let output = (function(x) {
    delete x;
    return x;
})(0);

*The delete operator is meant to be used to delete properties of objects, and not on value types(number in this case).

This would work:

let obj = { name: 'Gus', age: 32 }
delete obj.age;

console.log(obj) // { name: 'Gus' }

`delete` operator on Object

const Person = {
    name: 'Gus',
    age: 32,
}

const person1 = Object.create(Person);
delete person1.age

console.log(person1.age); // 32

person1 is created with its prototype set to the Person object.
When the instance person1 has it's age property deleted, we can still access the age property of the prototype object(Person)
That is why it seems like it didn't work.

This is a big topic, you can learn more here

`delete` operator on Array

What would be the result of logging arr.length ?

  let arr = ["a", "b", "c", "d"];
  delete arr[2];

  arr.length // 4

When used on arrays, the delete operator sets the delete element to 'empty' but does not remove it from the array, not changing the length of the array.

What will be the value of both console.log's?

var favouriteAnime = "Dragon Ball";
(function() {
    console.log(favouriteAnime);
    var favouriteAnime = "Naruto";
    console.log(favouriteAnime);
})();

// undefined 
// Naruto

Here is how the compiler interpreted this code:

var favouriteAnime; // declared and initialized with undefined
(function() {
    console.log(favouriteAnime);
    var favouriteAnime = "Naruto";
    console.log(favouriteAnime);
})();

favouriteAnime = "Dragon Ball";

// undefined 
// Naruto

A few things to keep in mind when declaring JavaScript functions and variables.

Variable assignment(myVar = 5) takes precedence over function declaration(function func(){})
Function declarations(function func(){}) take precedence over variable declarations(var myVar;) *let or const
Function declarations(function func(){}) are hoisted over variable declarations(var myVar;) but not over variable assignments(myVar = 5;).

As a best practice, you should always declare your functions before invoking them.

Learn more about hoisting here

How would you check if a number is an integer?

The easiest way to check if a numner is a decimal ir integer is by using the built-in Number.isInteger()

console.log(Number.isInteger(4)); // true
console.log(Number.isInteger(12.2)); // false
console.log(Number.isInteger(0.3)); // false

Another way is to see if there is a remainder left when you divide by 1.

function isInt(num) {
  return num % 1 === 0;
}

console.log(isInt(4)); // true
console.log(isInt(12.2)); // false
console.log(isInt(0.3)); // false

Note: There is a limit to JavaScript precision when handling floating points. If you check Number.isInteger(1.0000000000000001) will return true. You can learn more here

Conclusion

Remember to hit f12 and try out the examples for yourself.

This tiny action will help you remember what you learned for much longer.

This is a recap of what we have seen today:

Why typeof f is undefined?
Write an example of closure
Write a multiply() function that can be called like multiply(2)(5)(10) and returns 100
Delete operator on a local variable
Delete operator on Object
Delete operator on Array
What will be the value of both console.log's?
How would you check if a number is an integer?

Thanks for reading!

If you like this article:

*Leave a comment below(You can just say hi!)
*Follow me on Twitter @theguspear.

Catch you later my dude,

Gus.

9 Essential Array Puzzles To Level Up Your JavaScript [JS Foundation]

Gus Pear 🍐 — Sat, 07 Jan 2023 04:13:16 +0000

There are no shortcuts to becoming a great problem solver(which is what a dev is).

Mastery comes at the cost of practice. And since algorithms and data structures form the backbone of every software, practicing them should be on top of your priority queue. As the most used data structure for storing a sequence of values, arrays are as essential as they can be.

Today we'll hone our skills by learning how to:

*Flatten an array
*Remove duplicates from an array
*Remove duplicates from an array of objects
*Sort an array of objects
*Merge 2 arrays
*Return the difference between two arrays
*Check if an array contains duplicate elements
*Return the Intersection of two arrays
*Find the Longest String in an Array

As the old saying goes "practice makes perfect". Let's crack it.

How to flatten an array:

The easiest way is to use the built-in .flat() method.
The flat() method takes an optional maximum depth parameter.

For example, given the following array:

const arr = [1, 2, [3, 4], [[5, 6], [7, 8]]];

You can flatten it like this:

const flattened = arr.flat(2); //max depth
console.log(flattened); // [1, 2, 3, 4, 5, 6, 7, 8]

The flat() method returns a new array with all sub-arrays concatenated into it recursively up to the specified depth.

You can also create your own recursive function that iterates over the elements of the array and adds them to a new array, one at a time.

If an element is an array, the function should call itself with the element as an argument, and then concatenate the resulting array to the new array.
If an element is not an array, the function should simply add it to the new array.

Here is an example of how you could write a recursive function to flatten an array:

function flatten(arr) {
  let result = [];
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      result = result.concat(flatten(arr[i]));
    } else {
      result.push(arr[i]);
    }
  }
  return result;
}

const arr = [1, [2, [3, [4]]], 5];
console.log(flatten(arr)); // [1, 2, 3, 4, 5]

You can make this function more concise by using the .reduce() method and the ternary operator.

function flatten(arr) {
  return arr.reduce((accumulator, currentItem) => 
    Array.isArray(currentItem)
      ? accumulator.concat(flatten(currentItem))
      : accumulator.concat(currentItem), 
  []);
}

If you need a refresher on the .reduce() check this guide -> https://dev.to/gustavupp/a-complete-guide-to-javascripts-reduce-function-with-real-world-examples-5h6k

This function has a linear time complexity(which means that it is efficient for large arrays).
It also has a constant space complexity(which means that it does not use up more memory as the size of the array increases).

How to remove duplicates from an array:

By far the easiest and more concise way of removing duplicates of an array is by using the Set object.

The Set object stores only unique values, so you can create a new set from the array and then use the Array.from() method to convert the set back into an array.

This is one way you can do it using the Set object:

const arr = [1, 2, 3, 1, 2, 3, 4, 5];

const unique = Array.from(new Set(arr));

console.log(unique); // [1, 2, 3, 4, 5]

You can also use our loved .reduce() (what can't you do with the reduce?? lol)

const arr = [1, 2, 3, 1, 2, 3, 4, 5]

arr.reduce((accumulator, currentItem) => {
    if (!accumulator.includes(currentItem))
        accumulator.push(currentItem)
    return accumulator
},[])

How to sort an array of objects

To sort an array of objects you have to choose a property from the object to sort the array by.

You can then call .sort() and pass it a comparator function.

This is how the comparator function works:

It takes two arguments
If the first should come before the second it returns a negative value.
If the first should come after the second it returns a positive value
It returns 0 if the values are equal.

Here's how you could sort an array of objects by the value of the name property:

const arr = [  
  {name: 'Bob', age: 30},  
  {name: 'Alice', age: 25},  
  {name: 'Charlie', age: 35}
];

arr.sort((a, b) => {
  if (a.age < b.age) { //you can sort by any property
    return -1;
  } else if (a.age > b.age) {
    return 1;
  } else {
    return 0;
  }
});

/*
[
  {name: 'Alice', age: 25}, 
  {name: 'Bob', age: 30}, 
  {name: 'Charlie', age: 35}
] */

You can also use the ternary operator to make a one-liner version:

arr.sort((a, b) => a.name < b.name ? -1 : a.name > b.name ? 1 : 0);

Note: Sometimes nested ternaries can be hard to read.

If sorting by a string it's better to use the .localeCompare() method:

arr.sort((a, b) => a.name.localeCompare(b.name));

Keep in mind that the sort() method modifies the original array, so if you want to preserve the original array, you should make a copy of it first.

How to merge 2 arrays

To merge two arrays you can use the concat() method.
The concat() method returns a new array that includes the elements from both arrays.

Here is an example of how you could use concat() to merge two arrays:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const merged = arr1.concat(arr2);
console.log(merged); // [1, 2, 3, 4, 5, 6]

A fancier or rather an ES6 version uses the spread operator (...).
The spread operator expands the elements of an array into separate arguments.

This is how it would look like

const merged = [...arr1, ...arr2];
console.log(merged); // [1, 2, 3, 4, 5, 6]

Both of these approaches:

Create a new array that includes the elements from both arrays
Do not modify the original array.

If modifying the array is not an issue you can simply use .push() to add the elements of the other array to the end of the first array.

arr1.push(...arr2);
console.log(arr1); // [1, 2, 3, 4, 5, 6]

Return the difference between 2 arrays

There are kinds of differences:

Non-symmetric
Symmetric

Non-symmetric

Elements that are in the first array but not in the second

Symmetric

Elements that are in the first array but not in the second, and elements that are in the second but not in the first

Here is how you can use the filter() method to find the non-symmetric difference between two arrays:

const arr1 = [1, 2, 3, 4, 5];
const arr2 = [3, 4, 5, 6, 7];

const difference = arr1.filter(x => !arr2.includes(x));
console.log(difference); // [1, 2]

And this is to get the symmetric difference:

const arr1 = [1, 2, 3, 4, 5];
const arr2 = [3, 4, 5, 6, 7];

const difference = arr1
    .filter(x => !arr2.includes(x))
    .concat(arr2.filter(x => !arr1.includes(x)));

console.log(difference); // [1, 2, 6, 7]

This approach returns a new array and does not modify the original arrays.

Alternatively, you can use the Set object and its .has() instead of .includes()

Non-symmetric difference:

const set = new Set(arr2);
const difference = arr1.filter(x => !set.has(x));
console.log(difference); // [1, 2]

Symmetric difference:

const set = new Set(arr2);
const set1 = new Set(arr1)
const difference = arr1
    .filter(x => !set.has(x))
    .concat(arr2.filter(x => !set1.has(x)));

console.log(difference); // [1, 2, 6, 7]

how to Check if an array contains duplicate elements

The simplest way of doing this is by using the Set object and the size property.

The Set object stores only unique values, so you can create a set from the array and compare the size of the set to the size of the original array.

If the size of the set is smaller than the size of the array, it means that the array contains duplicate elements.

Here's how you'd do it:

const arr = [1, 2, 3, 4, 5, 5];

const hasDuplicates = new Set(arr).size !== arr.length;
console.log(hasDuplicates); // true

You can achieve the same with an object(also called a hash or dictionary)

As you loop through the array you set the current value as the key and true as the keys' value.

If you try to access a key and there is already a value there, it means you found a duplicate.

This is a way of doing it:

const hasDuplicates = (arr) => {
    let hash = {}
   for(let i = 0; i < arr.length; i++){
       if(!hash[arr[i]]){
           hash[arr[i]] = true
       } else {
           return true;
       }
   }
    return false
}

console.log(hasDuplicates(arr)); // true

Both of these approaches create a new object (a set or a hash object) and do not modify the original array.
They also have a linear time complexity(they are efficient for large arrays).

How to return the intersection between 2 arrays

The most common way would be by using the filter() and includes().

It would look something like this:

const arr1 = [1, 2, 3, 4, 5];
const arr2 = [3, 4, 5, 6, 7];

const intersection = arr1.filter(x => arr2.includes(x));
console.log(intersection); // [3, 4, 5]

This approach returns a new array and does not modify the original arrays.

As an alternative, you can use the Set object(again) and the .has() method

const set = new Set(arr2);
const intersection = arr1.filter(x => set.has(x));
console.log(intersection); // [3, 4, 5]

Do you see a pattern? Whenever work something out with a plain object you can create a version using the Set Object and vice versa.

How to find the longest string in an array

To do so, you can use our popular .reduce() method and a function to compare the values.

The comparator function will compare the length of the current string to the length of the previous longest string, and return the current string if it is longer, or the previous longest string if it is not.

This is how you can do it:

const arr = ['short', 'medium', 'long', 'longest'];

const longest = arr.reduce((acc, x) => x.length > acc.length ? x : acc, '');
console.log(longest); // 'longest'

This approach creates a new variable (the acc or accumulator) and does not modify the original array.

The time complexity is linear (meaning that it is efficient for large arrays).

The same can be achieved by using the sort() method and the spread operator (...) to find the longest string in an array more concisely:

const longest = [...arr].sort((a, b) => b.length - a.length)[0];
console.log(longest); // 'longest'

Conclusion

In this article we have learned how to:

Thanks for reading!

If you like this article:

*Leave a comment below(You can just say hi!)
*Follow me on Twitter @theguspear.

Catch you later,

Gus.

The Complete Guide To JavaScript's .reduce() Function (With Real-world Examples)

Gus Pear 🍐 — Sat, 31 Dec 2022 03:55:20 +0000

In this guide we are going to cover:

What is the .reduce() function?
Creating our version of the .reduce() function
Calculating the total items and price for a e-commerce shopping cart
Creating an array of unique categories for a restaurant menu
Removing duplicate objects from the array
Replacing .filter().map() with .reduce()
Grouping objects by key (Similar to SQL GROUP BY or C#'s .GroupBy())
How to flatten an array of arrays

Link for all code snippets used in this guide

It seems confusing at first

If you have ever struggled to understand the .reduce() function, you are not alone. It takes messing about with it a couple of times to really understand how it works and use it with confidence.

Most of the examples out there use a simple array of numbers or strings, but the reality is that we normally work with complex objects which is rarely covered.

But before we jump in.
Here's how you can get more out of this content.

Open your code edtitor and try the examples yourself
tinker with it (alter values, add or remove elements to/from the array, etc)
If you find yourself lost in one of the examples, track down the value of the variables either with a pen and paper or on your code editor.

Let's get started!

What is the .reduce() function?

It is a method that executes a callback function on each element of an array.

The return value from the calculation is passed on to the next element.
In the first iteration, there is no "return value of the previous calculation", if passed in, a initial value can be used in it's place.
Otherwise, the first element of the array is used as the initial value and iteration starts from the next element.

To put it simply, it is just a variable and a loop.

The variable holds the new value
The loop iterates over the array so we can grab what we want from each element

This:

Achieves the same as this:

Pretty much every time you need to use a variable and a loop, you can replace it with the reduce function.

As there is no better way of learning than actually trying things out, let's build our version of the .reduce() method so we can really understand it.

Building our own .reduce()

Let's do it by solving a simple problem:
We have an array of numbers and we want the sum of all of them.

It is just like the example above of a variable and a loop.

We need 3 things:

an array
a variable that holds the total value total(usually called the accumulator)
a loop to iterate over the array

Let's say you want to turn it into a function so you can use it easily, how would you do it?

Maybe something along these lines:

We pass the array as a parameter into our function
We return total at the end.

That is looking good, but what if we want the option to set the initial value of the variable total?
We can add the option as another parameter and set total to its value.

Like so:

But there are still 2 problems with this function.

There is no way we can add different logic to be executed inside the loop (It only adds the current element to the sum variable)
It works only on simple arrays (where each item is a value type, not an object)

I'll show you what I mean.

Let's create an array of objects this time

Let's invoke our myReducer function passing in the array of objects

It doesn't work because the value we want to add is inside the object and not the object itself.
We have to access it as total += arr[i].number

But this function didn't account for that.

However, if we add a callback function as a second parameter, we can:

Execute the callback function on each element of the array
Create any custom logic we need

Let's modify our myReducer function.

Let's test it again with the objects array.

First, declare the callback function and call myReduce passing it in.

Note that we added if and else conditions based on the value of total which is our initialValue option.

If initialValue is not given
- it doesn't execute the callback on 1st iteration
- There is nothing to add, initialValue is undefined.
- just set total to the value of the current element
If initialValue is given
- It executes the callback on all iterations

That is pretty much what the original Array.prototype.reduce() does.

The main difference is that there's no need to pass the array as an argument as the original .reduce() is bound to Array.prototype so the array is always the array upon which .reduce() was called.

Calculate total items and price for an ecommerce shopping cart

Say you have an array like this one:

And you need to reduce this array into an object like this { totalItems: 0, totalPrice: 0 } so we can display the correct information on the checkout page.

This is how we can do it:

Create an array of unique categories for a restaurant menu

Given this array:

We need to reduce it into an array of unique categories like ['Appetizer','Entree','Main']

This is how we can do it:

Removing duplicate objects from the array

Similar to the example above, but this time we need to return the same array of objects filtered with only unique objects.

This is the array with a duplicate object:

Note: You have to have a property similar to id that is unique for each object

This is how we can create another array with only unique elements:

Replace .filter().map() with .reduce()

It's very common having to filter an array and then modify the elements of the filtered array.

We will use the same array of the menu categories above

But this time we want to get an array with the itemName only of the items whose category is 'Entree'

We can use .filter() the array and then .map() to accomplish it

Or we can do it with .reduce()

The advantage of using .reduce() is that you iterate over the array only once.

Group objects by key (Similar to SQL GROUP BY or C#'s .GroupBy())

This is the one I like the most. This is a very handy function that will be included in JavaScript's array methods in probably on next update (currently on stage 3 for approval)

This groupBy function can also be used as a middle step to solving more complex problems.

We again will use the menu categories array:

This is our groupBy function:

It can get even handier if we add the option to pass the key as a function.

Just replace this line:

With this one:

This way we can call it and pass a function that returns the key, as opposed to writing the string ourselves, avoiding typos.

How to flatten an array of arrays

This is a one-liner to flatten an array of arrays:

Note: It only works with one level of nesting. For multiple levels you have to write a recursive version.

Conclusion

In this article we have learned:

What is the .reduce() function
How to create our version of the .reduce() function
To calculate the total items and price for an e-commerce shopping cart
To create an array of unique categories for a restaurant menu
To remove duplicate objects from the array
To replace .filter().map() with .reduce()
How to group objects by key (Similar to SQL GROUP BY or C#'s .GroupBy())
How to flatten an array of arrays

Forem: Gus Pear 🍐

Time for a change? 6 questions to decide if changing careers or moving abroad is the right move

#1 What is the worst-case scenario if I pursue this goal?

#2 What is the most likely outcome if I take action toward this goal?

#3 What can I do to prevent the worst-case scenario from happening?

#4 What steps can I take to recover from a worst-case scenario if it does happen?

#5 Will this change take me closer or further from my ideal future?

#6 Will you regret not making this decision on your deathbed?

How To Read For Maximum Retention

Most people are interested in reading 2x faster

Step 1: Summarize the first 3 paragraphs into a single sentence each

Step 2: Summarize the 3 sentences into a single one.

Step 3: Rince and repeat for the rest of the book

14 Research-Backed Techniques To Learn To Code 2x Faster

#1 Make your practice as close as possible to the goal

#2 Passive learning doesn’t work

#3 Practice with purpose

#4 Connect new concepts to things you already know

#5 Create mental models

#6 Always try to recall from memory

#7 Space it out

#8 Mix it up

#9 Reflect on what you have learned

#10 Tune it up

#11 Break it up

#12 Ask for feedback

#13 Rehearse mentally

#14 Rest and recharge

Wish You Had More Time? They Did Too…

Abraham, Edison, and Alexander

There's not enough time. Period.

The 2 things you can do about it

C# FileStream For Lazy Developers In A Hurry. The Bare Minimum

What Are Streams?

An Analogy To Help Us Navigate The Examples

C# classes to work with streams

How To Read a File Using the FileStream

How To Write A File Using The FileStream

Conclusion

The Recursion Explanation I Wish I Had Read As A Self-Taught Developer

#1 Function’s Return Value

#2 The Callstack

Basic Example

Conclusion

6 Reasons Mastering DSA Can Double Your Paycheck, Make You A Better Dev And Boost Your Confidence

Reason #1 You Need them To Pocket The Fattest Paychecks In The Industry

Reason #2 They Are The Cornerstone Of Computer Science

Reason #3 It Sharpens You Problem Solving Skills(The Most Important Skill In Life)

Reason #4 It Improves Your Ability To Understand Complex Topics

Reason #5 It Gives You All The Tools You'll Need To Do Your Job Better And Faster

Reason #6 All Of The Above Will Make You A Much More Confident Dev And Person.

My Plan To Master DSA

Conclusion

5 Life-Changing Lessons I Learned From Being Laid Off That Will Put You Ahead Of 97% Of People

Lesson #1 When People Are Fearful Is Time To Get Prepared

Lesson #2 When People Are Fearful There Is Less Competition

Lesson #3 Get Practical. Focus On What Is Within Your Control

Lesson #4 Rethink Your Lifestyle And Priorities

Lesson #5 Consistency Pays Off

Conclusion

5 Reasons To Choose JavaScript Maps Over Objects For Storing Key-Value Pairs(With Examples)

What is the Map object?

Syntax: Map vs Object

Reason 1: You Won't Overwrite Default Keys By Accident

Reason 2: It Accepts Any Type As Key

Reason 3: Maps Are Iterable

Reason 4: Maps Can Be Merged With Arrays, And Converted To Arrays

Reason 5: You Can Easily Check The Size

The downside? No Native Method For Serialization And Parsing

2 Examples of how you can replace Object with Map

Conclusion

9 Common JavaScript Interview Questions You Might Not Know The Answer For.

Why typeof f is undefined?

Write an example of closure

Write a multiply() function that can be called like multiply(2)(5)(10) and returns 100

delete operator on a local variable

delete operator on Object

delete operator on Array

What will be the value of both console.log's?

How would you check if a number is an integer?

2 Examples of how you can replace `Object` with `Map`

Why typeof `f` is undefined?

`delete` operator on a local variable

`delete` operator on Object

`delete` operator on Array