Day 186: The Coding Bootcamp at UT Austin!

I have some great news!  So, I live in Austin, TX, and my brother and his girlfriend are alumni of UT Austin.  About a week ago, UT alumni received an email letting them know of a coding boot camp that was going to start on April 19th, run by UT Austin.  My brother's girlfriend forwarded it to my brother, so he could forward it over to me, which he did.

I applied.

I went through the application process, and the admissions folks really liked my academic background, my professional background, and all the work I've already put in so far in regards to coding.

Anyhow, I was offered admission into the program yesterday, and I accepted.

So, I start on April 19th, in two and a half months.  The program is called "The Coding Boot Camp at UT Austin," and it teaches the MEAN stack, plus PHP and a couple of other things.  It's a 6 month program, so it finishes in October.  That means, with continuous, focused effort, I'll be a full stack developer by October!

I feel great.

My prior plan was to finish the front end section of FCC, which I believe I'll be done with in a couple of weeks (4 projects left), and then to focus the next couple of months on leveling up my front end skills while looking for a job as a front end web developer.  After getting that job, I planned on learning the full stack on my spare time after work.

This changes things.  

While I could still stick to the earlier plan, instead, taking into account my desire to be the best student I can be at "The Coding Boot Camp at UT Austin," I'm modifying my plan.  What I'll be doing is, first, continuing with the FCC front end course, and second, instead of delving deeper into the front end, getting a front end position, and then continuing with FCC, I'll simply continue with FCC and start learning the back end (Node.JS, MongoDB, etc), so that I can be even more prepared for the course than I already am.  I'll also be doing Treehouse courses simultaneously, on both the front end and back end, to get myself prepared for the boot camp.  

That's the plan for now.

So, back to studying.

1. var flyToTheMoon = function() {
2.   alert("Zoom! Zoom! Zoom!");
3. }

The above code is an anonymous function.  We would call it like so:

flyToTheMoon();

I've seen that before, but I thought I'd note it anyways, it's neat.  Again, though, if you declare functions anonymously, JavaScript won't hoist it (it'll return undefined when you call the function).  So, function statements are hoisted, but function expressions (shown above) are not hoisted.

This code below passes a function to a function:

function log(a) {
  a();
}

log(function() {
  console.log('hi');
});

So, let's go through this.  The function statement is declared on the first line.  The second line calls the a variable and tells it to run the function within (that's what the two parentheses next to the a variable do).  Then, then log function() calls the log functions WITH A FUNCTION AS THE PARAMETER!  Ok, I made that in capital letters, because I don't want to gloss over that next time I read this.  The parameter itself is a function!  So then, when it runs, it already expects a function, and it runs it...this is so cool.

The output is:

"hi"

I love learning more about JavaScript all the time!  As a heads up, according to the video, the subject matter described in the above example is an introduction to something called functional programming.  Yes!

Now, check this out:

var a = 3;
var b;

b = a;
a = 2;

console.log(a);
console.log(b);

What do you think will print to the console?  This one's interesting, so what prints out is actually 2 (for the a value, which, at the point the console is logged has now been changed to 2) and 3 (for the b value, which was assigned the value of 3 on the b = a line, and was then not changed at any point after that).  So, the a = 2 doesn't "flow" over to the assignment of a to b, that assignment was a one-time event, which stores that value in b, but does not modify it as a is changed in the future.

The example below applies to primitives, and it's called "by value."  That's good to know!  This is such a great video!

Then we went over a different example, which goes over "by reference," and refers to all objects, including functions.  Here's an example:

var c = { greeting: 'hi'};
var d;

d = c;

c.greeting = 'hello';

console.log(c);
console.log(d);

All right, what do you expect to output to the console now?  Based on the prior lesson in the video, which went over primitive, I would say that we would have an output of { greeting: 'hello' } and { greeting: 'hi' }.  But, let's see what happens.

The actual output is:

Object {greeting: "hello"}

Object {greeting: "hello"}

All right, let's see why that is!  Ok, so the reason this happens is that in the case of objects and functions, JavaScript will reference the object itself, instead of a value stored into memory on initial transfer of the value.

HOWEVER, this is actually much more complicated than the above would have you believe.  If we then add:

c = { greeting: 'howdy' };
console.log(c);
console.log(d);

To make the complete code:

