JavaScript Fundamentals – Part 2

We will be focusing on JavaScript syntax, or the way JavaScript is written, in this section. If some of these concepts are not super clear, try starting with the first article in this series.

Syntax

The art of programming is more like a conversation with a computer than writing. Like any conversation, if you want it to go well, you need to communicate well and in a way that is understood between both parties. Syntax is the set of rules that govern how a language will be interpreted by a computer. We need to follow the syntax of JavaScript in order to be able to use JavaScript to get the computer to do what we want.

In our conversation with the computer there are three basic parts: statements, declarations and expressions. The lines do get a bit blurry so don’t worry about the distinctions too much.

Expressions

Expressions produce values and can be written wherever a value is expected. Here are some basic expressions:

1 + 2;

( 1 + 2 ) * 3;

"String";

[ 1, 2, 3 ];

[ 1, 2, 3 ][0];

{ name: 'Taco' };

function () { console.log(10); };

Each expression can be evaluated for its value.

1 + 2;
// Evaluates to 3

( 1 + 2 ) * 3;
// The ( 1 + 2 ) evaluates to 3, and then we get 9.

"String";
// Evaluates to "String"

[ 1, 2, 3 ];
// Evaluates to the array with [ 1, 2, 3 ]

[ 1, 2, 3 ][0];
// Evaluates to 1

{ name: 'Taco' };
// Evaluates to { name: 'Taco' }

function () { console.log(10); };
// Evaluates to fn () { console.log(10); }

Each of these expressions evaluates to a value in JavaScript. If you need to brush up on values checkout JavaScript Fundamentals Part 1. Arrays and objects are expressions in JavaScript that evaluate to themselves. The trickiest part here is probably the last one the function expression. Here we are creating a function that console.logs 10. In JavaScript functions are also values, known as first class functions. So in this use of a function it is an expression because it is just another value. We will look at this in more depth in the future, but it is important to take a mental note that functions are values in JavaScript.

Most of what you will work with in JavaScript are expressions. Statements in JavaScript serve the purpose of being more fundamental building blocks that do things.

Statements

Expressions only get us so far in JavaScript, statements are things that cause things to happen, but do not return or evaluate to any values. Let’s look at the if statement. if has special meaning in JavaScript, and an if statement is written like this:

if ( true ) {
  "This code is executed.";
}

if ( false ) {
  "This code is never executed.";
}

"this code is executed";

if ( false ) {
  "This code is never executed.";
} else {
  "This code is executed.";
}

As we see above the if statements direct which code is executed and which is not. Inside of the () parentheses we have an expression that must evaluate to either true or false. If that expression is true we run the code inside of the {} curly braces.

Another very common statement in JavaScript is the for loop statement, which allows us to run a section of code multiple times.

for ( var index = 0; index < 100; index++ ) {
  console.log( index + 1 );
}

We have a couple parts to the for statement. Inside the () parentheses we have three expressions, one declares starting variables, the next is the condition for the loop, if true, then we execute the code, after the code runs we run the third expression. When we run this code it will log to our console 1, 2, 3, 4 … 100. So instead of writing out each of those we use the for loop to run the same code over and over. If the for loop doesn’t make much sense don’t worry about it, we will look at it more in depth in the future.

The main takeaway with statements is that they do not evaluate to value, and instead are code we right to affect how our code executes. There are other types of statements in JavaScript, but these are two very important ones.

Declarations

In the for loop above we see var index = 0;, this is a variable declaration. Declarations are parts of our code that create references. References allow us to name a value and reference it later in time. These references and their associated value are stored in the computer’s memory. Let’s look at some basic declarations in JavaScript:

// Variable Declarations.
var ten = 10;
let six = 6;
const seven = 7;

// Function Declaration.
function myFunction() { console.log( ten ); }

The variable declarations above use the assignment operator, =, to assign a variable a value. Above we have the variable ten, and its value is 10. six is 6, seven is 7. We also have a function declaration so now there is a reference myFunction which contains the value fn() { console.log( ten ) }.

References are super useful let’s look at how they are useful in our programs.

var number = 11;

number;
// Outputs 11

number * 2;
// Outputs 22

number;
// Outputs 11

number = 12;

number;
// Outputs 12

number = number * 2;

number;
// Outputs 24

var number = 3;
number;
// Outputs 3

