Vefþróun@Tækniskóli
← All projects/3 - The fundamentals/Javascript Introduction - Functions

Guide: Javascript Introduction - Functions

Description

👉 This guide is part of the Javascript Introduction Guides. Please follow the order:

  • Fundamentals & Data Types
  • Conditionals
  • Loops & Iterators
  • Functions
  • ES6

 

Functions are an incredibly useful feature of programming languages because they allow us to encapsulate/abstract behavior. For example, if you need a certain task to be performed multiple times in your software, maybe a dog has to bark until it gets clicked, then you can create a "bark" function and have it be called/invoked every second or so.

Of course having a dog bark endlessly is probably not very useful but you will find out that functions are your friends and even start calling your coding style “functional programming” at some point.

Pro tip: Do not rush through this Guide as learning functions well is key for all Javascript work.

Knowledge

  • Understand what are functions, parameters, return values and related concepts

Skills

  • Be able to use functions in Javascript

Topics

  • Functions
    • Declaring & Calling
      • Assigning functions to variables
    • return Keyword
    • Parameters
      • Objects as arguments
      • Default parameters
    • Scope
      • Hoisting
    • this Keyword
    • Array’s .forEach()
    • Objects
      • Adding methods
      • get/set
    • Anonymous functions
    • Arrow functions
    • Callbacks
    • Higher-Order functions & Closures
    • Factory functions
    • Self-invoking functions
    • Recursion

Action Points

  • Take a crash course about Javascript functions
  • Exercise all the concepts in the Topics list n Repl.it or similar

Deliverable: Exercise solution

  • Submit:
    • Repl.it Project URL (Javascript Repl)
    • Add comments for each relevant code block
  • Exercise description:
    • Create a contact list where every contact must have a name and email, and can have phoneNumber and company.
    • The software must expose the following functions:
      • add()
        • Argument
          • Object containing information to create a new contact
        • Description
          • Adds a new contact to the list
        • Outputs
          • Error
            • “Duplicate was found” (email address is the unique identifier)
            • “Missing fields” if name or email are not present in the passed in object
          • Success
            • “<Contact name> was added”
      • remove()
        • Argument
          • Email address
        • Description
          • Remove corresponding contact
          • Email address is the unique identifier
        • Outputs
          • Error
            • “Contact not found”
          • Success
            • “<Contact name> was removed”
      • edit()
        • Arguments
          • Email address
          • object representing the new information for the contact
        • Description
          • Update/Increment the corresponding contact’s data with the information that’s passed in
          • Email address is the unique identifier
        • Outputs
          • Error
            • “Contact not found”
          • Success
            • “<Contact name> was updated”
      • get()
        • Argument
          • Email address
        • Description
          • Output information for the corresponding contact
          • Email address is the unique identifier
        • Outputs
          • Error
            • “Contact not found”
          • Success
            • “Name: <contact’s name>
              Email: <contact’s email address>
              Phone number: <contact’s phone number - if it exists>
              Company: <contact’s company - if it exists>”
      • listAll()
        • Argument
          • None
        • Description
          • List all contacts available in the contact list
        • Output example
          • “Anna Valsdóttir <ana@tskoli.is>, Jón Jónsson <jon@tskoli.is>, Hildur Eriksdóttir <hildur@tskoli.is>”
      • clear()
        • Argument
          • None
        • Description
          • Remove all contacts from the list
          • Ask if user is sure before proceeding [input()]
        • Output
          • Canceled
            • “Operation canceled”
          • Success
            • “The contact list was cleared”
    • All functions must be available to use from the Console
    • Showing results via DOM manipulation is not required but is welcome and would replace the use of console.log()