BFE.dev | 176. undefined to null
Tags: bfedev, javascript, coding, challenge
Published: 2024-05-22 03:08:21

Welcome to [BFE.dev](https://bigfrontend.dev/) Challenges!

In this short article, I review my solution for [BFE - #176 undefined to null](https://bigfrontend.dev/problem/undefined-to-null) challenge. Read on to see implementation details and my thought process for solving this coding challenge using JavaScript.

> **Mode**: Easy

### Problem

One of the differences between null and undefined is how they are treated differently in JSON.stringify().

```js
JSON.stringify({a: null})      // '{"a":null}'
JSON.stringify({a: undefined}) // '{}'
JSON.stringify([null])         // '[null]'
JSON.stringify([undefined])    // '[null]'
```
This difference might create trouble if there are missing alignments between client and server. It might be helpful to enforce using only one of them.

You are asked to implement undefinedToNull() to return a copy that has all undefined replaced with null

### Example(s):

```js
undefinedToNull({a: undefined, b: 'BFE.dev'})
// {a: null, b: 'BFE.dev'}
undefinedToNull({a: ['BFE.dev', undefined, 'bigfrontend.dev']})
// {a: ['BFE.dev', null, 'bigfrontend.dev']}
```


### Step-By-Step Process for Tackling a Coding Challenge:

1. **Read the problem multiple times** until you clearly understand all the requirements

2. **Ask clarification questions** to clarify potential confusion or knowledge gaps

3. Identify all the **inputs** and **outputs** of the problem

4. Ask to **clarify any constraints** of the problem, i.e., maximum input size, time complexity limits, or edge cases

5. Write down at least **2 to 3 examples** with input and output for testing later

6. **Break down the problem**:
   - Outline each step at a basic level without diving into code yet.
   - Focus on a **brute-force** solution first, even if you know an optimized approach.
   - Write **pseudocode** for each step to visualize the logic.
   - Convert each pseudocode step into actual code.
   - Skip complex implementations initially and revisit them later.
   - Once all steps are implemented, seek confirmation before proceeding.

7. Ask for permission to test out your implementation on a console

8. Use the examples you wrote down earlier to test your code.

9. If the actual result isn't the expected result, try to **debug the problem** by adding logs or using a debugger (if available)

10. Discuss the **time complexity** and **space complexity** of the solution

11. Think of ways to **optimize your implementation** to improve time and   space complexity and to increase readability (if possible)

12. **Refactor your code** for optimization and test again to ensure the results are still correct.

13. **Explain each step out loud to demonstrate your understanding and thought process**.

### Solution

```js
/**
 * @param {any} arg
 * @returns any
 */
function undefinedToNull(arg) {
  if (typeof arg === 'undefined') return null;

  if (Array.isArray(arg)) return arg.map(each => undefinedToNull(each));
  
  if (typeof arg === 'object' && arg !== null) {
    return Object
      .entries(arg)
      .reduce((obj, [key, value]) => {
        obj[key] = undefinedToNull(value);
        return obj;
      }, {});
  }
  
  return arg;
}
```

### Key Takeaway(s):
- Use `typeof` to get the type of a variable in JavaScript. This is particularly useful in this example in identifying if an argument is `undefined` or an `object`.
- Don't forget to account for nested values. When dealing with arrays or objects, recursion can automatically apply the same logic to deeply nested structures.
- I used recursion to solve this problem, but you can also use `for` or `while` loops, so choose the approach that you find easier to understand.


As always, I welcome any feedback on the implementation details of this coding challenge. Otherwise, hope folks found this helpful!