Week 1 went lightning fast! It feels as if we’ve covered an entire semester of a college CS program already. For the next few weeks, I’ll post all the topics we covered at Hack Reactor and go into depth on one that I find particularly interesting and important. No deep dive this time around due to the unique density of this week.

What we covered this week:

Soft skills

How to succeed at HR, pair programming effectively, what’s it like to be a developer Setting up your dev environment & shortcuts to make you more efficient (details on each of these topics to come in future posts)

Intro JavaScript Content

• JS syntax and basic wiring: how JS assigns variables, types of objects, how to invoke functions etc. This was a very condensed version of what you would find in an intro JS book, a highly recommended one is JavaScript: The Good Parts by Douglas Crawford
• Recursion: A function that calls on itself, see below for a brief definiton. Here is a great example.

A task can be solved recursively if, after a little bit of the processing is completed, the remainder of the problem has a structure that remains equivalent to the original problem.” @mracus, Head HR Instructor

• Scopes and Closures: A scope is the context of a variable and a closure is a type of scope. More on that here – pay extra attention to problems that may arise from JS’s funny way of variable and function ‘hoisting’.
• Underbar: This was pre-course work we did in preparation for HR and reviewed in our first week (very good for people looking to apply to HR). This is an exercise in rebuilding and understanding what goes on under the hood of the popular JS library Underscore. For finance/non-technical folks, I would think about this as rebuilding some of Excel’s functions such as sumifs and vlookup.
• Function binding, call and apply: these are all ways you can invoke a function. Use bind(function, context) to guarantee that a function will always be invoked in the context listed. Use call when you want to pass in arguments to a function and you know how many arguments you have. If you don’t know, pass in an array of arguments (of any length) and use apply – a way to remember: “A is for array AND apply” @epic_science

jQuery

JQuery is a JavaScript library that allows you to manipulate DOM elements/HTML pages with cleaner code. Try jQuery is my favorite tutorial for this, easy to understand and hands on interactive pieces incorporated (a library is essentially another code file that gives you extra functionality when you incorporate into your code).

Programming best practices

• Debug tools & “the debugger’s question”: You will write bugs, period. When that happens, use the debugger’s question below to guide yourself to a fix. Additionally, there are tons of debugger tools to help you execute on the debugger’s question – for example Dev Tools does a great job of explaining the tools available in Chrome specifically.

Whenever you notice that reality has diverged from you expectation, place a breakpoint right before the symptomatic line of code and ask yourself this question: What piece of code justifies my expectation that this would run the way I expected? @mracus

• Test Driven Development Red, green, refactor: Write a test that fails, make the code work, then eliminate redundancy. If you have the diligence to do this from the beginning of a project, you’ll have tests in place to ensure the code you wrote in the beginning doesn’t break when you start adding features later. Writing tests before you code also forces you to think about what you actually need to build. Some testing libraries for are Jasmine and Mocha; couple that with an assertion library like Chai for readability.

You won’t know that your test code can possibly fail unless you first run it on a known-bad implementation.  @mracus

• Algorithm of an Algorithm: think through your code before you build it. It will save you countless hours, I have already experienced the pain of ignoring this piece of advice. If you start coding with no plan and you create a bug, you are susceptible to referencing the (wrong) code you have already written as logic for what to do next. This circular logical will drain you and you will miss deadlines.

1. Establish the rules of the problem
2. TDD: Write a test that would verify a solution (see above)
3. Explore the problem space and discover techniques
4. Generate a simple plan that should solve the problem
5. Elaborate the plan into steps (pseudocode)
6. Optionally: verify each step in the process for some simple input
7. Translate each step into a line of code

Data Structures

We covered a variety of data structures and explored their pros and cons. Most of these are irrelevant to web development but the one I found very useful to understand is a hash table. This is how JS implements objects and achieves near constant time lookup (more on time complexity here).

Any time you are faced with a programming problem that has a higher complexity/cost than you like, and you want to knock it down to a lower tier of complexity/cost, you should consider using some form of indexing using hashes. @mracus

Instantiation Styles & Method Sharing

Instantiation patterns are ways to create something in your code. The simplest way to do this is using a…

Functional instantiation: create an instance of an object with a single function
Pros: in addition to being simple, this method is the only one that will allow you to create truly private variables because all the variables are hidden inside a closure scope
Cons: redundancy, every property and method is duplicated each time something is created

The problem is redundancy is not only inefficient but will make life harder later if anything changes. If I want to give all dogs a property of ‘fetch’, I would have to go back and manually add it to each dog I’ve already created. This can be avoided by using one of the following 3 instantiation patterns:

Functional shared: create an instance using a function (this should contain declarations for all properties that are unique to each instance) and within that function extend properties from another object (this creates pointers not new properties)
Pro: reuses functions from the other object
Con: the variables created here are not private as they are actually properties of the instance and not a variable of the scope of the function

Prototypal: creates a delegation relationship using Object.create(proto)

Delegation: When a property lookup fails on an object, that lookup is invisibly delegated up to its prototype object. @mracus

Pros: when you change a property in the delegatee object, the delator will get that change when you reference it in the future
Con: object delegation can only be setup at the time of object creation

Pseudoclassical (most popular in industry at the moment): pseudo-classical is a spin on prototypal that makes JavaScript look more like Java (though it is important to remember “Java is to JavaScript as Car is to Carpet”).

How to use Pseudoclassical:

1. This method inserts a couple lines of code in the instantiation function…

this = Object.create(Parent.prototype) // inserted at the very beginning
return this; // inserted at the very end

2. The keyword ‘new’: anytime you make a new instance, you must use new in front of it (var fluffy = new Dog()).  with the keyword new automatically the following will get inserted into the instantiation function

3. Every function comes with a built-in Object.prototype property, think of this as a container for shared methods. Any method shared between all Dogs will be added here (Dog.prototype.functionName = function () {})

Pro: this is the current industry standard
Con: the syntax is a bit awkward and heavy, its not always clear what lines of code are being inserted which can cause confusion

Edit: method sharing explanation expanded and class patterns moved to HR Week 2 post. If you’d like to see full examples of instantiation functions and invocations, message me or comment below.

Phew, that was a long one. Final words, this is a summary of 70+ hours worth of material at Hack Reactor and it is very unlikely that a person can cover all of this in less than that time. What I’ve presented is also very high level so if you want a deep understanding, start digging into all of the links in each section. Happy explorations everyone :), I know I’ll be back to review this post myself in the future.