O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Intro to JavaScript - Week 2: Function

86 visualizações

Publicada em

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.

Publicada em: Tecnologia
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Intro to JavaScript - Week 2: Function

  1. 1. Introduction to Programming with JavaScript Week 2: Function Jeongbae Oh YCC JavaScript Seminar 2017.09.25
  2. 2. Function • The most important part of JavaScript • A "mini program" within the program • Basis of the functional programming paradigm
  3. 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. 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. 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. 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. 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. 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. 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. 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. 11. Scope • Scope (범위) of a function is defined by the portion encompassed by braces (block). • Each function has its own scope.
  12. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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 되었을 때 찾아오라는 뜻?)