1 00:00:00,000 --> 00:00:09,324 [MUSIC] 2 00:00:09,324 --> 00:00:13,460 Hi everyone, Guil here, a developer and JavaScript instructor at Treehouse. 3 00:00:13,460 --> 00:00:17,350 I'm happy that you've joined me here to continue your JavaScript learning journey. 4 00:00:17,350 --> 00:00:19,940 So far, you've explored many of the key concepts and 5 00:00:19,940 --> 00:00:22,080 features of the JavaScript language. 6 00:00:22,080 --> 00:00:26,110 You're getting more familiar with the syntax, as well as working with variables 7 00:00:26,110 --> 00:00:29,300 built in data types and objects and conditional statements. 8 00:00:29,300 --> 00:00:32,850 In this course, you'll continue to build your JavaScript skills by learning another 9 00:00:32,850 --> 00:00:36,170 fundamental building block in JavaScript, functions. 10 00:00:36,170 --> 00:00:38,450 Functions are at the heart of how JavaScript or 11 00:00:38,450 --> 00:00:40,460 any programming language works. 12 00:00:40,460 --> 00:00:44,820 At its simplest, a function is a set of instructions that you want to run over and 13 00:00:44,820 --> 00:00:46,200 over again. 14 00:00:46,200 --> 00:00:50,770 For example, imagine that one magical morning an assistant showed up 15 00:00:50,770 --> 00:00:54,540 to take care of some of the tasks that take up extra time in your day. 16 00:00:54,540 --> 00:00:57,710 One of those tasks is getting coffee from your favorite coffee shop 17 00:00:57,710 --> 00:00:59,290 that's a few blocks away. 18 00:00:59,290 --> 00:01:03,090 It's your assistant's first day, so you provide them detailed instructions on how 19 00:01:03,090 --> 00:01:06,110 to get to the coffee shop and what drink to order. 20 00:01:06,110 --> 00:01:09,500 Keep in mind that your assistant doesn't actually get you anything yet. 21 00:01:09,500 --> 00:01:12,240 They just keep the instructions in memory. 22 00:01:12,240 --> 00:01:16,770 A little bit later in the day, at around the time you usually go out to get coffee, 23 00:01:16,770 --> 00:01:19,680 you say to your assistant go to the coffee shop and 24 00:01:19,680 --> 00:01:22,530 your assistant very kindly goes off to get your coffee. 25 00:01:23,940 --> 00:01:27,150 Since you already gave your assistant instructions earlier, 26 00:01:27,150 --> 00:01:31,300 you don't have to tell them how to get to the coffee shop or even what to order. 27 00:01:31,300 --> 00:01:35,640 From then on, anytime you want coffee you can just say go to the coffee shop and 28 00:01:35,640 --> 00:01:37,590 your assistant returns with your drink. 29 00:01:37,590 --> 00:01:41,060 In fact, you can say go to the coffee shop over and over again and 30 00:01:41,060 --> 00:01:43,620 each time you'll get a new cup of coffee. 31 00:01:43,620 --> 00:01:46,380 Later that day, you might even provide your assistant different sets of 32 00:01:46,380 --> 00:01:50,650 instructions for, say, doing the laundry, washing dishes, or feeding the cat. 33 00:01:50,650 --> 00:01:54,290 To get a test done, you just call out a command like do the laundry. 34 00:01:54,290 --> 00:01:55,750 Okay, now let's get back to reality. 35 00:01:56,920 --> 00:01:59,690 JavaScript functions work in much the same way. 36 00:01:59,690 --> 00:02:01,900 They let you group a series of statements or 37 00:02:01,900 --> 00:02:06,270 instructions together to perform a specific task needed by the program. 38 00:02:06,270 --> 00:02:08,230 Let's get into how they work. 39 00:02:08,230 --> 00:02:10,810 You start by declaring the function, 40 00:02:10,810 --> 00:02:13,850 that's like you providing instructions to your assistant. 41 00:02:13,850 --> 00:02:17,350 In JavaScript you use the function keyword, followed by a name for 42 00:02:17,350 --> 00:02:21,610 the function, a pair of parentheses, and a pair of curly braces. 43 00:02:21,610 --> 00:02:25,700 You can name your functions whatever you'd like as long as you follow the same rules 44 00:02:25,700 --> 00:02:27,330 for naming variables. 45 00:02:27,330 --> 00:02:31,690 For example, function names can only be made up of letters, numbers, 46 00:02:31,690 --> 00:02:34,890 the underscore, and dollar sign characters, but they can't start with 47 00:02:34,890 --> 00:02:39,100 a number and you can't use spaces or other punctuation in the name. 48 00:02:39,100 --> 00:02:41,720 Following the name, you place a set of parentheses. 49 00:02:41,720 --> 00:02:44,040 This is one way you can identify functions. 50 00:02:44,040 --> 00:02:46,210 Whenever you see parenthesis following a name, 51 00:02:46,210 --> 00:02:47,700 you know you're dealing with a function. 52 00:02:48,980 --> 00:02:53,540 After the parentheses comes a pair of curly braces which form a code block. 53 00:02:53,540 --> 00:02:56,450 You learned about code blocks in an earlier course when you wrote conditional 54 00:02:56,450 --> 00:02:57,360 statements. 55 00:02:57,360 --> 00:02:59,450 For instance, in a conditional statement, 56 00:02:59,450 --> 00:03:04,310 you use curly braces to create a block of code that runs when a condition is true. 57 00:03:04,310 --> 00:03:06,170 Also, like a conditional statement, 58 00:03:06,170 --> 00:03:08,280 there's no semicolon after the final brace. 59 00:03:08,280 --> 00:03:09,730 Now don't worry about the details. 60 00:03:09,730 --> 00:03:13,140 Just remember to leave off a semicolon after the final brace. 61 00:03:13,140 --> 00:03:16,470 In a function, the JavaScript you place inside the curly braces 62 00:03:16,470 --> 00:03:18,750 runs whenever the program activates the function. 63 00:03:19,890 --> 00:03:23,800 To activate the programming inside a function you call the function, 64 00:03:23,800 --> 00:03:27,760 which is just like you saying go to the coffee shop to your assistant. 65 00:03:27,760 --> 00:03:30,450 To call a function and run the code inside of it, 66 00:03:30,450 --> 00:03:33,380 you write the name of the function followed by a set of parentheses. 67 00:03:34,880 --> 00:03:36,520 The parentheses are important. 68 00:03:36,520 --> 00:03:40,130 They call the function and activate its programming. 69 00:03:40,130 --> 00:03:44,430 When programming you'll often need to perform the same tasks in different places 70 00:03:44,430 --> 00:03:45,560 of the program. 71 00:03:45,560 --> 00:03:49,240 For example, check if a user correctly filled out a form field or 72 00:03:49,240 --> 00:03:52,190 display a specific message to the user. 73 00:03:52,190 --> 00:03:54,910 Imagine having to repeat or retype the instructions for 74 00:03:54,910 --> 00:03:56,720 a task everywhere you needed them. 75 00:03:56,720 --> 00:03:59,380 That would make your code messy and unwieldy. 76 00:03:59,380 --> 00:04:03,130 Functions provide a way to efficiently execute code that you want to repeat 77 00:04:03,130 --> 00:04:04,410 again and again. 78 00:04:04,410 --> 00:04:07,900 Then you can call that code whenever you need it using a single short command.