We Keep Coding

Why use function to create a data structure instead of class? Is it even correct?

I had compared the code that i found online and what my lecturer gave me. I am confused that why my lecturer uses function to create data structure instead of class like what i found online. Which one is better? class? function?
This is the code from my lecturer to create a stack
var Stack = function(){
//Class members
this.count = 0;
this.storage = {};
//Add item
this.push = function(value){
this.storage[this.count] = value;
this.count++;
}
//Delete item
this.pop = function(){
if(this.count === 0){
return undefined;
}
this.count--;
var result = this.storage[this.count];
delete this.storage[this.count];
return result;
}
//Return the sie of the stack
this.size = function(){
return this.count;
}
//View the top of the stack
this.top = function(){
return this.storage[this.count-1];
}
}
This is the code from my lecturer to create a linked list
function Queue(){
this.collection = [];
//Print the collection
this.print = function(){
document.write(this.collection + "<br/>");
};
//Add item in queue
this.addQ = function(element){
this.collection.push(element);
};
//Remove item at the front
this.deQ = function(){
return this.collection.shift(); //Left shift
};
//Return first item
this.front = function(){
return this.collection[0];
};
//Return the size of queue
this.size = function(){
return this.collection.length;
};
//Check the queue status: Empty or not
this.isEmpty = function(){
return (this.collection.length === 0);
};
}
Just a few questions
why use function instead of class?
why use var Stack = function(){ for stack and function Queue(){ for queue? any different?
why use this.push = function(value){? i thought it should be function like function push(){

First of all there's no difference in the two ways used, they work just the same way.
Also this.push = function(value){ ... } is how you define methods in Javascript

Javascript is a prototype based language, so it doesn't have real classes. However, ES6 added the class keyword, which is easier to read, but still uses prototypes under the hood.
Everything in javascript is an object, including functions. When you call a function using the new keyword, it creates a new object and attaches it to this inside that function. So in your constructor, you can do this.foo = function(){ to attach a function to your new object. However, this is inefficient because it runs every time you create a new object. A better way is to use prototypes, so that you only create each function once:
var Stack = function() {
// Initialize local variables.
this.count = 0;
this.storage = {};
}
// Attach class methods
Stack.prototype.foo = function() { ... }
Stack.prototype.bar = function() { ... }
// Create instance of class.
var myStack = new Stack();
Since the class keyword was added recently, you'll need to use the functional way if you want to support IE11 or other older browsers, unless you're using a transpiler.

JavaScript: use an object returned by function without object of object

I am new in JavaScript/jQuery. Wondering if there is any better way to return an object by a function.
//this is the Object creator.
function makeNewPlayer(name, score) {
var player = {};
player.name = name;
player.score = score;
return player;
};
This is how I use the function.
var player_info = makeNewPlayer('Bob' ,100);
However, when I use the object, I need to call it like this:
player_info.player.name
player_info.player.score
It looks stupid, any way to use the object directly like this?
player_info.name
player_info.score
edit:
As I don't know how many object will be created by the function.
Let say there is a for loop to make score_1, score_2 etc.
function makeNewPlayer(name, score) {
var player = {};
player.name = name;
for(i=0, i<number_of_score, i++){
eval("player.score_" + i) = score[i];
};
return player;
};

You can use destructing assignment to declare global or locally scoped variables
//this is the Object creator.
function makeNewPlayer(name, score) {
var player = {};
player.name = name
player.score = score
return player;
};
var player_info = makeNewPlayer("Bob", 100);
{
let {name: _name, score} = player_info;
// do stuff with `_name`, `score`
console.log(_name, score);
}

Use new.
I copied some text from my blog that happened to resolve your doubts:
A constructor is a special function used for creating an object:
Example:
function StarkIndustries(name, birth) {
this.name = name;
this.birth = birth;
}
var iron1 = new StarkIndustries('iron01', 2017);
var iron2 = new StarkIndustries('iron02', 2017);
alert(iron1.name);
alert(iron2.name);
Result:
iron01
iron02
By adding new before a function, the function is turned into a
constructor that constructs an object.
But it is dangerous to call a function designed as a constructor
without new, because it will modify the global object window. So sanity check inside the constructor is required:
if (!(this instanceof StarkIndustries)) {
warn("StarkIndustries is a constructor and should be called with `new`");
}
Back to your code, it should be:
function makeNewPlayer(name, score) {
this.name = name
this.score = score
};
var iron1 = new makeNewPlayer('iron01', 2017);

Aside for the fact that "Bob" should be in quotes, it's working fine for me.
var player_info = makeNewPlayer('Bob', 100);
and then I am able to access it just fine like this:
player_info.name
player_info.score

function makeNewPlayer(name, score) {
return {name, score};
};
let players = [];
// in for loop -- sample code only, you need to supply name & score
{
players.push(makeNewPlayer(name, score));
}

You can use a temporary constructor function inside of your function :
function makeNewPlayer(name, score){
const Player = function(name, score){
this.name = name;
this.score = score;
};
return new Player(name, score);
}
You can also use an external function instead of a nested one.

With no change to your function, i am able to get the output the way you want it
player_info.name
player_info.score
Check out the snippet below
//this is the Object creator.
function makeNewPlayer(name, score) {
var player = {};
player.name = name
player.score = score
return player;
};
var player_info = makeNewPlayer("Bob", 100);
console.log(player_info.name);
console.log(player_info.score);

Returning the ID of MyClass in Javascript

I have this block of code that will create a new instance of MyClass, I want each instances of this class to have an id. So I have a function that will return cnt, and every time the new object is initialized the id value will increase.
var MyClass = (function () {
var Constr, cnt = 0;
Constr = function () {};
Constr.id = function () {
return cnt;
};
Constr.prototype = {
constructor: Constr,
id: Constr.id
};
cnt++
return Constr;
}());
var x = new MyClass();
console.log(x.id);
document.getElementById("1").innerHTML = x.id;
The problem is, I obviously want the value of cnt to be returned, but everything I do returns function() { return cnt; }
Update, deleted fiddle, posted incorrect one.

If you want each instance to have a unique value, then you need to set that value in the constructor for the instance.
You can't inherit the value on the prototype chain. That is what you do when you want every object to have the same value.
You also need to assign the value you want and not a function which will return the value.
Constr = function () {
this.id = cnd;
};

If you want the id to be uniquely assigned for each new instance of your class, then you need to assign the id to your instance data in the Const constructor:
var MyClass = (function () {
var cnt = 0;
// constructor for our object
function Constr() {
// assign a unique id to this object when it is created
this.id = cnt++;
};
// static method (not an instance method) - get current global cnt value
Constr.id = function () {
return cnt;
};
Constr.prototype = {
constructor: Constr,
};
return Constr;
}());
var x = new MyClass();
console.log(x.id);
document.getElementById("1").innerHTML = x.id;
This question shows that perhaps you didn't really understand my comments on your earlier question about the outer function only getting called once. I'd suggest you reread those.
When you do:
x = new MyClass()
it is ONLY executing the Constr function, nothing else. Plus, the .prototype is shared among all instances (that is the point of it) so you can never put a counter there that is unique for each instance.

It seem like all You need is:
var MyClass = (function () {
var cnt = 0;
function Constr() {
this.id = cnt++;
};
Constr.prototype = {
constructor: Constr
};
return Constr;
}());
The following one was my previous BAD answer,
You could replace Constr.id with:
....
Constr.id = new function () {
this.toString = function () {
return ++cnt;
}
};
....
and then You should get it from the instance with
var x = new MyClass();
console.debug(x.id);
but take care that it will be an object and only when used as a string, (like in console.debug, or with .innerHTML= "..." ) will be a string.
Hope it helps.

how to have Javascript Object creation pattern with Reusable methods and private properties?

Considering object creation patterns with private properties, one way to do is :
function MyStack (){
var list = [],
index = 0;
this.push = function(val){
return list[index++] = val;
};
this.pop = function(){// ...}
}
var stack1 = new MyStack(); stack1.push(5);
var stack2 = new MyStack(); stack2.push(11);
Problem with this: Every instance of Stack has it's own copy of methods 'push' and 'pop'.
Another way for implementing constructor method is:
function MyStack(){
this.list = [];
this.index = 0;
}
MyStack.prototype = {
insert: function(val){
return this.list[this.index++] = val;
},
pop:function(){//...}
}
Problem here: We lose the privacy of list and index.
Is there a way, such that we can have both methods reuse among instances and privacy of properties ?
I understand that we can have this for methods that don't operate on any state of the object, but I am talking more about those methods that do operate on the state.

Yes. I've edited this code so it's actually fully functional as you had intended it to work. It seems a bit redundant to me, but, it does provide you the ability to provide a public interface, but to keep your variables private and control the way the user interacts with them.
function MyStack(){
var list = [];
var index = 0;
this.getIndex = function(){
return index;
}
this.setIndex = function(val){
index = val;
}
this.list = function(val){
if(val){
// setter if a value was provided. Illustrating how you can control
// index, which I assume is the point of having these things private
// to begin with
return list[this.setIndex(this.getIndex() + 1)] = val;
}
// always return list - acts like a getter
return list;
}
}
MyStack.prototype = {
insert: function(val){
return this.list(val);
},
pop:function(){}
}
var stack1 = new MyStack();
stack1.insert(5);
var stack2 = new MyStack();
stack2.insert(11);

You should check out John Resig's Simple Javascript Inheritance. It is a great read, and it has been extended to provide support for privates, aptly called Privates.js;

A constructor function may return any object (not necesserily this). One could create a constructor function, that returns a proxy object, that contains proxy methods to the "real" methods of the "real" instance object. This may sound complicated, but it is not; here is a code snippet:
var MyClass = function() {
var instanceObj = this;
var proxyObj = {
myPublicMethod: function() {
return instanceObj.myPublicMethod.apply(instanceObj, arguments);
}
}
return proxyObj;
};
MyClass.prototype = {
_myPrivateMethod: function() {
...
},
myPublicMethod: function() {
...
}
};
The nice thing is that the proxy creation can be automated, if we define a convention for naming the protected methods. I created a little library that does exactly this: http://idya.github.com/oolib/

I think in both approaches you mentioned, When ever object is created using constructor pattern the properties will get copied to its objects. This you mentioned for the 1st approach as the concern. I feel the same will be applied for the second approach also along with your concern in this approach.
We generally go to the second approach you mentioned when ever we want to extend the properties of "MyStack" to some other class.
Lets say i want to extend your class MyStack to MyTest like below
var dummy = function();
dummy.prototype = MyStack.prototype;
var MyTest = function(){
};
MyTest.prototype = new dummy(); // Assigning MyStack properties to MyTest
var obj = new MyTest();

Is there anyway to have instances share the same function yet at the same time have private variables?

I have this piece of code:
var Human=function(name){
this._name=name;
};
Human.prototype.Shout=function(){
alert(this._name);
};
var tom=new Human("tom");
var john=new Human("john");
alert(tom.Shout===john.Shout);
Right now ._name is not "private". I want to make ._name "private", but at the same time i do not wish to create additional functions for each instance of Human (in other words tom.Shout Must be === to john.Shout) because creating additional functions for each instance is just well.. unnecessary (ok offtopic - we can debate this on another thread)
My conclusion is that what I'm trying to achieve (having ._name be "private" and at the same time having tom.Shout===john.Shout) is impossible.
But I just want to be 200% sure before jumping into any conclusions.
(I welcome any hacks as long as the requirements are met, i.e no creating of additional functions for each instance)
If we have to create additional functions to do scoping that's fine but that number should be a fixed number and that number should not increase with each additional instance of Human.

Update
Your looking for #name which is an instance variable. Pray it's in es.next, but we don't have it yet. Maybe in two years.
If you care about a clean API then here is your solution:
function Class(foo) {
Class.priv(this).foo = foo;
}
Class.priv = (function() {
var cache = [],
uid = 1;
return function(obj) {
if (!this.__id) {
this.__id = uid;
cache[uid++] = {};
}
return cache[this.__id];
};
}());
Class.prototype.bar = function() {
console.log(Class.priv(this).foo);
}
Store all the data in a cache as a function of the constructor. No data is cluttered on the object.
Original
However there is no such thing as "private".
All you can do is create a local variable inside a function.
The constructor function
var Human = function(name) {
// local variable.
var _name = name;
}
Has a local variable that by very definition of being local is not usable outside of the constructor function.
This means that you cannot access it in external code like the prototype.
What you can do however is make it read only using ES5
var Human = function(name) {
Object.defineProperty(this, "name", { value: name });
}
If you can truly achieve what your asking, you'd make a huge breakthrough in js. I've attempted to do just that for many hours.
A different pattern would be :
var Human = function(name) {
this.name = name;
return {
Shout: this.Shout.bind(this)
};
}
Human.prototype.Shout = function() {
console.log(this.name);
}
This has the overhead of calling .bind and creating a new object for every instance though.

how about this ?
var Human = function (name) {
var _name = name;
this.getName = function () {
return _name;
}
};
Human.prototype.Shout = function () {
alert(this.getName());
};
var tom = new Human("tom");
var john = new Human("john");
tom.Shout(); // tom
john.Shout(); // john
alert(tom.Shout === john.Shout); // true
EDIT:
the former creates another function for GET property,
it is not possible without creating additional functions.

Did read the question, didn't understand, because this._name is just not private, so the question is a bit weird. This is how in my test the prototype methods are added once and available to all instances. I repeat: this._name is not private here. If you add a local variable, and want to access it via a closure in a prototype method, calling the value of the local variable will result in the same value for all instances.
Anyway, with this constructor function the this._name getter and shout methods are added to the prototype chain once and thereby available for all instances of Human.
function Human(name) {
if (!(this instanceof Human)){
return new Human(name);
}
this._name = name;
if (!Human.prototype.Name){
Human.prototype.Name = function(val){
if (val){
this._name = val;
return this;
}
return this._name;
};
Human.prototype.shout = function(){
alert(this._name);
}
}
}