Return to Video

Return Statements - JavaScript Basics

  • 0:00 - 0:02
    Let me show you something cool.
  • 0:02 - 0:06
    In Chrome tab tools we can easily open up the source code for a website.
  • 0:06 - 0:10
    All we need to do is open up DevTools which I will be doing by Cmd+Option+I.
  • 0:11 - 0:12
    And then we'll go to the sources pane.
  • 0:15 - 0:16
    Here, in sources,
  • 0:16 - 0:20
    we can see all of the source code that led to the website we see behind us.
  • 0:20 - 0:24
    So Index.html should look pretty familiar and we can open up javascripts and
  • 0:24 - 0:29
    we can see helper.js, jquery and resumebuilder.js.
  • 0:29 - 0:31
    Let's open up helper.js.
  • 0:31 - 0:32
    Over here we can see it.
  • 0:32 - 0:37
    Lets give ourselves a little more room, and I'm going to scroll down.
  • 0:37 - 0:39
    Inside helperjs, we've got all of the strings,
  • 0:39 - 0:42
    containing the html we want to add to the page.
  • 0:42 - 0:44
    And we can find some functions down at the bottom.
  • 0:45 - 0:48
    This job script down here is actually creating the map that we see on the page,
  • 0:48 - 0:50
    but there'll be more on that in a little bit.
  • 0:50 - 0:53
    For right now, let's pay attention to this line right here.
  • 0:54 - 0:56
    Inside this function called locationFinder,
  • 0:56 - 0:59
    we see this statement that says return locations.
  • 1:00 - 1:02
    We've seen this return keyword a few times so
  • 1:02 - 1:04
    far, but we haven't really delved into it's purpose yet.
  • 1:06 - 1:07
    It's called a return statement, and
  • 1:07 - 1:10
    its purpose is to make the function give back a value.
  • 1:10 - 1:12
    >> I think I know what you're getting at.
  • 1:12 - 1:14
    Won't you explain it a bit more.
  • 1:14 - 1:16
    >> Well, remember console.log?
  • 1:16 - 1:19
    It doesn't return anything, which means if we were to create a new variable,
  • 1:19 - 1:21
    like this.
  • 1:21 - 1:26
    Var hello equals console dot log hello will get undefined when we try to run it.
  • 1:26 - 1:28
    We wee that console dot log worked and
  • 1:28 - 1:32
    printed hello, but then we see this undefined below it.
  • 1:32 - 1:35
    If we try to examine the variable later by just typing out hello and
  • 1:35 - 1:38
    pressing enter, we see undefined.
  • 1:38 - 1:41
    That's because console dot log didn't return anything,
  • 1:41 - 1:42
    it didn't give anything back.
  • 1:43 - 1:46
    However, most functions actually do return values.
  • 1:46 - 1:48
    >> Like a lot of string methods?
  • 1:48 - 1:51
    >> Yeah, let's look at string dot split.
  • 1:51 - 1:53
    First we'll create a string like this one.
  • 1:53 - 1:55
    I've created a string called myString and
  • 1:55 - 1:57
    set it equal to, This is my favorite string!
  • 1:57 - 2:01
    Then we are going to go ahead and separate the string on spaces.
  • 2:01 - 2:04
    Meaning that we'll get each word by itself.
  • 2:04 - 2:05
    Split works like so.
  • 2:05 - 2:07
    It's going to act on the string here.
  • 2:07 - 2:09
    And it's going to separate it based on the parameter here.
  • 2:09 - 2:12
    This parameter is just a single space so
  • 2:12 - 2:16
    we should get an array of the words from myString.
  • 2:16 - 2:20
    Let's go ahead and save it to the variable myArray and press enter.
  • 2:20 - 2:24
    Okay, and when we try to access myArray, we see and array of strings.
  • 2:24 - 2:26
    This, is, my, favorite, string.
  • 2:26 - 2:28
    Each of the words from myString before.
  • 2:29 - 2:30
    In other words,
  • 2:30 - 2:35
    split returned an array of strings which is now equal to myArray.
  • 2:35 - 2:36
    >> Oh, I see!
  • 2:36 - 2:39
    When we write functions that we want to turn into a value,
  • 2:39 - 2:41
    they must give us back a value.
  • 2:41 - 2:43
    Looking at this function as a whole.
  • 2:43 - 2:46
    The parameter is the input.
  • 2:46 - 2:51
    The function does something using that parameter on the actual string and
  • 2:51 - 2:52
    then it gives us some sort of value.
  • 2:54 - 2:57
    >> Let's think about the resumes j's on data and all the location in it.
  • 2:57 - 3:03
    For this quiz I want you to write a function called locationizer.
  • 3:03 - 3:05
    It's going to take in the work object.
  • 3:05 - 3:10
    Locationizer should return an array of the locations in your work object.
  • 3:10 - 3:13
    Remember work contains all the jobs that you've had in the past and
  • 3:13 - 3:16
    each one of which should have a location associated with it.
  • 3:17 - 3:20
    We want you to return an array of those locations.
  • 3:20 - 3:23
    You might find it's helpful to use the array.push method which
  • 3:23 - 3:26
    is going to add values to the end of the array.
  • 3:26 - 3:27
    When you get to the quiz,
  • 3:27 - 3:30
    you'll see a sample json that your code will iterate through.
  • 3:30 - 3:30
    Good luck.
タイトル:
Return Statements - JavaScript Basics
概説:

05-15 Return_Statements

more » « less
Video Language:
English
Team:
Udacity
プロジェクト:
ud804 - Javascript Basics
Duration:
03:32

English subtitles

改訂 Compare revisions