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. 박병진
    감사합니다. 완료. 2020.10.17
  2. 당근조아
    201016 완료
  3. joas
    11/10/20 완료
  4. 코딩지니어스
    20201009 완료
  5. 20201007 완료
  6. 유예인
    2020.09.25 완료
  7. switpotato
    20200814 완료
  8. 김준석
    20.07.26 학습완료
  9. 지니
    200617완
  10. 준식
    20200606 진행중
  11. 행운
    leegoing 교수님 감사합니다!!
  12. 아기별
    새롭게 알게 된 것..

    1.변수 = 이름을 붙이지 않은 함수
    라고 정의하면 그 변수명을 가진 함수를 만든 것이나 다름 없어진다.

    2. 익명함수는 (function(){반복하고자 하는 코드})() 형식을 가지며 일회적으로 쓴다.
    이름이 없으니까.. 정의내려도 불러올 수가 없으니 그런듯 하다.
  13. bomnie
    익명함수는 일회성을 위해 씀
    함수는 코드의 재활용성을 높여줌
  14. bomnie
    return 1.함수 종료 2. 리턴값을 출력값으로 반환
  15. ironia
    수고하셨습니다. 잘 들었습니다~
  16. Noah_kim
    완료.
  17. 뿡뿡팡야
    완료
  18. 완료. 좋은 강의 감사합니다.
  19. 제이
    :D
  20. joonbye
    제가 보기엔 상황에 따라서 다른 것 같습니다.
    첫 번째에 살펴볼 게 가장 일반적인 방법인 것 같고요,
    두 번째로 알려주신 방법은 numbering에 함수를 대입하는 방식이었죠.. 음..
    그냥 제 생각인데, 한 3가지 정도 생각할 수 있는 것 같네요
    1. numbering 이라는 변수에 어떤 함수건 덮어 씌울 수 있다는 점. 즉 변수는 숫자나 문자같은 것만을 담는 그릇이 아닌 로직 전체인 함수조차도 담을 수 있다는 가능성.
    2. 성능적으로 아주 약간의 우수함 ( 이건 아닐수도 있어용 )
    3. 가독성이 더 좋음 ( 함수로 따로 빼놓으면 그 함수를 찾아가서 이해 한 다음 본문으로 와서 다음 코드를 읽어야 함 )

    결론은, 아주 자주 쓰이지는 않지만 종종 쓰이는 로직에 대해 함수로써 표현하고 싶을 때, 그리고 그것을 좀 더 가독성이 좋게 볼 수 있게 하고자 + 성능도 아주 조금 더 우수해서~ 2번째 방법을 쓸 수도 있겠다. 물론 추측입니다잉.
    대화보기
    • 한강
      감사합니다. ^^! 200226
    • 2020.02.08 완료
    • 박병찬
      2020.02.05 완료
    • ProgrammerJoon
      함수를 정의하는 방법이 다양하게 있네요,
      이 부분에 있어서는 각 개발자의 스타일 인가요 ?
      아니면 상황에 따라서 좀 더 권장되는 방법이 있을까요 ?
    • 2020.01.10
    • 재밌어요~!!!
    • 완료!
    • 뉴비
      어려워도 정주행이 정답이겠지요?
    • 뉴비
      어렵다..ㅜㅜ
    • 굼벵이
      완료
    • 오현주
      2019-12-13 수강
    • galangal
      19.11.19 완료
    • 마두사랑
      11-11까지
    • robin
      짜려고 하는 논리의 구조가 자기 자신을 사용하는 경우 재귀를 사용하면 코드를 쉽게 구현할 수 있습니다.
      예를들면 수학에서의 !(팩토리얼)연산이 있죠.
      N!
      if N = 1 ==> 1
      else
      N! = N*(N-1)!
      과 같이 정의 자체에 자신이 포함되는 경우 재귀를 사용하여 구현하면 편하게 짤 수 있습니다.

      다만, 어디까지나 프로그래머 입장에서 편한거지, 코드를 실행하는 컴퓨터 입장에서는 함수의 호출이 반복되며 생기는 부하로 인해 성능면에서 좋지는않습니다.
      또한, 경우에 따라서는 같은 인자로 함수를 여러번 호출하게 되는 경우도 생기죠.(피보나치 수열을 재귀로 구현시)
      대화보기
      • 제니
        20191017 완료
      • 홍주호
        20191013 완료
      • 박창신
        완료
      • 대화보기
        • 초밥왕
          다시 복습시작! 잘보고 가요
        • Amy.S
          감사합니다~~
        • 최승윤
          완료!
        • yuha
          2019. 04. 20 완료
        • zzang
          Done
        • 호두
          완료
        • 도토리묵
          완료
        • 호두
          함수
        • 행인
          재귀함수를 사용하면 코드가 간결해지거나 재귀함수로 구현해야 쉽게 짤 수 있는 코드들이 있습니다.
          최대공약수를 구하는 함수 같은 경우 재귀를 이용하면 한 줄입니다.
          대화보기
          • 김경모
            자바공부를 하는데 재귀함수를 사용하면 좋은 이점이 뭔가요?
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기