We can see above that we can use the reference number to do all sorts of stuff, and at the end we use the var declaration to redeclare the variable again. By naming these variables we can write code that is more understandable. The above could also be written like this.

var number = ( 11, 12, 12 * 2, 3 );

Not as easy to read, or know what the values are, or even know what is going on. Even though it is more concise we lose a lot of what happened above.

Each declaration however only applies to the scope we are currently executing in.

Scope

Scope can be very confusing in JavaScript, and when you are first starting out it can lead to unexpected results. JavaScript scopes based off of functions, and in some cases block scope. The more important scope to understand is function scope. If we are not inside a function, then our scope is at the global level. Let’s look at how scope impacts our references and declarations.

var number = 10;

function getAScopedNumber () {
  var number = 1;
  return number;
}

function getNumber () {
  return number;
}

function changeGlobalNumber () {
  number = 3;
  return number;
}

getNumber();
// Evaluates to 10

getAScopedNumber();
// Evaluates to 1

changeGlobalNumber();
// Evaluates to 3

getNumber();
// Evaluates to 3

getAScopedNumber();
// Evaluates to 1

There are a couple of things going on here. We declare a variable number in the global scope and give it the value 10. We create a function getAScopedNumber that declares a variable number and gives it the value 1. When we call getAScopedNumber(), we will always get 1 returned for number because we are declaring a variable number in that scope. We have getNumber, which returns the reference to number. Since there is no reference declared in this function’s scope, JavaScript looks for an upper scope and finds the number we declared in the global scope, in this case it is ten if we call that function.

We have a third function changeGlobalNumber, which assigns number the value 3, because we are not using a declaration like var, const, or let this is telling JavaScript we are looking for the reference number, and because we have not declared one in this function scope, it grabs the one from the upper scope, so now our global value for number is 3. You can see this by calling getNumber() again. Functional scoping is confusing, but also very powerful. It might take a while to get the hang of how variables and scope work in JavaScript, and there are some things to look out for that we will cover in the future. For now, you actually have a great understanding of the fundamentals of writing JavaScript.

Putting it all together

var luckyNumber = 7;

for ( var index = 0; index < 10; i++ ) {
  if ( index === 7 ) {
    changeNumber();
  }

  console.log( luckyNumber );
}

function changeNumber () {
  luckyNumber = 13;
}

luckyNumber;
// Evaluates to 13.

This will output the following to the console:

7
7
7
7
7
7
7
13
13
13

Mastering these fundamentals will greatly strengthen your skills when you need to use JavaScript to do something more practical.

Up next

Up next we will be looking at cool things we can do with functions in JavaScript, as they are a fundamental aspect of JavaScript.

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.

On optimization

In the realm of computing we are often plagued by the many aspects of optimization; both positive and negative. Often we can find ourselves spending lots of time not really getting anywhere as we “optimize”. We can also find ourselves in the situation of being wildly successful, only to find that what we have optimized for is not what we really wanted in the first place. I can’t help but feel these outcomes are suboptimal 😉. I came across a tweet that really hits the mark:

I would change the wording a little bit. The three options are: Do less, do it less often, do it more efficiently. I find myself optimizing around “efficiency” in my work, or at least perceived efficiency. Much of the work in the systems we build is targeted around our ideas of efficiency. Achieving a goal more effectively, yet the blinders come on quick and we lose site of whether the goal is really what we need. Keeping tabs on the greater picture is no easy task. One can fall easily to analysis paralysis, but I also feel that sentiment can be a cop out to really thinking things through, or shifting our perspectives. I believe there is equally an activity immobility trap we all fall into; the hustle and grind mentality. The illusion of moving the goal post; and seeing things only as they are not as they could be.

One of the great masters of optimization is Masanobu Fukuoka, author of The One Straw Revolution. He created his own method of farming based on the principle of doing less. While his neighbors toiled, and performed hard labor, Fukuoka focused on setting the conditions for success of a fertile landscape; with the goal of doing no to little work.

Image result for masanobu fukuoka cherry blossoms
Masanobu Fukuoka

In the computing world, there is a lot to learn from Fukuoka. What conditions can we set for our programs for them to do the work for us? Is the labor intensive process of coding, that we cherish so, really that important to what we are trying to do?

JavaScript – Beginning to build a program in the browser: Part 1

