Front-end/JavaScript

[JavaScript] 함수[재사용성,입력(input), 출력(output)]

윤민_ 2021. 10. 20. 23:21

함수: 상자 함(函) 셈 수(數)

function: 기능

함수란?

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

 

재사용성이란?

1.내가 작성한 코드를 여러 맥락에서 다시 사용 할 수 있도록 도와준다.

2. 코드 작성 시간을 단축 할 수 있다.

3. 코드 자체의 변화가 생기면, 모든 코드가 동시에 변화가 일어난다.

4. 코드의 가독성 증가

즉, 유지 보수의 용이한 특성을 가졌다.

 

함수(function)의 기본 문법틀

function 함수명([인자...[,인자]]){
  코드
  return 반환값
}
function numbering(){
  document.write(1);  
}
//함수를 정의(선언)함, (변수를 선언하듯)
numbering();
//함수를 실행. 괄호()가 있기때문에 JS에서 함수 넘버링(상단)을 찾아서 호출

 

 

function numbering(){
  i = 0;
  while(i < 10){
    document.write(i);
    i += 1;
  }  
}
numbering();
/*
numbering을 여러번 작성하면 작성한 값 만큼 출력된다.
이렇듯 함수는 재사용성의 성격을 지니고 있고 fuction안의 값을 변경함으로써 보다 쉽게 내가 작성한 코드를 다시 사용 할 수 있다.
*/

함수의 효용

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

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

반복문의 효용성과 함수의 효용성의 차이점

반복문 함수
기계적으로 일정한 반복을 그 자리에서 실행할때 의미가있다. 반복적으로 실행되는 로직이, 여러가지 맥락에서 반복되서 사용해야하는 경우에 함수가 더 의미가 있다.

함수의 입력과 출력

 

출력(return)

function get_number1(){
  return "egoing";
}

function get_number2(){
  return "k8805";
}

alert(get_number1());
alert(get_number2());

return이 등장하면 하는 일

1. 함수를 종료 return뒤에 코드가 있더라도 실행하지 않는다.

2. return뒤에있는 세미콜론(;)전에 있는 코드(값)를 함수의 출력 값으로 반환한다.

즉, return이 나오면 함수를 종료하고 return뒤에 값을 출력한다.

function get_number1(){
  return "egoing";
  return "coding";
  return "log";
}

alert(get_number1());

이 함수의 출력은 egoing이다.

그 이유는 return값으로 함수가 종료되고 egoing을 출력했다.

그렇기에 밑의 값들은 함수들은 동작하지않는다.

 

입력(input)

function get_argument(arg){
  return arg;
}

alert(get_argument(1));
alert(get_argument(2));
/*
arg라는 변수에 input을 넣을 시
return(함수 종료 후)뒤에 값을 출력한다.

arg를 매개변수(parameter)라 부른다.
get_argument(1)에서 숫자 1은 인자라 부른다.
*/

함수를 정의하는 다른 방법

numbering = function(){
  i = 0;
  while( i < 10 ){
    document.write( i );
    i += 1;
  }
}
//numbering이란 변수가 함수를 가지게 된 case이다.

//상단의 코드와 하단의 코드는 같은 코드이다.
function numbering(){
  i = 0;
  while( i < 10 ){
    document.write( i );
    i += 1;
  }
}
numbering();
<------------------------------>
(function numbering(){
  i = 0;
  while( i < 10 ){
    document.write( i );
    i += 1;
  }
})();
/*함수를 정의 후 호출을 동시에 할 수 있는 함수. 
익명함수라 부른다.이름 없이 즉시 호출하기 때문이다.
(일회성 함수에 많이 사용)
*/