JavaScript has quite an interesting, and somewhat ironic past: the language was renamed a total of times within the same year it was created. Brendan Eich created JavaScript in 10 days in May 1995, and was originally dubbed Mocha by Marc Andreessen, founder of Netscape and co-founder of venture capital firm Andreessen-Horowitz.
JavaScript was then renamed to LiveScript in September, and ultimately the name JavaScript was adopted in December of 1995, after trademarks from Sun Microsystems, creators of Java were granted. Don’t be mistaken though—the two languages share similarities, but ultimately have nothing to do with one another.
The language is 20 years old, but more widely used than ever today. MeteorJS apps are programmed entirely in pure JavaScript, using Node.js as the runtime on the server.
Getting Started with JavaScript
Mastering JavaScript will take you time and effort, but this JavaScript Basics tutorial should get you to understand the fundamentals well enough to get started with Meteor within the hour. To follow along, we strongly suggest using Google Chrome.
Meteor JS has no official support for Windows at the time of writing this, so this guide will be centered around developing with JavaScript on Mac OSX, but overall, the discrepancies are minimal.
If you’ve never used JavaScript in the past, you’re probably unfamiliar with the browser console, a tool developers use to debug their web applications. A popular use for the console is to log messages to yourself to confirm whether or not certain pieces of your program are running. You can also use it as a shell prompt (think Terminal or “command line”) to interact with the document (the website you’re looking at) directly.
To open the JavaScript console in Chrome, press Command + Option + J, or select View > Developer > JavaScript Console. You should see something like this either on the bottom or side of your Chrome window, or in a new window:
My favorite text-editor to program in is SublimeText, and you can get it here.
Syntax Guidelines
These guidelines will help you write clean, readable code.
- When naming variables, use camelCase, as in variableNameHere. Avoid underscores, like variable_name_here, and definitely don’t do variablenamehere.
- End each line with a semicolon
;even if it’s optional (see semicolon rules at the bottom of this page for exceptions). - Separate tokens with spaces, like x + y = z, not x+y=z.
- Use // to comment code.
Variables in JavaScript
You can think of variables in JavaScript in a similar way you thought of them in algebra class: they’re a place to temporarily store, and represent data. The difference lies with what type of data can be stored: variables can store numbers, strings, arrays, objects, booleans and empty values. In all of the examples below, feel free to follow along by entering the code into the JavaScript console, and hitting the return key.
In JavaScript, you declare a variable like so:
To assign the birthday to a value of your birthday, you use the = operator:
Note: when assigning a string value (i.e., a phrase, letter, word or string of text) to a variable, you must wrap it in either single or double quotes. Every line of JavaScript ends with a semicolon, with a few exceptions, which will be covered later.
The Var Keyword
When you use the var keyword, you’re letting JavaScript know you’re about to declare a variable. But it also doesn’t mind if you leave the keyword out, so you could’ve written:
The difference is the var keyword keeps a variable local, to a specific function, or in Meteor, to a specific file, if declared outside of a function. A rule of thumb with declaring variables in Meteor, is if you need it to be accessible throughout your entire application, in the global scope you leave the var keyword out. If you need localized to a specific function, you use it. This is a concept known as variable scope.
Functions in JavaScript
JavaScript functions are blocks of code which allow you to perform specific tasks over and over again, without re-writing the code. You declare the function, and call it later on whenever you need to use it, or trigger it during certain circumstances. You can think of functions as a set of instructions that you hand over to your assistant.
In the example above, we are declaring a function called addThreeNumbers, telling it to accept three arguments, and to return a value of the three added together.
This is known as a named function declaration. “Arguments” refers to parameterOne, parameterTwo and parameterThree. When you define the function, they’re known as parameters, and when you call functions, they’re referred to as arguments.
To call that function (think of this as asking your assistant to perform a task you taught him/her in the past), you simply do this:
Note: Function declarations do not end with a semicolon, and are one of the exceptions.
This will return a value of 18.
Return Values
The return keyword tells JavaScript to exit the function then and there, and return whatever value you requested. The key to remember is any code after the return statement is never executed.
Function Expressions and Anonymous Functions
The difference between a function statement/declaration (can be used interchangeably) and a function expression is how the function is defined. Function expressions are typically anonymous functions (unnamed) which are assigned to a variable, or used within another function:
Here, addThreeNumbers is restructured so that it is assigned to a variable, and there’s an anonymous function within it, which logs a message to the console. It’s called in the same manner the initial function statement would be called.
The difference is it’s defined at run-time, instead of parse-time. What this means is if you were to call this function above the code, like so:
You’ll end up with an error. However, you can call a named function statement even before it’s been defined.
JavaScript If Statements
If statements in JavaScript do exactly what they sound like they do. They’re analogous to conditional statements from your logic class: if x, do y. Think of these as preparing your assistant for specific circumstances, and telling them what to do in each.
In the example above, we declare a variable called umbrella, and assign it to a Totes Umbrella. Then we declare a function called bringUmbrella, telling it to return that Totes Umbrella when it’s called.
Then we tell the browser to only call that bringUmbrella function, if the value of rainingOutside is true.
Else If & Else
The else if () keywords tell JavaScript to look for another set of conditions if the first condition in the initial if-block was not met. So in this case, if it’s not rainingOutside, it’ll check if it’s sunnyOutside, and if it is, it will return a string value of “sunglasses.”
If neither conditions are met (and you can use as many else if statements as you want), it will use the else statement as a fallback, and you can do something else there.
Note: JavaScript looks to see if a value is “truthy or falsey,” and there are a variety of ways this can be the case. This is a fundamental programming concept, so it’s best to understand it upfront. Any variable which is assigned to anything but the keyword false will be perceived as a truthy value.
Also, if/else if/else statements do not end with a semi-colon.
JavaScript Arrays
Arrays are a great way to store multiple values that you want to group together. Arrays can contain anything a variable can contain: strings, booleans, numbers, objects, even other arrays. Below is an example array declaration, of strings.
You can also mix different types of values, like numbers with strings, within the same array.
Accessing Values in Arrays
Arrays use an index system to keep tabs of what value is in what position of an array. The index starts at 0. This means “Spaghetti” would be at index 0, and “Marinara Sauce” would be at index 1. In order to access a value within an array, you use this syntax:
You can read more about array operations here.
Objects in JavaScript
JavaScript Objects are an excellent way of storing multiple aspects of data which refer to the same entity. For example, you could be represented by a JavaScript object, see below:
After you define your object, you include what’s called key and value pairs, name would be the key, “John Smith” the value. These are separated by commas. If the key needs to be more than one word, you wrap it in single or double quotes, as long as you’re consistent. Values can be any JavaScript type: strings, numbers, booleans, variables, arrays, other objects, or even functions.
Accessing Object Keys & Values
In order to get the name of the thinkCodeReader, you use dot notation, like so:
Objects in JavaScript are extremely useful with Meteor, and you’ll find yourself using them often, because MongoDB, the database Meteor uses by default, returns JavaScript objects when you query it for a specific document, like below:
The above example in Meteor would query a MongoDB collection called People, for a single document (person) with the name set to “John Smith.” Don’t worry too much about this right now, we’ll be discussing it much more later on.
You can read more about JavaScript objects here.
JavaScript Methods
You can think of a method in JavaScript as a function which can be called on a specific “object” (including other variable types, like strings, numbers, arrays, etc.).
In the example above, a built-in JavaScript method toUpperCase() is called through dot notation on the yourName variable. The return value of that method is re-assigned to the yourName variable in the second line, overwriting its initial value. So if you were to check it afterwards, yourName would be equal to “JOHN SMITH.”
Method Chaining
In the code snippet above, we’re making use of method chaining in JavaScript, by chaining two built-in methods on the yourAge variable. We first double it, and then square that result, and finally re-assign the final computation result to the yourAge variable, which would result in 1764.
You can use method chaining with functions you’ve declared yourself too, not just built-in methods. Method chaining is extremely popular when you use JavaScript libraries, like jQuery.
Data Contexts & “This”
Data contexts in JavaScript, especially pertaining to Meteor JS, can be extremely confusing at first. It’s one of the most challenging concepts to grasp, but it’s imperative that you do so, otherwise you’ll have no idea what’s going on behind the scenes of your app.
The keyword this is used to refer to the specific object you’re currently working on, accessing, iterating over, etc., etc. Basically this is relative to its surroundings. Here is an example:
Here we’re using one of Meteor’s APIs, application programming interfaces, to get the value of the currently logged-in user’s id. We’re setting it to the variable named userId. Then we’re declaring a function statement, which looks to see if the value of this.createdBy matches the currently logged in user’s id. If it does, it returns true, if not, it returns false.
Here, this would refer to a MongoDB document (e.g. a post) with the field (key) of createdBy. This type of function could be used in Meteor to determine whether or not a user owns a post, to conditionally show them an edit button.
JavaScript Operators
Throughout this tutorial, you’ve seen operators used multiple times, including the assignment operator and the addition operator. Below are a few more you’ll encounter while learning Meteor JS.
Above you see a single equals symbol, two equals symbols and three equals symbols used as operators. The single equals symbol is used to assign a value to a variable.
Double equals, the equality comparison operator, is used to check if two values are equal to each other, but does not look at the type, and will coerce strings to be equal to numbers.
Triple equals, the identity comparison operator, or “strict” equality operator is used to see if two values are identical.
String concatenation is demonstrated below, and simply uses the + operator to combine two strings together. Note the extra space at the end of the first string is there simply because concatenation would otherwise put them right next to each other.
Arithmetic in JavaScript
Below you’ll see basic mathematic operations that can be performed in JavaScript.
Negation in JavaScript
The exclamation point ! in JavaScript is the logical “not” operator. To see if two values are not equal to one another, you’d use the !== operator. The not operator will turn result in a boolean value, regardless of the original variable type, so a common practice is to do something like this:
What this does is convert the value of “value,” to a boolean value of “true,” after negating it twice, like a double-negative in English.
JavaScript Libraries
Throughout Meteor development, you’ll encounter characters like dollar signs ($) and underscores (_) which prefix certain lines. Typically, these are the result of popular JavaScript libraries like jQuery and Underscore. They don’t bear any special significance, they’re simply user-defined conventions.
The above example utilizes the jQuery API to select every paragraph element in a document and add the class of “padded” to it.
Semicolon Rules
Semicolons are obligatory when you have multiple statements on the same line.
