[ARTICLE] /serializing-object-methods-with-es6-template-literals-and-eval

es6_template_literals.js

//ES6 template strings
let someComputedValue = 5 + 3;
let theTemplate = `This is the result of the computation: ${someComputedValue}`;

console.log(theTemplate);
// "This is the result of the computation: 8"

// ES5 version
var someComputedValue = 5 + 3;
var theTemplate = 'This is the result of the computation: ' + someComputedValue;

console.log(theTemplate);
// "This is the result of the computation: 8"

full_example.js

'use strict';

// serialize.js

let person = {
  name: 'Susan',
  age: 24,
  sayHi: function() {
    console.log('Susan says hi!');
  }
};

let replacer = (key, value) => {
  // if we get a function, give us the code for that function
  if (typeof value === 'function') {
    return value.toString();
  }

  return value;
}

// get a stringified version of our object, and indent the keys at 2 spaces
const serialized = JSON.stringify(person, replacer, 2);

console.log(serialized); 
// {"name":"Susan","age":24,"sayHi":"function () {\n\tconsole.log('Susan says hi!');\n  }"}


// de_serialize.js
let reviver = (key, value) => {
  if (typeof value === 'string' && value.indexOf('function ') === 0) {
    let functionTemplate = `(${value})`;
    return eval(functionTemplate);
  }
  return value;
}

const parsedObject = JSON.parse(serialized, reviver);

parsedObject.sayHi(); // Susan says hi!

parse_reviver_eval.js

let reviver = (key, value) => {
  if (typeof key === 'string' && key.indexOf('function ') === 0) {
    let functionTemplate = `(${value})`;
    return eval(functionTemplate);
  }

  return value;
}

parse_reviver_function_constructor.js

let reviver = (key, value) => {
  if (typeof value === 'string' && value.indexOf('function ') === 0) {
    let functionTemplate = `(${value}).call(this)`;
    return new Function(functionTemplate);
  }
  return value;
}

parse_signature.js

JSON.parse(text[, reviver])

// => text(required) - the string we wish to de-serialize and convert back
//    to a standard JavaScript object(JSON)
// => reviver(optional) - function used to pre-process keys and values in order 
//    to render a specific object structure

stringify.js

'use strict';

let person = {
  name: 'Susan',
  age: 24,
  sayHi: function() {
	console.log('Susan says hi!');
  }
};

const serialized = JSON.stringify(person);

console.log(serialized); // {"name":"Susan","age":24} 

typeof serialized === 'string' // true

stringify_method_output.js

"function () { console.log('Susan says hi!'); }"

stringify_signature.js

JSON.stringify(value[, replacer[, space]])

// => value(required) - the object we want to serialize 
// => replacer(optional) - a function that will be called for each of the 
//    object's properties, or an array of strings and numbers that serve 
//    as a whitelist for the property selection process
// => space(optional) - the number of spaces each key will receive as indent

stringify_with_replacer.js

'use strict';

let person = {
  name: 'Susan',
  age: 24,
  sayHi: function() {
    console.log('Susan says hi!');
  }
};

let replacer = (key, value) => {
  // if we get a function, give us the code for that function
  if (typeof value === 'function') {
    return value.toString();
  }

  return value;
}

// get a stringified version of our object, and indent the keys at 2 spaces
const serialized = JSON.stringify(person, replacer, 2);

console.log(serialized); 
// {"name":"Susan","age":24,"sayHi":"function () {\n\tconsole.log('Susan says hi!');\n  }"}