WEB2 - JavaScript

함수

함수의 기본

소스코드

변경사항

 

 

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

소스코드

변경사항

 

 

리턴

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

소스코드

변경사항

 

 

댓글

댓글 본문
작성자
비밀번호
  1. Jeremy Jo
    봤어요.
  2. 샬롬
    완료
  3. BoBo
    Function, ,Parament, Argument, Return.

    Return : 함수의 표현식 재사용 가능.
  4. 아빠늑대
    10개월 전 달린 댓글에 논의가 많네요.
    파이썬 기초만 배운 뒤 여기 온 사람으로 제 해석을 답니다.

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

    1. document.write(typeof sumReturn(2,3)); // number
    2. document.write(typeof sumWrite(2,3)); // 5undefined
    3. document.write(sumReturn(2,3)+10); // 15
    4. document.write(sumWrite(2,3)+10); // 5NaN

    여기서 분명히 해야할 것은
    함수는 return값을 리턴하고, 그 값은 생략되어 표시되지 않지만 데이터 저장형식을 따지는 type을 가집니다.
    1 + 1 = 2 지만 '1'+'1'='11'인 것은 아예 다른 데이터이기 때문입니다.
    그리고 document.write()라는 함수는 JS를 문자열로 '리턴'하는 것, 숫자를 리턴하는 것이 아닙니다. 리턴값은 HTML로 보내지고, 다시 HTML로 랜더링 됩니다.

    1. 은 5를 리턴하므로 Number를 type으로 가지는게 맞습니다
    2. 는 함수 내부의 document.write()를 우선적으로 실행해서 5가 출력 된 뒤, 함수 자체는 리턴값이 없으므로 undefined를 차순으로 출력합니다.
    3. 리턴된 숫자 5를 다시 연산 한뒤 15를 리턴합니다.
    4. sumWrite(2,3)에서 5를 출력하고 리턴값은 없으므로 (undefined) + 10(number)가 되므로 NaN이 출력됩니다.
  5. 홍주호
    20191110 완료
  6. 미옹이
    강의 26번 참고 사항 적습니다.

    버그인지 뭔지 모르겠습니다만, 혹시 atom 편집기에서 11번째, 23번째 줄 function이라는 함수 적을 때 자동완성(앞 글자 몇 자만 적어도 단어 전부를 보여주는 기능) 단어 적는 중에 Function 즉, 첫 글자를 대문자 F로 만들어 줘도 하면 안됩니다. Function이 웹페이지에서는 명령어로 안 먹히네요. 반드시 소문자 function으로 해야 합니다.
  7. 육포
    20191101
  8. 은별
    완료
  9. 완료
  10. 굼벵이
    완료
  11. 박창신
    완료
  12. 감자
    완료
  13. 20191001 Ted 완료!
  14. 코딩만이 살길이다
    완료
  15. 쑤우
    수강완료. 감사합니다.
  16. 현우
    완료
  17. 정완료
    완료
  18. 한조
    감사합니다!
  19. 들국화
    감사합니다
  20. JT_brand
    완료
  21. ㅇㅅㅇ
    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 부터 시작해서 처음으로 댓글보고 이해했네요.
  22. Student
    다른 함수의 값을 활용하기 위해선 return을 사용하자.
  23. 시원한 정리 감사합니다!
    대화보기
    • 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
          완료
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기