JavaScript

함수

함수

함수(function)란 하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여준다.

함수의 형식

함수의 형식은 아래와 같다.

function 함수명( [인자...[,인자]] ){
   코드
   return 반환값
}

함수의 정의와 호출

함수는 function 뒤에 함수의 이름이 오고, 소괄호가 따라온다. 소괄호에 인자라는 값이 차례로 들어오는데 이 값은 함수를 호출할 때 함수의 로직으로 전달될 변수다. 인자는 생략 할 수 있다. 함수를 호출 했을 때 실행하게 될 부분이 중괄호 안쪽에 온다.

다음 예제를 보자. 이 함수의 이름은 numbering이고, 내용은 0부터 9까지를 화면에 출력한다.

function numbering(){
	i = 0;
	while(i < 10){
		document.write(i);
		i += 1;
	}	
}
numbering();

위의 예제 제일 하단에 아래 구문에 의해서 numbering이라는 이름의 함수가 호출되고 있는 것이다.

numbering();

결과는 아래와 같다.

0123456789

numbering();을 여러번 실행하면서 그 결과를 살펴보자.

함수가 없다면

아래 예제를 보자. 이전 시간에 0부터 9까지 출력하는 애플리케이션을 만들었다. 그런데 0부터 9까지를 5번 출력해야 한다면 어떻게 해야할까? 아래와 같이 해야 할 것이다.

var i = 0;
while(i < 10){
    document.write(i);
	i += 1;
}

var i = 0;
while(i < 10){
	document.write(i);
	i += 1;
}

var i = 0;
while(i < 10){
	document.write(i);
	i += 1;
}

var i = 0;
while(i < 10){
	document.write(i);
	i += 1;
}

var i = 0;
while(i < 10){
	document.write(i);
	i += 1;
}

만약 이것을 1000번 해야 한다면? 각각의 로직이 1000 줄에 육박한다면? 그리고 그 내용을 수정해야 한다면? 암담한 느낌이 드는가? 함수를 사용한다면 이러한 문제를 현저히 줄일 수 있다. 아래의 예제를 보자. 결과는 같지만 로직은 단 한번만 등장한다.

function numbering(){
    var i = 0;
	while(i < 10){
		document.write(i);
		i += 1;
	}	
}

numbering();
numbering();
numbering();
numbering();
numbering();

입력과 출력

함수의 핵심은 입력과 출력이다. 입력된 값을 연산해서 출력하는 것이 함수의 기본적인 역할이다. 다음은 함수에서 입력과 출력의 역할을 하는 구문들에 대한 설명이다.

return

함수 내에서 사용한 return은 return 뒤에 따라오는 값을 함수의 결과로 반환한다. 동시에 함수를 종료시킨다. 아래 내용을 보자. 결과는 egoing과 k8805다.

function get_member1(){
    return 'egoing';
}

function get_member2(){
	return 'k8805';
}

alert(get_member1());
alert(get_member2());

get_member1와 get_member2를 출력(alert)한 결과가 각각 egoing과 k8805인 이유는 함수 내에서 문자열 egoing과 k8805을 return을 하기 때문이다.

return은 결과를 반환하는 것 외에 함수를 중지시키는 역할도 한다. 다음 코드를 보자. 결과는 egoing이다.

function get_member(){
    return 'egoing';
	return 'k8805';
	return 'sorialgi';
}
alert(get_member());

k8805와 sorialgi는 출력하지 않았다. 왜 그럴까? 그것은 return 'egoing'을 실행한 후에 함수가 종료되었기 때문이다. return 'k8805' 이하는 어떠한 경우도 실행되지 않는다.

인자

인자란?

인자(argument)는 함수로 유입되는 입력 값을 의미하는데, 어떤 값을 인자로 전달하느냐에 따라서 함수가 반환하는 값이나 메소드의 동작방법을 다르게 할 수 있다. 다음 예를보자. 결과는 1,2이다.

function get_argument(arg){
    return arg;
}

alert(get_argument(1));
alert(get_argument(2));

5행의 get_argument(1)은 1행에서 3행 사이에 정의된 함수를 실행하는 구문이다. 5행의 1은 get_argument로 1이라는 값을 전달하겠다는 의미다. 이 때 1행에 정의된 (arg) 구문에 의해서 변수 arg의 값으로 숫자 1이 함수 안으로 전달된다. 이 변수 arg는 함수 get_argument 안에서만 유효하다. 이 관계는 아래와 같다.

복수의 인자

그럼 여러개의 입력 값을 받고 싶다면 어떻게 해야할까? 다음 예제를 보자. 결과는 30과 50이다.

function get_arguments(arg1, arg2){
    return arg1 + arg2
}

alert(get_arguments(10, 20));
alert(get_arguments(20, 30));

