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. Mongsil
    2020/4/2 완료!
  3. 혹등고래
    완료
  4. Yohanesty
    완료
  5. 뿡뿡팡야
    완료
  6. OneJae EE
    20.03.23 월 / 37세 비전공자 / 완료
  7. 0cddo
    완료!
  8. 아롱범
    리턴값의 타입이나 인자의 타입을 기재해주지 않아도 되는게 자바의 메소드 선언과 비교해보면 흥미롭네요
  9. jade
    <script>
    function sum(left, right){ //left, right는 매개변수(파라미터) : 함수로 들어오는 입력값
    document.write(left+right);
    }
    sum(2,4); //2와4를 더해주는 함수
    </script>



    <script>
    function sum2(left, right) {
    return left+right; //표현식 출력
    }
    document.write('<div style="color:blue">'+sum2(2,3)+'</div>');
    </script>
  10. Kiki
    띠용
  11. 토빈
    완료
  12. 완료
  13. 완료
  14. daniellee123456
    완료
  15. 코딩하쟈
    완료
  16. 숩숩이
    완료
  17. 규몽
    완료
  18. 익명
    왼쪽부터 연산하기 때문입니다.
    그렇기에, 2 + 3 + '<br>'은 (2 + 3) + '<br>'과 같은 순서로 계산됩니다.
    대화보기
    • eddylee123456
      완료
    • 감사합니다. 완료
    • 완료
    • 항상 감사합니다.!!
    • thsths
      완료
    • 춤춤
      완료
    • 메메
      function sum(left, right){
      document.write(left+right+'<br>');
      }

      sum(2,3); // 5

      여기서는 왜 값이 23이 아니라 5로 나오죠? <br>은 문자가 아닌가요?
    • Hoon Oh
      많이 어려워 하는 분들이 계시네요

      1. x+y값을 그대로 화면에 나타내기:
      document.write(x + y)

      2. onePlusOne이란 함수를 만들어 사용하기
      function onePlusOne(){
      document.write(x+y);
      }
      onePlusOne()

      3. sum이란 함수를 만들어 값을 저장하기
      function sum(x,y){
      return x + y;
      }

      1번의 경우 우리가 x와 y의 값을 그때그때 만들어서 써주면 화면에 출력이 됩니다.
      2번은 함수를 만들어 function call을 하면 그 함 수 안에 값을 출력합니다.
      3번은 sum이란 함수를 만들어 function call을 하면 sum이란 함수 안에 우리가 써준 x와 y값을 더하여 값을 '저장'시켜둡니다.

      우리가 종이와 펜이 있다고 가정해봅시다

      1번은 옆에서 친구가 3 더하기 4 써봐 하면 7이라고 종이에 적는것과 같습니다.
      - 종이에 적힌 이후 그 숫자들은 더이상 사용할 일이 없습니다.


      2번은 옆에서 친구가 "나이" 라는 단어를 말 할때마다 내 나이를 적는것과 같습니다.
      내 나이가 27이라면 친구가 "나이"라고 말 할때마다 종이에 27을 적는것입니다.
      - 1번과 다르게 숫자를 일일히 말 안해도 되지만
      - "나이"라는 함수에는 이미 내 나이가 고정이 되어있어 숫자를 바꾸고 싶어도 바꾸질 못합니다
      - 따라서 내 나이가 변하기 전까진 [함수안에 x와 y값을 바꾸어주기 전까진] "나이"는 무조건 27입니다.


      3번은 옆에서 친구가 계산하는 방법을 알려주고 그 방법을 사용해서 숫자를 말해주는대로 계산을 하고, 나온 계산값을 이후에도 사용할수 있게 저장해두는것입니다..

      - 예를들어 6명이서 같이 놀다가 짜장면과 스파게티를 주문배달시켜 먹으려 합니다.
      - 메뉴를 각각 3개씩 주문하여 나누어 먹을 계획인데요

      - 친구가 주문한 음식의 가격은 주문한 음식 수 곱하기 가격이 총 가격이다 라고 알려주고
      ["totalPrice" = 가격 * 음식 수 라는 함수를 만들어주고]

      - 나래궁은 짜장면 하나에 5,500원이고 핏자맨은 스파게티 하나에 6,000원이니까 총 가격이 얼마지? 라고 물어봤을때
      총 가격(짜장면 값, 스파게티 값) = 짜장면 값 * 3 + 스파게티 값 * 3 이란 함수를
      사용할 수 있습니다.
      [totalPrice(p_china, p_italy) = p_china * 3 + p_italy * 3;]

      - 그래서 총 결재를 한 뒤 각각 얼마씩 내면 되는지 계산을 하려면 총 금액을 6으로 나누면 되겠죠
      - 그럴때 식을 다시 불러서 /6하면 코드가 길어지니까 return을 사용하여 계산된 금액을 다른곳에 저장시켜놓았다 필요할때 사용하는겁니다.

      totalPrice(p_china, p_italy) {
      return p_china * 3 + p_italy * 3}

      document.write(totalPrice(5500,6000)/6) < 이렇게 리턴 함수를 사용하면 굳이 계산식을 다시 다 안써도 그 값을 가져오기때문에 훨씬 편해지지요
    • 스티븐잡숴
      완료
    • 펜펜
      감사합니다! return 개념이 백프로 이해가 안가서, 해보면서 다시 익혀야겠어요
    • hr1004
      완료
    • centerho
      완료
    • Jeremy Jo
      봤어요.
    • 샬롬
      완료
    • Function, ,Parament, Argument, Return.

      Return : 함수의 표현식 재사용 가능.
    • 아빠늑대
      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이 출력됩니다.
    • 홍주호
      20191110 완료
    • 미옹이
      강의 26번 참고 사항 적습니다.

      버그인지 뭔지 모르겠습니다만, 혹시 atom 편집기에서 11번째, 23번째 줄 function이라는 함수 적을 때 자동완성(앞 글자 몇 자만 적어도 단어 전부를 보여주는 기능) 단어 적는 중에 Function 즉, 첫 글자를 대문자 F로 만들어 줘도 하면 안됩니다. Function이 웹페이지에서는 명령어로 안 먹히네요. 반드시 소문자 function으로 해야 합니다.
    • 육포
      20191101
    • 은별
      완료
    • 완료
    • 굼벵이
      완료
    • 박창신
      완료
    • 감자
      완료
    • 20191001 Ted 완료!
    • 코딩만이 살길이다
      완료
    • 쑤우
      수강완료. 감사합니다.
    • 현우
      완료
    • 정완료
      완료
    • 한조
      감사합니다!
    • 들국화
      감사합니다
    • JT_brand
      완료
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기