Why setter with set keyword and function expressed in ES5 throws syntax error?

Question

Why defining a setter throws syntax error when the function is expressed the ES5 way but works when expressed in ES6.

Setter with ES5 syntax(Doesn't work)

var person = {
  firstName: "John",
  lastName : "Doe",
  language : "",
  set setLanguage: function(val) {
     this.language = val    
  },
  get getLanguage() {
     return this.language   
  }     
}

person.setLanguage = 'EN'
person.getLanguage
`Uncaught SyntaxError: Unexpected token :`

Setter with ES6 syntax (Works)

var person = {
  firstName: "John",
  lastName : "Doe",
  language : "",
  set setLanguage(val) {
     this.language = val    
  },
  get getLanguage() {
     return this.language   
  }     
}

person.setLanguage = 'EN'
person.getLanguage

Thanks

shouldn't it be `set setLanguage(val) { this.language = val }` in your first code example ? — Code Maniac, Jun 04 '19 at 11:51
https://stackoverflow.com/questions/812961/getters-setters-for-dummies I'm not marking it as a duplicate, but it's really really close ;) — briosheje, Jun 04 '19 at 11:51
Why would you use this naming convention anyway? Wouldn't it be more natural to have `lang: '', get language() { return this.lang; }, set language(val) { this.lang = val; }`? Then your code could just do `person.language = 'en';` and `var lang = person.language;`... — Heretic Monkey, Jun 04 '19 at 12:39

barbsan · Accepted Answer · 2019-06-04T13:24:23.623

Your second example is not ES6 specific, it's valid ES5 syntax:

set setLanguage(val) {
    this.language = val;    
},

From Object Initialiser's specification (ES5)

PropertyAssignment :
PropertyName : AssignmentExpression
get PropertyName ( ) { FunctionBody }
set PropertyName ( PropertySetParameterList ) { FunctionBody }

As you can see, there's a : after PropertyName, but there's no : or function in getter or setter

Update:

You propably confused concepts of computed property names and getters/setters

ES6 introduced computed property names, so you can do this (this snippet propably won't work in older browsers, like IE):

const person = {
  language: "",
  setLanguage(val){
    this.language = val;
  },
  getLanguage(){
    return this.language;
  }
}

person.setLanguage("EN");

console.log("person.language", person.language);
console.log("person.getLanguage()",person.getLanguage())

Note lack of set or get keywords and that you have to call person.setLanguage("EN"); instead of person.setLanguage = "EN";

In ES5 you'll have to (change const to var and) use:

setLanguage: function(val) {
    this.language = val;    
},
getLanguage: function() {
    return this.language;    
},

Code Maniac · Answer 2 · 2019-06-04T12:04:00.287

0

You're not defining method properly in your object read this --> Method definitions also this Defining getters and setters

var person = {
  firstName: "John",
  lastName : "Doe",
  language : "",
  set setLanguage(val) {
     this.language = val    
  },
  get getLanguage() {
     return this.language   
  }     
}

person.setLanguage = 'EN'
console.log(person.getLanguage)

edited Jun 04 '19 at 12:04

answered Jun 04 '19 at 11:55

Code Maniac

37,143
5
39
60

Why setter with set keyword and function expressed in ES5 throws syntax error?

2 Answers2