Language Tutorials/JavaScript/Functions

Please expand this article or section. You can help by adding more information if you are an editor. More information might be found in a section of the talk page. (August 2020)

This tutorial discusses Custom Blocks in Scratch and compares them to functions in JavaScript.

Why Use Custom Blocks or Functions?

Custom blocks in Scratch and functions in JavaScript are a good way to organize code. If you need to use one piece of code in multiple places, one can just write it once instead of rewriting it everywhere that it is needed.

Defining Functions

Creating a custom block

define customBlock

The "define" hat block

define customBlock (parameter)

A "define" hat block with a parameter

In Scratch, a custom block can be created by navigating to the "My Blocks" section in the Block Palette, then clicking "Make a Block." In the dialog box that appears, you can add inputs and labels. Afterwards, a "define" Hat Block will be added to the sprite and scripts can be added.

In JavaScript, a function can be defined like this:

function customBlock() {
   // ...
}

Inside the () go the names of the function's parameters, which are separated by commas if there is more than one. For example:

function customBlock(parameterOne, parameterTwo) {
   // ...
}

JavaScript functions' parameters are similar to Scratch custom block inputs.

There is a shorthand version of this called "arrow function syntax." With arrow function syntax, functions are stored in a variable like so:

const customBlock = () => {
   // ...
}

The first line can also be written like this, since there are no parameters:

const customBlock = _ => {
   // ...
}

If there was one parameter, it could be written like this:

const customBlock = parameterName => {
   // ...
}

If there was more than one parameter, it could be written like this:

const customBlock = (parameterOne, parameterTwo) => {
   // ...
}

Using Functions

In Scratch, a function can be used by simply using the stack block connected with a given define block. In JavaScript, a function can be defined and then called like so:

function customBlock() {
   // ...
}

customBlock();

Ending a Function

A value can be returned in a JavaScript function like so:

function customBlock() {
   return valueToBeReturned;
}

Then the value can be used after the function is called, like this:

function returnFiveMore(number) {
   return number + 5;
}

console.log(returnFiveMore(5)); // Will log "10" to the console

say (returnFiveMore (5):: custom)

Functions that return values
would be like custom reporters.

This use of functions in JavaScript would be like having custom reporters in Scratch, but such a feature does not exist (apart from variables, which cannot have arguments).

The return statement need not have a value after it, because JavaScript functions also use it to quit prematurely:

var greeting;
function hello() {
   greeting = "Hello!";
   return;
   greeting = "Goodbye!";
}

hello();
console.log(greeting); // greeting is "Hello!"

Scratch custom blocks can do the equivalent of returning with no value with the stop [this script v] block:

define hello
set [greeting v] to [Hello!]
if <[yes] = [yes]> then // always true, so return
  stop [this script v]
end
set [greeting v] to [Goodbye!]

hello
say (greeting) // says "Hello!"

Examples

Here are some examples of Custom Blocks in Scratch and how they can be written as functions in JavaScript.

Outputting a Certain Phrase

define loveCats
say [I love cats!]

function loveCats() {
   console.log("I love cats!");
}

Combining One Phrase With Another

define loveCats (name)
say (join [I love cats. Do you love cats, ] (join (name::custom) [?])

function loveCats(name) {
   console.log("I love cats. Do you love cats, " + name + "?");
}

Outputting the First and Last Character of a Phrase

define outputFirstAndLastLetter (phrase)
say (join (letter (1) of (phrase::custom)) (letter (length of (phrase::custom)) of (phrase::custom))

function outputFirstAndLastLetter(phrase) {
   console.log(phrase.toString()[0] + phrase.toString()[phrase.toString().length - 1]) // Convert phrase to string in order for numbers to work.
}