WEB2 - JavaScript

함수

함수의 기본

소스코드

변경사항

 

 

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

소스코드

변경사항

 

 

리턴

소스코드

변경사항

 

 

댓글

댓글 본문
작성자
비밀번호
  1. 사차원
    리턴에서
    <script>
    function sum2(left, right => 저는 여기에 2랑 3을 직접 넣고 아래에서 sum2(2,3)을 빼면 안되나 생각해봤습니다.
    결론은 안되더라구요... 그래서 변수를 넣어보자라고 생각하고 ){ 이 부분에다가 var sum2 =sum2(2,3) 했는데 역시 안되더라구요...
    return left+right;
    }
    document.write(sum2(2,3)+'<br>');
    document.write('<div style="color:red">'+sum2(2,3)+'</div>');
    document.write('<div style="font-size:3rem;">'+sum2(2,3)+'</div>');
    </script>

    그래서 바깥에다가 변수를 빼봤습니다.

    <script>
    function sum2(left, right){
    return left+right;
    }
    *변수 입력부분 ==>var sum2 =sum2(2,3)
    document.write(sum2+'<br>');
    document.write('<div style="color:red">'+sum2+'</div>');
    document.write('<div style="font-size:3rem;">'+sum2+'</div>');
    </script>

    이렇게 하니 되긴하던데... 다른 방법이 있는 건가요? 아님 제가 한 방식도 괜찮은 방법인가요??
  2. didQk
    완료!
  3. 2019-02-20 완료
  4. 우도순
    완료
  5. 발헤
    감사합니다.완료. 입력과 출력
  6. 함가죠
    완료 감사합니다:)
  7. 지미츄
    완료 감사해여
  8. 이수하
    완료
  9. gravity251
    완료
  10. Aimhee
    완료
  11. 나도개발자할래요
    수업을 듣고 몇가지 추측을 해봤습니다. 의견 부탁드립니다.

    function sumReturn(left, right){
    return left+right;
    }
    function sumWrite(left, right){
    document.write(left+right);
    }

    document.write(typeof sumReturn(2,3)); // number
    document.write(typeof sumWrite(2,3)); // 5undefined

    document.write(sumReturn(2,3)+10); // 15
    document.write(sumWrite(2,3)+10); // 5NaN


    typeof 명령어로 return을 준 함수(sumReturn)와 document.write로 바로 출력한 함수(sumWrite)의 값의 type을 출력해보았습니다.
    typeof sumReturn(2,3)은 number가 출력되고, typeof sumWrite(2,3)는 5undefined가 출력되네요.

    위에서 정의한 sumReturn 함수는 return을 정의해주었으므로 표현식 sumReturn(2,3)에 따른 '결과값', 5가 정의됩니다.
    반대로 return을 정의해주지 않고 바로 document.write를 사용한 sumWrite 함수는 이미 이 함수 안에서 연산한 2+3 값을 '출력한 것'입니다.(연산값을 출력한 것이니 number 타입이 아닐까 생각했지만 이미 undefined라고 나왔으니, document.write 출력값의 타입은 undefined가 되는 것으로 가정하겠습니다)

    이에 document.write(sumReturn(2,3)+10); 은 5(number)+10(number)이 되어 연산값인 15를 document.write로 출력합니다.
    하지만 document.write(sumWrite(2,3)+10); 는 document.write(document.write(2+3); + 10); 로 해석되고, document.write로 출력한 값을 또 document.write로 출력하는 꼴이 됩니다.
    앞서 document.write로 출력된 값의 type은 undefined가 되는 것으로 가정했으니, 이 함수는 5(undefined) + 10(number)가 되어 연산이 불가능해지죠. 따라서 5(undefined)는 출력이 되지만, +10은 연산이 불가능하다는 표시인 NaN으로 출력되어 document.write(sumWrite(2,3)+10);의 출력값은 5NaN이 됩니다.

    결론은 "document.write()의 출력값의 type이 undefined라서 오류가 발생한다" 입니다.
    var sumWrite = sumWrite(2,3); 처럼 document.write를 사용한 함수를 변수로 정의해준 뒤 sumWrite + 10을 한다면 number 타입의 15가 출력되지 않을까요?(해보니까 안되네요... var로 변수 지정을 해줘도 그 변수 또한 undefined 타입을 가집니다. 어차피 인자값에 대한 변수를 하나하나 지정해주면 펑션을 여러개 만드는거랑 다를 게 없겠죠?)

    이상 추측이었습니다. 생코 학습자분들께 도움이 되었으면 하네요. 저도 여러모로 return에 대해 생각할 수 있는 기회가 되었습니다. 고수님들의 지적 부탁드립니다.
  12. 최종민
    저는 그런 경우에 저장하고 우측 화면에 뜬 페이지 창을 닫았다가 다시 열면 글씨 색이 반영되더라구요,, 정확한 해결책인지는 모르겠지만요 ㅎㅎ
    대화보기
    • 노남
      최종민님 감사합니다!!^^ 글씨 색이 같아지니까 훨씬 눈에 잘 들어오네요. 그런데 혹시 하나만 더 여쭤봐도 될까요. 저는 function sum 이렇게 치면 이고잉님처럼 바로 색이 반영이 안되고 그냥 흰색인데요. 혹시 어떻게 하면 되는지 아시면 말씀부탁드립니다.
      대화보기
      • 최종민
        안녕하세요. File > Setting > Themes에서 'One Dark'를 선택하시면 이고잉님 동영상과 같이 글씨 색이 나와요~
        대화보기
        • return에 대한 이해도가 부족했는데 글보고 이해가 되네요. 정보 감사합니다
          대화보기
          • 노남
            혹시 현재 이고잉님이 쓰고계시는 아톰 테마가 뭔지 알 수있을까요? 글씨색이 이고잉님처럼 이쁘게 나오질 않아서요..
          • 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 감사합니다!
                          • JN87
                            180210 감사합니다!
                          • BY Chin
                            감사합니다
                          • PassionOfStudy
                            << 2018-01-20 - 3일차 _두 번째 강의 >> --> 완료!


                            함수의 정의, 함수의 기능, 함수의 매개변수와 인자, 함수의 리턴값
                            잘 듣고 갑니다~ ^_^
                          • Fiat
                            감사합니다~
                          • 코드다
                            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>' 의 형태로 동작합니다.
                            대화보기
                            버전 관리
                            egoing
                            현재 버전
                            선택 버전
                            graphittie 자세히 보기