함수(function)

함수(function)란 하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여준다.

 

- 작성한 코드를 여러 맥락에서 다시 사용할 수 있도록 하는 것

- 코드 작성 시간 감소

- 사용한 모든 맥락에서 모두 함께 변경 가능 ( 유지보수 용이 )

- 가독성이 좋아짐

 

함수의 형식

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

함수는 function 뒤에 함수의 이름이 오고, 소괄호가 따라온다. 소괄호에 인자라는 값이 차례로 들어오는데, 이 값은 함수를 호출할 때 함수의 로직으로 전달될 변수다. 인자는 생략할 수 있다. 함수를 호출 했을 때 실행하게 될 부분이 중괄호 안쪽에 온다.

 

예시)

function numbering(){   // 이것은
     document.write(1); // 함수를 정의한것
}						// 입니다

numbering(); // 함수는 괄호를 꼭 붙여줘야 호출할 수 있음 !
// { } 안의 값 출력

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

///출력값 0123456

위의 예제 제일 하단에 numbering이라는 이름의 함수가 호출되고 있다.

 

함수가 없다면 ?

아래 예제를 보자. 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번을 해야 한다면? 그리고 그 내용을 수정해야 한다면? 화가 날 것이다.

함수를 사용한다면 이러한 문제를 현저히 줄일 수 있다. 아래의 예제를 보자. 결과는 같지만 로직은 단 한번만 등장한다.

 

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

numbering();
numbering();
numbering();
numbering();
numbering();

하지만 이렇게 함수를 호출해도 1000번을 해야한다면 번거로울 것이다.

이럴 때 for문을 쓰면 편리하다.

function numbering(){
	var i = 0;
    while(i < 20){
    	document.write(i+"<br />"); // <br> 띄어쓰기도 넣었음
        i += 1;
    }
}

for (i = 0; i < 1000; i+=1){
	numbering();   /// 이 안에 함수의 수식을 넣어도 된다
    }
    
for (i = 0; i < 1000; i+=1){
	var i = 0;
    while(i < 20){
    	document.write(i+"<br />"); /// 이런식으로 ! 
        i += 1;						
    }
    }

 

for 문 안에 함수의 수식을 넣어도 되는 이유는 반복문도 함수와 마찬가지로 어떠한 코드, 어떠한 로직을 반복적으로 사용할 때, 재사용 할 때 사용할 수 있는 것이 반복문이기 때문.

반복문과 함수를 비교했을 때 서로의 효용이 다르다.

반복문 : 기계적으로 일정한 반복을 그 자리에서 실행할 때 의미가 있음

함수 :  반복적으로 실행되는 로직이 여러가지 맥락에서 반복되어서 사용해야 하는 경우에는 함수가 의미가 있는 것

 

반복문은 한곳에서 반복되는거지만, 함수는 여기저기에서 호출만 하면 반복적으로 필요한 맥락에서 호출해서 사용할 수 있다는 것.

 

함수의 재사용성이 중요 = 이 코드를 좋은 부품으로 만드는 것이 목표

 

입력과 출력

function: 기능, 작용

함수: 상자 함

                      

return

리턴이 등장하면 두가지 일을 한다
1. return의 함수를 종료시킨다.
2. 값을 함수의 출력값으로 반환함.

function bf_means(){
	return 'bryan'; // 
}

function best_friend(){
	return 'teo';
}

alert(bf_means());
alert(best_friend());
//결과값 : 'bryan'
//		  'teo'

function bf_means(){
   return 'bryan';
    return 'teo';
    return 'bf';
}
alert(bf_means());
// ? 결과값 : 'bryan' 그리고 끝
// ! 왜냐하면 return이 나오면 즉시 종료되어 첫번째 return이 배출되기 때문에
// 그 이후값들은 동작하지 않게됨

 

인자

function get_argument(arg){
	return arg; // arg = 매개변수 (parameter)
}

alert(get_argument(1));  //  arg = 1 = 인자 (argument)
alert(get_argument(2));  //  arg = 2 = 인자 (argument)

//

function get_argument1(arg){
	return arg*1000;
}

alert(get_argument(1));  //  arg = 1000
alert(get_argument(2));  //  arg = 2000

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

alert(get_arguments(10,20)); // 10 + 20 = 30
alert(get_arguments(20,30)); // 20 + 30 = 50

함수를 정의 하는 다른 방법

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

///

(function (){
	i = 0;              //익명함수:
    while(i < 10){		//이름이 필요 없고 바로 실행해야 하는 경우에 사용
    	document.write(i);
        i += 1;
     }
 })(); 

함수는 코드의 재활용성을 높혀준다!!!!!

 

// 문자열을 인자로 받아서 느낌표를 붙여서 리턴 해주는 함수 bryanTeo가 있다.
// 함수 bryanTeo의 첫 번째 인자로 문자열 "Shut up"을 넣어서 호출하고, 그 결과값을 변수 word에 할당하기.
let word; 
 word = bryanTeo('Shut up')

function bryanTeo(word) {
  if (typeof word !== 'string') {
    return 'wrong type';
  } else {
    return word + '!';
  }
}
//결과값 'Shut up!'