DEV Community: Edun Elijah

DSA Series: Add to Array-Form of Integer

Edun Elijah — Tue, 13 Oct 2026 01:39:32 +0000

Not quite long, I decided I was going to get back to solving DSA problems to get better at problem solving and also improve my writing skills because I will be taking time to write the back story of how I solved each problem. Fast forward to this morning, I started with a lot more than I could chew (it was a medium-ranked problem 😄). Somehow I found my way to “Add to Array-Form of Integer” through the similar questions options thinking this would be simple.   

The question:
The array-form of an integer num is an array representing its digits in left-to-right order.

For example, for num = 1321, the array form is [1,3,2,1]. Given num, the array-form of an integer, and an integer k, return the array-form of the integer num + k.  e.g.  Example 1:

Input: num = [1,2,0,0], k = 34
Output: [1,2,3,4]
Explanation: 1200 + 34 = 1234

My First Approach: I looked at it briefly and concluded that I would convert num to a string then add it to k. Sounds good right? ✌️  Let me show you the implementation:

function addToArrayForm(num: number[], k: number): number[] {
    const wholeNumber = Number(num.join(''));
    const sum = wholeNumber + k
    const array = Array.from(String(sum), Number)
    return array;
};

The test case passed and I reassured myself that the problem was a slice of cake so I decided to submit my solution only to see I only passed 90/152 test cases…. Then I saw this particular failing test:

Input: num = [1,2,6,3,0,7,1,7,1,9,7,5,6,6,4,4,0,0,6,3], k = 516  
My Output  = [1,2,6,3,0,7,1,7,1,9,7,5,6,6,4,4,0,0,0,0]
Expected Output = [1,2,6,3,0,7,1,7,1,9,7,5,6,6,4,4,0,5,7,9]

I couldn’t fathom why I had four trailing zeros; this led me to research on Google to find out what the issue was:   
I discovered I had run into an issue because my number had exceeded the Maximum Safe Integer Limit in JavaScript.  In JavaScript, all standard numbers are stored as 64-bit floating-point values (doubles).

JavaScript can only precisely handle 9, 007, 199, 254, 740, 991. If you are interested in pronouncing that value, it is: Nine quadrillion seven trillion one hundred ninety-nine billion two hundred fifty-four million seven hundred forty thousand nine hundred ninety-one. - Don’t mention!  My array has 20 digits, producing a value of 12,630,717,197,566,440,063, which is higher than the Maximum Safe Integer value. So, when a number gets this big, JavaScript loses precision and rounds the last few digits to zero. Hence the reason I had trailing zeros. After my research, I discovered the solution to my problem was to use BigInt() instead of Number() because it can handle integers of practically any size without losing precision. 

Using BigInt() adds a n suffix to a number to signify that it is a BigInt data type, not a normal number e.g 12630717197566440063n. My thought process was to use BigInt() then convert my response to type Number to eliminate the n and add the other value. This will only result in the trailing zero issue.  I wanted to turn the BigInt value to type Number so that I could add the other variable that was passed to the function, but adding a BigInt and Number value throws a TypeError.  

Since I was clear with possible pitfalls I needed to avoid, I took this approach: 

I created a variable wholeNumber to join the array of numbers and most importantly wrap a BigInt() around it. 
I created a variable sum to allow me to add wholeNumber(type BigInt) to the second variable wrapped in BigInt in-built object to make both values of the same data type. Don’t forget, I need to return the answer in an array form.  
I created a variable array with the intention of getting the final answer that returns the new array instance. I decided to go for the Array.from() built-in static method so that I can convert a number into an array of its individual numerical digits. Within the method I passed two arguments String(sum) to converts the BigInt sum value to String and the Number type as the map function that converts each elements of the array into a number

You can read more about Array.from() here.   

Here is my solution that passed all the submission test cases:

function addToArrayForm(num: number[], k: number): number[] {
    const wholeNumber = BigInt(num.join(''));
    const sum = wholeNumber + BigInt(k);
    const array = Array.from(String(sum), Number);
    return array;
};

The initial failing example now passed:

