Can you use shorthand property assignment using 'this'?

I can do this:

class Temp {

    constructor() {

        this.foo = 'foo'

        this.bar = 'bar'

    }



    getObj() {



        let boo = 'boo'

        return {

            boo

        }

    }

}

console.log(new Temp().getObj())

//prints { boo: 'boo' }

So how can I do this:

class Temp {

    constructor() {

        this.foo = 'foo'

        this.bar = 'bar'

    }



    getObj() {



        return {

            this.foo

        }

    }

}

console.log(new Temp().getObj())

Is there special syntax or is it not supported?

edited Nov 13 '18 at 22:15

asked Nov 13 '18 at 21:59

u84six

1,38611735

Why do you need another special syntax? to get rid of those nasty four (!!) characters in { foo: this.foo, } ?

– Jonas Wilms
Nov 13 '18 at 22:09

@Jonas Wilms consistency and lower risk of error? Imagine that this is just an example and I may have a huge list of key/value pairs.

– u84six
Nov 13 '18 at 22:10

... at the cost of weird syntax mixes.

– Jonas Wilms
Nov 13 '18 at 22:11

wait... do you just want to clone the class or extract only certain values?

– Jonas Wilms
Nov 13 '18 at 22:12

Thanks for the edit!

– Bergi
Nov 13 '18 at 22:16

add a comment |

I can do this:

class Temp {

    constructor() {

        this.foo = 'foo'

        this.bar = 'bar'

    }



    getObj() {



        let boo = 'boo'

        return {

            boo

        }

    }

}

console.log(new Temp().getObj())

//prints { boo: 'boo' }

So how can I do this:

class Temp {

    constructor() {

        this.foo = 'foo'

        this.bar = 'bar'

    }



    getObj() {



        return {

            this.foo

        }

    }

}

console.log(new Temp().getObj())

Is there special syntax or is it not supported?

edited Nov 13 '18 at 22:15

asked Nov 13 '18 at 21:59

u84six

1,38611735

Why do you need another special syntax? to get rid of those nasty four (!!) characters in { foo: this.foo, } ?

– Jonas Wilms
Nov 13 '18 at 22:09

@Jonas Wilms consistency and lower risk of error? Imagine that this is just an example and I may have a huge list of key/value pairs.

– u84six
Nov 13 '18 at 22:10

... at the cost of weird syntax mixes.

– Jonas Wilms
Nov 13 '18 at 22:11

wait... do you just want to clone the class or extract only certain values?

– Jonas Wilms
Nov 13 '18 at 22:12

Thanks for the edit!

– Bergi
Nov 13 '18 at 22:16

add a comment |

I can do this:

class Temp {

    constructor() {

        this.foo = 'foo'

        this.bar = 'bar'

    }



    getObj() {



        let boo = 'boo'

        return {

            boo

        }

    }

}

console.log(new Temp().getObj())

//prints { boo: 'boo' }

So how can I do this:

class Temp {

    constructor() {

        this.foo = 'foo'

        this.bar = 'bar'

    }



    getObj() {



        return {

            this.foo

        }

    }

}

console.log(new Temp().getObj())

Is there special syntax or is it not supported?

edited Nov 13 '18 at 22:15

asked Nov 13 '18 at 21:59

u84six

1,38611735

I can do this:

class Temp {

    constructor() {

        this.foo = 'foo'

        this.bar = 'bar'

    }



    getObj() {



        let boo = 'boo'

        return {

            boo

        }

    }

}

console.log(new Temp().getObj())

//prints { boo: 'boo' }

So how can I do this:

class Temp {

    constructor() {

        this.foo = 'foo'

        this.bar = 'bar'

    }



    getObj() {



        return {

            this.foo

        }

    }

}

console.log(new Temp().getObj())

Is there special syntax or is it not supported?

javascript ecmascript-6

edited Nov 13 '18 at 22:15

asked Nov 13 '18 at 21:59

u84six

1,38611735

edited Nov 13 '18 at 22:15

asked Nov 13 '18 at 21:59

u84six

1,38611735

edited Nov 13 '18 at 22:15

