Working with Functions

After this lesson you can

• Write and call JavaScript functions, and predict what happens with missing arguments or no return

Key takeaways

• A JavaScript function starts with function, has no return type or parameter types, and is named in camelCase, such as add.
• A missing argument is undefined, so add(2) gives NaN with no error. An extra argument is simply ignored.
• A default value, such as greeting = 'Hello', is used when that argument is missing.
• A function with no return gives back undefined.
• Functions are values: you can store one in a variable, or pass it to another function as a callback.

Here's a C# method, and the same function in JavaScript:

int Add(int first, int second)
{
    return first + second;
}

function add(first, second) {
    return first + second;
}

console.log(add(2, 3));

5

The JavaScript version:

• starts with the keyword function,
• has no return type and no parameter types, since types belong to values,
• is named in camelCase by convention (add, displayMessage), where C# methods use PascalCase,
• usually opens its brace on the same line. (Either style runs, but same-line is what most JavaScript code uses.)

Any arguments, any types

With no types, JavaScript accepts whatever you pass. That's flexible, and it's also where surprises come from:

function add(first, second) {
    return first + second;
}

console.log(add(2, 3));
console.log(add('2', 3));
console.log(add(2));
console.log(add(2, 3, 4));

5
23
NaN
5

• add('2', 3) gives '23': + with a string joins text, as in C#. But C# wouldn't let a string into an int parameter at all.
• add(2): a missing argument is undefined, and 2 + undefined is NaN (Not a Number). No error, just a wrong answer.
• add(2, 3, 4): an extra argument is simply ignored.

A parameter can have a default value, used when the argument is missing, as in C#:

function greet(name, greeting = 'Hello') {
    return `${greeting}, ${name}!`;
}

console.log(greet('Ada'));
console.log(greet('Ada', 'Welcome'));

Hello, Ada!
Welcome, Ada!

No return means undefined

A function without a return gives back undefined, JavaScript's word for "no value":

function displayMessage(message) {
    console.log(message);
}

const result = displayMessage('Saved');
console.log(result);

Saved
undefined

C# has void methods, whose result you can't even put in a variable. JavaScript lets you, and the value is undefined.

Functions are values

A function can be stored in a variable, and passed to another function, like a C# lambda in a Func<...>:

function shout(text) {
    return text.toUpperCase() + '!';
}

function whisper(text) {
    return text.toLowerCase() + '...';
}

function say(text, style) {
    console.log(style(text));
}

say('Good morning', shout);
say('Good morning', whisper);

GOOD MORNING!
good morning...

say doesn't know or care which style it's given; it just calls it. A function passed to another function like this is called a callback. You'll pass callbacks constantly: to array methods in the next lesson, and to the browser, to run when a button is clicked.

Check yourself

1 question to try on the lesson page.

So what

JavaScript functions are C# methods without the types: shorter to write, and more trusting of whatever they're given. Name them in camelCase, give defaults to optional parameters, and watch for undefined when an argument goes missing.

Key terms

• Function Declaration
• undefined
• NaN
• Default Parameter
• Callback Function

Cheat sheets

• Working with Functions