Learning Javascript (Part 1)

Disclaimer: this is pretty stream-of-consciousness and was written pretty quickly. I’ll clarify it over time, as I get feedback on parts that are confusing.

If you’re TOTALLY new to Javascript, use my article as a companion to Codecademy’s Javascript Introduction

I taught myself Javascript. By that I mean, I muddled through it for a few years until I realized that I could probably make myself more employable if actually figured how to do more complicated things.

Since I never understood the foundations of JS, I always found myself frustrated because my code wouldn’t work as I expected. Mainly, I was used to jQuery API, and didn’t quite grasp that the language was more complicated than $('div').something().

Luckily I had some pretty great coworkers who taught me more and more, and eventually everything made sense. I learned about closures, prototypes, loops, and now feel pretty comfortable in the language.

Had I started off on the right foundations, I could have been much better, much faster. So, here’s a run down on everything I wish I knew first.

 Primitives, objects and variables:

Javascript is a language that allows you to build a program in pieces, known as objects, by writing the manners in which objects interact with one another.

Javascript has a bunch of basic primitives:

And a few other objects:

We can declare an object in any manner:

1+1 // returns 2
'abc' // 'abc'

We tend to store a reference to an object in a variable, so that we can easily use the object at will:

var str = 'abc';
str; // 'abc'

var num = 1 + 1;
num; // 2

 Collections

A collection is a grouping of a bunch of objects. This can be done in two ways:

So in the above 2 examples, if I wanted to isolate the object property that has a value of 1, I could use square brackets, which let me declare which value I want to isolate.

collection['a']; // 1
array[0]; //1

The other unique thing about an object literal, is that it’s a nested data structure, meaning, it’s an object that holds other objects. This means I can also isolate a value like so: collection.a // 1. This basically means, within the collection object, I want to isolate the value of a.

 Functions

As I mentioned above, a function is a runnable object. This means that you can define a function to take inputs, and return an output:

function add(firstNumber, secondNumber) {
  return firstNumber + secondNumber;
}

add(1,2); // 3

A function doesn’t have to explicitly return anything, either. In that case, it would inherently return undefined.

function printString(str) {
  console.log(str);
}

function printHello() {
  printString('hello');
}

function printByeTwice() {
  printString('bye');
  printString('bye');
}

printHello(); 
// hello
printByeTwice(); 
// bye
// bye
// undefined

The (); or ('hello'); part is how I call a function. If above I was just to use printHello;, it would just show me the definition of the function. I need to call it (); for it to run.

The other interesting thing about functions in javascript is that they are objects. This means that you can assign a function to a variable, or store them within a collection:

var obj = { 
  funcA: function a() {
    console.log('This is obj.a')
  }
};

obj.funcA() // This is obj.a
funcA() // undefined

Since funcA is a key within obj, I need to do the fully nested version to call the function.

 Scope

Above I just introduced the concept of scope. Scope means that objects can exist in specific contexts, and not in others. In the example above, I used the object obj to establish a scope, and as funcA was a property of obj, it can be considered to be scoped to obj.

Proper scoping is a very useful thing, because it lets us organize our program nicely by keeping our objects away from one another. Here’s a good example why this is useful:

var person1 = {
  name: 'Rohan'
};

var person2 = {
  name: 'Elon'
};

In this case, I can have two objects with the same key, but each holds a different value: person1.name; // Rohan and person2.name; // Elon.

Here’s another example of scope, but this time while using a function:

function names() {
  var name = 'Rohan';
}

Since this function does not have an explicit return, I cannot access the variable name from outside of it:

names(); // undefined
name // Uncaught ReferenceError: name is not defined
names().name // Some other error

This is a really useful concept, and we refer to the inner variables as private.

 Closures

A closure is a foundational concept in Javascript that lets a program use values that are inside of a scope, from outside. This allows us to protect inner values:

function dialog() {
  var greeting = 'Hi ';
  return {
    greet: function(name) {
      return greeting + name;
    },
    newGreeting: function(newGreeting) {
      greeting = newGreeting;
    }
  }
}

dialog().greeting;
// Undefined
dialog().greet('Rohan');
// Hi Rohan

var ourGreetings = dialog();
ourGreetings.greet('Rohan')
// Hi Rohan

ourGreetings.newGreeting('Bye ');
ourGreetings.greet('Rohan)'
// Bye Rohan

var ourSecondGreeting = dialog();
ourSecondGreeting.greet('Rohan');
// Hi Rohan

In the function dialog, the variable greeting holds a reference to a string Hi, but we cannot directly access that string, so it cannot be modified directly. However, we can also see that the dialog function returns a new object literal, and so we can store that in a variable (in this case, ourGreetings).

That allows us to access the newGreeting and greet functions, and even lets us change the greeting.

Finally, if we were to create a second variable to hold another instance of dialog(), it would not be affected by the ourGreetings.newGreeting function because the protected variables live in a different scope.

 Part 2 to come… with prototypes! And advanced usage of closures.

 Resources

 
61
Kudos
 
61
Kudos

Now read this

CSS is growing up…

About 4 years ago I was trying to figure out whether to use LESS or Sass. I could use Codekit or even switch to Espresso to get automatic compilation and updates! We ended up using LESS, but for the life of me I couldn’t tell you why. A... Continue →

Subscribe to Rohan Nair

Don’t worry; we hate spam with a passion.
You can unsubscribe with one click.

yoNUi3Uyge0L8C3qyWH