Functions in JavaScript: Syntax, Types, and Examples

Rumman Ansari   Software Engineer   2024-07-09 09:44:33   5703  Share
Subject Syllabus DetailsSubject Details 1 Questions 2 Program
☰ TContent
☰Fullscreen

JavaScript Functions

JavaScript functions are used to perform operations. We can call JavaScript function many times to reuse the code.

A function is a set of statements that performs a tasks or calculates a value. Functions may also take inputs, process them and return the output.

Advantage of JavaScript function

There are mainly two advantages of JavaScript functions.

  1. Code reusability: We can call a function several times so it save coding.
  2. Less coding: It makes our program compact. We don’t need to write many lines of code each time to perform a common task.

JavaScript Function Syntax

The syntax of declaring function is given below.

function functionName([arg1, arg2, ...argN]){  
 //code to be executed  
}

JavaScript Functions can have 0 or more arguments.

JavaScript Function Example

Let’s see the simple example of function in JavaScript that does not has arguments.

 
<span class="pln">
</span><span class="tag">&lt;script&gt;</span><span class="pln">  
</span><span class="kwd">function</span><span class="pln"> msg</span><span class="pun">(){</span><span class="pln">  
alert</span><span class="pun">(</span><span class="str">"hello! this is message"</span><span class="pun">);</span><span class="pln">  
</span><span class="pun">}</span><span class="pln">  
</span><span class="tag">&lt;/script&gt;</span><span class="pln">  
</span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">msg</span><span class="pun">()</span><span class="atv">"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"call function"</span><span class="tag">/&gt;</span><span class="pln"> 
</span>

Like most programming languages, function is a piece of code that can be isolated to be called multiple times. Example of a function:

<span class="kwd">function</span><span class="pln"> </span><span class="typ">Hello</span><span class="pun">(</span><span class="kwd">string</span><span class="pun">)</span><span class="pln">
</span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">return</span><span class="pln"> </span><span class="str">"Hello"</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> </span><span class="str">" "</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="typ">Hello</span><span class="pun">(</span><span class="pln"> </span><span class="str">"Tom"</span><span class="pun">);</span><span class="pln">  </span><span class="com">/* returns "Hello Tom" */</span>
Function as value

Functions are values in JavaScript. A function can be assigned as a value to a variable.

<span class="pln">    </span><span class="kwd">var</span><span class="pln"> f </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> foo</span><span class="pun">()</span><span class="pln">
    </span><span class="pun">{</span><span class="pln">
        console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">"Hello"</span><span class="pun">);</span><span class="pln">
    </span><span class="pun">};</span><span class="pln">
    f</span><span class="pun">();</span><span class="pln">  </span><span class="com">/*  returns "Hello" */</span>
Function as argument

A function can be passed as an argument to another function.

<span class="kwd">var</span><span class="pln"> f </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln">
</span><span class="pun">{</span><span class="pln">   console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">"Hello"</span><span class="pun">);</span><span class="pln">
</span><span class="pun">};</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> executor </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">fn</span><span class="pun">)</span><span class="pln">
</span><span class="pun">{</span><span class="pln">  fn</span><span class="pun">();</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
executor</span><span class="pun">(</span><span class="pln">f</span><span class="pun">);</span><span class="pln">  </span><span class="com">/* returns "Hello" */</span><span class="pln">
</span><span class="str">```</span>
Function as property

Functions can be added as a property to an object.

<span class="kwd">var</span><span class="pln"> myObj </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
 </span><span class="str">"testProp"</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pln">
</span><span class="pun">};</span><span class="pln">
myObj</span><span class="pun">.</span><span class="pln">prop1 </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
 console</span><span class="pun">.</span><span class="pln">log </span><span class="pun">(</span><span class="str">"Function in object"</span><span class="pun">);</span><span class="pln">
</span><span class="pun">};</span><span class="pln">
myObj</span><span class="pun">.</span><span class="pln">prop1</span><span class="pun">();</span>
Function arguments

A function can accept a varied number of arguments. i.e., a function "add" can be called by passing a different number of arguments different times. This is possible using an implicit argument by JavaScript called arguments.

<span class="kwd">var</span><span class="pln"> </span><span class="kwd">add</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln">
</span><span class="pun">{</span><span class="pln">  </span><span class="kwd">var</span><span class="pln"> i</span><span class="pun">,</span><span class="pln"> sum </span><span class="pun">=</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln">
  </span><span class="kwd">for</span><span class="pln"> </span><span class="pun">(</span><span class="pln">i</span><span class="pun">=</span><span class="lit">0</span><span class="pun">;</span><span class="pln"> i</span><span class="pun">&amp;</span><span class="pln">lt</span><span class="pun">;</span><span class="pln"> arguments</span><span class="pun">.</span><span class="pln">length</span><span class="pun">;</span><span class="pln"> i</span><span class="pun">++)</span><span class="pln">
 </span><span class="pun">{</span><span class="pln">  sum </span><span class="pun">+=</span><span class="pln"> arguments</span><span class="pun">[</span><span class="pln">i</span><span class="pun">];</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
  </span><span class="kwd">return</span><span class="pln"> sum</span><span class="pun">;</span><span class="pln">
</span><span class="pun">};</span><span class="pln">

console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="kwd">add</span><span class="pun">(</span><span class="lit">1</span><span class="pun">,</span><span class="lit">2</span><span class="pun">,</span><span class="lit">3</span><span class="pun">,</span><span class="lit">4</span><span class="pun">,</span><span class="lit">5</span><span class="pun">));</span><span class="pln">  </span><span class="com">/* 5 arguments*/</span><span class="pln">
console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="kwd">add</span><span class="pun">(</span><span class="lit">1</span><span class="pun">,</span><span class="lit">2</span><span class="pun">,</span><span class="lit">3</span><span class="pun">,</span><span class="lit">4</span><span class="pun">));</span><span class="pln">  </span><span class="com">/* 4 arguments*/</span>


Stay Ahead of the Curve! Check out these trending topics and sharpen your skills.