[생활코딩] JavaScript 함수

 

함수 Function

 

만약 코드가 1억 번이 중복되는 동시에 그것이 연속적으로 실행되지 않도록 해야한다면?

함수라는 것이 필요하다.

함수는 쉽게 말해 코드 수납상자라고 할 수 있는데,

코드가 많아지면 정리할 수 있는 도구 중에 하나이다. (다른 하나는 객체)

 

똑같은 코드를 여러 번 사용할 때 함수를 활용하게 되는데, 이 때 장점은

1. 유지 보수가 쉬워진다. 즉 코드 안의 요소를 변경해야 할 때 한 번에 통제 가능하다.

2. 웹페이지 크기, 코드의 길이가 줄어든다.

3. 같은 함수를 여러 번 사용하기 때문에 같은 코드를 가지고 있다고 확신할 수 있다.

4. 함수의 이름을 알기 쉽게 적어 어떤 역할을 하는 코드인지 한 번에 파악하기 쉽다.

 

즉, 함수는 하나의 로직을 재실행 할 수 있도록 하므로 코드의 재사용성, 유지보수의 효율, 가독성을 높여준다.

 

 

함수는 입력과 출력으로 이뤄져있다.

parameter, argument를 사용하면 입력값이 무엇인지에 따라 다른 결과를 출력할 수 있다.
- 입력: 매개변수(parameter)와 인자(argument)

- 출력: return

 

함수 기본 형식

function 함수명(매개변수){
   코드
   return 반환값
}

 

함수 호출 방식

 

함수명()

 

function sum(number){
  let result = 0;
  for(var i=0; i<=number; i++){
    result = result + i
  }
  return result;
}

sum(4);  //expected output is 10

▶ 웹브라우저야 나는 지금부터 함수를 사용할건데, 함수의 이름은 sum이야

▶ 첫 번째 줄 코드를 웹브라우저를 확인하고 마지막 줄 sum(4)를 함수 코드 대로 자동으로 실행시킨다.

 

 

함수 정의

 

1) 익명 함수 : 1회성 호출용으로 이름이 필요없고 바로 실행하는 경우에 사용한다.

(function (){ 
    var i = 0; 
    while(i < 10){ 
        i += 1; 
    }
    return i;
})(); 
//expected output is 10

▶ 이름없는 함수 전체를 ( )로 감싸고 바로 뒤에 (); 를 작성하여 함수를 호출한다. 

 

2) 변수에 함수를 정의하기 

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

 

 

 

3) 함수명 작성하기

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

 

 

함수 입력

매개변수와 인자 (parameter & argument)

- 함수 정의  :  function 함수명(매개변수) { ~ }
- 함수 불러오기  :  함수명(인자);

function numbering(a,b){ 
    return a+b 
} 
  
numbering(10, 20);  // expected output is 30

▶ 위의 함수불러오는 코드에서, 괄호안에 들어가는 10과 20은 인자(argument)
그 인자가 들어가는 a와 b는 매개변수(parameter)라고 한다.
그리고 함수는 여러 개의 매개변수와 인자를 입력할 수 있다.

함수 출력

 

return  

 

함수가 정해진 연산만 하고 그 값을 되돌려 주는 행위가 없다면, 함수의 존재 이유가 없다.
따라서 함수에서는 작업의 결과물을 되돌려 주는 행위가 필연적으로 수반된다.
작업이 일련의 컴퓨터 연산이라면 그 결과를 되돌려 주는 것이 return 문이다.
return은 리턴값을 호출된 곳으로 되돌려 주는 기능을 한다.

 

함수 안에서 제일 먼저 나오는 return 코드가 실행되면 값을 출력하고 함수를 빠져나간다. 
중괄호 안의 첫 return 뒤에 어떤 코드가 있더라도 그 함수는 더 이상 실행되지 않는다.
하나의 함수는 하나의 값만을 반환할 수 있다.  
하지만 배열을 사용하면 여러 데이터를 포함하고 있는 배열을 반환하게 되어 여러 값을 출력할 수 있다.

 

function numbering(a,b){ 
    return a+b 
} 
  
numbering(10, 20);  // expected output is 30

 

▶ 1+1은 2의 표현식이고, 2-1은 1의 표현식이고, 1===1은 true의 표현식이다.
이처럼 numbering(10, 20) 은 결과적으로 30의 표현식에 지나지 않는다. 30이라는 값을 가지고 있는게 아니다.

 

 

리턴을 사용하면 작업의 결과물을 바로 호출하는 기능을 할 수 있다. 즉 표현식이 아닌 결과값을 호출하는 것이다.
그리고 단순하게 결과를 출력하는 것 뿐만 아니라 디자인을 넣거나 여러 코드를 결합시켜 가공시킬 때 return이 필요하다.

 

반복문과 함수의 차이

반복문은 일정한 반복을 '그 자리' 에서 실행할 때 의미가 있고, 
함수는 일정한 반복을 '여러곳' 에서 실행할 때 의미가 있다.