Method, Functions and Objects

Question

I have been doing code academy for the past few weeks and i am currently doing the object, function and method section on the Javascript Fundamentals (42%). I havent really skipped any bits as i really want to learn properly. However, i am having some problem understanding the use of functions, methods and objects.

I understand that an object is to store information such as real world info:

personObj=new Object();     
personObj.firstname="John";
personObj.lastname="Doe";
personObj.age=30;
personObj.eyecolor="blue";

Also, what exactly are constructors? and what does .this mean?

I also learnt to create a function, the way is

var whatever = new Function(){
 then whatever here
}

but in code academy, they started coding with:

function whatever(){
Then Whatever
}

Whats the difference? I would love for someone to explain in the "Javascript for Dummies" type...

Thanks again!

Answer 1

Hey there codecademy buddy, I've been going through the same course :)
Let's see if I can answer your questions!

• "I understand that an object is to store information such as real world info"
  This is not entirely accurate. When codecademy describes an object this way, they're trying to show you a real-world application that would make use of an object.
  An object is a lot like a function actually, but there are some differences: an object is "instantiated". When an object is created like this personObj=new Object(); or "constructed" (I'll get to that in a moment) like this var newPerson = new Person(parameters);, it creates a specific instance of an object. On it's own an object is just an idea, but when you summon, or "instantiate" an object, you are creating a specific instance of it that can be referenced elsewhere in the code. See next answers for clarification!

• "Also, what exactly are constructors? and what does .this mean?"
  A constructor is like a template or blueprint. It is the object as an idea, and when you make a new object, a constructor can save you some time by pre-defining some of the new object's qualities. It provides the object with "methods", and attributes (like .name). A method is just like a function that has a home! A method is a function that belongs to an object that can only be called in reference to an object. A function's attributes are variables specific to the object, or that object's "public variables". The .dot notation is a way of looking inside an object and referring to it's attributes. When you use this.name you're creating a public variable name that belongs to Person objects. this is a keyword that refers to the function it's declared in (you'll learn more about all this in courses coming up, and about private variables too).

  Here is an example:

  //Defines a constructor for making Person objects
  function Person(name, age){
    //creates a public variable "name" for all new People and assigns the name parameter to it 
    this.name = name;
    //creates a public variable "age" for all new People and assigns the age parameter to it 
    this.age = age;
    //creates a highFive() function that belongs to a Person
    this.highFive = function(){
      console.log("Thanks for the high-five bud!");
    };
  }
  

  this is a constructor. It's a blank Person with a name and age attribute, and a method that let's you high-five them. It hasn't been instantiated, so no unique people exist in the program. It's just a tool for saving you time if you need to make a lot of people.
  If we wanted to make a specific person we could do this:
  var thatGuyJim = new Person("Jim",25);
  this is an instantiated Person object. It has the public variables name and age, set to Jim and 25 respectively. The program can refer to it when you mention the variable thatGuyJim which holds the instance of the object. For example, if we wanted to high-five Jim, we would do this: thatGuyJim.highFive()
  When we do that, we're using the highFive() method, a function that belongs to the Person constructor, and applying it to our new Person object thatGuyJim. This would print "Thanks for the high-five bud!" to the console.

• "Whats the difference between var whatever = new Function(){stuff} and function whatever(){stuff}?"
  Well, var whatever = new Function(){stuff}; is the normal way to define a function.
  function whatever(){stuff} on the other hand is an object constructor. It might help to think of object constructors as complex functions that you can make many unique copies of. Starting the line with function lets the code know you're declaring a new object constructor instead of defining a new function, whatever() is it's name and parameters, and {stuff}; can hold it's variables and methods, or is simply the stuff it can do.

I hope this can provide you with more insight into the nature of objects, feel free to ask me to clarify anything - I'll check back periodically as a I work.

Answer 2

what exactly are constructors?

They are functions invoked to initialize an object. In JavaScript, together with the new keyword, they instantiate new objects. However, instead of using new Object(); the empty object literal {} is preferred.

and what does .this mean?

The this keyword references the current context object. Within "methods", this usually is the object itself, but once you call the functions standalone it may point to somewhere else (most common error #2).

I also learnt to create a function, the way is new Function(){ ... }

I hope you did not. This is syntactically invalid. You can create function with the Function constructor from strings, but you never should.

in code academy, they started coding with:

function whatever(){ ... }

This is the standard way to declare a function. Use it. However, the second possibility are function expressions, which are often even anonymous. See What is the difference between a function expression vs declaration in JavaScript?, a quick example:

function a() {
    ...
}
setTimeout(a, 500);
// or
setTimeout(function  () {
    ...         // ^^ a name could be inserted here if you need
                // to reference the function from inside
});

Answer 3

1. In object-oriented programming in general, constructors prepare an object for use. They are called at the creation of the class, and are used to instantiate the class.

In JavaScript, a constructor is simply a regular function. For instance:

// constructor with parameter `name`

function cat(name) {
 this.name = name;
 this.talk = function() {
    alert( this.name + " say meeow!" )
 }
} 

cat1 = new cat("nyan")
cat2 = new cat("puss")

cat1.talk() // nyan say meeow!
cat2.talk() // puss say meeow!

2. The main difference between a function declaration and a function expression is:

//expresssion

whatever(); // results in error
var whatever = new Function(){
 then whatever here
}

-

// declaration

whatever(); // doesn't result in error
function whatever(){
Then Whatever
}

Answer 4

Think of constructors as functions that set up an object for you, then return them. That is, they specify the object's methods (things that they can do) and properties (things that describe them).

Using the Function prototype is highly unadvised; the usual way for creating an anonymous function is via function () { /* stuff */ } (case is important!). Speaking of which, the first way will create an anonymous function (i.e. has no name internally -- you can check this with the name property), whereas the second will created a named function (so the name property will be set).