JavaScript was created to help improve the interactive parts of the web. It has evolved a lot over time, and is used in all sorts of places. We however, will start where JavaScript started; in the browser. This is where the fun and magic really begins. If any of the parts we cover do not make sense try and find other lessons that maybe expand and elaborate on some of the details. If you aren’t quite ready to just dive in try here. Remember this should be fun!

Set up

We are going to be moving away from just using the console for now. Instead we are going to load in the JavaScript into the browser on our own page. We will need to create two files index.html and myscript.js.

Creating Files

We are going to need a text editor to work with the files. If you are on Windows, you can use Notepad. If you are on MacOS you can use TextEdit, the fundamentals are the same. Alternatively you can download and use Notepad++, which will have some nicer features than the basic notepads. Notepad and Notepad++ are what I started my programming adventure with. If you want to get real fancy or are bold, try out Atom; a more professional grade text editor. For now, Notepad or TextEdit will work just fine!

Open up your editor and go to File > Save As. Once you have opened up the save dialog, you can create a folder myjs. Then inside of that folder we will save the file we are editing as index.html. Before saving, make sure to select the All Files for the Save as Type field, your screen might look something like this:

Creating an index.html file

If you accidentally created a .txt file, don’t worry you can always override and eventually get the .html extension. When working with files there is usually a name then a .something, the .something is the file extension; a way of specifying the file type. Now that we have created our HTML file copy paste the following code section into the text editor and save.

index.html

<!DOCTYPE HTML>
<html>
  <head>
    <title>Learning JavaScript!</title>
  </head>
  <body>
    <h1>Learning JavaScript</h1>
    <script src="myscript.js"></script>
  <body>
</html>

HTML is the structural language for web pages. When the browser opens a website, it reads the HTML and then displays it on the screen in a form we are used to. The <script> tag loads in the myscript.js that we are about to create. Before creating the JavaScript file. Let’s open up the file in our browser. Find the index.html file in your myjs folder, and open it, it should load with your default browser. and should look something like this if you are using Google Chrome.

Our HTML and how it renders in the browser.

If we open up our console we will see an error:

GET file:///C:/myjs/myscript.js net::ERR_FILE_NOT_FOUND

This is basically telling us that the browser could not find the JavaScript file. Well, we haven’t created it yet! Let’s do that now. Use the text editor and go to File > New, then save the file, File > Save As, and this time save the file as myscript.js

myscript.js

Copy, the code below and paste it into the text editor and save myscript.js.

document.write( 'I have created my first JavaScript file!' );

Now that we have saved the myscript.js file we can reload our index.html and it should look something like this:

Loading JavaScript in the browser
Loading our JavaScript file in the browser.

The document.write code adds the extra text to the browser this time, showing that our file has indeed loaded!

Next steps

Getting the basic set up is honestly one of the hardest parts, so great job! In part two we will start getting into some fun stuff!

JavaScript – Beginning to work with functions

Functions are another extremely important part of JavaScript. Most of the work you do will involve working with functions and objects. What is a function? A function is effectively a way to create a mini program within your program. Let’s open up our browser console and dive right in.

// Function declaration below
function getTen() { return 10; }

// Function call below
getTen()
// Outputs 10

The two most important parts of working with functions, are declaring them, and then calling them. Above in our declaration we are making a function getTen that returns the value 10. We can then call getTen by using the parentheses, (), syntax.

When we call a function JavaScript finds that function and then runs the code found in between the curly braces {}. To call any function we use it’s name and tack on () at the end. This can also be achieve like so:

getTen.call()
// Outputs 10

The getTen() syntax is used for brevity, so .call is not used everywhere. Let’s look at some built in functions in JavaScript. In our browser console we can run:

document.write('I am learning functions!')

When this runs there is an undefined output in our console, but “I am learning functions!” is printed onto our browser screen! So what is happening here is we are grabbing the document object in our browser, and getting the write function attached to it. Inside our calling parentheses we have a string 'I am learning functions!'. This string would be known as a function argument, we pass this argument to our function, and it does stuff with that. Let’s look more in depth at working with arguments, it can get tricky.

Function arguments

Enter the following into the console:

// Declare our function getThing
function getThing( thing ) { return thing; }

// Call our function with 20
getThing( 20 );
// Outputs 20

getThing( 'Hello!' )
// Outputs "Hello!"

