object

constructors

Class overview

  • Homework Questions
  • Scope
  • Object Constructors
  • Constructor arguments
  • This
  • Explicit return statements

SCOPE

  • Scope in JavaScript is a hugely important concept.
  • Understanding how scope works will help you make design decisions when writing your code.
  • JavaScript has two scopes. Global and Local.

GLOBAL SCOPE

  • Global scoped variables are available everywhere.
  • Can get confusing having lots of global variables.
  • Might be easier for small projects but will give you headaches for bigger projects.
  • Can be overridden when a local variable has the same name.
    • This is a bad practice. Keep your global & local variables named differently.
  • Normally only objects & functions will be global, not primitives like numbers and booleans.
  • There is ONE global scope that everything shares.
  • In the browser, this is the Window object. In node, or other platforms, it's something else.

LOCAL SCOPE

  • Local scopes designated by curly braces.
  • However, curly braces alone do not create a local scope.
  • Objects & Functions create a local scope.
  • Variables in different local scopes can have the same name.
    • This is useful for common variables like counters, parameters, etc.
  • Global scoped variables are available in local scopes.
    • A variable declared in one local scope is not accessible in another local scope.
    • This is not a best practice. You want to use parameters to access variables from outside of a local scope.

OBJECT CONSTRUCTORS

  • Allow you to create reproducible Objects
  • Can use instanceof to check Object type
  • Perfect for Objects that hold state
  • Enables use of the 'this' keyword inside a function
  • Used when you are creating a multiple objects that will have the same structure but different contents.
 
//constructor declarationfunction CustomObject() {};//using constructor to create an objectvar myObj = new CustomObject();myObj instanceof CustomObject;// > true

OBJECT CONSTRUCTORS

  • OOP Concept shoe-horned into JavaScript
  • New objects initiated with the 'new' keyword & constructor function call.
 
 //declare constructor function function MyObject() { } //create object with constructor var myObj = new MyObject();
  • Inside the constructor function, attach properties to the returning object by using the 'this' keyword.
 

OBJECT CONSTRUCTOR ARGUMENTS

  • In OOP languages, constructor arguments are used to establish initial state for an object.
  • In JavaScript, concept is the same, but implementation is weirder.
  • Useful when using remote data to build custom objects.
 
 //constructor declaration with constructor arguments function MyObject(dataObj) {     this.data = dataObj; } //use the arguments like this: var myObj = new MyObject({items : 4}); console.log(myObj.data.items); // > 4

THIS

  • Reserved keyword
  • The 'this' variable always refers to the current object.
  • Works in functions that are constructors, but not normal functions.
 

EXPLICIT OBJECT RETURN

  • By default, constructors return the built object. 
  • By adding an explicit return statement, you can control what is returned when a constructor is called.
 
 function MyObject() {   return {     items : 3,     count : function(num) {        console.log(num);     }   } }

cool js thing for the day

Browser based IDE for JavaScript, Node, PHP, Java, Ruby, and more.

AJS Lecture 7: Object Constructors

By Ryan Lewis

AJS Lecture 7: Object Constructors

  • 719