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. GoldPenguin
    완료했습니다.
  3. 너무쉽다
    감사합니다 그 어느 사이트에서보다 쉽게 설명해주신거 같아요
  4. 수복
    잘 보았습니다. 정말 간단하면서 중요한 부분만 콕 찝어냈어요!
  5. 김지원
    함수 3/5 동영상과 4/5동영상 이름이 각각 입력 출력 이렇게 되어있는데 내용은 반대네요
  6. 이성준
    깐따삐야!!!
  7. 카라멜팝콘
    얏흥
  8. Jeong Min Lee
    강의 잘 봤습니다. 감사합니다. ^^
  9. 정말 감사합니다.
  10. 봉봉이
    이고잉님. 인자는 argument가 아니라 매개변수(parameter)를 의미하지 않나요? 인수와 인자가 지칭하는 대상이 사이트마다 달라서 헷갈려요
  11. ㅁㅁㅁ
    get_arguments 가 한정되지 않았다네요
  12. 몰러요
    나중에 전역변수 지역변수 이런거 배울 때 나와여
    대화보기
    • 여쭈어 볼것이 있습니다.
      인자의 대한것이 이해가 안됩니다. 제발 알려주세여
    • 은하수
      잘배웠습니다. 감사합니다.
    • 아이노바
      가슴으로 말합니다. 너무 감사합니다.
    • 20170906
    • 이유진
      변수선언 var에 관해서 질문 드립니다.
      1,2번째 영상에서는 var i=0;으로 쓰시다가 5번째 영상에서는 그냥 i=0;으로 쓰시던데 둘의 차이가 뭔가요?
    • 신시내티
      function name(parameter1, parameter2) {
      return process;
      }
      name(argument1, argument2);
    • 신시내티
      새로운 기능을 배울때마다 그 기능이 없었으면 얼마나 불편 했을까를 상상해 보는 것이, 그 기능이 더 소중해 보이고 더 잘 배우고 싶게 만드는군요. 이고잉님의 작은 지혜 감사합니다.
    • nevertoolate
      function is important for JavaScript... I will remember. ^&^;;;
    • vegaplanet
      자바스크립트에서 함수가 정말 중요하군요! 잘 봤습니다 감사합니다^^
    • 차유찬
      document.write와 console.log 모두 먹히지 않을 때는 어떻게 해야 하나요?
    • 클라아악
      2017/07/12 완료
    • 호호
      익명함수에서
      (function(){
      })();

      (function(){
      }());

      함수전체를 괄호하는거랑
      함수부분만 괄호해서 호출하는거랑 무슨 차이인가요?
    • Seo Yun Seok Tudoistube
      익명함수 이런것도 겁내지 않으면 좋겠어요. 감사합니다^_____^!!!
    • i = i + 1;
      i += 1;

      같은말임
      대화보기
      • Nature
        Java와 JavaScript의 함수까지 들었는데요,
        안드로이드앱에서 결제모듈이나, 주소검색 등을 연동하려면
        다음에 어떤 강의를 들어야 할까요?
      • 완료!
      • 장석규
        2017/05/29 완료
      • i = i+1;
        i += 1;
        위 두개는 같은겁니다
        간편하게쓰기위해 두번째로 쓰는거죠
      • 안녕하세요.
        강의 잘봤습니다~ 감사합니다!
        함수 첫번째 강의에서요 i += 1; 인 이유가 뭘까요 1개씩 증가이면
        i + 1; 이 맞는거아닌가요 ㅠㅠ 이해가 안가요! ㅠ
      • 이 리 ㄴr
        감사합니더
      • 최규선
        20170420 완료.... 감사합니다.
      • funlife
        감사합니다.
      • 이후성
        제가 답글 드리겠습니다.
        i ++ 는 먼저 실행한 후에 i를 1 증가 시킨다는 것 입니다.
        그러니까 실행할 때는 0이고 실행 후에는 1이 증가되겠죠
        ++i는 반대로 먼저 증가시키고 실행한다는 것 입니다.
        대화보기
        • 이승우
          20170330완료
        • 디자이너에용..
          제가 이 개념에 너무 집착하는건지 잘 모르겠는데용.
          i +=1이게 i = i+1와 같은 개념이라고 하셧공..
          i++ 도 i=i+1과 같은 개념이라고 수업을 들은 것 같아서요...

          근데, 막상 개발자 console(?) 거기서 값을 넣어보면
          i=0으로 기본값을 넣엇을 때,
          i += 1은 1로 나오고,
          i++은 0으로 나오고,
          ++i 는 1로 나옵니다..

          그래서 값으로는 i+=1과 ++i가 같은 의미인건가 싶기도 하고..
          ++i 와 i++ 넘 헷갈리네요.ㅋㅋㅋㅋ

          자바스크립트 초보자라서 글로 설명적는것도 넘 어려워서 제가 하는 질문이 맞는지도 모르겟어요..ㅎㅎ;;
          정리 좀 부탁드립니당..ㅎㅎ;;
          대화보기
          • 함수를 표현하는 방식이 참 다양하네요.
            언제쯤 자바스크림트가 익숙해지려는지ㅜㅜ
            오늘도 배움 잘 받고 갑니다. 고맙습니다!
          • Leon_Kang
            감사합니다. 항상 잘 보고 있어요.
          • 김세창
            잘배워갑니다
          • 김세창
            잘 배워갑니다
          • 동영상 이름이 3번은 출력이고 4번동영상은 입력인데 뒤바껴써용
          • 김원중
            감사합니다
          • 디자이너인데공부중
            함수랑 for문이랑 같이 응용해서 해보았어요.
            제대로 개념습득하려고 여러 차례 시행착오중이죠 흑흑ㅠ_ㅠ
            문제 : numbering 함수 : a가 1~5까지 3번 반복되도록 한 for중첩구문으로 사용하고 a는 5단으로 해주기!
            function numbering(){
            for(var b = 0; b < 3; b++){
            for(var a = 1; a <= 5; a++){
            document.write(a * 5+'<br />');
            }
            }
            }
            numbering();

            제가 한 것보다 더 간단하게 할 수 있는 방법도 있을까용?
          • 함수 파트는 세번정도 다시 봐야할것 같아요.
            처음 배우는거라 급 어려워지네요ㅜㅜ..
          • 연금이
            2017.01.12 수강완료
            함수기능은 반복화의 중요한 부분을 기능으로 만드는 작업
            과도한 함수화는 소스 가독성을 느리게 한다는 점을 명심하기
          • 임지호
            함수 : 코드의 재사용성을 높이기 위한 기술.
            function 이름 (매개변수) {실행코드}의 형태를 가진다.
            실행할때는 이름(인자)를 하면 실행코드에서 return값이 출력된다.
            반복문과 같이 반복할 수 있다는 특성이 있지만 반복문은 단순반복이고 함수는 입력값에 따라 출력값이 다르게
            반복되고 여러군데에서 사용할 수 있다.
            코드의 재사용성을 높일 수 있고 유지보수가 용이해지며 가독성 또한 좋아진다.
            변수이름 = function(매개변수) {실행코드}의 형태로도 함수를 정의할 수 있고
            (function(매개변수) {실행코드})(); 이런식의 형태는 익명함수로 함수를 정의하고 바로 호출해야할 때 사용한다.
          • 김명수
            감사합니다 이고잉님!
          • 완료~
            완료~ 감사합니다.
          • Rhys Jung
            정말 감사합니다.
            많은도움이 되고 있습니다.
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기