var c = { greeting: 'hi'};
var d;

d = c;

c.greeting = 'hello';

console.log(c);
console.log(d);

c = { greeting: 'howdy' };
console.log(c);

console.log(d);

Then in that case, the output is:

Object {greeting: "hello"}
Object {greeting: "hello"}
Object {greeting: "howdy"}
Object {greeting: "hello"}

What a mess, lol.  So in that last case, "by reference" doesn't apply because it's being set again in a new spot in memory.  In the earlier case, when c is passed to c, c already existed, so JavaScript points to the same location.  In the newer case, a new c is created in memory, and so the third console.log will output the latest c, while the 4th console.log will still output the old c, because is is outputting the value of d, which was the old c, and was not changed, because a new c was set up.

Now I'm studying the "this" keyword.  The code below:

var b = function() {
  console.log(this);
  this.newvariable = 'hello';
}

b();


console.log(newvariable);

Outputs the window object first (even though the this keyword is output from within the b() function), and then 'hello" (even though this.newvariable is declared inside the b() function.  I'm really curious about the this variable.

var c = {
  name: 'the c object',
  log: function() {
    console.log(this);
  }  
}

c.log();

Note that c.log() is invoking the function that was created inside the c variable (the c variable is an object with a property within called "log" and a value for "log" that is a function).

So, in the code above, the console will log the actual object, the c object itself.  In the case where a function is actually a method attached to an object, the this keyword becomes the object that that method is sitting inside of.  So then, if you run this:

var c = {
  name: 'the c object',
  log: function() {
  this.name = 'Updated c object';
    console.log(this);
  }  
}

c.log();

The output will be the c object, but name will have a value of "Updated c object" so we actually changed the value of the name property.  Note that if you go deeper in levels, the this keyword will refer to the global object again.  To avoid this, in the beginning of your function, set a variable to the this keyword, like so var self = this; and then use console.log(self), for example, or self.name = "new name", like so.  Otherwise, we can easily be calling the wrong object when using this is we go more than one level into the object we created.  I'm working with arrays now.

This code below:

var arr = [
  1,
  {
    name: "Tony",
    address: "111 Main St."
  },
    function(name) {
      var greeting = "Hello";
      console.log(greeting + ' ' + name);
    }
]


arr[2]("jack");

Will output : "Hello jack"

That's cool.  Note that an array can hold objects, numbers, strings, booleans, and functions.  This will output the same thing:

var arr = [
  1,
  {
    name: "Tony",
    address: "111 Main St."
  },
    function outputGreeting(name) {
      var greeting = "Hello";
      console.log(greeting + ' ' + name);
    }
]


arr[2]("jack");

So in the case above we used a function statement instead of a function expression.  Then this code:

var arr = [
  1,
  {
    name: "Tony",
    address: "111 Main St."
  },
    function outputGreeting(name) {
      var greeting = "Hello";
      console.log(greeting + ' ' + name);
    }
]


arr[2](arr[1].name);

Will output "Hello Tony" to the console...this video/course (JavaScript, the Weird Parts) is great, it's hard not to feel more comfortable with JavaScript as I progress through it. 

As a side note, the "Make Object Properties Private" FCC challenge deals with the this keyword.  Here's the code for that challenge:

var Car = function() {
  // this is a private variable
  var speed = 10;

  // these are public methods
  this.accelerate = function(change) {
    speed += change;
  };

  this.decelerate = function() {
    speed -= 5;
  };

  this.getSpeed = function() {
    return speed;
  };
};

var Bike = function() {

  // Only change code below this line.
  var gear = 2;
  
  this.setGear = function(change) {
    gear = change;
  };
  
  this.getGear = function() {
    return gear;
  };
};

var myCar = new Car();


var myBike = new Bike();

And then here's a screenshot of the various parameters:

That goes well with the lesson i just completed in "JavaScript, the Weird Parts."  I'm working with arguments, check this out:

function greet(firstname, lastname, language) {
  language = language || 'en';
  
  if (language === 'en') {
    console.log("It's English")
  }
  
  if (language === 'es') {
    console.log("It's Spanish");
  }
}

greet("Adam", "Camacho", "en");  

That code will output "It's English."  Meanwhile:

