[생활코딩] JavaScript 문법 - 함수

생활코딩에서 다루는 JAVASCRIPT의 문법 중 하낭니 함수를 배워보자. 자바스크립트는 '함수형언어' 라고도 부를 정도로 함수에 대한 비중이 크다. 여기서 항상 나오는 return이랑 argument 정의를 배운다. 출력과 입력이라는 뜻이다.

---

함수

• 하나의 로직을 재실행 할 수 있도록 해준다.
• 코드의 재사용성을 높여준다.
• function 함수명 ( ){ } 이렇게 쓴다.
• ( ) 에는 '인자'라는 값이 차례로 들어오는데, 이 값은 함수를 호출할 때 함수의 로직으로 전달될 변수이다.
• 인자는 생략이 가능하다.
• 함수를 호출하려면 함수명(); 이렇게 쓴다.
• 실행할 경우, 함수명에 해당하는 함수를 찾고 { }의 내용을 호출한다. 

함수의 정의와 호출

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

numbering 이라는 이름의 함수가 호출되어, 결과가 0123456789 이다.

재사용성이란?

작성한 코드를 여러 맥락에서 다시 사용할 수 있도록 하는 것으로, 코드를 개선하면 사용된 모든 곳에서 개선이 동시에 일어난다. 함수는 재사용성이 높다.

함수가 없다면?

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;
}

이 정도는 할 수 있지만 만약에 1,000번을 해야한다면? 그리고 그 내용을 수정해야 한다면? 매우 힘들다.

BUT 함수를 사용하면 이러한 문제를 극복할 수 있다. 결과는 같지만 로직은 단 한 번만 등장!

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

반복문 vs 함수

• 반복문: 기계적으로 일정한 반복을 그자리에서 실행할 때 의미가 있다.
• 함수: 반복적으로 실행되는 로직이 여러가지 맥락에서 반복돼서 사용해야 되는 경우 의미가 있다.
• 즉, 반복문은 한 곳이지만, 함수는 여기저기에서 호출만하면 반복적으로 필요한 맥락마다 사용이 가능하다

프로그래밍에서 중요한 것 3가지

1. '재사용성'이 높다
   어떠한 동일한 코드가 있을 때, 이 코드를 여러 곳에서 사용할 수 있는 형태로 만드는 것이 핵심이다. 비유하자면 좋은 부품을 만드는 것이 바로 재사용성의 목표이다.
   
2. '유지보수'가 용이하다.
   이 함수를 사용하는 여러 곳에서 함수의 코드만 수정, 변경, 개선을 해준다면 함수명을 사용하는 모든 곳에서 변경이 반영된다는 특성이 있다. 이 특성을 '유지보수' 라고 한다.
   
3. '가독성'이 좋아진다.
   함수명으로 긴 로직을 담을 수 있다.

문법을 배울 때, 이 문법적적인 요소는 위의 3가지를 어떻게 극복하고 있는가라는 관점으로 문법을 바라보면

좀더 재미있게 공부할 수 있을 것이다. 

---

입력과 출력

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

return(출력값)

return의 기능은 함수를 종료시키는 것이다. 종료하면서 리턴 뒤에 있는 값을 함수 바깥쪽으로 뱉어낸다.

function get_member1(){
    return 'egoing';
}
 
function get_member2(){
    return 'k8805';
}
 
alert(get_member1());
alert(get_member2());

=> 결과는 egoing 과 k8805 이다. 

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

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

=> 결과는 egoing 이다. 

k8805와 sorialgi를 출력하지 않는이유는? 

=> return이 'egoing'을 실행한 후에 함수를 종료시켰기 때문이다. 그래서 k8805이하는 실행되지 않는다.

argument(입력값)

'인자'라고도 부르며 함수로 유입되는 '입력'값을 의미한다. 어떤 값을 인자로 전달하느냐에 따라 함수가 반환하는 값이나 메소드의 동작방법을 다르게 할 수 있다.

function get_argument(arg){
    return arg;
}
 
alert(get_argument(1)); // 1~3행 사이에 정의된 함수를 실행하는 구문
alert(get_argument(2));

get_argument(1) 에서 1은 1행의 get_argument로 1이라는 값을 전달하겠다는 의미이다

1행에는 (arg) 구문이 정의돼있는데, 변수 arg의 값으로 숫자 1이 함수 안으로 전달된다.

이 변수 arg는 get_argument 안에서만 유효하다.

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

복수의 인자

여러개의 입력 값을 받고 싶다면?

function get_arguments(arg1, arg2){
    return arg1 + arg2
}
 
alert(get_arguments(10, 20));
alert(get_arguments(20, 30));

=> 결과는 30, 50 이다.

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

 

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

요약

• (arg)는 입력과 관련되있다.
• return은 출력과 관련되어있다.
• 함수니까 ( ) 를 써줘야 한다. 그런데 () 사이에 숫자가 들어가 있다.
• arg는 변수인데 '매개변수' 혹은 'parameter' 라고 한다.  arg = 1, arg = 2 , arg1 = 10, arg2 = 20
• alert(get_argument( ))에서 ( ) 안에 있는 숫자를 인자(argument)라고 부른다. 
• 값 자체는 '인자'이며, 그 값을 받는 변수는 '매개변수' or 'parameter'라 한다. 
• 입력 값은 여러개의 값을 가질 수 있다.
• return 값은 한개 의 값만 가질 수 있다.

---

함수를 정의 하는 다른 방법

함수에 대한 정의 부분을 좌항에 있는 'numbereing'이라는 변수에 대입한 것이다.

즉, numbering 변수가 함수를 갖게 된 것이다. 첫 번째와 두 번째 모두 같은 결과가 나오지만 다른 방법을 쓴 것이다.

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

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

익명 함수

function을 정의하고 ( ) 로 묶어준다. 그리고 함수를 호출할 때 사용하는 기호 ( )로 호출해준다.

이름이 필요없고, 1회성으로 바로 실행해야할 경우 쓴다. 알고만 있어라.

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

결론

• 함수를 호출 할 때 사용하는 기호는 ( );
• 함수는 코드의 재활용성을 높여준다.
• 함수형 언어를 규정짓는 특징으로써 함수라는 말을 쓰고 있다.
• 다른언어에 비해 자바스크립트에서 함수가 차지하는 위상은 매우 높다.

---

JAVASCRIPT 기본 문법 시리즈

[생활코딩] JavaScript 기본문법 정리 (숫자와 문자, 변수, 주석, 줄바꿈과 여백, 비교)

[생활코딩] JavaScript 기본문법 정리 (숫자와 문자, 변수, 주석, 줄바꿈과 여백, 비교)

[생활코딩] JavaScript 문법 - 조건문

[생활코딩] JavaScript 문법 - 조건문

[생활코딩] JavaScript 문법 - 반복문

[생활코딩] JavaScript 문법 - 반복문