JavaScript Fundamentals – Part 1

If you are looking to start learning JavaScript from the ground up, try this article about getting started with JavaScript first. JavaScript is a unique and widespread language. At its core the language is built out of primitive values, and objects.

Primitive Values

undefined, null, strings, numbers, functions, arrays, objects and booleans, are the primitive values that make up JavaScript.

undefined & null

One of the mysteries of working with JavaScript is knowing when undefined and null are used. It is also a mystery why two null values exist. For the most part these are used to signify the absence of something. They can have some pretty quirky behavior that we will look at later on.

strings

Strings are a super useful primitive value in JavaScript. Their main role serves to hold values of text, or sequences of characters. They are enclosed within quotes like this:

"I am a string withing double quotes";

'I am another string in single quotes';

To reiterate, strings are used to process and store text within JavaScript. The programs we right are just sequences of characters, mastering strings opens very interesting worlds. You can learn more about the basics of strings, in a more practical fashion.

numbers

There is only one kind of number in JavaScript, and they are double precision floating point numbers. Don’t worry too much about the name, but basically the numbers in JavaScript are not as precise as we are used to when dealing with decimals.

0.2 * 0.1
// Outputs 0.020000000000000004

20 * 1
// Outputs 20

As you can see, floating point numbers can do some pretty crazy unexpected things, especially when dealing with decimals, integers are. If you are going to be creating programs that highly depend on the precision of numbers and arithmetic, JavaScript might not be the right fit. It is however a great language the large majority of applications.

This type of number in JavaScript has a maximum and minimum value:

maximumInteger = 9007199254740991;
minimumInteger = -9007199254740991;

When you start dealing with really big integers in JavaScript that pass out of these bounds, other weird things can happen.

9007199254740991 + 4
// Outputs 9007199254740996

Above we see an extra 1 being added at the end, which is related to the floating point arithmetic being used. So, as a fundamental takeaway, numbers as we are used to are weird in JavaScript, don’t expect them to work the way you expect, always check what is happening. Numbers are actually relatively complicated across most programming languages.

There are other flavors of numbers in JavaScript.

0b11
// Binary number 3 0b starts the number and digits follow. Base 2

0b111
// Outputs 7

Oo11
// Octal number 9 0o starts the number and digits follow. Base 8

0o111
// Outputs 73

0x11
// Hexadecimal number 17. 0x prefix followed by digits. Base 16

0xff
// Outputs 255

There are some cool binary operators that you can use to work with these numbers for lots of interesting things. In my experience, working with binary digits is not necessarily a fundamental, but they are great to know about and keep in mind. Another type of number in JavaScript is an exponential.

1e5 * 2e20
// Outputs 2e+25

The way they are written is a little odd but basically it breaks down like this:

1e5 is the same as:
1 * 10 ^ 5, which is the same as
1 * 10 * 10 * 10 * 10 * 10

Which is just 100,000.

The first part before the e is the base and then we multiply that number by 10 the number of times after the e. So 1e5 is 1 * 10 to the fifth. Numbers like strings, are very critical part of any program, and mastering them helps lead to mastery of JavaScript.

booleans

Booleans are a very useful and basic value. A boolean can only be one of two values true or false. The clear cut nature of booleans makes them easy to work with and allows us to add logical reasoning to our programs.

var jsIsAwesome = true;

if ( jsIsAwesome ) {
  console.log( 'Woo! Learning JavaScript!' );
} else {
  console.log( 'I am sad.' );
}

The above code will log Woo! Learning JavaScript! to our console, because jsIsAwesome is true, if it was false, we would get I am sad..  Booleans and truth values allow us to take different paths in our programs, and in many ways are highly related to binary numbers and the foundation of how computers even work in the first place.

arrays

Arrays are at their core a way to create a list or collection of other JavaScript values. They become really useful for organizing and grouping different parts of our programs, and the data that powers them. You can learn more about working with arrays here. They look like this:

// Array below!
var array = [ 'I', 'Am', 'an', 'array', 1, 2, 3, true, false ];

// You can access the items like this
array[0];
// Outputs 'I'

array[4]
// Outputs 1

There are many more ways to work and interact with arrays, and they are another fundamental part of JavaScript to understand.

Functions

Functions are a huge part of JavaScript. They allow us to create mini programs within our programs, and so much more. Getting started with functions is really important, as they lead to some very advanced concepts in JavaScript. Functions are a key pillar of JavaScript as a language.

Objects

Objects hold a special place in JavaScript, most of the primitive values we have looked at are also special types of objects. Most objects will look something like this in JavaScript:

var myCoolObject = {
  isCool: true
};

// Access looks like this.
myCoolObject.isCool // Outputs true

Like arrays, objects serve as a way to group various things, in this case, we are taking the property isCool and associating a value of true to it. So when we ask whether our object isCool or not, we get the value associated with that property. The main function for objects is to associate names of things with values. This helps us more easily reason about our programs. Working with objects is a fundamental part of JavaScript.

The difference between objects and values

If the primitives are special forms of objects in JavaScript what is the difference? The main difference is that strings, numbers, booleans, undefined, and null, cannot change; immutable. Objects, and arrays on the other hand can change, referred to as mutable. Here is a quick look at the difference.

var ten = 10;
10 + 1; // Outputs 11
ten; // Outputs 10, ten does not change even though we added 1.

var string = 'Hi';
string + ' World!'; // Outputs "Hi World!"
string; // Outputs "Hi" string stays the same.

var array = [ 1, 2, 3 ];
array.push( 1 ); // Adds 1 to the end of the array.
array; // Outputs [ 1, 2, 3, 1 ] the value has changed.

var object = { name: 'Joe' };
object.name = 'Aadhya';
object; // Outputs { name: 'Aadhya' }, the value has changed at our stored reference.

You can see that the immutable values stay the same, even though we did operations with them. The immutable operations just return new values, they do not change the existing value. Understanding how different operations affect our programs is very important in JavaScript, and takes time to master. For now, don’t worry about it too much. I did somewhat lie above, as JavaScript does have some number operators that are mutable.

var ten = 10;
ten++; // Outputs 10
ten; // Outputs 11
++ten; // Outputs 12
ten; // Outputs 12

The increment operators can mutate our references here so in someways numbers can be mutable as well.

Other aspects of JavaScript

JavaScript has a lot of unique characteristics. It is a dynamic scripting language, with elements of functional, and object oriented languages mixed together. As a scripting language, JavaScript can run in all sorts of different places, which is why it is probably the most widely usable language in existence currently. JavaScript also has some meta programming capabilities as well; programming programs that change our programs. Due to the dynamic and meta aspects of JavaScript, a lot of wild things can happen, so enjoy your adventures in JavaScript!

In part 2 we will look at the fundamentals of JavaScript syntax.