Javascript Function Syntax

Kyle Coberly

Follow this slide deck at http://slides.com/kylecoberly/deck-9

The Function Mystery Machine

Function Syntax

function myFunctionName(firstParameter, secondParameter){
    var calculation = firstParameter * secondParameter;
    return calculation;
}

var calculatedValue = myFunctionName(3, 3);
  • function keyword
  • name
  • parameters
  • curly braces
  • body
  • return statement
  • invocation operator
  • arguments

Function Syntax

function myFunctionName(firstParameter, secondParameter){
    var calculation = firstParameter * secondParameter;
    return calculation;
}

var calculatedValue = myFunctionName(3, 3);

function Keyword

  • Means you're defining a function

Function Syntax

function myFunctionName(firstParameter, secondParameter){
    var calculation = firstParameter * secondParameter;
    return calculation;
}

var calculatedValue = myFunctionName(3, 3);

Name

  • What you will use to call the function
  • Must be unique
  • Can't be a reserved word
  • Conventionally uses camelCase in Javascript
  • A more advanced function usage skips the name and is called an "anonymous function"
  • The label on the Function Mystery Machine

Function Syntax

function myFunctionName(firstParameter, secondParameter){
    var calculation = firstParameter * secondParameter;
    return calculation;
}

var calculatedValue = myFunctionName(3, 3);

Parameters

  • Parameters are inputs the function accepts
  • Parameters are variables available to the function body
  • Functions can have 0, 1, or many parameters
  • If a function has 0 parameters, just use ()
  • If a function has many parameters, separate with ,
  • The funnel on the Function Mystery Machine

Function Syntax

function myFunctionName(firstParameter, secondParameter){
    var calculation = firstParameter * secondParameter;
    return calculation;
}

var calculatedValue = myFunctionName(3, 3);

Curly Braces

  • Wrap around the function body
  • Conventionally starts on the same line as the function keyword, name, and parameters
  • Conventionally ends at the same indentation level as the start
  • Doesn't end with a semicolon
  • The case of the Function Mystery Machine

Function Syntax

function myFunctionName(firstParameter, secondParameter){
    var calculation = firstParameter * secondParameter;
    return calculation;
}

var calculatedValue = myFunctionName(3, 3);

Body

  • The block of code you want to execute
  • Has access to any parameters passed in and any variables declared outside of it
  • The inside of the Function Mystery Machine

Function Syntax

function myFunctionName(firstParameter, secondParameter){
    var calculation = firstParameter * secondParameter;
    return calculation;
}

var calculatedValue = myFunctionName(3, 3);

Return Statement

  • Part of the function body
  • The output of the function
  • Nothing after a return statement will run
  • A body can have multiple return statements
  • Can be an expression
  • You can leave it out, but shouldn't
  • Can be assigned to a variable
  • The conveyor belt of the Function Mystery Machine

Function Syntax

function myFunctionName(firstParameter, secondParameter){
    var calculation = firstParameter * secondParameter;
    return calculation;
}

var calculatedValue = myFunctionName(3, 3);

Invocation Operator

  • What calls, or "invokes" the function
  • If the function has no arguments, is just ()
  • If the function has arguments, they go inside
  • The "on" switch for the Function Mystery Machine

Function Syntax

function myFunctionName(firstParameter, secondParameter){
    var calculation = firstParameter * secondParameter;
    return calculation;
}

var calculatedValue = myFunctionName(3, 3);

Arguments

  • Go inside the invocation operator
  • Multiple arguments are separated by commas
  • Parameters are in the definition, arguments are in the invocation
  • Order of arguments matches the order of the parameters
  • The inputs for the function mystery machine

Group Review

Function Syntax - Group Review

function calculate3DArea(width, height, depth){
    var area = width * height * depth;
    return area;
}

Function Syntax - Group Review

function weirdWildFunction(){

    var self = this;
    var data = self.data;

    self.smallFunction(index);

    var nextindex = i+1;

    if (data.slides[nextindex){
        if (nextindex % 250 === 0){
            setTimeout(function(){               
                self.longFunction(nextindex);
            },0);
        } else {
            self.longFunction(nextindex);
        }

        return false;
    } else {
        return true;
    }

}

Function Syntax - Group Review

var basementArea = calculate3DArea(10, 20, 3);

Function Syntax - Group Review

var basementArea = calculate3DArea(10, 20, 3);

Function Syntax - Group Review

function calculate3DArea(width, height, depth){
    var area = width * height * depth;
    return area;
}

Function Syntax - Group Review

function calculate3DArea(width, height, depth){
    var area = width * height * depth;
    return area;
}

Function Syntax - Group Review

var basementArea = calculate3DArea(10, 20, 3);

Function Syntax - Group Review

var basementArea = calculate3DArea(10, 20, 3);

Function Syntax - Group Review

function calculate3DArea(width, height, depth){
    var area = width * height * depth;
    return area;
}

Function Syntax - Group Review

function calculate3DArea(width, height, depth){
    return width * height * depth;
}

Function Syntax - Group Review

function login(){
    return true;
}

Function Syntax - Group Review

login();

Solo Exercises

Function Syntax - Solo Exercises

function getSquare(numberToSquare){
    var squaredNumber = numberToSquare * numberToSquare;
    return squaredNumber;
}

Function Syntax - Solo Exercises

function getSquare(numberToSquare){
    var squaredNumber = numberToSquare * numberToSquare;
    return squaredNumber;
}

Function Syntax - Solo Exercises

function getSquare(numberToSquare){
    var squaredNumber = numberToSquare * numberToSquare;
    return squaredNumber;
}

Function Syntax - Solo Exercises

function getSquare(numberToSquare){
    var squaredNumber = numberToSquare * numberToSquare;
    return squaredNumber;
}

Function Syntax - Solo Exercises

var squaredNumber = getSquare(10);

Function Syntax - Solo Exercises

var squaredNumber = getSquare(10);

Function Syntax - Solo Exercises

var squaredNumber = getSquare(10);

Function Syntax - Solo Exercises

function getSquare(numberToSquare){
    var squaredNumber = numberToSquare * numberToSquare;
    return squaredNumber;
}

Function Syntax - Solo Exercises

function getSquare(numberToSquare){
    var squaredNumber = numberToSquare * numberToSquare;
    return squaredNumber;
}

Questions?

One Last Thing...

  • Sometimes you will see functions declared this way
  • All of the elements are the same
  • There is a difference, but don't worry about it just yet
var multipleByTwo = function(inputNumber){
    var product = inputNumber * 2;
    return product;
}

var output = multipleByTwo(2);

Next Steps

  • Rewrite some of the expressions from earlier lessons as functions
  • Start by wrapping expressions in functions as-is, no parameters
  • Try adding parameters in when you're comfortable

Thank You!

www.kylecoberly.com

Function Syntax

By Kyle Coberly

Function Syntax

Introduction to Javascript Function Syntax

  • 637
Loading comments...

More from Kyle Coberly