함수

함수는 프로그램에서 반복적으로 사용되는 기능을 만들어내기 위한 코드의 집합입니다.

분류 종류 설명
사용자 정의 함수 선언적 함수
익명적 함수
 프로그램에서 필요한 기능을 사용자가 직접 정의해서 사용하는 함수
내장 함수 인코딩, 디코딩함수
숫자 판별 함수
유·무한값 판별함수
숫자변환 함수
문자 변환 함수
자바스크립트 문자 변경 함수 		프로그램 개발에서 자주 사용되느 기능들을 자바스크립트 내부적으로 제공해주는 함수입니다.

1. 선언적 함수


선언적 함수의 형식

function 함수( ){
실행문;
}

function compute( ){
console.log('선언적 함수');
}


선언적 함수의 호출

'선언적 함수'는 함수를 호출할 때 함수의 앞 또는 뒤에서 호출 가능

function comput(){
console.log('선언적 함수');
}
compute();

compute();
function comput(){
console.log('선언적 함수');
}

var로 선언한 변수와 선언적 함수는 변수, 함수 선언 이전에 호출하여도 에러를 발생시키지 않습니다

2. 익명 함수


익명 함수의 형식

'익명 함수'는 변수에 함수 데이터를 저장하여 변수를 마치 함수처럼 사용 할 수 있도록 만들어 줍니다.

var 변수 = function()function {
실행문;
};

var compute = function( ){
console.log('익명 함수');
};

익명 함수의 호출

'익명 함수'는 변수 선언 이후에 호출해야 합니다.

var comput = function(){
console.log('선언적 함수');
}
compute();


<즉시 실행 함수(Immediately-invoked function expression)>

익명 함수 중에는 필요에 따라 일회성으로 사용되는 함수도 있습니다. '즉시 실행 함수'는 선언과 동시에 함수가 실행되며 함수명이 없기 때문에 재호출 할 수 없습니다. (처음 한번만 실행되는 초기화 코드에 사용)

function(){
실행문;
})();

(function(){
var sum = 10;
cosole.log(sum);
})();

[예제] 
<!DOCTYPE html>
<html lang="co">
<head>
    <meta charset = "UTF-8">
    <title>즉시 실행 함수</title>
    <script>
        (function(){
            life();
        })();
        function life(){
            console.log('즉시 실행 함수1');
        }
        var instant = (function(){
            console.log('즉시 실행 함수2');
        })();
    </script>
</head>
</html>
[결과]
즉시 실행 함수1
즉시 실행 함수2

3. return함수, 매개변수 함수


3-1. return함수

return은 함수를 통해 처리된 결과를 반환시켜주는 명령어

[예제] 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset = "UTF-8">
    <title>RETRUN함수</title>
    <script>
        function process(){
          var kor = 100;
          var eng = 90;
          var avg = (kor + eng)/2;
          return avg;
        }
        console.log(process());
    </script>
</head>
<body>
</body>
</html>
[결과]
95

return은 함수를 호출한 곳으로 결과 데이터를 반환하고 함수는 종료됩니다.


3-2. 매개변수 함수

함수를 호출할 때 전달하는 변수 - 매개변수

매개변수가 있는 함수의 형식

function 함수명(맥변수1.매개변수2...){
실행문;
}
함수명(매개변수1값, 매개변수2값...)

function getAvg(s1, s2){
var avg = (s1, s2)/2;
feturn avg;
}
console.log(getAvg(90,80));//85

var 변수명 = function(매개변수1, 매개변수2...){
실행문;
};
변수명(매개변수1값, 매개변수2값...);

var getAvg = function(s1, s2){
var avg = (s1 + s2)/2;
return avg;
};
console.log(getAvg(90, 80));//85

(function(매개변수1, 매개변수2...){
실행문;
}
)(매개변수1값, 매개변수2값);

(function(s1, s2){
var avg = (s1+s2)/2;
console.log(avg);//85
}
)(90, 80);

<매개변수의 갯수가 정해지지 않은 함수>

매개변수가 있는 함수의 경우 매개변수의 갯수가 정해져 있습니다.
매개변수의 갯수를 정할 수 없는 함수를 만들어야 하는 경우 발생시 함수에 전달되는 매개 변수 값을 저장해주는 argugment객체를 사용하여 함수를 만들 수 있다.
함수 안에서 argument객체를 사용하면 매개변수를 배열이라는 형태로 저장
arguments.length는 arguments에 저장되어있는 배열의 개수

function showSubject(){
console.log(argugments[0] + ',' + argugments[1]); // html, css
console.log(argugments.length); //2
}
showSubject('html', 'css');

3-3. 화살표 함수

=>를 이용하여 함수를 간결하게 표현할 때 사용


화살표 함수는 function 키워드를 생략하고 부등호'='과'>'을 합쳐 코딩하며 항상 익명함수 형식으로 표현합니다
단일 명령문일 경우에는 함수의 중괄호{}와 return을 생략가능


var doMultiplicstion = (s1, s2) => s1*s2;
concole.log(doMultiplicstion(2, 5)); //10
var doMultiplicstion = (s1, s2) =>{
var avg = (s1+s2)/2;
retrun avg;
}
concole.log(doMultiplicstion(2, 5)); //3.5