Key JavaScript Concepts I Mastered During LeetCode’s 30-Day Challenge

LeetCode is one of the most famous coding platforms and is considered to be the best for preparing for algorithms, data structures, interview preparation, and everything in between. Recently, they announced a 30-day JavaScript coding challenge, which was entirely focused on solving problems using JavaScript concepts and constructs. The best part was their in-depth editorial for each problem, explaining everything down to the very minor detail.

For me personally, JavaScript is my go-to programming language for solving problems as I feel most comfortable with it. I have successfully solved over 150+ problems on LeetCode (https://leetcode.com/ilatif/) before taking up this challenge, and almost all of them were in JavaScript. While I still have reservations about choosing JavaScript to solve problems in coding competitions and similar scenarios, which I will discuss in a separate article, it remains my preferred language. I have been using JavaScript for over a decade in my day job, and I am quite familiar with most of the concepts. However, there were still some concepts that I was missing, and we will be discussing them one by one

Function Arity

Challenge: https://leetcode.com/problems/curry/

Consider we’ve defined a function like below:

At runtime, how can we determine the number of arguments/parameters a function receives? While we can typically deduce this by examining the code, accessing this information during runtime becomes essential. So, what exactly is arity? I’m glad you asked. Arity refers to the number of arguments a function can accept. For instance, if a function accepts three arguments, we can say its arity is 3. Accessing this information plays a crucial role in solving this LeetCode challenge

I thought that’s not possible, as even though we can define the number of arguments/parameters a function can accept, we can still pass more arguments/parameters to it, and JavaScript won’t complain. For example:

This is perfectly valid code, and JavaScript won’t complain due to its dynamic nature. I based my solution on the misconception I mentioned above, namely, the belief that we cannot obtain the number of arguments/parameters a function can receive during runtime. It was only after I submitted my solution and opened the Editorial to review it that I realized it is indeed possible to determine a function’s arity at runtime.

Every defined function has a length property that can be used to retrieve the arity of the function.

5 instanceof Number?

Challenge: https://leetcode.com/problems/check-if-object-instance-of-class/

Consider following code.

What do you think the output would be? If your answer is true, then congratulations, your answer is incorrect. You might be wondering, how so? Essentially, instanceof in JavaScript determines whether an object is an instance of a particular class. It does this by checking if the object contains Class.prototype, and if so, it returns true. In the example above, 5 and name are primitive values, which means they are values themselves and not actual objects. When we use them in code, JavaScript temporarily coerces them to objects internally (a process known as Boxing). We are calling instanceof on them directly, and since they are not objects at that time, instanceof would return false.

To obtain the correct results, we can utilize the Object constructor around primitive values, which will convert them to objects of Numberand String, respectively

typeof Person === “class”?

Challenge: https://leetcode.com/problems/check-if-object-instance-of-class/

Consider the following code. What do you think output of typeof Person would be?

Classes were introduced in ES6, providing a convenient syntax for declaring properties and methods. Initially, when I encountered typeof Person, I had the notion that it would output class despite being aware that classes are internally converted to function syntax by the JavaScript compiler (something similar to the example below)."

So the correct result for typeof Person is function. It serves as a gentle reminder that it's perfectly normal to overlook minor details at times.

Generator functions

Challenge: https://leetcode.com/problems/generate-fibonacci-sequence

Generator functions allow the execution of a function to pause and resume based on how it’s being called. The basic syntax of a generator function looks like this:

The * after the function keyword is what declares a generator function. yield is used to return a value from the generator function and pauses the execution until the next invocation.

I had a vague understanding of generator functions: 1) that they can only yield a single value and 2) that they are always (re)executed from the beginning. Additionally, since I had never used them in production code, I had no chance to improve or refine my knowledge about them. Fortunately, this JavaScript challenge provided me with the opportunity to delve deep into generators and expand my understanding.

Consider the following example:

This generator function yields three values, and in order to obtain all of them, we need to call the function three times. Each function invocation will resume from where the last yield statement left off and continue executing statements until it encounters the next yield statement. At that point, it will pause execution and return the generated output. To explore generators in detail, please refer to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator.

The best challenge?

For me, the most exciting challenge throughout the entire 30-day challenge was the 19th-day challenge. It tasked us with converting an array of objects into a matrix. In my opinion, it is the ideal problem-solving question for JavaScript developers. It tests your capability to comprehend a problem statement, construct a mental model around it, and then implement a solution using JavaScript constructs. It doesn’t involve any fancy data structures or algorithms, just pure JavaScript skills are required. This makes it a perfect question to ask in JavaScript interviews.

Bonus

I have open-sourced all of my submissions/solutions to the challenge. You can find them at https://github.com/ilatif/gravity.

It has been a fun and exciting experience to participate in LeetCode’s 30-day JavaScript Challenge. I have learned a lot from it. Feel free to share your thoughts and let me know in the comments how useful you found this article. Thank you!

Comments

[Jon Randy 🎖️]

You need be careful with the length property of a function. It actually returns the number of parameters (not arguments - those are what we pass in) a function accepts, but only the number up to the first parameter that doesn't have a default value assigned:

console.log( (a => a).length )  // 1
console.log( ((a, b) => a).length )  // 2
console.log( ((a, b, c=0) => a).length )  // 2
console.log( ((a, b, c=0, d) => a).length ) // 2

[Imran Latif]

Yes, you are correct. In my case, all I needed was a way to get number of parameters a function is accepting to solve a specific LeetCode problem. But yes, one should be careful while using length property on functions due to the reasons you've explained with examples.

Thanks!