WEB2 - JavaScript

함수

함수의 기본

소스코드

변경사항

 

 

매개변수(parameter)와 인자(argument)

소스코드

변경사항

 

 

리턴

소스코드

변경사항

 

 

댓글

댓글 본문
작성자
비밀번호
  1. console.log
    function sum(left, right){
     document.write(left+right);
    }
    sum(2,3) + 2;

    실행 시킨 결과, 크롬에서 오류는 안나고 뒤에 "+2"가 실행이 되지 않네요!


    function sum2(left, right){
     return left + right;
    }
    document.write(sum2(3,4) + 2);

    위의 코드를 실행시키면 "9" 결과갑이 잘 나옵니다!
    return 개념을 잘 잡아주셔서 감사합니다 :)
    대화보기
    • 돼지천재
      감사합니다.
    • 카페산
      document.write 는 HTML(docuemtn)로 쓰여져(write) 브라우저에게 전달되는 것이고
      return은 단지 <script> 레벨내에서만 유효한 값이라고 생각됩니다.
      대화보기
      • LuiGee
        음 제가 document.write와 return의 차이를 여기서의 예시를 바탕으로 깨달은 대로 써보자면

        document.write는 '너희가 뭔지 이야기해줘'라는 뜻이고 그래서 sum(2,3)를 쓰면 2랑 3이 '우리는 합치면 5가 돼요'하고 말해주는 거죠.

        return은 '너희 이렇게 되어라'하는 거고 sum2(2,3)을 쓰면 2랑 3이 합체해서 5가 된 채로 가만히 있는거예요.

        그래서 sum2(2,3)의 결과를 보려면 document.write(sum2(2,3))이라고 써줘야 그제서야 sum2(2,3)이 '저는 5라는 숫자에요'라고 말하는 거죠. return 자체에는 '너희 누군지 말해봐'라는 기능이 없으니까요.
      • 창민
        그냥 funtion two(left,right){documet.write(left+right)};
        해 가지고 two; 이렇게 한 거랑

        funtion sum(left,right){ return left + right;} 이거랑 뭐가 다른지 모르겟네요.
      • ㅈㅈㅎ
        그냥 언어에 대해서 이해를 못하신거같네요 제생각엔 c언어 같은 다른언어하나를 공부하시는게 좋을거같네요 . 그리고 return 이 없는 함수랑 숫자를 return해주는 함수는 엄연히 다른 타입이고요 데이터타입이 있는 언어에서는 void 와 int형으로 서로 다른데이터 타입이지요. 그리고 저도 c ,c++, java 를 공부하고 지금 데이터타입이 없는 언어는 지금 javascript 가 처음인데 ,, 데이터타입이 없는 이런 언어는 데이터타입이 하나로 전부 같다고 생각할게 아니라 유동적으로 알아서 데이터타입을 골라준다고 생각하는게 좋으실거같네요 .그리고.. 질문을 너무 애매모호하게 하셔서 정확히 몰 궁금해 하시는지를 모르겠네요
        대화보기
        • TidySylveon
          저기까진 잘 모르겠군요. 저도 이제 배우는지라..
          그런데 이 프로그래밍 코드란게 서로 얽혀있고 복잡한 관계라 한번에 다 알기는 힘든 것 같아요.

          데이터 타입이란것도 var 같은 간단한 것도 있지만, null이나 NaN같이 무조건 뒤에 가야만 이해할 수 있는 것도 있기 때문에..

          그림을 잘 그릴때도 원하는대로 한번에 딱! 그리는게 아니라 하다보면서 점차 잘 그려지듯이..
          프로그래밍 언어도 한번에 다하는 것 보다 일단 해보고 나중에 조금씩 배워 나가야 되는것 같아요.
          대화보기
          • 아직은걱정이많은나
            감사합니다 덕분에 제가 더 분명하게 저의 궁금증이 무엇인지 명확해졌습니다.
            그리고 다시 생각해보는 시간을 가질 수 있었습니다.
            그리고 만약 이 댓글을 읽고 혼동이 오신 분들이 있으면 죄송합니다. 혼동하셨다면 그냥 무시해주세요. 다른 것도 할게 많으시니깐요.

            그래도 일단은 return은 출력하기 위해서라고만 생각해야겠습니다.
            밑의 궁금증들을 바탕으로 한번 코드를 해봤습니다. 결론은 return으로만 표현하는게 편하군요 한줄로. 아직도 return이 뭔지 잘은 모르겠지만. https://cafe.naver.com....../42

            1. 분명 같은 숫자이고, 고급 언어이라서 데이터 타입이 임의로 정해져 있다면 그래서 sum( 3,4 )와 10이 만약 같은 데이터 타입이라면 왜 document.write( (sum( 3, 4 ) + 10) 는 document.write( 3 + 4 + 10 )처럼 서로 더해지지가 않는 것인가?

            2. 함수와 변수로도 정해지지 않는 데이터는 더해지지 않는 문법적인 오류가 있는 것인가?

            3. 아니면 함수의 결과 값이랑 데이터가 만약 같은 데이터 타입으로 정해져 있다면 그 둘은 서로 더해지는 것인가?
            대화보기
            • TidySylveon
              <script>
              function sum(left, right){
              document.write(left + right);
              }
              sum(3,4);
              sum(3,4)+6;
              </script>

              이 함수에 document.write가 있어 sum(3,4); 인자를 받으면 "함수 안에서" 바로 7이 출력 됩니다.
              즉, sum(3,4) + 6; 이라고 적으면 sum(3,4); 인자를 주고 "함수 안에서" 7이 출력 된 후
              + 6; 만 남게되어 에러가 발생하게 됩니다.

              <script>
              function sumReturn(a, b){
              return a + b;
              }
              document.write(sumReturn(3,4)+6);
              </script>

              반면 이 함수는 document.write가 없고 return이 있습니다.
              그래서 sumReturn(3,4) 인자를 주면 더한값인 7이 "함수 안에서 출력 되지 않고" return이 되어 sumReturn(3,4) 대신 7이 오게 됩니다.
              그래서 document.write(7+6);이 됩니다.
              대화보기
              • 아직은걱정이많은나
                뭔가 이해 할듯 말듯 한데, 요점은 return을 사용하게 된다면 한 메소드에서 할 분량을 따로 떼내서 역할분담을 할 수 있으므로 실수를 줄 일 수 있는것으로 알아들었는데.
                혹시 (3,4) + 6 이 부분을 코드로 보여주실 수 있을까요?

                참고로 저도 허접하게 뭔가 시도해보긴 해봤습니다.
                https://cafe.naver.com....../42
                대화보기
                • asdqwer123
                  감사합니다.
                • 곤준님
                  덕분에 이해가 되었네요 감사합니다!!
                  대화보기
                  • COOLADE
                    전에 파이썬 수업 받았던거 다 까먹었는줄 알았는데 기억이 새록새록나면서 이부분 이해하고 응용하는데 도움이 되네용 ㅋㅋㅋ
                  • 도전자
                    리턴에 대해 이해 못하신 분들 위해 추가설명 올려봅니다.

                    function sum(left, right){
                    document.write(left+right);
                    }

                    이란 함수가 만들어져 있다고 한다면 sum이란 함수는 'left값과 right를 더한 값을 출력'하는 기능을 가진 함수입니다.

                    따라서 sum()함수를 호출하면 5가 출력되지만, sum()이란 함수 자체가 5란 값을 가지고 있는 것은 아닙니다.

                    그래서 sum()을 이용한 연산, 예를들어 sum(3,4)+6 이란 연산을 수행한다면 7+6의 연산결과가 나오는게 아니라

                    7과 에러코드 하나가 발생합니다.

                    sum()이란 함수를 이용하여 연산을 하고 싶을 경우에는 sum()함수 안에 return값을 부여해 주어야 합니다.
                  • 반컴
                    진짜 리턴 이해가 하나도 안되서 미친듯이 3~4번동안 30분동안 뚫어져라 보고 생각하고 다시 짜보고 했더니 이제야 조금 이해된거 같네요...ㅠㅠ 복잡하고 힘들군요.
                  • metallsk
                    단순한듯 복잡한 내용입니다. 강의 잘 들었습니다.
                  • 리턴은 아직 잘 이해가 안되네요ㅠㅠ 다시 보면서 해야할듯!
                  • 소금돌
                    함수.... 리턴되는 값으로 활용하는 방법
                  • yoonmin
                    함수 시작
                    감사합니다.
                  • 스페이스몽키
                    감사합니다!
                  • jayxwoo
                    잘 들었습니다.
                    쉽게 말해서 리턴은 리턴값을 호출된 곳으로 되돌려 주는 기능을 한다.
                  • 키썬
                    감사감사감사감사감사합니다
                  • 상상예찬
                    김예찬 배재영
                  • 뿌리링
                    리턴 부분이 어렵네요ㅋㅋㅋㅠㅠ 천천히 복습해봐야겠습니다..
                  • 이상봉
                    웹 1 부터 정주행 하고 있는데 슬슬 과부하가 걸리네요
                    특히 리턴 부분이 아찔합니다

                    그래도 생활코딩을 알게되지 못했더라면 이 스트레스 받을 기회 조차 없었을 거라 생각하고 끝까지 가보겠습니다.
                    감사합니다.

                    여담이지만, 이고잉님께서 코드 입력할때 들리는 타자 소리가 정말 청아 하네요
                    특히 엔터 누르실때는 듣는 저마저 속 시원한 것 같습니다.
                  • 라울
                    감사합니다!
                  • Lee Ho Yeon
                    음...머리가 펑 하고 터졌습니다. 오늘은 여기까지만..흑흑 ㅠㅠ 내일 다시 복습해야겠네요.
                  • Jay2swag
                    정말 감사드립니다.
                  • Mingi Son
                    180214 감사합니다!
                  • 180210 감사합니다!
                  • BY Chin
                    감사합니다
                  • PassionOfStudy
                    << 2018-01-20 - 3일차 _두 번째 강의 >> --> 완료!


                    함수의 정의, 함수의 기능, 함수의 매개변수와 인자, 함수의 리턴값
                    잘 듣고 갑니다~ ^_^
                  • 감사합니다~
                  • 코드다
                    document.write('<div style="color:red">' + (left+right) + '</div><br>'); 해 보시면 됩니다.
                    스트링 + 수 는 스트링 으로 바뀌어요.
                    '<div style="color:red">'+2 는 '<div style="color:red">2' 가 되고 다시 + 3 하면
                    '<div style="color:red">23' 이 됩니다.
                    그런데 (left+right)로 괄호를 치면 이것이 먼저 계산되어 (2+3)은 5가 되고
                    '<div style="color:red">' + 5 + '</div><br>' 의 형태로 동작합니다.
                    대화보기
                    • 부건혁
                      function sumColorRed(left, right){
                      document.write('<div style="color:red">'+left+right+'</div><br>');
                      } 이 코드를 실행하면 빨간색으로 5가 나와야 되는거 아닌가요?
                      왜 빨간색으로 23이 나오는 건가요?
                    • SanFrancisco
                      <script src="js파일 주소"></script>라고 쓰시면 될 것 같아요
                      대화보기
                      • 파일로 먼저 따로 저장후에

                        파일 경로를

                        <script src="저장된 파일경로"></script>

                        태그로 문서에 포함 시키면 작동합니다.

                        파일이 문서에 잘 포함되는지는 크롬 개발자 도구 에서 확인 할수 있습니다.
                        대화보기
                        • js공부중
                          js 파일로 따로 스크립트를 저장 후, 저 함수를 불러오려면 어떻게 해야 하나요?
                        • Jupi
                          -정리- 아주 길 것으로 예상

                          - 함수를 객체에서는 메소드라 부를 때도 있다.

                          - 함수를 정의하는 법
                          function ***(){
                          ~~~~;
                          } (여기서 세미콜론 필요가 없는 듯 한데 왜..?)

                          - 위의 함수를 출력하는 법
                          ***();

                          - Parameter(매개변수), argument(인자)를 쓰는 이유
                          위의 기본적인 함수에서는 단 하나의 바뀌지 않는 출력값만 가졌지만,
                          parameter, argument를 사용하면,
                          입력값이 무엇인지에 따라 다른 결과를 출력할 수 있다.

                          간단히 말해 버튼 하나밖에 없는 자판기가
                          버튼이 무수히 많아진 것이다.

                          function sum(**, ##){
                          document.write(** + ##);
                          }
                          sum($, %);

                          **, ## 가 parameter(매개변수).
                          $,% 가 argument(인자).

                          - 표현식(expression)
                          1+1 = 2 일때, 1+1은 2의 "표현식"이다.

                          - Return (출력 또는 출력값?)
                          function sum(*, **){
                          document.write(* + ** + '<br>');
                          }
                          sum($,$);
                          위와 같은 식이라면,
                          $ 과 $을 더하는 식에 개행을 하는 <br>이 붙고, 화면으로 출력하는 document.write();도 붙어 있다.
                          즉, '순수하게' 더하기를 하는 '함수'가 아니다.

                          만약 밑과 같이 실행한다면,
                          function sum(*, **){
                          return * + **;
                          }
                          sum(2,3);
                          그 결과는 화면에 출력되지는 않지만, 그 값이 5라는 것을 알 수 있고,
                          sum(2, 3)은 5의 표현식 이라는 것을 알 수 있다.
                          (이것 때문에 표현식을 가르쳐 주신 게 확실한지 모르겠네요 ;;)

                          그 return 된 5는, 아무런 코드도 적용되지 않아서
                          다양한 맥락에서 사용할 수 있는 자유도를 준다.

                          (그저 리턴값을 쓰는 것과 안 쓰는 것의 차이는,
                          함수에 여러 코드를 집어넣어 바로바로 쓰고 싶을 때와,
                          그 계산된 순수한 값을 여러 가지로 가공 시킬 때이지 않을까 하고 생각합니다.)

                          ## Javascript 세미콜론(;) 가이드
                          https://goo.gl/tztVfL

                          ## 함수 표현식 과 선언식
                          https://joshua1988.github.io......ns/
                        버전 관리
                        egoing
                        현재 버전
                        선택 버전
                        graphittie 자세히 보기