2020-02-05 JavaScript - 함수

생활 코딩 강의를 들으면 내 나름대로 정리한 내용이다.

https://opentutorials.org/course/743/4729

함수 - 생활코딩

// 함수 1강
함수(function)란 하나의 로직을 재실행할 수 있도록 하는 것으로 코드의 재사용성을 높여준다.0
재사용성 : 하나의 코드를 여러 맥락에서 다시 사용할 수 있다.
하나의 코드를 개선하면 여러 맥락에서 사용된 곳의 코드를 동시에 개선할 수 있다. 코드를 작성하는 시간도 줄여준다.

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


      function numbering() {
        document.write(1);
      } // 함수 정의 
      numbering( ); // 함수를 사용하기 위해서 함수를 호출해야 한다.


함수를 호출할 때 numbering( )이 아닌 numbering이라고 입력한다면
웹 브라우저는 numbering을 변수로 인식한다.
numbering( )이 호출되면 함수 내부에 있는 코드가 실행되는데, 
이때 numbering( )은 document.write(1)과 같은 효과를 낸다.

function numbering( ){
    i = 0;
    while(i < 10){
        document.write(i);
        i += 1;
    }   
}
numbering( );
numbering( );
numbering( );
numbering( );
i가 0부터 10보다 작을 때까지 i가 1씩 증가하며 화면에 i를 출력한다.

우리가 내부에서 i < 10을 i < 20으로 변경해준다면 함수의 재사용성 덕분에 함수를 호출한 모든 부분에 동시에 변경할 수 있다.

// 함수 2강 함수의 효용

함수 없이 i를 1부터 20까지 출력하는 것을 여러 번 반복하고 싶다면?
var i = 0;
  while(i < 20){
      document.write(i + '
');
      i += 1;
  }
위의 코드를 여러 번 Copy and Paste해야 할 것이다. 너무나도 번거롭다.
또한, i를 30까지 출력하는 것으로 바꾸고 싶다면 일일이 반복 조건을 수정해줘야 한다.

하지만 위의 코드로 동작하는 함수를 선언해준다면 함수 호출만으로 동일하게 동작할 수 있다.
또한, 반복 조건을 한 번만 수정해주면 된다.

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

만약 함수 호출을 1000번 시키고 싶다면?
함수 호출을 일일이 1000번 하는 것 또한 너무나도 번거롭다.
이럴 때 반복문을 활용하면 된다.

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

for(var i = 0; i < 1000; i++) }
  numbering( );
}

이렇게 반복문과 함수를 활용하여 간단히 1부터 20까지 출력해주는 함수를 1000번 호출해 줄 수 있다.

반복문과 함수가 없다면 도대체 얼마나 많은 양의 코드를 쳐야 할까? 또한 수정 사항이 있을 때 일일이 바꿔주는 데 얼마나 많은 시간이 걸릴까?

함수와 반복문은 없어서는 안될 존재들이다.

반복문은 기계적으로 일정한 반복을 그 자리에서 실행할 때 의미가 있다.
하지만 함수는 반복적으로 실행되는 로직이 필요한 여러 맥락에서 반복적으로 사용될 때 의미가 있다.

재사용성, 유지 및 보수의 용이함, 가독성 => 서로 뗄레야 뗄 수 없는 관계

// 함수 3강 함수의 입력과 출력
함수 : function
function은 기능, 작용을 의미한다.
함수 => 상자 함

함수의 핵심은 입력과 출력이다. 입력된 값을 연산해서 출력하는 것이 함수의 기본적인 역할이다.

출력에서는 return이라는 keyword를 사용한다.


  function get_member1( ) {
    return 'Ron';
  }
  function get_member2( ) {
    return 'Matt';
  }
  alert(get_member1( )); // Ron
  alert(get_member2( )); // Matt


각각의 alert창에는 Ron, Matt이 출력된다.
alert 내부에서 각각 get_member1, get_member2라는 함수를 호출한다.
함수가 호출되면 코드가 실행이 된다.
코드를 보면 return이 있다.
return은 함수가 실행될 때 출력값을 내보내준다.
출력값을 내보낸 채 함수는 종료된다.
get_member1, get_member2의 return 값은 각각 'Ron', 'Matt'이다.


  function get_member1( ) {
    return 'Ron';
    return 'Matt';
    return 'Susan';
  }
alert(get_member1( ));

alert 창에는 Ron이 출력된다.
alert 내부에서 get_member1 함수를 호출한다.
함수가 호출되면 코드가 실행이 된다.
3개의 return이 있다. 어떤 것이 실행될까?
첫번째 return의 'Ron'을 내보내고 함수는 종료된다.

함수는 return이 아무리 많이 있어도 첫 번째 return을 만나면 출력값을 내보내고 종료된다.

// 함수 4강 함수의 입력

  function get_argument(arg) {
      return arg;
  }

  alert(get_argument(3));
  alert(get_argument(5));


인자(argument)는 함수로 유입되는 입력 값 즉, 우리가 입력하는 값을 말한다.
다섯번째 줄 alert 내부에서 함수 get_argument를 호출한다.
get_argument(3)에서 3은 인자(argument)이다.
3은 매개변수(parameter) 즉, arg에게로 전달되어 arg는 3이라는 값을 가지게 된다.
이 변수 arg는 함수 get_argument 안에서만 유효하다.


  function get_arguments(arg1, arg2) {
      return arg1 * arg2;
  }

  alert(get_arguments(20, 40));
  alert(get_arguments(30, 50));


다섯번째 줄 alert 내부에서 함수 get_arguments를 호출한다.
get_arguments는 두 개의 인자를 가지고 있다.
각각 20과 40이다.
각각의 인자들은 매개변수 즉, arg1과 arg2에게로 전달되어
arg1은 20, arg2는 40이라는 값을 가지게 된다.
이어서 함수 내부에 있는 코드가 실행된다.
arg1 * arg2 연산이 먼저 실행되어 20 * 40 = 800이라는 값이 나온다.
800을 반환값(출력값)으로 내보내고 이 함수는 종료된다.

// 함수 5강 함수를 정의하는 다른 방법

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

함수에 대한 정의 부분이 좌항에 있는 numbering이라는 변수에 대입된다.
따라서 numbering이라는 변수가 함수를 갖게 된다.

함수를 호출할 때 numbering( );를 사용하면 된다.

위의 부분은 다음과 동일하다.

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




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


함수의 이름이 없다.
함수를 정의하는 동시에 함수를 호출한다. => 익명 함수
일회성 호출 시에 사용된다.