How to call and create AN object in Javascript?

Question

I've got an object called employee with its getters and setters will them be well defined and implement ?

How can I access the values of the object Person on my function List of Javascript so I can show it in my dynamic table?

var operations = {

   init: function() {
      console.log("init");
      operations.setupButton();
   },
   setupButton: function() {
      $("#btnList").on("click", operations.list);
   },
   list: function() {

      var table = $("#tblEmployee");
      var strHtml = "";


      var emp = new employee();
      // load my jsp table
      strHtml += '<tr>';

      strHtml += '<td>' + emp.getName + '</td>';
      strHtml += '<td>' + emp.getAge + '</td>';
      strHtml += '<td>' + emp.getSalary + '</td>';

      strHtml += '<tr>';

      tabla.append(strHtml);
   }
};

var employee = {

   name: 'Jean',
   age: 22,
   salary: 8000000,

   getName() {
      return this.name;
   },
   getAge() {
      return this.age;
   },
   getSalary() {
      return this.salary;
   }
};
$(document).ready(operations.init);

score 0 · Answer 1 · answered Jan 29 '17 at 01:56

I modified your code a bit. I'm not sure if it's what you need. Check it out and update the jsFiddle if necessary.

example code in JsFiddle

    function employee() {
   this.name = 'Jean';
   this.age = 22;
   this.salary = 8000000;

   this.getName = function() {
      return this.name;
   }
};

var operations = {
    init: function() {
        console.log("init");
        operations.setupButton();
   },
   list: function() {
      var table = $("#tblEmployee");
      var strHtml = "";
      var emp = new employee();
      strHtml += '<tr>';
      strHtml += '<td>' + emp.getName() + '</td>';
      strHtml += '</tr>';
      table.append(strHtml);
    },
    setupButton: function() {
        $("#btnList").on("click", operations.list);
    }      
};

$(document).ready(operations.init);

score 0 · Answer 2 · answered Feb 05 '17 at 18:53

There are two ways to imagine Employee, depending on which version of ECMAScript you can assume.

ES6 or higher, you can write a class. (This is really syntactic sugar over the ES5 way which I'll cover after)

class Employee {
    constructor(name = 'Jean', age = 22, salary = 8000000) { // ES6 supports param defaults
        Object.assign(this, {
            name,
            age,
            salary
        });
    }
    // These functions will be inherited by and shared by all instances of Employee
    getName() {
        return this.name;
    }
    getAge() {
        return this.age;
    }
    getSalary() {
        return this.salary;
    }
}

ES5 or lower, using a constructor function and prototypical inheritance. This is more true to how JavaScript really implements the structure

function Employee(name, age, salary) {
    if (typeof name === 'undefined') name = 'Jean'; // ES5 requires manual default setting
    if (typeof age === 'undefined') age = 22;
    if (typeof salary === 'undefined') salary = 8000000;
    this.name = name;
    this.age = age;
    this.salary = 8000000;
}
// These functions will be inherited by and shared by all instances of Employee
Employee.prototype.getName = function getName() {
    return this.name;
};
Employee.prototype.getAge = function getAge() {
    return this.age;
};
Employee.prototype.getSalary = function getSalary() {
    return this.salary;
};

Usage in both cases,

new Employee(); // Employee {name: 'Jean', age: 22, salary: 8000000}

score -1 · Answer 3 · edited May 23 '17 at 11:53

You've got some misprints and do something wrong

function Employee(){

   name = 'Jean';
   age  = 22;
   salary: 8000000;

   getName = function() {
      return this.name;
   }
   
   getAge = function() {
      return this.age;
   }
   
   getSalary = function() {
      return this.salary;
   }
};

var operations = {

   init: function() {
      console.log("init");
      operations.setupButton();
   },
   setupButton: function() {
      $("#btnList").on("click", operations.list);
   },
   list: function() {

      var table = $("#tblEmployee");
      var strHtml = "";


      var emp = new Employee();
      // load my jsp table
      strHtml += '<tr>';

      strHtml += '<td>' + emp.getName + '</td>';
      strHtml += '<td>' + emp.getAge + '</td>';
      strHtml += '<td>' + emp.getSalary + '</td>';

      strHtml += '<tr>';

      table.append(strHtml);
   }
};

$(document).ready(operations.init);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table id="tblEmployee">
  <tbody>
  </tbody>
</table>
<button id="btnList">List</button>

Check you errors here:

Javascript "Not a Constructor" Exception while creating objects

How to call and create AN object in Javascript?

3 Answers3