Experiment calling getThing with other values you can think of. Lets breakdown the declaration. We name our function; getThing. Then we add an argument thing; ( thing ) and finally we have the code that runs when we execute our function; { return thing; }. These three parts can be respectively referred to as the name, arguments, and body. The argument thing is whatever gets passed into the function when we call it. In the body of the function we return whatever thing is.

Multiple arguments

We can create functions that have multiple arguments as well, let’s create a simple addition function.

function add( number1, number2 ) { return number1 + number2; }

add( 10, 1 )
// Outputs 11

add( 33, 55 )
// Outputs 88

To create multiple arguments we name them differently and separate each by a comma within the parentheses. You can effectively have as many arguments as you want. Inside the function body you can then access each argument by matching the names. Functions at this point, probably seem somewhat useless, however I assure you as we progress further you will see how powerful they are in JavaScript.

Why use functions?

Functions bring a number of benefits. One benefit is that they allow us to name an idea that we execute in code. In the last example we created a function add, which takes two numbers and returns their sum. We could create a function doComplicatedThing() { // Do complicated stuff }. Then every time we needed to do that complicated thing we would simply call doComplicatedThing(). This helps make our code easier to follow and read, and brings other benefits.

Another major benefit of functions is that we can choose when we need to call the function. Try this in your console:

function alertMe() { console.log('Function is alerting you!' ); }

alertMe()
// Logs to the console "Function is alerting you!"

setTimeout( alertMe, 1000 )
// One second delay occurs then we are alerted.

Above we see the timeout delays when alertMe gets called by 1000 milliseconds. setTimeout itself is a function and we pass the function alertMe to it, and set the delay as the second argument. Functions can get pretty confusing, so spending extra time to get a good handle on them is very crucial in learning JavaScript.

Input and output

Another way to think of functions is in terms of input and output. Let’s look at a couple of examples.

// Only has input, but does not return anything as output.
function doNothing( input ) { 'Hi!'; }

// Has both input and output.
function getGreeting( input ) { return 'Hello ' + input + '!'; }

// No input, but has an output.
function getTen() { return 10; }

The return statement we have been using is how we get a function to output a value. If there is not a return statement, by default a function will return undefined. The concept of input and output is key moving forward, and I encourage you to think about how things come into and go out of the various parts of your programs.

Wrapping up functions

Functions are a very important aspect of JavaScript. They have three parts: name, arguments, and body. We must declare a function before we can call it. Once declared we can call it to execute the code we put in the function body. Functions are a way to chop our programs up into smaller mini programs. Input and output play a critical role in functions. This is just the tip of the iceberg with functions, there are a lot more really interesting things that can be done with them.

JavaScript – Beginning to work with objects

Objects are an extremely important piece of JavaScript. In fact, everything in JavaScript is an object. Arrays, strings, numbers, are all special types of objects. Objects at their core are just a collection of names and value pairs. Like all of the other data types, there is a lot more to objects, but for now we will focus on the fundamentals. Here is an object representing my name:

{ firstName: 'Edwin', lastName: 'Cromley' }

// The syntax for objects is more commonly written like this.
{
  firstName: 'Edwin',
  lastName: 'Cromley'
}

We have two entries in our object. The first pair has a key firstName and a value 'Edwin', which basically means that the first name for this object is Edwin. Likewise, the key lastName pairs with the value 'Cromley'. Let’s open up the console, and start working with them.

Working with objects

This is a basic object and we can work with them like this:

let myName = { firstName: 'Edwin', lastName: 'Cromley' }

myName.firstName
// Outputs "Edwin"

myName.lastName
// Outputs "Cromley"

We can also create a more detailed object:

let bankAccount = {
  bank: 'Super Awesome Bank',
  routingNumber: 5555555555,
  transactions: [
    {
      type: 'deposit',
      amount: {
        value: 100,
        denomination: 'USD'
      }
    },
    {
      type: 'withdrawal',
      amount: {
        value: 50,
        denomination: 'USD'
      }
    }
  ]
}

bankAccount.bank
// Outputs "Super Awesome Bank"

bankAccount.routingNumber
// Outputs 5555555555

bankAccount.transactions[0].type
// Outputs "deposit"

bankAccount.transactions[1].amount['value']
// Outputs 50

Any of the keys in the object can have any value, here we see a string value for bank, a number for the routingNumber, and an array of objects for transactions. Keys themselves have some restrictions, they can only be a string. Values can be anything though. Because the keys are strings we can also look up the values of objects like this.

let food = { taco: 'delicious' }

food['taco']
// Outputs "delicious"

food.taco
// Outputs "delicious"

So there are two different ways to get a value out of an object, we can use the “array syntax” or use the dot notation. The dot notation is probably the most common, but the array notation in most cases can be much more flexible. We’ll see further on how useful the [] syntax can be used for a lot of different things.

Wrapping up objects

Objects at their core are just a collection of pairs of keys and values. The key is a name where we can lookup the stored value. This allows us to associate names with values. When we get into actual programming situations, we will see how useful this ability to name becomes, as it will allow us to create more understandable code. Objects are very powerful, and are one of the foundational aspects of JavaScript. Remember, almost everything 
in JavaScript is an object.

JavaScript – Beginning to work with arrays

Arrays are a data type that contain values. We can imagine an array of numbers like this:

[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

Or we could have a list of fruits:

[ 'banana', 'strawberry', 'blueberry', 'grape' ]

An array contains other data types within itself. Each item can be referred to as an element. Let’s get the console open and start messing around with arrays.

Working with arrays

Arrays can contain any type of data within, for instance you could do something like this:

[ undefined, 'string', true, 3, [ 'array', 'inside', 'array' ], 10 ]

So as we see in the above example we have an array containing a bunch of different elements. One of the elements is even an array itself. The array syntax starts with an opening square bracket, [, followed by each item with a comma to separate. To close out the array we end with a closing square bracket, ]. To lookup the value at a certain position in an array we can use the lookup syntax.

[ undefined, 'string', true, 3, [ 'array', 'inside', 'array' ], 10 ][0]
// Outputs undefined

[ undefined, 'string', true, 3, [ 'array', 'inside', 'array' ], 10 ][1]
// Outputs 'string'

[ undefined, 'string', true, 3, [ 'array', 'inside', 'array' ], 10 ][2]
// Outputs true

[ undefined, 'string', true, 3, [ 'array', 'inside', 'array' ], 10 ][3]
// Outputs 3

[ undefined, 'string', true, 3, [ 'array', 'inside', 'array' ], 10 ][4]
// Outputs [ 'array', 'inside', 'array' ]

[undefined,'string', true, 3, [ 'array', 'inside', 'array' ], 10][4][0]
// Outputs 'array'

[undefined,'string', true, 3, [ 'array', 'inside', 'array' ], 10][4][1]
// Outputs 'inside'

[undefined,'string', true, 3, [ 'array', 'inside', 'array' ], 10][4][2]
// Outputs 'array'

[ undefined, 'string', true, 3, [ 'array', 'inside', 'array' ], 10 ][5]
// Outputs 10

There are a couple of important things to note. The array starts at position 0, more commonly this is referred to as the index; index 0. The first element is at index 0, the second element at index 1. When we get to the array inside of an array, we use a double access array[4] grabs the inner array, then on that value we can grab any element in that so as seen above array[4][0] gives us the first inner element: 'array'.

Finding elements

Another important thing to do with arrays is to find if there is an element in one. If we had an array of numbers, we can find if a particular number exists or not like this:

[ 10, 30, 15, 1 ].indexOf( 1 )
// Outputs 3

[ 10, 30, 15, 1 ].indexOf( 10 )
// Outputs 0

[ 10, 30, 15, 1 ].indexOf( 13 )
// Outputs -1

When we try and search for 13, we get back a value of -1. This

Working with multiple arrays

Sometimes you will have two lists and need to merge them into one list. Here we have two lists of Bruce Willis movies:

[ 'Die Hard', 'Tears of the Sun', 'Sin City' ].concat( ['RED'] )
// Outputs [ 'Die Hard', 'Tears of the Sun', 'Sin City', 'RED' ]

There are definitely a lot more to arrays, but this covers the basics.

Wrapping up arrays

Arrays are a data type that contains a sequence/list of other elements. Each element has an index, and they start at 0 and count up. When you venture further into your JavaScript journey you will see how powerful arrays can be.

JavaScript – Beginning to work with strings

Strings are used all over the place, at first they can be pretty weird, and working with the quotation marks can be finicky, and cumbersome. Strings are mainly used to store, manipulate, and interact with text. Strings, like numbers, are actually very complicated the more you learn about them, but for now we will keep it as simple as possible. If you do not have your console set up, make sure read Getting Started with JavaScript.

I am string!

'I am a string!'
"I am a string as well, with double quotes!"

To create a string, or, more accurately, a string literal in JavaScript, we write some text and put it inside a pair of either ' single quotes, or " double quotes. In JavaScript, strings, arrays, and objects all have these characters that start and end a data type. Arrays use [ and ], objects use { and }. When you see quotes in JavaScript there is most likely a string starting or ending. If you see the square brackets you are dealing with an array, and the curly braces are usually an object.

Working with strings

Strings like numbers also have operators that we can use. For example, if we had 'Hi, my name is ' and 'Edwin', how would we combine these into a single string? Go to the console and type in the following and hit enter:

'Hi, my name is ' + 'Edwin'

The output value from the console is now just one string; 'Hi, my name is Edwin'. This becomes a handy way of combining messages together, and is often referred to as string concatenation. Strings are also a series of characters so we can find out which letter is at each point like this. Take note of the pattern we write String.charAt(position)

'Cat'.charAt(0)
// Outputs "C"

'Cat'.charAt(1)
// Outputs "a"

'Cat'.charAt(2)
// Outputs "t"

'Cat'.charAt(3)
// Outputs ""

0 is the starting point in our series of letters. It may be weird to access the first character at 0, but this is a fairly common convention across all programming languages, and it has its benefits. We can also access characters using a different syntax:

'Cat'[0]
// Outputs "C"

'Cat'[1]
// Outputs "a"

'Cat'[2]
// Outputs "t"

'Cat'[3]
// Outputs undefined

This is another way to find what character is at a certain position in the string. This time when we go to an empty position we get undefined, instead of an empty string. This is the main difference between these two access methods.

Empty strings

As seen above we see "" as one of the values returned. This is an empty string, same for ''. Empty strings hold can hold special meanings in JavaScript, which we will explore at another time. An empty string is still a string, it just lacks any characters. When we look at the length, ''.length we get 0.

( '' + 'Hi!' ).length
// Outputs 3, first we add together the empty string and Hi! to get a new string 'Hi!' which has three characters in it.

Strings are a special kind of array

In JavaScript, strings in some ways can be treated as a special kind of array. An array is a list of values like: [ 1, 2, 3 ]. Arrays have a similar lookup syntax to the string we used earlier. In fact the string character lookup is the array lookup syntax. Try the following in your console.

[ 'C', 'a', 't' ][0]
// Outputs "C" same as 'Cat'[0]

[ 'C', 'a', 't' ][1]
// Outputs "a" same as 'Cat'[1]

[ 'C', 'a', 't' ][2]
// Outputs "t" same as 'Cat'[2]

[ 'C', 'a', 't' ][3]
// Outputs undefined same as 'Cat'[3]

So strings are a much more human friendly way to interact with text in a programming language. We don’t have the brackets, commas etc. Although arrays and strings share similarities, they are definitely their own thing, and are used for different purposes. We can go back and forth between string and array form using the split and join methods.

'Cat'.split('')
// Outputs [ 'C', 'a', 't' ]

[ 'C', 'a', 't' ].join('')
// Outputs 'Cat'

We use split, a string method, to separate the string into an array. We use an empty string '' as the split piece, causing each letter to become its own part of the array.

We then work backwards going from the array and calling join, an array method, to crunch the array back into a string. We can join the array using a different string as well like this:

[ 'I', 'am', 'happy!' ].join( ' ' )
// Outputs "I am happy!"

'AATCCGCTAG'.split('').join('G')
// Outputs "AGAGTGCGCGGGCGTGAGG"

We see in the first example that each string part gets joined together with a space. making a sentence. In the next example we see something much more interesting. A series of nucleotide notations are being split into an array, and we are joining back together with in a G between each letter; in effect editing the genome sequence! 😲 Fiddling around with basic strings can lead to astounding real world applications.

Things to watch out for

Strings are usually pretty easy to work with until you get to one major problem, what if we have a string like this:

'JavaScript, it's amazing!'
// Outputs a syntax error? What's going on!

We get our first syntax error: Uncaught SyntaxError: Unexpected identifier. Error messages can be daunting, but if you ever see a syntax error, it means that we have typed in invalid JavaScript. The problem we have above, is that the ' is inside our quote as well as what we are using to start the string. JavaScript see the string 'JavaScript, it', and from there goes kaput because s amazing!' is not valid JavaScript. To properly have a string with a quote inside of it there are two options, escaping and using different outer quotes:

// Escaping
'JavaScript, it\'s amazing!'

// Different outer quotes.
"JavaScript, it's amazing!"

The \ escapes the ' allowing it to not be processed by JavaScript as part of the string bounds, and instead as the character '. Escaping gets real confusing really quickly, what if we wanted to have the string:

'To escape a ' in JavaScript you need to use \''
// Syntax error.

// With escaping.
'To escape a \' in JavaScript you need to use \''
// Outputs "To escape a ' in JavaScript you need to use '"
// Not what we want yet.

// Escaping the escape
'To escape a \' in JavaScript you need to use \\\''
// Outputs "To escape a ' in JavaScript you need to use \'"
// Yay!

So escaping can get very tricky and is often a big headache. It also has a weird name. To better think of escaping, we are escaping how JavaScript would normally process a string, and using the \ to signify that the next character should be interpreted by JavaScript as an actual character. Don’t worry about escaping too much, but it is good to be aware of it. For the most part not too many issues will be encountered.

Basics of strings in JavaScript

Strings are a basic data type in JavaScript used to interact with text. They are essentially a list of characters in sequence. Strings have a lot of hidden secrets lurking within, but for the most part you will only use them as a means of interacting with text. Even as a basic data type, there is a lot of power for our imaginations to run wild with.

Getting Started with JavaScript

JavaScript is a widespread programming language. Oddly enough, using a Web Browser like Chrome, Firefox or Brave is a great way to start learning JavaScript. Download one of these browsers and we can get started almost immediately after opening it up. For our examples we will be using Chrome, as it is currently the most widely used web browser.

Why JavaScript?

There is so much that you can do with JavaScript. You can make pasta fall from the skycreate a todo list, or go wherever your heart takes you. JavaScript is a key part of how you interact with websites. If you aren’t sold yet, try reading this post: Why should I learn JavaScript.

Setting Up

The first step is to download and set up a browser, if you are reading this post you have likely already done this. Hopefully you are using a browser mentioned at the start; Chrome. Create a new window and we will open up a hidden part of the browser; the console. The console can be accessed by going to Menu > More Tools > Developer Tools and clicking, or by using the keyboard shortcuts: Ctrl + Shift + J (Windows), Cmd + Option + J (Mac). Once you have the console open it should look something like this.

Google Chrome with dev tools open.

Using the console

Now we have the developer tools open and with the Console tab active. We can now start to use JavaScript to directly interact with our browser window! Type the following into the console and hit enter when you are done:

document.write('Hi!');

This will make windows content contain the text “Hi!”. Try changing the message. Type in the following code and hit enter at the console:

document.write(' I am learning and using JavaScript!');

Now the “Hi!” is followed by the new message. Pretty neat. We have used the console to interact with our browser window. Realistically you are not going to use document.write very often, if at all. Now we are going to use the console to further explore the basics of JavaScript.

Working in the console

You might have noticed that after we typed our document.write commands we get an undefined message in the console below each command. When we type and execute commands in the console we get an output back out. When we run document.write, it does not return anything, so the console shows undefined. If we type 1 into the console and hit enter let’s see what the output value ends up as.

Outputting 1 on the console.

As expected we get 1. Now we can do simple addition try:

11 + 11

We get an output of 22. There are some basic math operators we can use in JavaScript

  • Addition: 2 + 2
    • Outputs 4
  • Subtraction: 3 – 2
    • Outputs 1
  • Multiplication: 3 * 2
    • Outputs 6
  • Division: 6 / 2
    • Outputs 3

Working with decimals and other numbers can get a bit weird in JavaScript, so we will not go into too much depth for now. These numbers are a primitive data type in JavaScript, the other main types you will work with are strings, arrays, objects, and functions. Here is what each looks like in code.

  • String
    • 'Hi, I am a string!'
  • Array
    • [ 1, 2, 3, ]
  • Object
    • { is: 'Object' }
  • Function
    • function get10 () { return 10; }

Together these five primitives will be almost all you ever use in JavaScript. The challenge in JavaScript is figuring out how to arrange each of these pieces to create and explore your vision.