asked Nov 13 '18 at 21:59

u84six

1,38611735

asked Nov 13 '18 at 21:59

u84six

1,38611735

asked Nov 13 '18 at 21:59

u84six

1,38611735

Why do you need another special syntax? to get rid of those nasty four (!!) characters in { foo: this.foo, } ?

– Jonas Wilms
Nov 13 '18 at 22:09

@Jonas Wilms consistency and lower risk of error? Imagine that this is just an example and I may have a huge list of key/value pairs.

– u84six
Nov 13 '18 at 22:10

... at the cost of weird syntax mixes.

– Jonas Wilms
Nov 13 '18 at 22:11

wait... do you just want to clone the class or extract only certain values?

– Jonas Wilms
Nov 13 '18 at 22:12

Thanks for the edit!

– Bergi
Nov 13 '18 at 22:16

add a comment |

Why do you need another special syntax? to get rid of those nasty four (!!) characters in { foo: this.foo, } ?

– Jonas Wilms
Nov 13 '18 at 22:09

@Jonas Wilms consistency and lower risk of error? Imagine that this is just an example and I may have a huge list of key/value pairs.

– u84six
Nov 13 '18 at 22:10

... at the cost of weird syntax mixes.

– Jonas Wilms
Nov 13 '18 at 22:11

wait... do you just want to clone the class or extract only certain values?

– Jonas Wilms
Nov 13 '18 at 22:12

Thanks for the edit!

– Bergi
Nov 13 '18 at 22:16

Why do you need another special syntax? to get rid of those nasty four (!!) characters in { foo: this.foo, } ?

– Jonas Wilms
Nov 13 '18 at 22:09

@Jonas Wilms consistency and lower risk of error? Imagine that this is just an example and I may have a huge list of key/value pairs.

– u84six
Nov 13 '18 at 22:10

... at the cost of weird syntax mixes.

– Jonas Wilms
Nov 13 '18 at 22:11

wait... do you just want to clone the class or extract only certain values?

– Jonas Wilms
Nov 13 '18 at 22:12

Thanks for the edit!

– Bergi
Nov 13 '18 at 22:16

add a comment |

4 Answers
4

active

oldest

votes

I guess what you actually look for is:

return { ...this };

or if you want to omit some properties:

 const { bar, ...take } = this;

 return take;

answered Nov 13 '18 at 22:13

Jonas Wilms

56.6k42851

add a comment |

No, this is not yet supported. You will have to go by {foo: this.foo}.

However, there is a stage 1 proposal for shorthand property definition improvements that would allow you to write {this.foo} as an object literal.

answered Nov 13 '18 at 22:15

Bergi

367k58547876

hmmm ... there was always confusion between block statements and object literals, not sure if that proposal makes it even harder to distinguish ...

– Jonas Wilms
Nov 13 '18 at 22:19

1

@JonasWilms Normally it's pretty obvious that you're in an expression context - when you are reading the whole code not getting presented an excerpt that could be both. I'd really love this proposal to get accepted, I was wanting this for years…

– Bergi
Nov 13 '18 at 22:23

add a comment |

If 'foo' is a public property you can do something like this:

class Foo {

  constructor() {

    this.foo = 'foo';

  }

}



const { foo } = (new Foo());

console.log(foo); // 'foo'

https://repl.it/repls/FastForcefulMice

answered Nov 13 '18 at 22:07

Baruch

1,5701018

Hmm, now I feel like I need to change the title to my question. So was asking if you can use shorthand property names with 'this'.

– u84six
Nov 13 '18 at 22:09

2

@u84six You can't.

– Baruch
Nov 13 '18 at 22:11

add a comment |

If you want to use destructuring, you'll need to extract the property to a const, and then use shorthand property names:

class Temp {

  constructor() {

    this.foo = 'foo'

    this.bar = 'bar'

  }



  getObj() {

    const { foo } = this;



    return {

      foo

    }

  }

}

console.log(new Temp().getObj())

edited Nov 13 '18 at 22:27

answered Nov 13 '18 at 22:03

Ori Drori

75.9k138092

