"JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles." -Mozilla Developer Network
This guide outlines a practical introduction to understanding JavaScript and a collection of industry-tested resources to further educate yourself deeper on concepts. From this point on the Mozilla Developer Network will be referred to as "MDN".
You ready? No? That's okay. Context is often the best way to start, so lets jump in with an example:
// White Space (including tabs) have little meaning
// beyond readability except within quotes
let workHours // Declare variable with let, defaults to undefined
let playTime = false // Initialize with a boolean primitive value
let myPersona = { // Object literal creation, just key-values
name: "Sudo",
skills: [ // an Array literal assigned to an object property
"JavaScript",
"hacking",
"nomad"
],
awesomeness: 9
}
let updateWorkedHours = (hoursWorked) => { // "Fat-arrow" anonymous function
// Function closure scope nests like for/if/while loops
// workHours is accessible since it's nested in the same closure
if (workHours === undefined) {
workHours = 0
}
let newHours = workHours + hoursWorked // local-scope variable
return newHours // Return values
}
console.log(newHours) // throws an exception
// newHours doesn't exist in this scope
console.log(updateWorkedHours(12)) // Logs "12" to stdout
console.log(updateWorkedHours(7)) // Logs "19" to stdout
function timeToPlay (decision) { // A named function
playTime = decision
return playTime
}
// I'm ready to play after 19 hours
console.log(timeToPlay(true)) // Logs "true" to stdout
console.log(playTime) // Logs "true" to stdout
// My awesomeness has now increased!
myPersona.awesomeness = 11 // Access/set object properties
// I'm giving myself a new title...
myPersona.title = "Mr. Awesome" // Create and set "title" on myPersona
Phew. Now that you have some exposure, you can read through the MDN Guide for Grammar to get some depth of the keywords and topics shown in the example. For reference, the example showed the following topics: dynamic-typing, type literals, variable & function declaration, simple expression, and scope.
For the most part loops, expressions, and conditionals remain similar to other languages. See the MDN references (loops & expressions) for a full overview.
In JavaScript sometimes values that seem like they should evaluate one way actually evaluate another.
Values that evaluate to false
0;
''; // an empty string
NaN; // JavaScript's "not-a-number" primitive
null;
undefined; // be careful -- undefined can be redefined!
Values that evaluate to true
'0'; // because it's a string
'a string';
[]; // an empty array
{}; // an empty object
1; // any non-zero number
Any other values missed here will evaluate to true.
for...in statementfor (variable in object) {
statements
}
For every property in an object what is the key. An in-depth available in the MDN reference.
for...of statementAvailable in ECMAScript 6
for (variable of object) {
statements
}
For every property of an iterable object, such as an Array, Map, or Set, what is the value. An in-depth available in the MDN reference.
Lets step through the iterable skills Array embedded in our myPersona Object to demonstrate the difference between for...in and for...of:
let skills = [ // an Array literal
"JavaScript",
"hacking",
"nomad",
]
console.log('\nfor loop:') // a standard for-loop
for (let i = 0; i < skills.length; i++) {
console.log(skills[i]) // Logs "JavaScript", "hacking", "nomad" to stdout
}
skills.greeting = "Hello" // a non-iterable (not part of the Array) property
console.log('\nfor in loop:')
for (let k in skills) { // k set to the property names in the object
console.log(k) // Logs "0", "1", "2", "greeting" to stdout
}
console.log('\nfor of loop:')
for (let v of skills) { // v set to values of the properties in the iterable object
console.log(v) // Logs "JavaScript", "hacking", "nomad" to stdout
// Excludes the non-iterable property 'greeting'
}
If you try to use the complete myPersona Object from our previous example you'd get an error with for...of because a base object doesn't have the necessary Symbol.iterator implementation.
As you'll see in the reference provided by MDN, there are a number of primitive types (Boolean, null, undefined, Number, String, and Symbol) and the all encompassing Object data type. For an in-depth take a moment to read the above reference. In this section, however, we will go a bit into Objects.
An Object is the base to create all other non-Primitive data structures (e.g., Arrays, Dates, Maps, Sets, and Functions (that's right, a Function is an Object)). Understanding Objects and how to effectively manipulate them will be quintissential to becoming a skilled JavaScript developer. We'll go into that further when we talk about Inheritance and Prototypes.
You've probably heard of and even used JSON, JavaScript Object Notation, a universal data structure derived from the JavaScript Object for light-weight data transmission in the form of a key-value store by other languages. Here's a JSON refresher using my digital persona and then as an Object:
JSON
{
"name": "Sudo",
"skills": [
"JavaScript",
"hacking",
"nomad"
],
"awesomeness": 9,
"alternatePersona": {
"title": "Mr. Awesome"
}
}
Pretty simple yeah? Now look at an Object:
Object
let myPersona =
{
// Comments supported
// No quotes necessary for keys
name: "Sudo",
skills: [
"JavaScript",
"hacking",
"nomad"
],
awesomeness: 9,
alternatePersona: {
title: "Mr. Awesome"
},
// Supports non-primitives beside Object/Array
weaknesses: new Error('No weaknesses!'),
// Object method shorthand
upAwesomeness(levelup) {
// "this" keyword refers to myPersona
this.awesomeness += levelup
},
keys() {
// lists myPersona's enumerable keys
return Object.keys(this)
}
}
console.log(myPersona.keys())
// ["name", "skills", "awesomeness", "alternatePersona", "weaknesses", "upAwesomeness", "keys"]
myPersona.upAwesomeness(2)
console.log(myPersona.awesomeness) // "11"
As you can see above an Object in JavaScript has the ability to perform actions through function properties (or methods), whereas methods or functions are unsupported in JSON.
Now that you have the general idea, time to learn more about Functions.
FunctionThere are three concepts to understand about JavaScript functions:
Object
In this case, reviewing MDN's function guide (or EloquentJS) will give the best overview. You've already seen a few examples of these concepts now it's time to dive a bit deeper.
The last topic to cover in this practical primer are JavaScript operators. For reference, here's the complete list of JavaScript operators on MDN.
A common pitfall with equality operators in JavaScript is understanding why you should only use "strict" equality operator: === & !==. MDN has a great in-depth guide on equality with comparison charts, but here's a quick summary:
=== - strict equality that also compares operand types== - loose equality that coerces operands to the same type before checkingOne minor caveat involves checking Number.NaN, where both of the following are false: NaN == NaN and NaN === NaN. For checking NaN, use [Object.is(a, b)]mdn-objectis instead.
Now that you've read the quick primer, some great resources for tutorial-style learning of different aspects of JavaScript:
