Understanding Functions in JavaScript

1. UNIT 3 – LESSON 5 Creating Functions

2. VOCABULARY ALERT!Abstraction - Pulling out specific differences to make one solution work for multiple problems.Function - A piece of code that you can easily call over and over again.camelCase – a function name that starts with a small letter, then shows the next word with a capital letter, but no spaces

3. INTRODUCED CODE

4. Let’s talk about functions.When you decide to write a function in JavaScript it's often because you recognize a pattern - a bit of code that you might need to use later, at a different point in the program. Remember with text-compression in Unit 2 you looked for phrases or letters that repeated. https://youtu.be/jofNR_WkoCEWhen you put that phrase in the dictionary you were defining a pattern to reuse. Then all occurrences of that pattern were replaced in the text. So if the compressed version looked like this:☆listen_to★rain_☆on★window_paneEach special character was referring to a stored pattern in the dictionary.The dictionary, of course, is like the set of functions you define. Once you define it, you don't need to define it again. Calling a function is like using the special character in the compressed text - you want to call on a stored definition of something.

5. PURPOSE:In this lesson, you will learn to define and call procedures (in JavaScript, procedures are called “functions”) to create and give a name to a group of commands for easy and repeated use in your code.

6. WHY USE FUNCTIONS?these functions can make YOUR code clearer or more concise.

7. To extend their functionality, nearly all programming languages provide a means for defining and calling new commands which programmers design to fit the needs of the problems they are trying to solve.Defining functions is an example of how computer scientists use abstraction to solve problems.

8. We need simpler representations of this complex system, like this map (source), to help us reason about and use it. In other words, we need an abstraction.

9. A programmer will design a solution to a small, well-defined portion of the task and then give a name to the associated code. Whenever that problem arises again, the programmer can invoke the new function by name, without having to solve the problem again. 

10. In the previous lesson we created simple turtle drawings using only four commands. At some point you probably wished that more commands were available to you.Describe a command you wanted to be able to use and explain why you wanted to use it.

11. SO YOU MAY HAVE SAID:A command that turns the turtle to the rightA command that moves forward more than one spaceA command that creates a repeated pattern or shapeYou may also just wish for different colors, curved lines, etc.

12. Programming languages will always have some commands that are already defined, but there will be many instances when the exact command we want isn’t available. Today we’re going to start exploring a powerful feature called FUNCTIONS of most programming languages that will allow us to overcome this issue and create commands of our own.

13. EVERYONE IS DOING YOUR OWN WORK IN CODE STUDIO, BUT YOU CAN WORK WITH YOUR PARTNERS TO FIGURE THIS OUT.REMEMBER – WE ARE USING FUNCTIONS AND CALLING THEM OVER AND OVER.

14. YOU NAME FUNCTIONS USING WHAT IS CALLEDcamelCase – this name should make sense to the programmer. The computer doesn’t care what you call it!You cannot start function names with a number. YOU CANNOT START FUNCTION NAMES WITH A NUMBER!!!! YOU CANNOT START FUNCTION NAMES WITH A NUMBER!!!!

15. What are the benefits of being able to define and call functions in a program. Who specifically gets to enjoy those benefits?programs are easier to read and writefunctions remove the need to repeat large chunks of codefunctions break the program into logical chunksThe person programming and any other human reading the program enjoys these benefits.Important to note: functions do not make the program easier (or harder) for the computer to run or understand -- it must still run all of the same commands as before.

16. How is the use of a function an example of abstraction? (College Board Big Idea!)Abstraction is the practice of temporarily forgetting details unnecessary to addressing the problem at hand.Defining and calling functions is another example of how computer scientists use abstraction to solve problems.Once you have written a function that you know works as intended, you can call the function as often as you wish, without worrying about the details or problems you had to solve to get it working.

17. IN CODE STUDIO, FIRST WATCH THIS VIDEO:Intro to Functions TutorialTO LEARN ABOUT MAKING AND USING AND CALLING FUNCTIONS IN JAVASCRIPT (ABOUT 4 ½ MINUTES)

18. DO THE PROGRAMS IN CODE STUDIO, WATCHING THAT YOU MAKE 4 FUNCTIONS.MAKE FUNCTION NAMES THAT MAKE SENSEI WILL CHECK YOUR SCREEN AND YOUR CODE WHEN YOU FINISH.You have homework!

19. Assessing Your Programs – here’s what I am looking for:The program draws the diamond.The program defines four functions: right(), drawStep(), drawSide(), and drawDiamond(). The names are less important than the existence of four functions with this functionality.The program makes a single call to drawDiamond().The program looks clean and organized.