Return to Video

05-15 Return_Statements

  • 0:00 - 0:02
    멋진 걸 보여드릴게요
  • 0:02 - 0:06
    크롬 도구 탭에서 웹사이트 소스 코드를 손쉽게 열어볼 수 있는데요
  • 0:06 - 0:10
    Cmd+Option+I를 눌러 개발자 도구를 열어서
  • 0:11 - 0:14
    sources라는 탭에 들어오면
  • 0:15 - 0:20
    웹사이트의 소스 코드를 볼 수 있어요
  • 0:20 - 0:23
    Index.html은 꽤 익숙하죠?
  • 0:23 - 0:29
    자바스크립트를 열면 helper.js, jQuery 그리고 resumeBuilder.js가 보이네요
  • 0:29 - 0:31
    helper.js를 열어봅시다
  • 0:31 - 0:32
    보이시죠?
  • 0:32 - 0:37
    화면을 넓히고 스크롤을 내려볼게요
  • 0:37 - 0:39
    helper.js에는 페이지에 추가하고 싶은
  • 0:39 - 0:42
    html을 가진 문자열이 있어요
  • 0:42 - 0:44
    아래에 함수도 보이네요
  • 0:45 - 0:48
    아래 자바스크립트는 페이지에 있는 지도입니다
  • 0:48 - 0:50
    잠시 후에 다시 돌아올테니
  • 0:50 - 0:53
    지금은 이 줄에 집중해볼게요
  • 0:54 - 0:56
    locationFinder라는 함수에
  • 0:56 - 0:59
    return locations라는 문장이 보이네요
  • 1:00 - 1:02
    return 키워드를 몇 번 본 적 있지만
  • 1:02 - 1:05
    목적을 알아보진 않았죠
  • 1:06 - 1:07
    이건 리턴문이라고 합니다
  • 1:07 - 1:10
    리턴문의 목적은 함수가 값을 되돌려주게 하는 거예요
  • 1:10 - 1:12
    >>무슨 말을 하시는지 알 것 같아요
  • 1:12 - 1:14
    조금만 더 설명해주실래요?
  • 1:14 - 1:16
    >>console.log 기억나세요?
  • 1:16 - 1:18
    console.log는 아무것도 리턴하지 않죠
  • 1:18 - 1:21
    새로운 변수를 만든다고 했을 때
  • 1:21 - 1:26
    var hello=console.log(“Hello!”);을 실행하면 undefined가 나오죠
  • 1:26 - 1:30
    console.log가 실행되어 Hello!를 출력했지만
  • 1:30 - 1:32
    undefined가 나옵니다
  • 1:32 - 1:37
    hello만 입력하고 엔터를 눌러도
  • 1:37 - 1:38
    undefined가 나타나요
  • 1:38 - 1:41
    console.log가 아무것도 리턴하지 않기 때문이죠
  • 1:41 - 1:43
    console.log는 아무것도 리턴하지 않지만
  • 1:43 - 1:46
    다른 대부분의 함수는 값을 리턴하죠
  • 1:46 - 1:48
    >>스트링 메소드 같이요?
  • 1:48 - 1:51
    >>맞아요 string.split을 살펴볼까요?
  • 1:51 - 1:55
    먼저 myString 변수를 만들고
  • 1:55 - 1:58
    “This is my favorite string!”이라는 값을 주었어요
  • 1:58 - 2:01
    문자열을 공백으로 분리하면
  • 2:01 - 2:05
    각각의 단어를 얻게 되는 거죠
  • 2:05 - 2:07
    이 문자열에 실행될 것이고
  • 2:07 - 2:10
    이 변수를 기반으로 분리할 거예요
  • 2:10 - 2:12
    이 변수는 공백 1개이므로
  • 2:12 - 2:16
    단어 배열은 myString에서 가져와야겠군요
  • 2:16 - 2:20
    myArray에 저장하고 엔터를 눌러볼까요
  • 2:20 - 2:24
    됐네요 myArray에 접근하면
    문자열 배열을 볼 수 있어요
  • 2:24 - 2:26
    This/is/my/favorite/string!
  • 2:26 - 2:29
    각 단어는 myString에서 왔습니다
  • 2:29 - 2:33
    .split이 myArray와 같은 문자열의 배열을
  • 2:33 - 2:35
    리턴했다고 할 수 있죠
  • 2:35 - 2:36
    >>알겠어요
  • 2:36 - 2:39
    값으로 바꾸고 싶은 함수를 쓸 때는
  • 2:39 - 2:41
    함수가 반드시 값을 리턴해줘야 합니다
  • 2:41 - 2:43
    이 함수를 전체적으로 보면
  • 2:43 - 2:46
    변수는 입력 값이고
  • 2:46 - 2:49
    함수는 변수를 이용해 실제 문자열에
  • 2:49 - 2:53
    어떤 것을 실행하고 결괏값을 주죠
  • 2:54 - 2:57
    >>이력서의 JSON 데이터와 그 안의 위치에 대해
    생각해봅시다
  • 2:57 - 3:03
    이 퀴즈에서 locationizer 함수를 써보세요
  • 3:03 - 3:05
    work 객체에 들어갈 거예요
  • 3:05 - 3:10
    locationizer는 work 객체에서
    위치 값 배열을 리턴할 거예요
  • 3:10 - 3:13
    work 객체에는 과거의 직업이 모두 포함되어있고
  • 3:13 - 3:16
    각각에는 관련 위치가 있을 거예요
  • 3:17 - 3:20
    그 위치들의 배열을 리턴시켜보세요
  • 3:20 - 3:23
    값을 배열의 끝에 덧붙여줄
  • 3:23 - 3:26
    array.push 메소드가 유용할 겁니다
  • 3:26 - 3:27
    퀴즈를 보시면
  • 3:27 - 3:30
    코드가 반복될 JSON 예시가 있을 거예요
  • 3:30 - 3:31
    행운을 빌어요
タイトル:
05-15 Return_Statements
概説:

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

Korean subtitles

改訂 Compare revisions