Input: num = [1,2,6,3,0,7,1,7,1,9,7,5,6,6,4,4,0,0,6,3], k = 516  
My Output  = [1,2,6,3,0,7,1,7,1,9,7,5,6,6,4,4,0,5,7,9]
Expected Output = [1,2,6,3,0,7,1,7,1,9,7,5,6,6,4,4,0,5,7,9]

Although my submission was accepted, it wasn’t optimised in terms of runtime and memory. My solution has a runtime of 16ms while the most optimised solution has a runtime of 0ms. In subsequent series, I will pay attention to optimisation and also add it to the documentation.

This was from Leetcode. You can check it out here.  

Thank you for reading and see you on the next one!

[Boost]

Edun Elijah — Fri, 20 Dec 2024 06:04:19 +0000

Theodore Karropoulos

Jan 20 '23

Understanding Time Complexity O-Notation in Software Engineering

#learning #tutorial #productivity

4 min read

Hideous Mistake When using Styled-Component with ReactJs

Edun Elijah — Mon, 02 May 2022 19:31:06 +0000

This mistake I will be sharing isn't a common one due to the fact that most Reactjs developers won't come across it and some developers would easily figure it out and it might be a strenuous task for others, or a guide for beginners.

Before diving into the practical aspect let's look at how Styled-Components relate with ReactJs.

Styled-components leverage a mixture of JavaScript and CSS using a technique called CSS-in-JS. Styled-components are based on tagged template literals, meaning actual CSS code is written between backticks when styling your components. In short styled-component is a stateless component that renders JSX.

The mistake I would be talking about is based on naming convention.

What are naming conventions?

Naming conventions are rules that dictate the way you name the various files, folders, and tokens in our code (such as variables, functions, classes, methods, objects, and so on). The whole idea behind naming conventions is to help make code more maintainable for the reader. It helps with discoverability and understanding a codebase. Let's talk about common naming convention programmers or developers use

Camel Case: Begins with a lowercase with each word delimited by a capital letter e.g. navMenu, newUser, loginWrapper.
Pascal Case: It is similar to camel case, but the first letter is always capitalized e.g. NavMenu, NewUser, LoginWrapper.
Snake Case: It entails splitting words with an underscore e.g. nav_menu, new_user, login_wrapper.
You can read more about naming convention here.

Since styled-component uses CSS-in-JS technique and due to experience with Javascript we might decide to use the camel case naming convention, we would get too see the result of the three naming conventions discussed as we continue.

Incase you want to follow through you should have your React app and styled-components dependencies installed with npx create-react-app app-name and npm install styled-components or yarn add styled-components

I would be sharing images of the three naming conventions i.e Test.jsx, Test.styles.js, Terminal message & Output. Let's start with Camel Case naming convention:

camelCase in action:

Test.jsx	Test.styles.js
Terminal	Localhost Result

From the localhost result we can see that our style-components variable doesn't have an effect as we have an error in our terminal, so the camelCase naming convention should not be a choice when creating styled-components variables.

snake_case in action:

Test.jsx	Test.styles.js
Terminal	Localhost Result

Again looking at the localhost result we can see that our style-components variable doesn't have an effect as we have an error in our terminal, so the snake_case naming convention should not be a choice when creating styled-components variables.

PascalCase in action:

Test.jsx	Test.styles.js
Terminal	Localhost Rest

🎉Hurray!!! Our terminal is free from error and the localhost result shows the style from our styled-components has an effect on the Test component.

From our practical we can conclude that the PascalCase naming convention is the right naming convention when creating styled-components variables to utilize with ReactJs.

If there are any other mistakes you've come across when using styled-components feel free to share them in the comment section.

Thanks for reading and Happy Coding!!!

Hacktoberfest 2021 Experience

Edun Elijah — Sun, 31 Oct 2021 07:38:13 +0000

My first Hacktoberfest experience and it has been an interesting one so far. I got the opportunity to be involved with my local tech community during this period, working more with GIT and Github. I will be finishing this edition with 6 PRs .....😊. I'm hoping to participate in the upcoming Hacktoberfest editions.💪