DEV Community: Deep Space

JavaScript Functions - Parameters & Arguments Explained

Deep Space — Sat, 05 Feb 2022 20:56:09 +0000

Learn what parameters, arguments, and return statements are with videos and animations.

Let’s understand what is a JavaScript Parameter & Argument.
Also what the return statement is.
In the previous article, we learned about the general idea of a function, function definition & function invocation.
Visit to refresh your knowledge, if you want.
Let’s get a little more advanced with functions.

Table Of Contents:

JavaScript Variables in Functions
JavaScript Functions-Parameters & Arguments
JavaScript return statement

JavaScript Variables in functions

JavaScript functions can also contain variables.
Let's create a function called addNumbers() to demonstrate.

function addNumbers() {
const a = 5;
const b = 10;
const sum = a + b; // 5 + 10
return sum;
}
console.log(addNumbers());

Code Explanation:
In the function block {}, we have 3 variables a, b and sum, with values.
In the end, we have return keyword.
Followed by function call addNumbers();.

But we can change the above code, using parameters & arguments to replace variable declaration and assignment.

JavaScript Functions - Parameters & Arguments

JavaScript function parameters are the names (placeholders) for values.
JavaScript function arguments are the actual values of parameters.

Let me explain it to you like we are having a street conversation, or talk in an informal language.

Parameters are variable names. The word parameter is just a fancy word for saying variable name in JS.
Arguments are the actual values of those variables. The word argument is just another fancy word for saying variable value
So we use parameters(variable names) to refer to argument (variable values)

Makes sense? Let's see it in code, or better convert the above function's variables & their values to parameters & arguments.

function addNumbers(a, b) {
const sum = a + b; // 5 + 10
return sum;
}
console.log(addNumbers(5, 10));

Code Explanation:
Instead of writing variable names inside the function block {}.
We wrote them inside the parentheses ().
And we gave arguments (actual variable values) on function call addNumbers(5, 10).

Most people can’t see the relationship between parameters & arguments (including myself).
So I decided to make a video, animations, and pictures to help you visualize.

Notice, we don’t need to use a JavaScript keyword const, let or var to declare the variables a and b, inside the () parentheses.

JavaScript return statement

The JavaScript return statement as it sounds, it returns something.
When the JavaScript functions reaches the return statement, it will stop the function execution and returns the value to the caller.

Thanks for reading, follow me on my Youtube Channel (Deep Space).
And here on the dev community, too.
I love coffee, you can buy me one here "Buy me a coffee"

JavaScript Functions Explained - Part 1

Deep Space — Sun, 16 Jan 2022 12:51:09 +0000

Easy to understand example codes, animations (hand made by me). This article and videos is designed for both "Desktop" & "Mobile" users.

If you are a visual "mobile" person, the above video is for you.
In JavaScript Variables, we learned where&how to stick your Data. But what about the actions that manipulate the Data? We need functions.

Table Of Contents:

What is a function ? (General idea of a function)
JavaScript Functions
JavaScript Functions - Call/Invoke Function

What is a function ? (General idea of a function)

There are many different explanations for the same thing. But I'll take my own approach. Because, that's how I personally learn myself.
Instead of talking about specific functions. First, let's talk about the general idea of a function.

You can think of a function like a machine that :

Can Take Input
Process it
And give output/result

JavaScript Functions

A JavaScript function, is a block of code designed to perform a particular task. They also can be reused & modified.
A JavaScript function is executed/activated when something calls/invokes it.

To create a function, write the keyword function
Then give it a name like doSomething or whatever you name it (be descriptive).
Function names can contain letters, digits, underscores, and dollar signs (same rules as variables).

At the end of the function name use () a pair of parenthesis doSomething()
A set of curly braces {} at the end like so doSomething () {} to define the block, that the function will execute when its called/invoked.

Inside there, I'll just print my name to the console, to make it a simple function.

Example Code:

function doSomething() {
console.log("Lia Sue");
}

