JS Functions

In this example below you will see how to do a JS Functions with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Kasil, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Kasil ©
  • HTML
  • CSS
  • JavaScript
    <h1>JS basic functions</h1>
<h2>To declare a function, you need the following</h2>
<ul>
  <li>The keyword <strong>function</strong></li>
  <li>A function name</li>
  <li>Parenthesis, with optional parameters</li>
  <li> Curly braces, with an expression to execute</li>
</ul>
<code>function name(parameter1, parameter2, parameter3) { code to be executed }
</code>
<p>Notice the functions do not end with a semicolon, unlike variables. However, this changes when you tie a function to a variable <strong>(Anonymous functions)</strong></p>
<div class="demo">
  <h2>Demo #1</h2>
  <p>Pass in parametes and return a value from a simple function.</p>
  <p id="demo">function 1</p>
</div>

<h3>When you should use parantheses</h3>
<p>If you call (invoke) a function and do not use the () at the end, it will return the function rather than a value</p>
<div class="demo">
  <h2>Demo #2</h2>
  <p>Show the difference when calling a function with and without parathenses </p>
  <p id="demo2"></p>
  <code id="demo2a"></code>
</div>
<h2>Anonymous Functions</h2>
<p> A JavaScript function can also be defined using an expression.A function expression can be stored in a variable:</p>
<div class="demo">
    <h2>Demo #3</h2>
  <code id="demo3" ></code>
  <p id="demo3a"></p>
</div>
<h2>Function Hoisting</h2>
<p>This allows you to call a function before it declared, JS default behavior moves functions and variables to the top of the current scope</p>
<h2>Self Invoking Functions</h2>
<p>if you want a function to invoke itself without being called, wrap it in parenthesis and keep a pair outside as well. AKA <strong>anonymous self-invoking function</strong></p>
<div class="demo">
  <p id="selfie"></p>
</div>
<h2>Functions are Objects</h2>
<p>The 'typeof' operator in JavaScript returns "function" for functions.But, JavaScript functions can best be described as objects.JavaScript functions have both properties and methods. You can use object properties on objects. ( .toString, .length ,etc.) </p>
<h2>Arguments and Parameters</h2>
<p>'Parameters' are the local variables inside a function, where 'arguments' are the real values that pass into those parameters. JS doesn't do any checking on the parameters that are passed in.</p>
<p>If there are fewer 'arguments' than parameters, then the remaining parameters will result in  'undefined.' If a function is called with too many arguments (more than declared), these arguments can be reached using the arguments object.</p>
<h3>Arguments Object</h3>
<p>JavaScript functions have a built-in object called the arguments object. The argument object contains an array of the arguments used when the function was called (invoked).This way you can simply use a function to find (for instance) the highest value in a list of numbers:</p>
<div class="demo">
  <p>the highest number in the arguments array is:</p>
  <p id="max"></p>
</div>
<h3>Arguments are pass by values</h3>
<p>The parameters, in a function call, are the function's arguments.

JavaScript arguments are passed by value: The function only gets to know the values, not the argument's locations.
<strong>If a function changes an argument's value, it does not change the parameter's original value.</strong> Changes to arguments are not visible (reflected) outside the function.</p>
<h3>Objects are Passed by Reference</h3>
<p>In JavaScript, object references are values.
Because of this, objects will behave like they are passed by <strong>reference: If a function changes an object property, it changes the original value.</strong>Changes to object properties are visible (reflected) outside the function.</p>

/*Downloaded from https://www.codeseek.co/Kasil/js-functions-eWJbbb */
    html {
  margin-left: 15px;
}
.demo {
  border: 1px solid #000;
  padding: 15px;
}
.code {
  font-family: courier;
}


/*Downloaded from https://www.codeseek.co/Kasil/js-functions-eWJbbb */
    //demo #1
function myFunction(x, y) {
  return x * y;
}
document.getElementById('demo').innerHTML = myFunction(5, 3);
//demo #2
document.getElementById('demo2').innerHTML = myFunction(4, 6);
document.getElementById('demo2a').innerHTML = myFunction;
//demo #3
var x = function(a, b) {
  return a + b
};
document.getElementById('demo3').innerHTML = x;
var z = x(5, 9);
document.getElementById('demo3a').innerHTML = z;
//or the same above can be written
//document.getElementById('demo3a').innerHTML = x(5, 9);
//this would save writing an extra element, AKA 'chaining'
(function() {
  document.getElementById("selfie").innerHTML = "Hello! I called myself";
})();
//returns the highest number in the arguments
function findMax() {
  var 
      max = 0;
  for(var i=0; i< arguments.length; i++) {
    if (arguments[i] > max) {
      max = arguments[i];
    }
  }
  return max;
}
document.getElementById('max').innerHTML = findMax(4,5,6,16);

Comments