WEB2 - JavaScript

함수

함수의 기본

소스코드

변경사항

 

 

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

소스코드

변경사항

 

 

리턴

4:04초의 결과가 붉은색 5가 아닌 붉은색 23이 된 이유는 자바스크립트는 문자와 숫자를 더하면 숫자를 문자로 간주합니다. +를 덧셈이 아닌 문자 결합 연산자로 사용합니다. 그래서 2와 3이 결합되서 23이 된 것입니다. 아래와 같이  괄호를 사용해서 2와 3을 먼저 더해주셔야 합니다. 졸음강의를 찍은 것 같습니다 ㅠㅠ
document.write('<div style="color:red">'+left+right+'</div><br>');

소스코드

변경사항

 

 

댓글

댓글 본문
작성자
비밀번호
  1. 현우
    완료
  2. 정완료
    완료
  3. 한조
    감사합니다!
  4. 들국화
    감사합니다
  5. JT_brand
    완료
  6. ㅇㅅㅇ
    document.write에 대한 이해와 return에 대한 이해가 부족해서 그런 것 같아요.
    저도 댓글보고서야 알았는데,
    document.write이라는 행위 자체는 html 문서에 결과값을 표시해줘 라는 뜻입니다.
    function sum(a,b) { document.write(a+b);}
    즉 sum(2,3)+2을 한다고해서 5+2가 되는 것이 아니라 2,3이라는 인수는 위의 함수를 거치면서 단순히 html 문서에 5라는 값을 표시해주는 역할만 하게해주는 거죠. 우리가 기대했던 값인 7이 나오게 하려면 위의 sum 함수가 계산한 값을 돌려줘야(return) 비로소 5+2가 되는 것이죠. 참고로 위 함수에서 sum(2,3)+2를 실행하면 5undefined 값이 나오는데 5는 위 document.write을 통해 실현된 것이고 sum(2,3)을 통해 아무 것도 못돌려받은 값(undefined)+2값만 남았기 때문에 결과적으로 undefined 라고 표시된 것 같습니다. web1 부터 시작해서 처음으로 댓글보고 이해했네요.
  7. Student
    다른 함수의 값을 활용하기 위해선 return을 사용하자.
  8. 시원한 정리 감사합니다!
    대화보기
    • eventme
      완료
    • Jacob.K
      리턴에 대해서 계속 이해를 못해서 여러 사이트를 뒤져봤지만 이렇게 잘 설명되어있는 곳은 없었네요 ㅠㅠ
      제가 이해한것을 단편적으로 정리해보자면,

      똑같은 결과값(덧셈)에 다른 효과(색깔, 폰트크기 등)를 주기위해서 함수를 새롭게 만들어 나가는 것 보다,
      처음부터 함수를 만들때 재사용이 가능하도록 return값을 주면 필요(색상의 선택, 폰트크기 등)에 따라 자유롭게 코드를 구현할 수 있다.
      --------------------------------------------------------------------------------------------------------------------------------
      function sum(left, right){
      document.write(left+right);
      }
      sum(2,3); // 5

      function sumColorRed(left, right){
      document.write('<div style = "color:red">+(left+right)+'</div>');
      }
      sub(2,3); // 5 (빨갛게 변한 숫자 5)

      결과값(덧셈)은 같으나 서로다른 효과를 주기위해 새로운 함수를 작성해야 하는 번거러움이 있으며 이는 함수가 더욱 복잡해 졌을때 큰 부담이 될 수 있다.
      --------------------------------------------------------------------------------------------------------------------------------

      function sum2(left, right){
      return left + right;
      }

      document.write(sum2(2,3)); // 5
      document.write('<div style="color:red">'+sum2(2,3)+'</div>'); // 5 (빨갛게 변한 숫자 5)
      document.write('<div style="font-size:3rem;">'+sum2(2,3)+'</div>'); // 5(폰트 사이즈가 커진 숫자5)

      하지만 이처럼 return값을 함수에 포함시키면서 함수의 활용성을 극대화 시킬 수 있으며, 함수의 가장 기본적이면서도 중요한 속성인 '재활용성'을 유지할 수 있다
      -------------------------------------------------------------------------------------------------------------------------------- 앞서 egoing님께서 말씀하신 Expression(표현식)은 함수를 의미한다고 볼 수 있으며, 그 '표현식'을 보편적으로 설정함으로써 '재활용성'을 높이는 것이 함수의 핵심이라는 것을 표현하시기 위한 것으로 보입니다.
    • Weini Jeon
      사실 생활코딩 이전버전도 완독은 했지만 여전히 이해못한 것도 많았는데 새로 업로드하시면서 이전에 비해 훨씬 이해가 쉽습니다. 정말 감사합니다~
    • hyegineer
      완료!! 감사합니당!
      함수가 실행됐을 때 실질적인 값을 반환해주는 고마운 기능인 return~
    • 빅스퀘어
      참 쉬운 강의인 것 같은데.. 댓글들을 보고 깜짝 놀랬습니다.
      혹시나 추가로 궁금하신 분이 있으실까봐.. 보잘 것 없는 지식을 나눔 합니다.

      함수 = function = 기능.
      기능이라는 것은 뭔가 주어진 재료에 작업을 하는 것입니다.
      일상의 예로는 세탁소(세탁하는 기능)에 더러운 빨래(입력 값)를 주면 깨끗한 빨래(결과값)로 만들어 주는 것이죠.

      프로그램에서는 어떤 컴퓨터 연산(연속된 계산, computor라고 부르는 것은 compute(계산하다)하는 기계이기 때문입니다)을 하는 일련의 코드의 집합을 함수라고 합니다. javascript에서는 아래의 방법으로 만들고 사용하는 것 같네요.

      function 함수이름() { ... } -> 정의하는 행위. '선언' 이라고도 합니다.
      함수이름() -> 사용하는 행위. 함수의 '호출'이라고 합니다.

      그런데, 함수가 정해진 연산만 하고 그 값을 되돌려 주는 행위가 없다면, 함수의 존재 이유가 없는 것이죠.

      세탁소에서 세탁만 하고 주인에게 돌려 주지 않으면 누구도 세탁소를 사용하지 않겠죠.

      따라서 함수에서는 작업의 결과물을 되돌려 주는 행위가 필연적으로 수반됩니다.

      작업이 일련의 컴퓨터 연산이라면 그 결과를 되돌려 주는 것이 return 문입니다.
      그리고 return하는 장소는 그 함수를 호출한 그 지점이 됩니다.
      강의 중간에 이고잉님이 expression 이라고 하신 부분이 그 부분입니다.

      1+1 은 2의 표현식에 지나지 않는다. -> sum2( 2, 3) 은 결과적으로 5의 표현식에 지나지 않는다.
      왜냐하면 sum2(2,3) 자리에 연산을 통해 얻은 5를 return 했기 때문에.

      그러나, 함수가 하는 작업이 반드시 결과값을 얻기 위한 연산이 아닐 수도 있습니다.
      바로 이 때문에 댓글이 많은 것 같습니다.

      sum() 내부를 보시면 어떤 연산을 하는 것이 아니라 document.write() 이라는 새로운 함수를 또 다시 호출한 것 외에는 아무것도 없습니다.

      즉 sum()이 호출된 자리에 document.write() 새로운 함수가 호출된 것입니다.
      이 함수도 어떤 작업을 하고 그 결과값을 돌려 주겠죠. 자신이 호출한 그 자리에 -> sum()을 호출한 자리.

      document.write() 함수의 결과가 'undefined'라고 나온 것을 보면 javascript에서는 반환을 강제하지는 않는 것 같습니다. 문서에 문자열을 보여주는 기능을 하는 것 같은데, 결과값으로 그 문자열을 반환한다던지, 아니면 성공했으면 true를 반환한다던지 하는 것이 아니라 그냥 아무것도 반환하지 않는 것 같고 시스템에서는 그것을 undefined라고 하는 것 같습니다.

      + 연산 기호와 관련하여
      숫자 + 숫자; 인 경우도 동작하고,
      문자열 + 문자열; 인 경우도 동작하는 것은 그러한 경우에 대비하여 내부적으로 구현해 놓았기 때문입니다.

      sum(2,3) + 숫자: 가 에러가 나는 것은 undefined + 숫자;를 처리하는 내부 구현이 없기 때문입니다.
    • udevapp
      제가 생각하기로는 다음과 같습니다.

      function sumWrite(left, right){
      document.write(left+right);
      }
      위의 함수의 내부에 return 이 없다는 뜻은 자바스크립트에서는 undifined 를 리턴한다는 뜻입니다.
      "정의되지 않는 것을 리턴한다"는 말은 리턴을 하지 않는다는 동일하다고 생각할수 있습니다.

      1.아래의 자바스크립트를 크롬콘솔에서 한번 실행해보세요.

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

      그러면 undefined 가 뜹니다.
      "정의되지 않음"이라는 것을 리턴했다는 뜻입니다.


      2. 아래의 문장을 실행해봐도 undefined 가 뜹니다.
      이경우는 num의 값이 undeifned 가 되었다는 뜻입니다.
      num에다가 undefined를 대입하기를 실행했기 때문에 결과가 undefined 가 되었습니다.
      var num = sumWrite(2,3);


      3. 다음으로 아래를 실행하면
      var num = undefined
      undefined 가 뜹니다.
      num 에다가 undefined 를 대입하였기때문에 num이 undefined 라는 뜻입니다.


      undefined 는 데이터 형이기도 하면서 값이 없다는 것을 나타내는 값이기도 합니다.
      사족으로 이것 때문에 비교할때 == 를 사용하지 않고 === 를 사용하는 것으로 알고 있습니다.
      null 하고 비슷하기도 하고 조금 틀리기 때문에요. 다른 언어에는 undefned 가 없습니다.
      찾아보니 undefined 와 null 에 대한 비교가 있네요.
      https://webclub.tistory.com/1
      대화보기
      • Hyeon-Jun Ha
        완료
      • kumkum
        정리가 잘 된 댓글을 제가 보기위해 올립니다
        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값을 부여해 주어야 합니다.
      • 코돌이
        이해한대로 정리!

        document.write 대신 return을 쓰면 더 효율적일까?
        - 단순히 left+right 계산에 그칠 것이라면 document.write = return
        - left+right보다 복잡한 계산에다가 style까지 변경하려면, 컴퓨터가 계산 -> style 변경 과정을 거쳐야 하기 때문에 비효율적. 그래서 이미 계산된 값을 return 하므로써 복잡한 계산 과정을 save 해주는 것. 이런 경우 return이 훨씬 효율적
      • 코돌이
        감사합니다 똑같은 궁금증이 있었는데 댓글 쭉 내려가다보니까 해결됐어요!
        대화보기
        • 주워니
          완료
        • 위준우
          완료
        • 허공
          190509 감사합니다.
        • Tuco Salamanca
          앞으로 나아가는 공부와 함께! 감사의 말. 사람은 게으른 되지 않을 것!
        • 김한주
          완료
        • 완료
        • 끝가지간다
          완료~
        • 사차원
          리턴에서
          <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>

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

          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에 대해 생각할 수 있는 기회가 되었습니다. 고수님들의 지적 부탁드립니다.
        • 최종민
          저는 그런 경우에 저장하고 우측 화면에 뜬 페이지 창을 닫았다가 다시 열면 글씨 색이 반영되더라구요,, 정확한 해결책인지는 모르겠지만요 ㅎㅎ
          대화보기
          • 노남
            최종민님 감사합니다!!^^ 글씨 색이 같아지니까 훨씬 눈에 잘 들어오네요. 그런데 혹시 하나만 더 여쭤봐도 될까요. 저는 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);이 됩니다.
                            대화보기
                            버전 관리
                            egoing
                            현재 버전
                            선택 버전
                            graphittie 자세히 보기