If you check the console, nothing hapens. That's because we actually have to invoke/call the functions.

JavaScript Functions - Call/Invoke Function

The way we invoke or call a function is, we have to use or type its name. After we declare/create the function. At the end of the name put a pair of parenthesis like so doSomething ();

// Declaring a function 
function doSomething() {
console.log("Lia Sue");
}
// Invoke / call function
doSomethiing();

Hope this picture will help you visualize

JavaScript Functions — Video for Desktop users

If you are reading it from a Desktop device and find vertical video annoying. Here’s a big video designed for Desktop, Enjoy!

Build a Math Game With JavaScript

Deep Space — Fri, 15 Oct 2021 20:10:20 +0000

Let's build a Math Game With JavaScript.
Note: I'm working on the written version of this project for the dev.to community.

JavaScript Functions

Deep Space — Sat, 19 Dec 2020 22:20:10 +0000

Summary: In this tutorial, you'll learn how to create a function in JavaScript and invoke/call it or start/make it work or activate it.

What is a function?

A function is like a machine

1 takes input
2 processes it
3 gives output

If you are a visual person. Here's a video.

If you like reading. Below is the written version of the video.

1 Create a Function in JavaScript

To create a function in JavaScript, use the word

function.
Then give your function a name like doSomething
a pair of parentheses like ()
and curly braces like {}

All together in a code editor, it looks like so:

function doSomething() {
// code to be executed
}

Explanation of Code

a) The word function is a JavaScript keyword. It tells JavaScript 'Hey, JavaScript, we are about to create a function'
b) After you write the function keyword you have to give it a name. In this example I gave it doSomething but you can name your function anything you want. (the same rules apply as naming variables).
c) The opening and closing parentheses () takes variables called function parameters we'll talk about those in the next post/video.
d) Inside the curly braces {} you put codes that you want your function to run or process
e) But the code above doesn't do anything because I just wanted to show/explain functions in their purest form.

Calling or Activating your Function

Now let's take the code above and log something to the browser console. Like 'Hello Lia'
To call or activate your function, you must use its name after your function like so: doSomething;
All together it looks something like this:

function doSomething() {
console.log('Hello Lia');
}
doSomething();

If you check your browser console, you should see Hello Lia message or text.

Your task

Your task for this tutorial is to write a function that logs to the console 'Hello YourName '
Thanks for reading

JavaScript strings [bracket notation]

Deep Space — Fri, 18 Dec 2020 21:07:18 +0000

Summary: Using bracket notation with strings.
Note:It's late here, tomorrow I'll make this post an article for those who love reeading.

CSS project to sharpen your skills

Deep Space — Tue, 15 Dec 2020 14:15:52 +0000

In this post and video, I'm gonna show you how to create a CSS folder and files in it. It's an animated project just to sharpen your CSS skills.

See on Codepen

Time Codes for the video:
Times Codes:
0:00 Intro
01:08 Adding HTML tags
02:24 Split the screen
02:50 Styling the body tag
05:35 Styling the back of the folder
07:00 Styling the small box
09:00 Styling the papers/files inside the folder
12:08 Styling the papers using nth-child selector
13:50 The Curtain or front page of the folder
17:26 Animating the folder and all the files

JavaScript String length Property

Deep Space — Mon, 14 Dec 2020 21:58:35 +0000

Hey there!
In this post and video, I'm going to explain how to use JavaScript length property with strings to find/count the number of characters in a string

When you use the length property with JavaScript strings it counts the number of characters you have in that string and returns a/an positive/integer number. That includes empty string, empty space.

Let's create 2 variables:

let firstName = 'Ada';
let myData = firstName.length; // returns 3
console.log(myData);

The way it's used is after or at the end of a variable with a .length like so firstName.length

If you check the typeof both variables the firstName is a string.
And myData is a number.

console.log(typeof firstName); // string
console.log(typeof myData);    // number

If you are a visual person here's a video tutorial with code editor and whiteboard example.

Thanks for reading this.