위의 예제를 그림으로 나타내면 아래와 같다. 즉 함수를 호출 할 때 전달한 인자 10과 20은 함수의 선언부(1행)의 arg1, arg2에 차례로 할당된다. 이렇게 전달된 값은 함수 내부로 전달되서 더해진 후에 반환된다.

 

함수를 정의 하는 다른 방법

자바스크립트는 함수를 정의하는 또 다른 방법을 제공한다. 다음 예제를 보자. 아래 방법은 함수를 정의 하는 또 다른 방법이다.

var numbering = function (){
    i = 0;
	while(i < 10){
		document.write(i);
		i += 1;
	}	
}
numbering();

위의 내용은 이전 예제와 동일 하지만 함수를 정의 하는 방법을 달리한 것이다. 

댓글

댓글 본문
작성자
비밀번호
  1. 김명수
    감사합니다 이고잉님!
  2. 완료~
    완료~ 감사합니다.
  3. Rhys Jung
    정말 감사합니다.
    많은도움이 되고 있습니다.
  4. 솔군
    2016.10.07 강의 시청
  5. 김태뉴
    감사합니다.
  6. 람개발
    공부하는데 너무 도움이 됩니다 감사합니다 ;)
  7. 내일도
    확실히 c언어 보단 쉽네요
  8. cicada
    감사합니다!
  9. 우욱진
    감사합니다~!
  10. yihsang
    감사합니다.
  11. kimhomework
    감사합니다
  12. 아줌마
    엄머나 세상에 2년만에 매개변수 인자 함수 이런 이상한 글자들의 정확한 의미를 알게되다니요
    치매예방으로 시작한 코딩인데 정말 유용합니다.
    헉 감사합니다.
    감동이 밀려오네요
  13. 정개발
    감사합니다!! 정리가 쏙쏙되네요!!
  14. 룰루라라랄
    감사합니다!
  15. JustStudy
    고맙습니다
  16. 진승범
    오늘도 열심히 수업 잘듣고 있습니다.
    항상 감사합니다. ^^
  17. 삼십대학생
    수업 정말 감사합니다. 이해가 참 잘 되게 설명을 잘 하시네요.
  18. 호인이
    스크립트 다른 영상은 영 못알아 보겠어서 힘들었는데,,,, 쉬운설명과 예~ 감사합니다!!
    정말 감사해요~~~ ㅠㅠ
  19. 자바스크립트를 배우는 건지 C를 배우는 건지 ㅋㅋㅋ
  20. wanted7751
    아 정말 정말 감사합니다. 코딩의 어려운 벽을 실감한 가운데 사다리를 얻은 기분입니다..
  21. 이웃집토토로
    http://www.law.go.kr......000

    좋은 아이디어입니다.
    국가 수여 표창장에 대한 법령을 한번 찾아보았습니다.
    이것을 보다 구체화하다보면 이고잉님의 강의를 듣고 도움받은 수많은 제자들이
    정부나 단체측에 입상 및 수상을 건의할 수도 있을 것 같습니다.
    대화보기
    • 비비
      밑에 분 말씀에 백 번 공감합니다... 친구가 추천해줘서 알게됐는데 정말 잘 공부하고 있습니다 늘 감사해요 친구랑 맨날 이고잉님 찬양~
    • 잘 봤습니다.
      이건 정말 정부에서 상줘야 한다고 생각이 드네요.
      정부지원으로 하는 직업전문학교보다 훨씬 이해하기 쉽네요.
      물론 언어 장벽이란 문제도 있겠지만 w3school에서 공부하는 것보다 이해하기가 쉽습니다.
    • 준맹
      너무 잘 보고있습니다. 감사합니다. 이고잉형님
    • 하냥
      항상 감사하는 마음으로 잘 보고 있습니다. 감사합니다.
    • 최선완
      peti님.
      var pr = prompt("입력하세요");
      alert(typeof pr);

      ==결과 : string

      명령 프롬프트 창에 숫자를 입력하든 문자를 입력하든 return 되는 값의 리턴 타입은 String 입니다. 그러니 숫자와 비교했을때 false를 반환하게 되는것이죠.;
    • 85555
      petil777 님
      보니까 prompt를 이용한 입력은 숫자든 뭐든 전부 문자로 인식하기 때문에 그런 것 같습니다.
      만약 입력한 숫자가 숫자로 입력되게 하시려면

      arg=parseInt(arg);
      요거나
      arg=arg-0;
      요거 둘 중 하나를 function f(arg) 밑에 넣으시면 입력받은 arg를 숫자로 바꿔 인식하게 됩니다.
    • tact747@hanmail.net
      if(arg==1)
      return arg+"는 숫자";
      else if(arg='1')
      return arg+"는 문자";

      이렇게 하니까 되는거 같네요 ㅋ
      대화보기
      • 끝까지하자
        정말 감사합니다 좋아요 이해가 팍팍 됩니다.
      • petil777
        function f(arg){
        if(arg===1)
        return arg+"는 숫자";
        else if(arg==='1')
        return arg+"는 문자";
        else
        return "뭘 입력한거니";
        }
        var v=prompt("입력해라");
        alert(f(v));
        이런 식으로 하고 경고창에 1을 치니까 1을 문자로만 취급하더라구요...이럴땐 그냥 ==을 쓰는것으로 코딩을 하는게 좋을까요?
      • Katze
        function a(){
        return document.write('b')<- 뒤에 ; 를 안붙이셨네요
        }
        a();
        대화보기
        • 김신애
          이고잉님이 쓰고 계신 폰트 이름이 뭔가요?
        • YellowBall
          잘 들었습니다.
        • 머머
          마지막에 함수 지정 방식이 새롭네요.

          기능은 같겠죠? 저 변수안에 함수기능을 넣는다는 내용인것 같은데.. 익숙하지가 않네요. 일단 알아두는 정도로만~~
        • 늘생릭코네
          영상 잘 봤습니다.
        • 늘생릭코네
          함수 즐겁게 보았습니다.
        • alexmoon
          안녕하세요 이고잉님 항상 덕분에 좋은 수업 열심히 듣고 있습니다.

          함수관련해서 이것저것 만져보다가 궁금한 것이 생겼는데

          함수에 return 에 들어가는 것 값( value)만 가능한가요?

          function a(){
          return 'b';
          }
          document.write(a())

          를 간단하게 해볼려고

          function a(){
          return document.write('b')
          }
          a();

          로 바꿔보았는데 실행이 안되길래 document.write와 같은 명령어는 return안에 못들어가는 것으로
          잠정결론을 내렸는데 맞는지 모르겠군요,,,
        • peco
          디테일한 설명 덕분에 함수 울렁증이 좀 풀려가는거 같아요^^ㅎㅎ
        • 엠제이
          함수의 함 자가 "函"네요.
          상자~~
        • 감사합니다. 잘 잡히지 않았던 개념인데, 금방 이해가 되네요.
        • 지나가는 플그래머
          while(i < 10){
          document.write(i);
          i += 1;
          }
          여기 부분이 이해가 안되서요. 다 알겠는데
          마지막에 i는 1씩 증가한다는 마지막 줄이
          i++도 아니고 i+1=i 도 아닌데. 어떻게 해서 되는건가요???
          그거랑 함수를 정의하는 다른 방법에서 동영상에선 numbering = function
          이었는데. 밑에 설명에선 var numbering 이라고 되어있는데 뭐가 맞는건가요?

          -Re: i=0; 으로 초기화 된 상태에서 i+=1; 이라는 말을 풀어서 써본다면
          i = i + 1 ;
          이라는 말이 됩니다. 이게 총 10번 반복 되는거죠.
          i = i + 1 ; 은 i += 1; 입니다.
          0 = 0 + 1 ;
          1 = 1 + 1;
          2 = 2 + 1;
          3 = 3 + 1;
          4 = 4 + 1;

          로 해석하시면 되겠네요.
          대화보기
          • egoing
            I += 1; 도 1씩 증가시키는 연산 방법입니다~
            대화보기
            • while(i < 10){
              document.write(i);
              i += 1;
              }
              여기 부분이 이해가 안되서요. 다 알겠는데
              마지막에 i는 1씩 증가한다는 마지막 줄이
              i++도 아니고 i+1=i 도 아닌데. 어떻게 해서 되는건가요???
              그거랑 함수를 정의하는 다른 방법에서 동영상에선 numbering = function
              이었는데. 밑에 설명에선 var numbering 이라고 되어있는데 뭐가 맞는건가요?
            • 나무마루
              감사합니다.
            • 인생멋있다
              목소리 좋고,설명해설 너무 잘하시고...감사합니다
            • egoing
              통상 블럭(중괄호)의 끝에는 세미콜론을 붙이지 않습니다. 블럭이 이미 명령의 끝을 나타내기 때문이 아닐까 합니다.
              대화보기
              • 고쿠마토
                var numbering = function() {}; 를 의도하신게 아닐까요? ㅎㅎ
                대화보기
                • 정진주
                  감사합니다~열심히 잘 보고 공부하고 있습니다~~^^
                • egoing
                  var를 붙이시는 것이 맞습니다. 붙이지 않으면 어떤 결과가 생기는지는 뒤에서 유효범위 시간에 배우게 됩니다.
                  대화보기
                  • 자바스크립트초보
                    함수를 정의 하는 다른 방법 동영상에서 numbering 앞에 var는 붙이지 않는 건가요?
                    var를 붙이는 경우도 있던데 var 있고 없고 차이가 있나요?
                  버전 관리
                  egoing
                  현재 버전
                  선택 버전
                  graphittie 자세히 보기