{"id":82,"date":"2024-11-08T01:54:56","date_gmt":"2024-11-08T01:54:56","guid":{"rendered":"https:\/\/techkubo.com\/javascript\/?p=82"},"modified":"2025-05-13T11:10:06","modified_gmt":"2025-05-13T11:10:06","slug":"javascript-functions","status":"publish","type":"post","link":"https:\/\/techkubo.com\/javascript\/javascript-functions\/","title":{"rendered":"JavaScript Functions"},"content":{"rendered":"\n

What is a Function?<\/strong><\/h2>\n\n\n\n

A function is a block of code designed to perform a particular task. Functions are executed when they are called (invoked). This allows you to reuse code, making your programs more modular and easier to maintain.<\/p>\n\n\n\n

<\/p>\n\n\n\n

Defining a Function<\/strong><\/h2>\n\n\n\n

To define a function in JavaScript, you use the function<\/code> keyword followed by a name, parentheses ()<\/code> which may include parameters, and a block of code {}<\/code>.<\/p>\n\n\n\n

<\/p>\n\n\n\n

Explanation of Code: <\/strong><\/p>\n\n\n\n

This example defines a function named greet<\/code> that logs “Hello, World!” to the console when called.<\/p>\n\n\n\n

function greet() {\n    console.log("Hello, World!");\n}<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
Calling a Function <\/strong><\/h2>\n\n\n\n
To execute the code inside a function, you need to call it by its name followed by parentheses ()<\/code>.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Explanation of Code:<\/strong><\/p>\n\n\n\n
This calls the greet<\/code> function, which logs the message to the console.<\/p>\n\n\n\n
greet();  \/\/ Output: Hello, World!<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
Function Paramaters<\/strong><\/h2>\n\n\n\n
Functions can accept parameters, which are values passed to the function when it is called. You can use these parameters within the function.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Explanation of Code:<\/strong><\/p>\n\n\n\n
The greet<\/code> function now accepts a name<\/code> parameter, which is used to customize the greeting message.<\/p>\n\n\n\n
function greet(name) {\n    console.log("Hello, " + name + "!");\n}\n\ngreet("Alice");  \/\/ Output: Hello, Alice!<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
Function Return Values<\/strong><\/h2>\n\n\n\n
Functions can return a value using the return<\/code> statement. The returned value can be used in the code that called the function.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Explanation of Code:<\/strong><\/p>\n\n\n\n
The add<\/code> function takes two parameters, a<\/code> and b<\/code>, and returns their sum. The result is stored in the sum<\/code> variable and then logged to the console.<\/p>\n\n\n\n
function add(a, b) {\n    return a + b;\n}\n\nlet sum = add(5, 3);\nconsole.log(sum);  \/\/ Output: 8<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
Anonymous Functions<\/strong><\/h2>\n\n\n\n
Functions can also be defined without a name, known as anonymous functions. These are often used as arguments to other functions or assigned to variables.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Explanation of Code:<\/strong><\/p>\n\n\n\n
An anonymous function is assigned to the variable greet<\/code>, and it works similarly to a named function.<\/p>\n\n\n\n
let greet = function(name) {\n    console.log("Hello, " + name + "!");\n};\n\ngreet("Bob");  \/\/ Output: Hello, Bob!<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
Arrow Functions<\/strong><\/h2>\n\n\n\n
Arrow functions provide a more concise syntax for writing functions. They are particularly useful for writing short, anonymous functions.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Explanation of Code:<\/strong><\/p>\n\n\n\n
The arrow function syntax =><\/code> is used to define the function, making it more concise.<\/p>\n\n\n\n
let greet = (name) => {\n    console.log("Hello, " + name + "!");\n};\n\ngreet("Charlie");  \/\/ Output: Hello, Charlie!<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
JavaScript Functions Example Code<\/strong><\/h2>\n\n\n\n
Explanation of Code:<\/strong><\/p>\n\n\n\n
    \n
  • Named Function<\/strong>: Defines and calls a function named greet<\/code>.<\/li>\n\n\n\n
  • Anonymous Function<\/strong>: Defines an anonymous function and assigns it to the variable add<\/code>.<\/li>\n\n\n\n
  • Arrow Function<\/strong>: Defines a function using arrow function syntax and assigns it to the variable multiply<\/code>.<\/li>\n<\/ul>\n\n\n\n
    <!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>JavaScript Functions Example<\/title>\n<\/head>\n<body>\n    <script>\n        \/\/ Named function\n        function greet(name) {\n            console.log("Hello, " + name + "!");\n        }\n\n        greet("Josh");\n\n        \/\/ Anonymous function assigned to a variable\n        let add = function(a, b) {\n            return a + b;\n        };\n\n        console.log("Sum: " + add(5, 3));\n\n        \/\/ Arrow function\n        let multiply = (a, b) => {\n            return a * b;\n        };\n\n        console.log("Product: " + multiply(4, 7));\n    <\/script>\n<\/body>\n<\/html><\/pre><\/div>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    <\/p>\n\n\n\n
    JavaScript Labs<\/strong><\/h2>\n\n\n\n