function greet(firstname, lastname, language) {
  language = language || 'en';
  
  if (language === 'en') {
    console.log("It's English")
  }
  
  if (language === 'es') {
    console.log("It's Spanish");
  }
}

greet("Adan", "Camacho", "es");

The code above will output: "It's Spanish"

While the code below, with no third argument, will set argument initially as undefined, and then the language = language || 'en' will make language be 'en':

function greet(firstname, lastname, language) {
  language = language || 'en';
  
  if (language === 'en') {
    console.log("It's English")
  }
  
  if (language === 'es') {
    console.log("It's Spanish");
  }
}

greet("Adam", "Camacho");

In a similar vein, this:

function greet(firstname, lastname, language) {
  console.log(language);
  /*language = language || 'en';
  
  if (language === 'en') {
    console.log("It's English")
  }
  
  if (language === 'es') {
    console.log("It's Spanish");
  }*/
}

greet("Adam", "Camacho");

Will output undefined as well.  That's interesting.  So, let's explore this, the default value, default parameter concept:

language = language || 'en';

What that's saying is "language is equal to language OR 'en', so if language is undefined, it gets passed to the OR operator, gets coerced to false (undefined coerces to false), and then we end up with the 'en' value getting passed to the equals operator, so language ends up being passed the 'en' value if it's undefined when the code gets to that point.  Let's explore this some more:

function greet(firstname, lastname, language) {
  
  language = true || 'en';
  console.log(language);
}

greet("Adam", "Camacho");

The code above will output "true" while the code below:

function greet(firstname, lastname, language) {
  
  language = false || 'en';
  console.log(language);
}

greet("Adam", "Camacho");

Will output "en", while the code below:

function greet(firstname, lastname, language) {
  
  language = false || true;
  console.log(language);
}

greet("Adam", "Camacho");

Will output true.  You can change the order, and it will still output true:

function greet(firstname, lastname, language) {
  
  language = true || false;
  console.log(language);
}

greet("Adam", "Camacho");

Like so.  That's cool.

So, I updated my "Summary of Coding Skills" below, to reflect my acceptance into the UT Boot Camp, and also, to streamline it a bit more.  Also, I've been browsing around a bit since I was accepted into the bootcamp, since I'm curious about what the starting salaries are in Austin, and it looks like for graduates from the MakerSquare program, the salaries are between 60k and 90k.  Graduates from the MakerSquare program in San Francisco, again, according to that post, start off with salaries closer to the 90k range.  

That's good to know.  

Either way, my purpose in this whole endeavor is to learn enough about coding that I can create beautiful things that change people's lives for the better.

All right, calling it a day, I'll continue with the video tomorrow.

SUMMARY OF CODING SKILLS

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

Treehouse (and other) Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques
Aesthetic Foundations
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% done, switched focus from design to web dev)
Console Foundations
Git Basics
Introduction to Programming
JavaScript Basics
HTML and CSS (Codecademy) 
Introduction to Web Dev (The Odin Project)
Web Dev 101 (The Odin Project, 33% done, switched to FCC for larger community)

Books Read or in Progress:                                                                     Status
"Head First HTML and CSS," by E. Robson & E. Freeman                           Complete

"A Smarter Way to Learn JavaScript," by Mark Myers                               Complete

"HTML and CSS," by Jon Duckett                                                             Complete

"JavaScript and JQuery," by Jon Duckett                                                 Complete

Free Code Camp (FCC)                                                                            Status

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. Advanced Algorithm Scripting
15. Automated Testing and Debugging
16. Git
17. Node.js and Express.js
18. MongoDB
19. API Projects

20. Dynamic Web Application Projects

21. Claim Your Back End Development Certificate

The Coding Boot Camp at UT Austin                                             Status (starts 4/19/2016)
Week 1-6: Mastering the Browser (HTML, CSS, JavaScript, JQuery) 

Week 7-10: API & JSON (RESTful API"s, parsing JSON, AJAX)

Week 11-14: Server Side (Node.js, MySQL, MongoDB)

Week 15-18: PHP (WordPress, CodeIgniter, Laravel) 

Week 18-21: Full Stack Coding
Week 22-24: Final Project

CodePen: http://codepen.io/Adancode/

GitHub: https://github.com/Adancode

LinkedIn: https://www.linkedin.com/in/adamcamacho1

Hours Spent Coding Today: 3

Total Hours Coding: 903