## The goals for this post

• Get familiar with JavaScript syntax and data types.
• Write a function that does one task really well.
• Try out the Chrome JavaScript console
• Learn about debugging and refactoring code.

This post is meant for beginners that would like a friendly introduction to writing functions in JavaScript. Let’s get started:

## Write JavaScript on paper

• Take out a sheet of paper and a pen.
• Write the following on the paper:
``````var x = 1
var y = 2
var z = x + y
``````

This is JavaScript! What are we doing here?

You know what happens when you write `x + y`. We’re adding those two numbers together.

You already know the value of `z`.

This looks just like math, and that’s because it is.

Writing code isn’t all about math, but working with numbers is a significant part of the work you’ll be doing on a daily basis.

If the above is simple math, what’s with the word `var`? What’s that?

The word `var` stands for variable. We use it only when creating a variable. You might remember the concept of variables from math, too. In this case, `x` is just a name that refers to the number 1. Any time we want to create a variable in JavaScript, we write something like:

``````var nameOfTheVariable = 'whatever the variable should reference'
``````

Why are there single quotes around the phrase `whatever the variable should reference`?

Check out the `var x = 1` statement above. There aren’t any quotes around the `1`. This is how we can tell numbers from text. In JavaScript (and most programming languages), text like this is called a string.

Wait, why did I just write that on paper?

Asking you to write code on paper wasn’t arbitrary. It’s useful to think about code in different ways, especially in the abstract. Sometimes it takes brainstorming away from the computer to figure out solutions to difficult problems. Another perk to paper coding: your program doesn’t have to run, so you can use pseudocode.

So, what’s pseudocode?

Here’s a simple example:

``````if x is greater than 10, subtract 1 from x.
``````

Here’s that pseudocode turned into JavaScript:

``````if (x > 10) {
x = x - 1
}
``````

We won’t go into `if` statements in detail here, but based on this pseudocode you should be able to tell what’s happening in that JavaScript.

## Pseudocode is awesome

You can use pseudocode to experiment, and to define the outline of a program without worrying about errors or syntax details. It’s a great way to start thinking about the structure of the code you’re about to write.

Now let’s open up the web browser, Chrome, and do some experimenting.

If you haven’t installed Chrome yet, do so now at google.com/chrome

1. Open a Chrome window.
2. Go to a website, like superbigtree.com.
3. On a mac, click View, in the top menu, hover over Developer, then click JavaScript Console.> You can also use a keyboard shortcut: Command+Option+J on macOS.

If you’ve used a terminal program on your computer, the JavaScript console is similar, except you write JavaScript instead of terminal commands.

Important:

Any time there are code samples just type them straight into the JavaScript console, hit Enter, and see what happens. The best way to learn a programming language is to type it a lot. More than a lot.

In the console, type:

``````var x = 10
``````

Hit enter, and you’ll see the word `undefined` pop up below your line of JavaScript. That’s fine, it’s normal. That’s what the console returns when you enter such a statement. To see the value of `x`, type `x` into the console.

The console should return the number `10`!

## Let’s get functional

Consider this pseudocode:

``````add two arbitrary numbers
``````

We’re going to create a function in JavaScript that adds two numbers.

We’ll create a function named `add`, and it takes two arguments and adds them together. For now, we assume the arguments to be numbers.

Before implementing the `add` function, before writing the code that makes it work, it’s useful to sketch out what usage of the function might look like.

To use the `add` function, we’ll write something like this:

``````add(3, 7)
``````

That looks good! That gives us some good clues about what we’ll want to keep in mind when implementing the function.

### Let’s add with a function

A function is a block of executable code, and when we give a function a name, like we do below, it can be used throughout your program. The benefit: define a function once rather than using similar blocks of code in multiple places in your program.

``````function add (x, y) {
return x + y
}
``````

Type the above `add` function into the JavaScript console, and use it to do some addition!

Important note: using Chrome’s JavaScript console, if you hit Enter it will execute the code. To type a function like this onto multiple lines, hit Shift + Enter to add a line.

Just like with the variables we created earlier, when we first define a function in the console it will return `undefined` when you hit enter. This is normal.

Tip: When you are in the JavaScript console you can hit the up arrow to revisit previous code that you’ve typed in.

