JavaScript for Noobs Pt. 1: Variables and Data Types.

I spent way too much time making this meme especially for this article. smh.

Now, after you have (hopefully) read the meme above and appreciated it’s humor and creativity by snorting air out your nose, it’s time to understand a little bit more on how to work with JavaScript.

Like almost every other programming language in the world, JavaScript has with variables and various associated data types. Consider variables as buckets and data types as the types of liquid (data). One bucket can only hold one type of liquid in it, unless you have a magical bucket that can hold different types of liquids and has fancy functionalities on top of it.

Before we get into the meat of this article, let’s go through the terminologies — since those are quite confusing if not addressed soon — and some helpful tips;

// Variable declaration
var x;
// Variable definition
x = 10;
// Declaration and definition in one line. COMBO!
var y = 20;
// Assigning value of another variable during declaration of new variable. SUPER MOVE!!
var z = x;

You can check the type of any value being used in the code by using typeof variable . For e.g.,

var x = "hello";
var y = 99;
var z = true;
var a = ["world", 19, false]
console.log(typeof x); // "string"
console.log(typeof y); // "number"
console.log(typeof z); // "boolean"
console.log(typeof a); // "object"
console.log(typeof a[2]); // "boolean"

Yeah, we done. *phew*

There are also types of variables, but we shall need to first understand the types of data, and data structures in Javascript.

1. number

This is your standard number. I mean, it’s any number. Even floating-point values. They are all numbers.

2. string

A string is a sequence of characters. The characters can be anything, as long as they’re enclosed in quotes (single, double, backticks).

Also, understand the difference here,

var x = 10; // This is a number
var y = "10"; // This is a string

This is highly, highly important. Really, it is.

3. boolean

True or false. Yeah, that’s it. Nice, right?

4. null

By definition, null means something that is not present. An absence of value. There can be a value, but at that moment, there is nothing. The null datatype belongs to none of the other types, and yet is a part of every other type too. Poetic.

You can even define a variable as null!

var x = null;
console.log(x); // null

5. undefined

This is null’s annoying little brother. This datatype indicates an absence of value as well as the variable that a value could be assigned too. Think of it this way, you are trying to use a variable (x) in your code, and after you run the code an error pops, because x is not present at all in your code. You just wrote it coz you probably overdosed on coffee. Why is this a datatype you may ask? Because JavaScript wants to give you complete freedom to do whatever the hell you want to do. So the following code is valid:

var x = undefined;
console.log(x);  //undefined

Which is the same as:

console.log(x); //undefined

Also the same as:

var x;
console.log(x); //undefined

Amazing. Just simply astounding.

6. array

An array, simply put, is a collection of values. Now, traditionally, an array is a collection of values where the values are all of the same data types. BUT, in JavaScript, we can use an array to store values of different data types as well. Cool, eh? An example of how to define an array is as follows:

var x = ["string", 10, true, "other string"];

Some basic notes for an array, for quick ‘n easy reference:

• Elements in an array are sorted (by default) in the order in which they were added.
• An array with no elements is said to be an empty array. Duh.
• Every element in an array also has an associated index with it, which is used when accessing data from an array.
• Array indices ALWAYS start from 0.

Consider the following snippet,

var y = [45,54,"random",false,88,101];
console.log(y[0]); // 45
console.log(y[2]); // "random"
console.log(y[99]); //undefined

Here, we have declared a variable y and defined it as an array with the values as given. The expression y[0] means, in essence, “Get me the value at the 0th index from y array”, hence giving us the value 45. Similary, y[2] means “Get the value from the 2nd index from y array”, so we get "random".

However, when we try to access the value from an index which is clearly not present in our y array, we get undefined since… well.. the value is not defined for that index. To remedy that, let’s refactor a little bit:

var y = [45,54,"random",false,88,101];
console.log(y[0]); // 45
console.log(y[2]); // "random"
y[99] = "sandwich";
console.log(y[99]); // "sandwich"

