在对象文字中进行字符串加法的方法

Question

Can I do some string additions inside an object literal?

Chrome gives me the following error message if I do height: 'calc(100% - ' + String(this.padding) + 'px * 2)' .

[ProjectContainer.js:15] Uncaught TypeError: Cannot read property 'padding' of undefined

var styles = {
    root: {
        display: 'flex',
        flexWrap: 'wrap',
        textAlign: 'left',
        padding: 10,
        height: 'calc(100% - ' + String(this.padding) + 'px * 2)',
        width: 'calc(100% - 10px * 2)',
        overflowY: 'scroll'
    }
}

However, if I make it as a function, no error message is displayed but the css seems not working. This may because the inline-style system does not call it as a function but variable.

var styles = {
    root: {
        display: 'flex',
        flexWrap: 'wrap',
        textAlign: 'left',
        padding: 10,
        height: function() {return 'calc(100% - ' + String(this.padding) + 'px * 2)'},
        width: 'calc(100% - 10px * 2)',
        overflowY: 'scroll'
    }
}

What is the best way to make the height to be 'calc(100% - 10px * 2)' ?

Answer 1

As noted in the comments, you can't use this to refer to your object literal as you are defining it. Instead it will refer to the global this , or the this in the current scope of the code. Basically you cannot use the properties of an object literal while you are still defining it, you will need to do so afterwards:

 var styles = { root: { display: 'flex', flexWrap: 'wrap', textAlign: 'left', padding: 10, height: '', // Optional width: 'calc(100% - 10px * 2)', overflowY: 'scroll' } } styles.root.height = 'calc(100% - ' + String(styles.root.padding) + 'px * 2)'; console.log(styles); 

Answer 2

You can try this

var styles = {
    root: {
        display: 'flex',
        flexWrap: 'wrap',
        textAlign: 'left',
        padding: 10,

        width: 'calc(100% - 10px * 2)',
        overflowY: 'scroll'
    }, 
    init: function() {
       this.root.height = 'calc(100% - ' + String(this.root.padding) + 'px * 2)';
       delete this.init; 
       return this;
    },
}.init()

Answer 3

You could do:

var styles = (function() {
  var padding = '10';
  return {
    root: {
      display: 'flex',
      flexWrap: 'wrap',
      textAlign: 'left',
      padding: +padding,
      height: 'calc(100% - ' + padding + 'px * 2)',
      width: 'calc(100% - 10px * 2)',
      overflowY: 'scroll'
   }
})();

This makes use of a couple fun Javascript techniques such as:

• immediately invoked function expression ( IIFE )
• unary plus operator to coerce the string '10' into a number

This has the advantage of not only being done in a single expression, but also being easier to read and understand.

AND you could modify it so that the padding value could be passed in from the outside with almost no new work:

var styles = (function(padding) {
  var padding = padding ? padding : '10';
  return {
    root: {
      display: 'flex',
      flexWrap: 'wrap',
      textAlign: 'left',
      padding: +padding,
      height: 'calc(100% - ' + padding + 'px * 2)',
      width: 'calc(100% - 10px * 2)',
      overflowY: 'scroll'
   }
})(padding);

Answer 4

You cannot use this inside an object literal to reference a properly during declaration. this in JavaScript is used for function scope.

The example below shows a possible solution to your problem. You basically define padding in a function scope and retrieve it within your object literal declaration.

In most cases, the value of this is determined by how a function is called. It can't be set by assignment during execution, and it may be different each time the function is called. More info on this here .

 function foo() { this.padding = 10; // declare it only once var styles = { root: { display: 'flex', flexWrap: 'wrap', textAlign: 'left', padding: this.padding, height: 'calc(100% - ' + String(this.padding) + 'px * 2)', width: 'calc(100% - 10px * 2)', overflowY: 'scroll' } }; console.log(styles.root); }; foo();