< Language Tutorials

Revision as of 00:51, 17 January 2021 by Mlcreater (talk | contribs) (Adding function(...){} syntax example and define ... (...) block frame; Expanding return section)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Document.png 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 will discuss Custom Blocks in Scratch and compare 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 + "?");
}
Cookies help us deliver our services. By using our services, you agree to our use of cookies.