### Try these examples

``````// add 2 and 4

// create a variable named num and set its value to the sum of 3 and 4
``````

### Hey, you made `num` equal the usage of the add function

That’s right!. Let’s take a look at the definition of the `add` function again:

``````function add (x, y) {
return x + y
}
``````

Check out the middle line, `return x + y`.

With most JavaScript programming, one of your goals should be to write small, simple functions that take arguments as input, modify that input, and output it using the `return` statement. The value that a function returns is used elsewhere in your program.

When we make the variable `num` equal `add(3, 4)`, we’re really setting `num` reference the value that’s returned from the add function. In this case, `add(3, 4)` will return the number 7, so that’s what `num` references.

### Wait, what if I messed up the adder?

Hey, sorry to bother you, but somebody tried to use our add function like this:

``````add('1', '5')
``````

Unsurprisingly, it didn’t work as expected. Can you guess what the `add` function returned?

It returned this: `'15'`.

That’s embarrassing. `'15'` isn’t even a number in JavaScript! It’s a string. We can tell by those quotes surrounding the text.

Those numbers had quotes around them. Numbers in JavaScript do not have quotes around them, only strings. Instead of adding numbers, our program combined two strings.

### Walking like a duck

JavaScript is a dynamically-typed language. Remember how we created variables earlier that referenced specific values? Each value that a variable references has a type, and in JavaScript, you don’t have to specify a type when you create a variable. You can change a variable’s type later in the program, and you will interact with a variable in different ways depending on its type.

#### Here are common types:

Boolean: `true` or `false`

Example:

``````var thisIsFalse = false
var thisIsTrue = true
``````

Note that there are no quotes around the words `true` or `false`. The variable named `thisIsTrue` references the value `true`, and the variable named `thisIsFalse` references the value `false`.

Number: integer or float

Example:

``````var thisIsAnInteger = 123
var thisIsAFloat = 3.14
``````

A float is a number with a decimal. An integer is a whole number, without a decimal.

String: text in quotes.

Example:

``````var thisIsAString = 'you can tell because this text is inside of quotes'
``````

A string is any text inside of quotes. It can be single or double quotes, but it has to be the same on each end. This will work: `'text'`, and this will work: `"text"`, but this will not work: `'text"`.

In newer versions of JavaScript, strings can also be inside backticks, like this:

```````This is a string
on multiple
lines`
``````

Strings inside backticks allow you to have multiple lines and are called template literals.

### Back to our addition issue:

This usage of our function doesn’t work: `add('1', '5')`.

The reason? The `+` operator and the way it works with strings.

This little buddy does a little more than you might expect at first. It’ll add numbers together, but it’ll also add strings together. When that happens it’s called concatenation.

When we use the `add` function with `'1'` and `'5'` as arguments, it executes a statement like this:

``````return '1' + '5'
``````

A string `+` a string equals those two strings combined. That’s concatenation. So `'1' + '5'` becomes `'15'`.

Some examples:

``````'abc' + 'def' // becomes 'abcdef'
'This is a ' + 'string' // becomes 'This is a string'`
'1' + '5' // becomes '15'`
``````

Lets add some code to our `add` function to make sure this doesn’t happen. By converting the arguments of the function to numbers, we can allow for the possibility of adding numbers that happen to be strings!

``````function add (x, y) {
return parseInt(x) + parseInt(y)
}
``````

All we added was the usage of the `parseInt` function. This is a part of core JavaScript, and is used to convert strings and floats to integers.

### Now we have a `float` issue

Somebody tried to add some floats together, like this:

``````add(3.14, 7.28)
``````

It did not work as expected. It returned `10`. That’s because `parseInt` is only going to return the integer it finds in a string. So maybe `parseInt` isn’t the best solution.

There is an easy fix. Revise your add function to look like this:

``````function add (x, y) {
return parseFloat(x) + parseFloat(y)
}
``````

Yep, that works. Now that we’re using `parseFloat` instead of `parseInt`, decimal numbers stay intact. Now `add(3.14, 6.28);` returns `9.42`.

Somebody found a weird workaround for adding multiple numbers using this `add` function:

``````var a = add(1, 3)
``````

