Functions

Please Click on this link to access the resource folder for this lesson.

  • Functions are the main “building blocks” of the program. They allow the code to be called many times without repetition.
  • You’ve seen lots of built-in functions like: alert, console.log, prompt, etc
  • Quite often we need to perform a similar action in many places of the script. For example, we need to show a nice-looking message when a visitor logs in, logs out and maybe somewhere else.
  • Functions are the main “building blocks” of the program. They allow the code to be called many times without repetition.

Functions Variables

  • Local variables: These are variables declared inside a function is only visible inside that function.
  • Outer variables: These are variables declared outside a function.
  • The function has full access to the outer variable. It can modify it as well.
  • An outer variable is only used if there’s no local one. If a same-named variable is declared inside the function then it shadows the outer one.
  • Variables declared outside of any function, such as the outer userName in the code above, are called global.
  • Global variables are visible from any function (unless shadowed by locals). It’s a good practice to minimize the use of global variables.

Functions Parameters

  • Parameters are data passed to a function. These are passed in the function’s parenthesis ( ).
  • We can pass arbitrary data to functions using parameters.
  • When the function is called with arguments, the given values are copied to local variables. Then the function uses them.
  • A parameter is the variable listed inside the parentheses in the function declaration (it’s a declaration time term)
  • An argument is the value that is passed to the function when it is called (it’s a call time term).
  • We declare functions listing their parameters, then call them passing arguments.
  • If a function is called, but an argument is not provided, then the corresponding value becomes undefined.
  • We can specify the so-called “default” (to use if omitted) value for a parameter in the function declaration, using =:. e.g function showMessage(from, text = “no text given”) 

Functions Returns

  • A function can return a value back into the calling code as the result.
  • The directive return can be in any place of the function. When the execution reaches it, the function stops, and the value is returned to the calling code (assigned to result above).
  • There may be many occurrences of return in a single function. For instance, an if..else block
  • It is possible to use return without a value. That causes the function to exit immediately.
  • If a function does not return a value, it is the same as if it returns undefined:
  • If we want the returned multiple results, then  wrap them in parenthesis 

Functions Tips

  • Functions are actions. So their name is usually a verb. e.g getUser, calculatePercent, addInterest, etc
  • A function should do exactly what is suggested by its name, no more.
  • Functions should be short and do exactly one thing. If that thing is big, maybe it’s worth it to split the function into a few smaller functions
  • Two independent actions usually deserve two functions, even if they are usually called together
  • A function is similar to a comment. That is, it should be self descriptive from it’s name and usage

Function Expression 

  • There is another syntax for creating a function that is called a Function Expression. It allows us to create a new function in the middle of any expression.
  • The syntax that we used before is called a Function Declaration.

Callback functions

  • Functions are like values, and they can be assigned, as well as passed around just like variables
  • In practice, such functions are quite useful
  • The arguments showFullName and showUserName of displayUser are called callback functions or just callbacks.
  • The idea is that we pass a function and expect it to be “called back” later if necessary. In our case, showFullName becomes the callback for display type “full”, and showUserName as opposite.

Arrow Functions

  • There’s another very simple and concise syntax for creating functions, that’s often better than Function Expressions.
  • It’s called “arrow functions”, because it looks like this
  • Arrow functions can be used in the same way as Function Expressions.
  • Arrow functions may appear unfamiliar and not very readable at first, but that quickly changes as the eyes get used to the structure.
  • They are very convenient for simple one-line actions

Scopes & Closures

  • Scope in JavaScript refers to the current context of code, which determines the accessibility of variables to JavaScript. The two types of scope are local and global:
    • Global variables are those declared outside of a block
    • Local variables are those declared inside of a block
  • A closure is a function that remembers its outer variables and can access them. In JS  all functions are naturally closures
  • All functions and Objects have access to a Global scope.
  • If a variable is declared inside a code block {…}, it’s only visible inside that block.

Back to Lesson
Scroll to Top