Now, index 99 has the value "sandwich" , so we can now get the value for that in the expression on the next line. Any other index that you may try to get the value of that is not defined, will simply give you undefined for that index unless a value is assigned to it.

Arrays can also contain arrays within them, which in themselves can contain more nested arrays. You can go crazy and create an array-like:

var x = [[[[[[[“_”]]]]]]];
console.log(x[0][0][0][0][0][0]); // ["_"]

And this would be a perfectly valid JavaScript. Though a little… weird.

7. object

A JavaScript object (not JSON) is a collection of key-value pairs. Don’t confuse it with JavaScript Object Notation, but they are similar. Basically, JSON has key-value pairs where the keys are can only be strings, while the values can be strings, numbers, booleans, arrays, or another nested JSON. In JavaScript, objects can have any primitive data type as a key, but the values can be of any data type.

Objects are created and used as follows:

var obj = {}; // empty object
var obj2 = {a: 1, b:2, c:3, d:"hello" };
var obj3 = null; // null object
// creating a key in an existing object and assigning a value
obj["new_key"] = "Random Value";
console.log(obj["new_key]); // { new_key: "Random Value" }
// Modifiying an existing value in an object
obj2["a"] = false; // { a: false, b: 2, c: 3, d: "hello" }

Interestingly, typeof [ ] returns “object”, and typeof { } also returns “object”. Think of it this way, an array is an object where the keys are the indices of the values. That’s how JavaScript probably justifies the addition of any data type in an array.

8. symbol

This might be a little weird to understand, but consider a symbol to be a unique key that is generated and is used only for internal use in your code. The value is guaranteed to be different each to time you instantiate a Symbol, and a Symbol is also a primitive data type.Which means that it isn’t a collection of sorts of other data types, even though it is created in a “class object initialization” fashion i.e. ,

var sym = Symbol();

Note, that since every time you invoke Symbol(), you are creating a unique identifier. So,

Symbol() === Symbol() // false

You can pass a value or a variable to Symbol() as a parameter, but it is only used for debugging purposes. Similarly, even if you create two Symbols with the same value/variable, they will not be the same. This means that,

Symbol(1) === Symbol(1) // false

Every time you create a Symbol(), it creates a unique identifier. However, any other subsequent operations work only on the reference to that Symbol. Sooo,

var sym1 = Symbol();
var sym2 = Symbol();
console.log(sym1 === sym2); // false
console.log(sym1 === sym1); // true

Symbols can used to create unique identifiers for your object/object properties, which are also kind of private, since Symbols do not show up on Object.keys() nor in the JSON representation of that object. Nifty, I’d say. Now, how does this benefit a regular developer?

Suppose you have an object, with a HUNDRED THOUSAND properties. For the sake of this example, we have 6. Bear with me. We want to send this object in an AJAX request only if it has all of its values as numbers, and if it isn’t, we’d like to add a message saying it isn’t. We can modify our current object itself, adding functions to it that work only in the scope of the object it is assigned to, with the keys being Symbols. The advantage we get with this is, that in our functions we can access all properties of the object except the Symbol properties, since they are hidden from most (if not all) Object methods. On successful or unsuccessful validation, we can simply send the same object ahead in it’s JSON format, where the Symbol keys will be ignored. Fancy, right?

This seems small, but on a larger scale, if you ever decide to go ahead with JS, you can make some great libraries with your custom objects with their own implementations of popular functions such as map(), reduce(), filter(), etc.

That being said, you can work without Symbols and get by just fine. I have myself never used Symbols in practice, but it’s nice to know that such a construct is available for use, and is how most objects work in JavaScript.

The code above works using the keyword this. I’ll be covering this this keyword in this article.

9. function

Yeah, functions are a data type too. Imagine that?

That’s it for data types. I’m bad at ending an article, so this one ends here. Cheers!