Intro to Programming with JavaScript Seminar, Fall 2017 semester Week 2: Function Led by Jeongbae Oh, in conjunction with YCC (Yonsei Computer Club) @ Yonsei University This seminar intends to introduce newcomers to programming using JavaScript, one of the most versatile languages of the modern world.

1. Introduction to Programming
with JavaScript
Week 2: Function
Jeongbae Oh
YCC JavaScript Seminar
2017.09.25

2. Function
• The most important part of JavaScript
• A "mini program" within the program
• Basis of the functional programming paradigm

3. 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 (반환값, 리턴값)

4. 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 (익명 함수).

5. 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.

6. 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.

7. return
• A function finishes running with return.
• Anything after return is not executed.
• Even without return, function finishes running at the end.
• Value after return becomes the return value of the function.
• Return value is not necessary.

8. 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

9. 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

10. 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)

11. Scope
• Scope (범위) of a function
is defined by the portion
encompassed by braces
(block).
• Each function has its
own scope.

12. 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 different value within the inner
function, it changes the value for the
outer function as well.

13. 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

14. 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().

15. Multiple-Nested Scope
• Characteristics of nested scope apply to more-than-double-nested scope.
• The below two have the same results, but different approaches to nested
function structure.

16. Global Scope
• Scope outside of all functions is
called global scope.
• Global scope acts like a "global
function" that is defined and
executed automatically by
JavaScript interpreter itself.
• Characteristics of the global scope
is identical to the outermost function
in the nested function structure.

17. Closure
• A value/variable defined in the outside function can be accessed
by the inside function(s) without being explicitly defined 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

18. 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

19. 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

20. 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

21. 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

22. Recursion
• Calling the function within itself is called recursion (재귀).
• Recursion is an "elegant" way to code, but is inefficient 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?

23. 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 되었을 때 찾아오라는
뜻?)