Build javascript objects

Build javascript objects
0.0 0

#1

In the basic javascript section, halfway through this section is a lesson called build javscript objects(https://www.freecodecamp.com/challenges/build-javascript-objects)

I completed this lesson over 6 months ago when I was new to javascript, but now that I revisit this section I would like to point out that what FCC is teaching here is not truly a javascript object, but a lightweight data interchange format called JSON.

Javascript objects can contain methods.
JSON objects cannot contain methods.

JSON object data are pairs of name strings and values… see below

var cat = {
  "name": "Whiskers",
  "legs": 4,
  "tails": 1,
  "enemies": ["Water", "Dogs"]
};

Javascript object properties names are not strings… see below

var cat = {
  name: "Whiskers",
  legs: 4,
  tails: 1,
  enemies: ["Water", "Dogs"]
};

I feel FCC is doing the student an injustice here as this may be their first look at javascript objects that you are teaching, when in fact, you are teaching JSON here. Please do not confuse the student with their first look at objects. JSON objects should be a subject given at a much later time don’t you think?


#2

I just tried a few ideas out in my browser console.

var cat = {
  "name": "Whiskers",
  "legs": 4,
  "tails": 1,
  "enemies": ["Water", "Dogs"],
  "meow": () => console.log("Meowwww!")
};

typeof(cat); //returns object
cat.meow() // Meowwww!

Whether or not you put your key in quotes doesn’t seem to be very important.


#3

A JavaScript Object property can be written as a string, especially if you want the name of the property to have spaces:

var cat = {
  name: "Whiskers",
  "some other property": "value",
  legs: 4,
  tails: 1,
  enemies: ["Water", "Dogs"]
};

You can access the property cat[“some other property”] like you would access cat[“name”] or cat.name. It’s one way you can do that, there’s more :slight_smile:


#4

Yes, there exceptions to the rule. I can honestly say I have never encountered anyone that has named an object property name that way so that they could rely on having to use object bracket notation to retrieve the data. Your point is made. I remember 25 years ago when programming in C language, I used a shift operator instead of multiplying by 2 because it was faster. I thought it was a neat trick, but now I think to myself why make the code harder to read than it already is.


#5

(http://stackoverflow.com/questions/2001449/is-it-valid-to-define-functions-in-json-results)

So, yeh you can define a JSON object the browser’s console and even add a method to it, but the point I was trying to make is for FCC to not confuse an already difficult subject. Let’s keep JSON object lessons and javascript object lessons separated.


#6

Java Script Object Notation is a subset of the rules for writing object literals in JavaScript. Valid JSON is always a valid JavaScript object, but JavaScript objects aren’t always valid JSON.

This is simply not true. You don’t have to write them as strings because JavaScript performs type coercion for you, but object keys are strings.

var obj = { 0: "Hello" }
var keys = Object.keys(obj)
keys[0] // "0"
typeof keys[0] // "string"

I’m not sure telling students that they already know JSON because they’ve been writing JavaScript objects is more confusing that making them think they have to learn a whole other format.


#7

Okay, I agree on your second point. I should have clarified that the object property names do not need to be defined as strings with quotes (I wasn’t trying imply that the property name itself does not get converted to a string). Going back to my initial point I was trying to make is that first lesson on javascript objects shows object properties names defined within quotes as you would do if you are defining a JSON object.

var cat = {
“name”: “Whiskers”,
“legs”: 4,
“tails”: 1,
“enemies”: [“Water”, “Dogs”]
};

The inconsistency appears in the very next lesson. Object property names are shown without quotes.

var myObj = {
prop1: “val1”,
prop2: “val2”
};
var prop1val = myObj.prop1; // val1
var prop2val = myObj.prop2; // val2

To me that spells confusion … which is it? quotes?/no quotes? Lucky for me I have good javascript books by Nicholas Zakas and Stoyan Stefanov that avoid such confusion.


#8

I don’t mean to further the confusion, but I just want to point out that there is such a thing as the JSON object, but it is not an object written to the JSON specification, rather it exists to provide you a method to parse a JSON text or stringify data structure into JSON format.

Both of what your present are valid JavaScript objects, just one is written to the JSON syntax.

When you write

var cat = {
  "name": "Whiskers",
  "legs": 4,
  "tails": 1,
  "enemies": ["Water", "Dogs"]
};

into the console, you’re not declaring a JSON object, you’re just declaring an object literal, which is why you can include methods, because it is just an object. Once you added the method, it is no longer JSON, it’s no longer in compliance with the standard.

In my opinion, the lessons just showed you a different way to write an object literal, but I can see how it can be confusing to someone new to JavaScript. However, I want to also say the way you framed your original point is misleading because JSON is not a datatype, it’s just a textual syntax