How to use recursion to turn object into string?

Question

EDIT

To me JSON.stringify is not the solution here, as it is much slower than recursion

    JSON.stringify(fakeData)
        .replace(/,/g, ';')
        .replace(/:(?={)/g, '')
        .replace(/"/g, '')

//Result
Recursion with reduce x 816,321 ops/sec ±7.38% (80 runs sampled)
JSON.stringify x 578,221 ops/sec ±1.72% (92 runs sampled)
Fastest is Recursion with reduce

I am making a css-in-js library, and I need to use recursion to turn object into string like this:

Input:

const fakeData = {
  a: {
    b: 'c',
    d: 'e'
  }
}

Output:

a{b:c;d:e;}

My recursion function:

const buildKeyframe = (obj) => {
    return Object.entries(obj).reduce((acc, [prop, value]) => {
        if (typeof value === 'string') {
            return `${acc}${prop}:${value};`
        }

        return `${prop}:{${buildKeyframe(value)}}`
    }, '')
}

This function works, but I think there is room for improvement(e.g. use TCO, avoid using reduce)... How can I write a better function to recurse this data structure?

This question might be better suited to codereview.stackexchange.com, but do please read their tour before posting. — Nick
– Nick, Commented Jan 13, 2021 at 3:36
How about this JSON.stringify({a: {b: 'c', d: 'e'}}).replaceAll(',', ';') will this work? But you have that semi-colon at the end did not notice that...anyway you can see if this will do for you. — nicholasnet
– nicholasnet, Commented Jan 13, 2021 at 3:50

MM2021 · Accepted Answer · 2021-01-13 20:58:16Z

1

This solution is about 50% faster and also works with more than one css property

const buildKeyframe = obj => {
          let result = '';

          for (const key in obj) {
              let value = obj[key];
              if(obj.hasOwnProperty(key)) {
                result += typeof value === 'string' ?
                 `${key}:${value};` :
                 `${key}{${buildKeyframe(value)}}`;
              }
          }

          return result;
    }

const fakeData = {
a: {
    b: 'c',
    d: 'e',
    g: 'b',
},
b: {
    m: 'n'
}
}

console.log(buildKeyframe(fakeData));

Benchmark.js Test results:

for...in x 1,875,280 ops/sec ±0.40% (87 runs sampled)
reduce x 1,272,530 ops/sec ±0.27% (91 runs sampled)
Fastest is for...in

answered Jan 13, 2021 at 20:58

MM2021

1506 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use recursion to turn object into string?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related