6. SyntaxError: Invalid shorthand property initializer


#1

Hopefully I won't notice the mistake as soon as I hit post on this one, but I'm having trouble figuring out why I'm getting a "SyntaxError: Invalid shorthand property initializer" here. First, I don't even know what that error means. Could someone please take a look and see what I'm not noticing for this error?

Thanks!


var bob = {
    firstName: "Bob",
    lastName: "Jones",
    phoneNumber: "(650) 777-7777",
    email: "bob.jones@example.com"
};

var mary = {
    firstName: "Mary",
    lastName: "Johnson",
    phoneNumber: "(650) 888-8888",
    email: "mary.johnson@example.com"
};

var contacts = [bob, mary];

function printPerson(person) {
    console.log(person.firstName + " " + person.lastName);
};

function list() {
	var contactsLength = contacts.length;
	for (var i = 0; i < contactsLength; i++) {
		printPerson(contacts[i]);
	}
};

/*Create a search function
then call it passing "Jones"*/
function search(lastName) {
    var contactsLength = contacts.length;
    for (var i = 0; i < contacts.length; i++) {
        if (contacts[i].lastName === lastName) {
            printPerson(contacts[i]);
        }
    }
};

function add(firstName, lastName, phoneNumber, email) {
    contacts[contacts.length] = {
        firstName = firstName,
        lastName = lastName,
        phoneNumber = phoneNumber,
        email = email
    }
};

add("Chris", "Evans", "(555) 555-5555", "capnamerica@avengers.com");
list();


#2

@riadan,
You should be aware of the 3 possible ways of creating an object
each having a specific SYNTAX.

- - - B a s i c s - - -

Each Object has one or more properties.
Each property consists of a property-key and it’s associated value.

 var object1 = {
              name: "First"
              }

So object1 has 1 property
a name property with property-key name and it’s associated string VALUE “FIRST”

OR

var myObj = {
         type: 'fancy',
         disposition: 'sunny'
        }

myObj has 2 properties seperated by a comma-,,
a type property with property-key type and an associated string VALUE 'fancy’
a disposition-property with property-key disposition and
…an associated string VALUE ‘sunny’.

= = = = = = = = = = = = = = = = = = = = = = =

To create an Object,
#you can use the literal notation,
you directly create an Instance of the object, with the
properties being separated by a comma-,

  var myObj = {
        type: 'fancy',
        disposition: 'sunny' 
  };

OR
#You create an Object by the construct notation.
First you create an empty Object by way of either
myObj = new Object(); or myObj = {};
and then you attach its properties using the syntax
object-name.property-key = it’s-associated-value ;
( this.name = x ; )

thus:

  var myObj = {};
      myObj.type = 'fancy';
      myObj.disposition = 'sunny'; 

OR
#There is also the facility Class construct notation.
The name should then start with a Capital-letter.

  var Person = function( theName, theAge ) {
         this.name = theName;
         this.age = theAge;
         this.displayInstance = function() {
           console.log("The displayInstance -output-"+
                       "\n============================" +
                     "\n\t name: " + this.name +
                     "\n\t age: " + this.age);
                       };
       };
    //now create an Instance of this Class-object
  var myObj = new Person("Classy_Rocker",20);
    //call the Method displayInstance which takes NO parameters
  myObj.displayInstance();
  console.log( myObj );

you can run this in labs repl.it try it !!

As you can see i created a function within this constructor,
they now call this function a Method.
So if in near future the course is asking you to create a method you now know
that you have to create
a property-key with an associated value being a function within an Object.


#3

@riadan,
So your add =function=

== literal way ============================================

function add(firstName, lastName, phoneNumber, email) {
    contacts[contacts.length] = {
        firstName: firstName,
        lastName: lastName,
        phoneNumber: phoneNumber,
        email: email
    };
}

== by constructor ==============================================

function add(firstName, lastName, phoneNumber, email) {
    contacts[contacts.length] = new Object();
    contacts[contacts.length-1].firstName = firstName;
    contacts[contacts.length-1].lastName = lastName;
    contacts[contacts.length-1].phoneNumber = phoneNumber;
    contacts[contacts.length-1].email = email;
}

== by Object Class constructor ===================================

function add(firstName, lastName, phoneNumber, email) {
    function NewContact(cfirstName, clastName, cphoneNumber, cemail) {
        this.firstName = cfirstName;
        this.lastName = clastName;
        this.phoneNumber = cphoneNumber;
        this.email = cemail;
    }
    contacts[contacts.length] = new NewContact(firstName, lastName, phoneNumber, email);

}

#4

Here I have a quick question.

What is the reason why [contacts.length-1] should be used for object property input in case of "by constructor"? My understanding is to use just [contacts.length] in stead, but it doesn't work.

Can you please explain of it? Thanks!


#5

@microplayer25661:

Your present contact length is 2. contacts =[bob, mary]. Their indexes are contacts[0] and contacts[1]. So when you are creating a new object like this:
contacts[contacts.length] = new Object(); its index should be contacts [2], 2 is the length of the contacts array.

Now object has been created and bob and mary got new friend without name and address etc. And the contacts length has been changed from 2 to 3.
contacts[0] = refers bob
contacts[1] = refers mary
contacts [2] = that stranger without name, address, phone no etc.

So, if you want to give it a first name :
contacts[contacts.length-1].firstName = firstName; As your contacts length has changed from 2 to 3.

contacts[contacts.length] = contacts[3] which refers to a person who does not even exists (no object has been created in that index).

contacts[contact.length -1] = contacts[3-1] = contacts [2]; which is bob & mary's stranger friend.


#6

@mashuk :
Thanks for your kind answer. I could be aware that contact length should be increased at the very moment it's declared with "contacts[contacts.length] = new Object();".


#7

If you use the objet class construtor method does the new contact persist in the array if you add another? I hought the point of the this.xxxx was to update to a new value when you call the new value? So if I add two new contacts to an existing array with 2 elements would it create a third value contacts[2] and then a fourth contacts[3] or will it create contacts[2] then erase the values in the array when I call it again replace them with new values?


#8

@webmaster34593,

The Array length-property points to the first-=free=-Element
I don’t quit understand your reasoning and/or question…

After adding a new-Object using
contacts[contacts.length] = new Object();
you could use a
console.log( contacts );
to show the result of your action…

nice to know

You could test in labs repl.it
choose Javascript
You will get a split-screen
In the left-hand-side you paste-in your code
click on the Run button.
The right-hand-side is the console

references

www.crockford.com --> for most respected guide-line in Javascript
like coding convention
www.crockford.com
http://javascript.crockford.com/code.html <== Javascript code-convention
http://javascript.crockford.com/survey.html