Intro to JavaScript - Week 2: Function
0 likes•143 views
This document covers the fundamentals of JavaScript functions, including their definitions, parameters, return values, and invocation methods. It discusses various concepts such as scope, closure, nested functions, recursion, and the stack's role in memory management. Additionally, it highlights best practices in naming conventions and the implications of stack overflow in programming.
Intro to JavaScript - Week 2: Function
- 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 되었을 때 찾아오라는 뜻?)