Cool trick! But they should’t have to do such extra work. We can make this easier. Rewrite the add function to look like this:

``````function add () {
var total = 0

for (var i = 0; i < arguments.length; i++) {
total += parseFloat(arguments[i])
}

}
``````

Now we can add any number of arguments to the `add` function and get the correct result! With this change we can now pass any number of arguments to `add`, like this:

``````add(1, 2, 3, 4, 5, 6, 7)
``````

This makes `add` much more flexible than the previous workaround.

We used a `for` loop to cycle through all the arguments that are passed to `add`. We also used a variable named `total` to reference the sum of all arguments.

### The loop: cycling through a function’s arguments

Notice above we used a `for` loop. We just snuck that in there.

First we set a start value: `var i = 0`. That sets `i` to `0`, which makes our loop start at `0`.

Then compare that to an end value: `i < arguments.length`. The statement `arguments.length` gives us the number of arguments. `length` returns the number of arguments. So, with usage like this: `add(1, 2, 3)`, `arguments.length` will return `3`.

As long as `i` is less than 3, the loop will run again.

Then we give the loop an increment value: `i++`. The `++` increases `i` by one with every loop.

### One last problem: `'one'`

That’s not a number. Can you guess what happens when someone tries to do this:

``````add('one', 'two', 3)
``````

Paste in the latest version of the `add` function to the Chrome JavaScript console. Then try out the above usage of `add`.

It should return something like this:

````1 NaN`
```

Let’s fix that. The problem: `NaN` means not a number. When we run `parseFloat` on a string like `'one'`, it returns `NaN`, and when we try to add `NaN` to a number, the whole sum becomes `NaN`.

There are a few possible solutions to this problem. Here are two:

Ignore any argument that is not a number.

``````function add () {
var total = 0;
for (var i = 0; i < arguments.length; i++) {
var num = parseFloat(arguments[i])

if (isNaN(num) === false ) {
total += num
}
}
}
``````

The new code that we added is this `if` statement:

``````var num = parseFloat(arguments[i])

if (isNaN(num) === false ) {
total += num
}
``````

The function `isNaN` checks to see if `num` is a number. If `isNaN` returns false, then we know that the argument is a number. This checks to see if an argument is a number, and if not, ignores it – but there’s still a problem with this.

Ignoring values like `'one'` in our `add` function because it doesn’t contain numbers is reasonable.

A potential problem: this error fails silently. Any time there’s a chance a function can fail because of misuse by yourself or another programmer, it’s often best for the code to send errors explaining why it fails.

Whether or not your function should silently ignore invalid arguments or throw an error is completely determined by the situations the code is likely to be used. If ignoring invalid values is documented and expected, and won’t harm other parts of the program, that’s ok.

Throwing errors based on invalid arguments is only really useful for checking programming error, so we can see when we start or test a program if we’ve got things correct. It’s not a good idea to throw errors when a function is evaluating user input or other values that are not determined by the programming. That will just make your program crash.

In this code let’s switch up our code so that if an argument is not a number, `add` throws an error, and if the argument is a number, it gets added to the `total` variable.

``````function add() {
var total = 0;

for (var i = 0; i < arguments.length; i++){
var num = parseFloat(arguments[i])

if (isNaN(num)) {
throw new Error('Arguments to `add`  must be numbers.')
} else {
total += num
}
}

}
``````

Now, when we put that version of `add` into our JavaScript console and use it like this:

``````add('one', 2)
``````

It’ll return an error with this text:

``````Error: Arguments to `add` must be numbers.
``````

Good, that was our goal. Now any strings that can’t be converted to numbers will result in this clear error rather than being ignored.

## So here’s what we covered:

• Chrome JavaScript console: We started using Chrome’s JavaScript console.
• Basic data types: We covered the basics of strings, numbers, and booleans.
• Writing functions: We went over the basics of writing a simple function.
• Refactoring code: As we wrote and experimented use cases of the `add` function we identified ways it could be improved and rewrote the function to guard against mistakes.
• Debugging and useful errors: As you’re getting started it probably feels like errors are just something to avoid. But, if we can embed useful errors in our code in places where we know there are likely problems, that can make debugging much easier.