Chapter 3 - Functions, Methods and Objects Flashcards
What is the difference between a function and a method?|
A function is a series of statements that have been grouped together because they perform a specific task.
A method is the same as a function, except that it is created inside, and is part of, an object.
What is an object?
A model of the world using data. Objects are made up of properties and methods. A browser comes with a set of built-in objects that act like a toolkit for creating interactive web pages.
Why are functions useful?
They group together statements that perform a task, helping to organise code.
They are a way to store the steps that accomplish the task. This is useful if e.g. you only want the code to run when a user clicks on a page element.
How do you get a function to perform its task?
You should give a function that you intend to use later a name. The name should describe what it does. When you ask the function to perform its task, it is referred to as calling the function.
What are some other notable characteristics of functions?
Functions may package their code in a code block. Code blocks are one or more statements package in curly braces. There is no semi-colon after the end of the curly braces, as there would be in a statement.
Some functions need to be given information in order to achieve their goal. These pieces of information passed to the function are called parameters.
Functions that you expect to give an answer give back a return value.
Anonymous functions do not have a name, and are called when the interpreter comes across them.
Give and example of a basic JavaScript Function
// Create a variable called msg to hold a new message var msg = 'Sign up to receive our newsletter for 10% off!';
// Create a function to update the content of the element whose id attribute has a value of message
function updateMessage() {
var el = document.getElementById('message');
el.textContent = msg;
}
// Call the function updateMessage();
How would you declare a function?
You give it a name and write statements needed to achieve its tasks inside curly braces.
You declare a function using the function keyword.
You give the function a name (or identifier) followed by parentheses.
The statements that perform the task sit in a code block, inside curly braces
function sayhello() {
document.write(‘hello!’;)
}
How do you call a function
You can execute all the statements within the curly braces with just one line of code.
You call the function like so:
sayhello();
When a function is called, all the statements within its block are executed. The code then continues to run from the point where it was initially called.
Can you call a function before it has been declared?
Yes, because the interpreter runs through the entire script before executing each statement.
How do you declare a function that needs information?
When you declare the function, you give it parameters. Inside the function, these parameters act like variables.
You need to indicate what a function needs to know in parentheses after the function name. The items that appear in these parentheses are known as parameters of the function.
function getArea(width, height) {
return width * height
}
This shows how code does not need to know exact details in advance, as long as it has rules to follow.
How do you call functions that need information?
You specify the values it should use in the parentheses that follow its name.
These values are called arguments, and can be provided as either values or variables.
Arguments as values:
getArea(3, 5);
Arguments as variables:
wallWidth = 3;
wallHeight = 5;
getArea(wallWidth,wallHeight);
What is the difference between a parameter and an argument?
Parameters are used when declaring a function. These words act like variables.
Arguments are used when calling a function. They are the real numbers used to perform the calculation (or variables that hold real numbers.)
How do you get a single value from a function?
You declare a variable that holds the result of a calculation using arguments. You then use the return keyword.
e.g.
function calculateArea(width, height) {
var area = width * height;
return area;
}
var wallOne = calculateArea(3, 5); var wallTwo = calculateArea(8, 5);
The interpreter leaves the function when return is used.
How do I get multiple values from a function?
create a function called getSize()
The area of a box is calculated and stored in a variable called area.
The volume is calculated and stored in a variable called volume.
Both are placed into an array called sizes.
The array is returned to the code that called the getSize function, allowing the values to be used.
function getSize(width, height, depth) {
var area = width * height;
var volume = width * height * depth;
var sizes = [area, voume];
return sizes;
}
var areaOne = getSize(3, 2, 3) [0]; var volume = getSize(3, 2, 3) [1];
Can you use a function where a value is expected?
Yes: Expressions produce a value. If a function is used where a value or expression are expected, it is treated as an expression. This is called a function expression.
Names are usually omitted in this case, meaning the functions involved are anonymous functions.
This means you can effectively store a function in a variable, like so:
var area = function(width, height) {
return width * height;
};
var size = area(3, 4);
Why do you have to be careful when using function expressions?
With a function expression, the function is not processed until the interpreter gets to that statement.
This means you cannot call this function until the interpreter has discovered it.
It also means any preceding code may could potentially alter what goes on inside this function.
What is an immediately invoked function expression (IIFE)?
Pronounced ‘iffy’, these function expressions are invoked as soon as the interpreter comes across them.
Below, the variable area will hold the value returned by the function
var area = (function() {
var width = 3;
var height = 2;
}());
The final parentheses after the curly brace tell the interpreter to call the function immediately.
The grouping parentheses (after = and after the final parentheses ensure the interpreter treats these as an expression.
It is considered best practice to place the final parentheses before the closing group operator.
When should you use anonymous functions and IFFEs?
For code that only needs to run once, rather than being repeatedly called from other parts of the script.
As an argument when a function is called (to calculate the value for that function).
To assign the value of a property to an object.
In event handlers and listeners to perform a task when an event occurs.
To prevent conflict between two scripts that might use the same variable names.
IFFEs are commonly used as a wrapper around a set of code.
Any variables declared within that code are effectively protected from variables in other scripts that might have the same name.
This is due to a concept called scope.
