Day 185: "JavaScript, the Weird Parts"

I'm going through a video, it's called "JavaScript, the Weird Parts."  It's a 12 hour video, and I'm 2.5 hours into it.  So far, it's been pretty good, some of the concepts are things I already understand, but then there's also parts that have been very enlightening.

I could work on the Wikipedia Viewer, which is the next project, but I want to strengthen some gaps in my foundation before moving on.

Note that when accessing an object's property via brackets, the property name must be in quotations, like so:

var list = new Object();
list.lettuce = "1 Dollar";
list["lettuce"] = "1 Dollar";

Just remember the quotation marks if I use bracket notation.  The dot operator is preferred, as it's easier to read, and you're less likely to make a mistake when entering it (like forgetting a quotation mark).

In JSON notation, property names HAVE to be wrapped in quotes, while in JavaScript objects, properties can be wrapped in quotes, but don't have to be.  JSON is not a part of JavaScript, but because it's so popular, JavaScript does have some built in functionality that allows it to read JSON easily.  JavaScript can convert JSON to a JavaScript object, and it can also convert a JavaScript object to a JSON string.  I'll explore these things below, first, let's see how to convert a JavaScript object to a JSON string:

console.log(JSON.stringify(myObject));

var myObject = {
  tires: 4;
  mileage: 100000;
}

The output is: {"tires":4,"mileage":100000}

Note how stringify places the properties inside the JSON string in quotation marks, even though they weren't in quotation marks in the JavaScript object.

Then, here is how to convert JSON notation to a JavaScript object:

var jsonValue = JSON.parse('{"tires":4,"mileage":100000}');

console.log(jsonValue);

The output is: Object {tires: 4, mileage: 100000}

That's neat.  Note how the JSON (a string that looks like a JavaScript object) inside JSON.parse is inside quote marks.

Functions in JavaScript are actually objects, so for example, this function

function logToConsole() {
  console.log("Hello");
}

can be given a property like this:

logToConsole.tires = 4;

And if we do console.log(logToConsole.tires), the output will be 4.  That's neat.  Here's an anonymous function:

var myAnonymousFunction = function() {
  console.log("Anonymous!");
}

Here's a named function:

function myNamedFunction() {
  console.log("Named function!");
}

To run the anonymous function, you would just call it, like so:

myAnonymousFunction();

To run the named function, you would just call it, like so:

myNamedFunction();

Note that with an anonymous function, we have to call it after it has been declared, it won't run if we call it before it has been declared (placed in a variable).  Anonymous functions are NOT hoisted.  

I hit a new milestone today, 900 hours of coding!

SUMMARY OF CODING SKILLS

Total Treehouse Points: 5,503
Treehouse Points by Subject Matter (Miscellaneous not included): 
HTML:                                663 
CSS:                                1,599 
Design:                            1,193 
Development Tools:            747 
JavaScript:                      1,239

Treehouse Ranking (%): "You have more total points than 93% of all students."

Treehouse Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques

Aesthetic Foundations
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% complete, switched focus from web design to web dev)
Console Foundations
Git Basics
Introduction to Programming
JavaScript Basics

Codecademy (& other) Courses Completed:
HTML and CSS (Codecademy) 

Books Read or in Progress:

Completed: "Head First HTML and CSS," by E. Robson & E. Freeman

Completed: "A Smarter Way to Learn JavaScript," by Mark Myers 

Completed: "HTML and CSS," by Jon Duckett
Completed: "JavaScript and JQuery," by Jon Duckett

My Progress on The Odin Project:

1.  Introduction to Web Development                                             100% Complete

2.  Web Development 101                                                               33% Complete 
Note: I switched to FCC for the great online community and better updates/support.

My Progress on Free Code Camp (FCC): 
1. Get Started with Free Code Camp                                                      Complete
2. HTML5 and CSS                                                                                  Complete
3. Responsive Design with Bootstrap                                                       Complete
4. Gear up for Success                                                                           Complete
5. jQuery                                                                                              Complete
6. Basic JavaScript                                                                                 Complete
7. Object Oriented and Functional Programming                                     Complete
8. Basic Algorithm Scripting                                                                   Complete
9. Basic Front End Development Projects                                                Complete
10. JSON API's and Ajax                                                                          Complete
11. Intermediate Algorithm Scripting                                                      Complete
12. Intermediate Front End Development Projects                                   On 3 of 6
13. Claim Your Front End Development Certificate
14. Upper Intermediate Algorithm Scripting
15. Automated Testing and Debugging
16. Advanced Algorithm Scripting
17. AngularJS
18. Git
19. Node.js and Express.js
20. MongoDB
21. Full Stack JavaScript Projects
22. Claim Your Full Stack Development Certificate

After the 800 hours of FCC work above, there are 800 more hours of non-profit coding projects.

Hours Spent Coding Today: 3

Total Hours Coding: 900