I don't believe that's destructuring in the way I was expecting. Notice in my example that the key is the same name of the var without having to type it in.

– u84six
Nov 13 '18 at 22:06

I've added an answer with destructuring.

– Ori Drori
Nov 13 '18 at 22:10

2

Yes, my question was confusing. I was getting shorthand properties mixed with destructuring (i.e. I'm fairly new to js)

– u84six
Nov 13 '18 at 22:12

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53290147%2fcan-you-use-shorthand-property-assignment-using-this%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

4 Answers
4

active

oldest

votes

4 Answers
4

active

oldest

votes

I guess what you actually look for is:

return { ...this };

or if you want to omit some properties:

 const { bar, ...take } = this;

 return take;

answered Nov 13 '18 at 22:13

Jonas Wilms

56.6k42851

add a comment |

I guess what you actually look for is:

return { ...this };

or if you want to omit some properties:

 const { bar, ...take } = this;

 return take;

answered Nov 13 '18 at 22:13

Jonas Wilms

56.6k42851

add a comment |

I guess what you actually look for is:

return { ...this };

or if you want to omit some properties:

 const { bar, ...take } = this;

 return take;

answered Nov 13 '18 at 22:13

Jonas Wilms

56.6k42851

I guess what you actually look for is:

return { ...this };

or if you want to omit some properties:

 const { bar, ...take } = this;

 return take;

answered Nov 13 '18 at 22:13

Jonas Wilms

56.6k42851

answered Nov 13 '18 at 22:13

Jonas Wilms

56.6k42851

answered Nov 13 '18 at 22:13

Jonas Wilms

56.6k42851

answered Nov 13 '18 at 22:13

Jonas Wilms

56.6k42851

add a comment |

No, this is not yet supported. You will have to go by {foo: this.foo}.

However, there is a stage 1 proposal for shorthand property definition improvements that would allow you to write {this.foo} as an object literal.

answered Nov 13 '18 at 22:15

Bergi

367k58547876

hmmm ... there was always confusion between block statements and object literals, not sure if that proposal makes it even harder to distinguish ...

– Jonas Wilms
Nov 13 '18 at 22:19

1

@JonasWilms Normally it's pretty obvious that you're in an expression context - when you are reading the whole code not getting presented an excerpt that could be both. I'd really love this proposal to get accepted, I was wanting this for years…

– Bergi
Nov 13 '18 at 22:23

add a comment |

No, this is not yet supported. You will have to go by {foo: this.foo}.

However, there is a stage 1 proposal for shorthand property definition improvements that would allow you to write {this.foo} as an object literal.

answered Nov 13 '18 at 22:15

Bergi

367k58547876

hmmm ... there was always confusion between block statements and object literals, not sure if that proposal makes it even harder to distinguish ...

– Jonas Wilms
Nov 13 '18 at 22:19

1

@JonasWilms Normally it's pretty obvious that you're in an expression context - when you are reading the whole code not getting presented an excerpt that could be both. I'd really love this proposal to get accepted, I was wanting this for years…

– Bergi
Nov 13 '18 at 22:23

add a comment |

No, this is not yet supported. You will have to go by {foo: this.foo}.

However, there is a stage 1 proposal for shorthand property definition improvements that would allow you to write {this.foo} as an object literal.

answered Nov 13 '18 at 22:15

Bergi

367k58547876

No, this is not yet supported. You will have to go by {foo: this.foo}.

However, there is a stage 1 proposal for shorthand property definition improvements that would allow you to write {this.foo} as an object literal.

answered Nov 13 '18 at 22:15

Bergi

367k58547876

answered Nov 13 '18 at 22:15

Bergi

367k58547876

answered Nov 13 '18 at 22:15

Bergi

367k58547876

answered Nov 13 '18 at 22:15

Bergi

367k58547876

hmmm ... there was always confusion between block statements and object literals, not sure if that proposal makes it even harder to distinguish ...

– Jonas Wilms
Nov 13 '18 at 22:19

1

@JonasWilms Normally it's pretty obvious that you're in an expression context - when you are reading the whole code not getting presented an excerpt that could be both. I'd really love this proposal to get accepted, I was wanting this for years…

– Bergi
Nov 13 '18 at 22:23

add a comment |

hmmm ... there was always confusion between block statements and object literals, not sure if that proposal makes it even harder to distinguish ...

– Jonas Wilms
Nov 13 '18 at 22:19

1

@JonasWilms Normally it's pretty obvious that you're in an expression context - when you are reading the whole code not getting presented an excerpt that could be both. I'd really love this proposal to get accepted, I was wanting this for years…

– Bergi
Nov 13 '18 at 22:23

hmmm ... there was always confusion between block statements and object literals, not sure if that proposal makes it even harder to distinguish ...

– Jonas Wilms
Nov 13 '18 at 22:19

@JonasWilms Normally it's pretty obvious that you're in an expression context - when you are reading the whole code not getting presented an excerpt that could be both. I'd really love this proposal to get accepted, I was wanting this for years…

– Bergi
Nov 13 '18 at 22:23

add a comment |

If 'foo' is a public property you can do something like this:

class Foo {

  constructor() {

    this.foo = 'foo';

  }

}



const { foo } = (new Foo());

console.log(foo); // 'foo'

https://repl.it/repls/FastForcefulMice

answered Nov 13 '18 at 22:07

Baruch

1,5701018

Hmm, now I feel like I need to change the title to my question. So was asking if you can use shorthand property names with 'this'.

– u84six
Nov 13 '18 at 22:09

2

@u84six You can't.

– Baruch
Nov 13 '18 at 22:11

add a comment |

If 'foo' is a public property you can do something like this:

class Foo {

  constructor() {

    this.foo = 'foo';

  }

}



const { foo } = (new Foo());

console.log(foo); // 'foo'

https://repl.it/repls/FastForcefulMice

answered Nov 13 '18 at 22:07

Baruch

1,5701018

Hmm, now I feel like I need to change the title to my question. So was asking if you can use shorthand property names with 'this'.

– u84six
Nov 13 '18 at 22:09

2

@u84six You can't.

– Baruch
Nov 13 '18 at 22:11

add a comment |

If 'foo' is a public property you can do something like this:

class Foo {

  constructor() {

    this.foo = 'foo';

  }

}



const { foo } = (new Foo());

console.log(foo); // 'foo'

https://repl.it/repls/FastForcefulMice

answered Nov 13 '18 at 22:07

Baruch

1,5701018

If 'foo' is a public property you can do something like this:

class Foo {

  constructor() {

    this.foo = 'foo';

  }

}



const { foo } = (new Foo());

console.log(foo); // 'foo'

https://repl.it/repls/FastForcefulMice

answered Nov 13 '18 at 22:07

Baruch

1,5701018

answered Nov 13 '18 at 22:07

Baruch

1,5701018

answered Nov 13 '18 at 22:07

Baruch

1,5701018

answered Nov 13 '18 at 22:07

Baruch

1,5701018

Hmm, now I feel like I need to change the title to my question. So was asking if you can use shorthand property names with 'this'.

– u84six
Nov 13 '18 at 22:09

2

@u84six You can't.

– Baruch
Nov 13 '18 at 22:11

add a comment |

Hmm, now I feel like I need to change the title to my question. So was asking if you can use shorthand property names with 'this'.

– u84six
Nov 13 '18 at 22:09

2

@u84six You can't.

– Baruch
Nov 13 '18 at 22:11

Hmm, now I feel like I need to change the title to my question. So was asking if you can use shorthand property names with 'this'.

– u84six
Nov 13 '18 at 22:09

@u84six You can't.

– Baruch
Nov 13 '18 at 22:11

add a comment |

If you want to use destructuring, you'll need to extract the property to a const, and then use shorthand property names:

class Temp {

  constructor() {

    this.foo = 'foo'

    this.bar = 'bar'

  }



  getObj() {

    const { foo } = this;



    return {

      foo

    }

  }

}

console.log(new Temp().getObj())

edited Nov 13 '18 at 22:27

answered Nov 13 '18 at 22:03

Ori Drori

75.9k138092

I don't believe that's destructuring in the way I was expecting. Notice in my example that the key is the same name of the var without having to type it in.

– u84six
Nov 13 '18 at 22:06

I've added an answer with destructuring.

– Ori Drori
Nov 13 '18 at 22:10

2

Yes, my question was confusing. I was getting shorthand properties mixed with destructuring (i.e. I'm fairly new to js)

– u84six
Nov 13 '18 at 22:12

add a comment |

If you want to use destructuring, you'll need to extract the property to a const, and then use shorthand property names:

class Temp {

  constructor() {

    this.foo = 'foo'

    this.bar = 'bar'

  }



  getObj() {

    const { foo } = this;



    return {

      foo

    }

  }

}

console.log(new Temp().getObj())

edited Nov 13 '18 at 22:27

answered Nov 13 '18 at 22:03

Ori Drori

75.9k138092

I don't believe that's destructuring in the way I was expecting. Notice in my example that the key is the same name of the var without having to type it in.

– u84six
Nov 13 '18 at 22:06

I've added an answer with destructuring.

– Ori Drori
Nov 13 '18 at 22:10

2

Yes, my question was confusing. I was getting shorthand properties mixed with destructuring (i.e. I'm fairly new to js)

– u84six
Nov 13 '18 at 22:12

add a comment |

If you want to use destructuring, you'll need to extract the property to a const, and then use shorthand property names:

class Temp {

  constructor() {

    this.foo = 'foo'

    this.bar = 'bar'

  }



  getObj() {

    const { foo } = this;



    return {

      foo

    }

  }

}

console.log(new Temp().getObj())

edited Nov 13 '18 at 22:27

answered Nov 13 '18 at 22:03

Ori Drori

75.9k138092

If you want to use destructuring, you'll need to extract the property to a const, and then use shorthand property names:

class Temp {

  constructor() {

    this.foo = 'foo'

    this.bar = 'bar'

  }



  getObj() {

    const { foo } = this;



    return {

      foo

    }

  }

}

console.log(new Temp().getObj())

class Temp {

  constructor() {

    this.foo = 'foo'

    this.bar = 'bar'

  }



  getObj() {

    const { foo } = this;



    return {

      foo

    }

  }

}

console.log(new Temp().getObj())

class Temp {

  constructor() {

    this.foo = 'foo'

    this.bar = 'bar'

  }



  getObj() {

    const { foo } = this;



    return {

      foo

    }

  }

}

console.log(new Temp().getObj())

edited Nov 13 '18 at 22:27

answered Nov 13 '18 at 22:03

Ori Drori

75.9k138092

edited Nov 13 '18 at 22:27

answered Nov 13 '18 at 22:03

Ori Drori

75.9k138092

answered Nov 13 '18 at 22:03

Ori Drori

75.9k138092

answered Nov 13 '18 at 22:03

Ori Drori

75.9k138092

I don't believe that's destructuring in the way I was expecting. Notice in my example that the key is the same name of the var without having to type it in.

– u84six
Nov 13 '18 at 22:06

I've added an answer with destructuring.

– Ori Drori
Nov 13 '18 at 22:10

2

Yes, my question was confusing. I was getting shorthand properties mixed with destructuring (i.e. I'm fairly new to js)

– u84six
Nov 13 '18 at 22:12

add a comment |

I don't believe that's destructuring in the way I was expecting. Notice in my example that the key is the same name of the var without having to type it in.

– u84six
Nov 13 '18 at 22:06

I've added an answer with destructuring.

– Ori Drori
Nov 13 '18 at 22:10

2

Yes, my question was confusing. I was getting shorthand properties mixed with destructuring (i.e. I'm fairly new to js)

– u84six
Nov 13 '18 at 22:12

I don't believe that's destructuring in the way I was expecting. Notice in my example that the key is the same name of the var without having to type it in.

– u84six
Nov 13 '18 at 22:06

I've added an answer with destructuring.

– Ori Drori
Nov 13 '18 at 22:10

Yes, my question was confusing. I was getting shorthand properties mixed with destructuring (i.e. I'm fairly new to js)

– u84six
Nov 13 '18 at 22:12

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky