Intro to JavaScript - Week 2: Function

Introduction to Programming
with JavaScript
Week 2: Function
Jeongbae Oh

YCC JavaScript Seminar

2017.09.25

Function
• The most important part of JavaScript

• A "mini program" within the program

• Basis of the functional programming paradigm

Input / Output
• A function can receive inputs, process them, and return an output.

• But it doesn't have to get an input.

• Or return an output.

• Or process anything.

• Of course a function not doing any of the three is pretty meaningless.

• Put simply, the input of a function is called a parameter (매개변수), and  
the output is called a return value (반환값, 리턴값)

Declaration
• function name(parameters) { }

• No semi-colon necessary

• Function naming rules (same as variable)

• Must consist of lower and upper case alphabet letters, numbers, and _

• Can only begin with lower and upper case alphabet letters

• Cannot use reserved words (e.g. function, var, etc.)

• Lower camel case recommended (e.g. getTaxRate) → Convention

• Function without a name is called an anonymous function (익명 함수).

Call / Invocation
• To execute codes within a function, it must be called (invoked).

• To call a function: name(argument);

• A function can be declared and called  
immediately (immediately invoked function):

• (function name(parameter) { })();

• Anonymous functions are usually called immediately.

Call / Invocation
• Location of a function within a source code has no effect on
whether the function can be called. 
(i.e. you can call a function before defining it)

• Not calling a function makes that function to have no effect
on the execution of the code.

return
• A function ﬁnishes running with return.

• Anything after return is not executed.

• Even without return, function ﬁnishes running at the end.

• Value after return becomes the return value of the function.

• Return value is not necessary.

return and console.log
• return makes the result of execution of the function available for use as a value,
and therefore not usually "printed" like console.log in a real setting.

• console.log is a special function/method which "prints" the value to the
console/REPL to make debugging easy.

• Therefore, the return value of console.log() is undefined (nothing is
returned).
console.log does not  
have a return value.
console.log
return
console.log
return

Parameter / Argument
• To put simply:

• A parameter (매개변수) is the input of a function.

• An argument (인자) is what is passed to a function when called.
parameters
arguments

Function as a First-Class Citizen
• A function can be passed to
another function as an
argument.

• A function can be returned by
another function.

• A function can be assigned to a
variable (a function expression)

Scope
• Scope (범위) of a function
is deﬁned by the portion
encompassed by braces
(block).

• Each function has its
own scope.

Nested Scope
• A function can have another function
within itself, which is called a nested
function.

• Function inside can access values in
the function outside. 
(i.e. manipulate them without initializing)

• This means that if a variable is assigned
a diﬀerent value within the inner
function, it changes the value for the
outer function as well.

Nested Scope
• However, if a variable is first initialized
and changed value within the inner
function, that change only takes effect
within that inner function.

• In other words, if the value in the outer
function's scope should not be changed,

1) Initialize the variable

2) Use a different variable name

Nested Scope
• If the outer function does not
directly call the inner function (i.e.
only returns the "function object"),
the latter should be called together
when the outer is called such as: 
name()();
• To put simply, since the return
value of outer() is inner,
outer()() can be understood as
outer() + inner().

Multiple-Nested Scope
• Characteristics of nested scope apply to more-than-double-nested scope.

• The below two have the same results, but diﬀerent approaches to nested
function structure.

Global Scope
• Scope outside of all functions is
called global scope.

• Global scope acts like a "global
function" that is deﬁned and
executed automatically by
JavaScript interpreter itself.

• Characteristics of the global scope
is identical to the outermost function
in the nested function structure.

Closure
• A value/variable deﬁned in the outside function can be accessed
by the inside function(s) without being explicitly deﬁned in the
inside function.

• The reverse does not hold (i.e. the outer function cannot access
values of the inner function).
Closure Not a closure

Closure
• Closure makes programming easier by allowing variables to passed to inner
functions without precise declarations.

• Without closure, parameters/arguments throughout the entirety of the function
need to be matched.
Using closure Not using closure

Stack
• In JavaScript, information is stored in
memory as a "stack."

• LIFO (last-in, first-out): value stored
last is taken out first

• Put very very simply, values are
"pushed" into stack when defined
within a function, and "popped" from
stack when the function returns or
finishes running.
https://upload.wikimedia.org/wikipedia/commons/b/b4/Lifo_stack.png

How Stack Works
• outer() is called and pushed to the stack.

• inner() is called and pushed to the stack.

• inner() is executed, returns, and popped
from the stack.

• outer() is executed, returns, and popped
from the stack.

• Stack is emptied at the end.
* Please note that this is NOT actual way stack works; just an illustration

How Stack Works
• outer() is called and pushed to the
stack.

• inner() is called and pushed to the
stack.

• inner() is executed, returns, and
popped from the stack.

• outer() is executed, returns, and
popped from the s tack.

• Stack is emptied at the end.
* Please note that this is NOT actual way stack works; just an illustration

Recursion
• Calling the function within itself is called recursion (재귀).

• Recursion is an "elegant" way to code, but is ineﬃcient because
it uses much more memory than non-recursive way.

• Example: the Fibonacci sequence

• 1 + 1 + 2 + 3 + 5 + 8 + ...

• Try fib(1000).  
How does it work?

Stack Overflow
• Since memory is limited, size of stack
is limited as well. If a program creates
stack larger than the memory space, it
can no longer run. This is called stack
overflow.

• Recursion is the easiest way to cause
stack overflow, if it is not stopped at a
proper time.

• Stack Overflow is also the name of the
most popular developer community.  
(뇌가 stack overflow 되었을 때 찾아오라는
뜻?)

Intro to JavaScript - Week 2: Function

Recommended

More Related Content

What's hot (20)

Similar to Intro to JavaScript - Week 2: Function (20)

Recently uploaded (20)

Intro to JavaScript - Week 2: Function