Objects and the Dot
Computer member access or the “bracket notation” gives access to a object's properties. It has the same operator precedence as the “dot notation” aka member access.
var person = new Object(); person["firstname"] = "Tony"; //create a firstname property // with string value Tony person["lastname"] = "Alicea"; //create a lastname property // with string value Alicea
The bracket notation is just an operator, which acts on the created object to search for it's property value.
Just like bracket notation is just an operator, so is the “dot notation” operator.
person.firstname; person.lastname;
Objects can can other objects within them.
person.address = new Object(); person.address.street = "111 Main St."; person.address.city = "New York"; person.address.state = "NY";
Operator associativity of dot and bracket notations is left-to-right. The above creates an object person, that has an object address, which has properties street, city, and state.
person = {
firstname: "Tony",
lastname: "Alicea",
address = {
street: "111 Main St.",
city: "New York",
state: "NY"
}
}
The “dot” operator is the preferred method to access properties within objects.
Objects and Object Literals
var person = {};
//The above is the same as var person = new Object();
//It is an object literal
var person = { firstname: 'Tony', lastname: 'Alicea' };
//The above is the same as the following, but faster:
var person = new Object()
person.firstname = "Tony";
person.lastname = "Alicea";
You can also create and pass objects to functions “on the fly”.
function greet(person){
console.log('Hi' + person.firstname);
}
greet( {firstname: 'Mary', lastname: 'Doe'} );
//output
Hi Mary
Framework Aside: Faking Name Spaces
Namespace – A container for variables and functions. Typically used to keep variables and functions with the same name separate.
var english = {};
var spanish = {};
english.greet = 'Hello!';
spanish.greet = 'Hola!';
//Setting two separate "container" objects avoids namespace collisions.
JSON and Object Literals
JSON is inspired by the object literal notation in JavaScript but it is not the same.
JavaScript object literals can have their property names wrapped in quotes, but JSON must have their property names wrapped in quotes.
//JavaScript Object literal
var objectLiteral = {
firstname: "Mary",
isAProgrammer: true
}
//JSON//
{
"firstname" : "Mary",
"isAProgrammer" : true
}
//Use the built-in JSON stringify to convert JavaScript to valid JSON
console.log(JSON.stringify(objectLiteral);
//output --> {"firstname" : "Mary", "isAProgrammer" : true }
//Use the built-in JSON parse to convert strings into JavaScript
var jsonValue = JSON.parse( '{ "firstname":"Mary","isAProgrammer": true}' );
console.log(jsonValue);
//output --> { firstname : "Mary", isAProgrammer: true}
Functions are Objects
JavaScript has First Class Functions.
First Class Functions – Everything you can do with other types, you can do with functions. Assign them to variables, pass them around, and create them on the fly.
A function is a special type of object. It has the same properties as an object (Primitive, Object, Function) but has other properties as well (Name and Code).
function greet(){ //name property is greet
console.log('hi'); //code property
}
//you can attach properties to functions
greet.language = 'english';
//you can access this property via
console.log(greet.language);
Function Statements and Function Expressions
Expression – A unit of code that returns a value. It doesn't have to save a variable.
var a; //Both of the following are expressions a = 3; //This returns a value because it uses the = operator 1 + 2; // This returns a value because it uses the + operator
Statement – Doesn't return a value. It does work.
Function Statement:
function greet(){
console.log('hi');
}
//The above doesn't result in a value but it is put into memory.
Function Expression:
var anonymousGreet = function(){
console.log('hi');
}
anonymousGreet(); //
**Function expressions are not hoisted.
anonymousGreet(); //
var anonymousGreet = function(){
console.log('hi');
}
//output --> undefined is not a function
//This occurs because anonymousGreet has initial value of undefined
//before the function expression is declared.
Conceptional Aside: By Value vs By Reference
Primitive values become the same by copying the value in two separate spots in memory.
//by value (primitives) var a = 3; var b; b = a; //b = 3 but b and a are two separate spots in memory.
For objects, they both point to the same address in memory. All objects (including functions) operate by reference to the memory location.
//by reference
var c = {greeting: 'hi'};
var d;
d = c;
//d points to the same address in memory as c, because c is an object.
// d = {greeting: 'hi'} but if c changes, d will change
//by reference (even as parameters)
function changeGreeting(obj){
obj.greeting = 'Hola';
}
**The equal operator sets up a new memory space (new address).
Objects, Functions, and ‘this‘
Review:
- When a function is invoked, a new Execution Context is created (CREATION PHASE).
- Each Execution Context creates a variable environment, and has access to an outer environment, and creates a ‘
this‘ variable. ‘this‘ gives different values depending on how the function is called.
6 Different Use Cases of JavaScript's ‘this‘ Keyword
Case 1: ‘this‘ points to the Window object (if ran in the browser)
console.log(this); // returns the Window object
Case 2: ‘this‘ , when in a function when invoked also points to the Window object
function a(){
console.log(this);
};
a() // returns the Window object
Case 3: ‘this‘ , when in a function EXPRESSION that's invoked. Still points to the Window object.
var b = function (){
console.log(this);
};
b() // returns the Window object
Case 4: ‘this‘, when on a method attached on an object
var c = {
name: 'The c object',
log: function() {
console.log(this);
}
}
c.log();
// returns the object itself
{ name: "The c object", log: function }
Case 5: ‘this‘, when in a function, within a method attached on an object
var c = {
name: 'The c object',
log: function() {
this.name = 'Updated c object';
console.log(this);
var setname = function(newname){
this.name = newname;
}
setname('Updated again! The c object');
console.log(this);
}
}
c.log();
// first console.log returns the object itself
{ name: "Updated c object", log: function }
// second console.log sets the name property on the Global object
Window.name = Updated again! The c object
Case 6: How to handle Case 5 to make the ‘this‘ value point to the object
var c = {
name: 'The c object',
log: function() {
var self = this;
self.name = 'Updated c object';
console.log(self);
var setname = function(newname){
self.name = newname;
}
setname('Updated again! The c object');
console.log(self);
}
}
c.log();
// Set the this variable to another variable
//since they will both point to the same reference
//in memory.
Conceptual Aside: JavaScript Arrays – Collections of Anything
In JavaScript, arrays can hold any type of data, all in the same array. Hence, arrays in JavaScript are collections of anything.
var arr = [ 1, false, { name: 'Tony', address: '111 Main St.'}, "hello" ];
Leave a Reply