[Javascript] 자바스크립트 함수와 축약

함수

자주 사용되는 구문을 그룹화 한 형태.

f(x) = x+1;

• 키워드: f
• 조건값: x
• 수식: x+1

f(5) -> 6
f(10) -> 11

즉, f라는 키워드로 x+1이라는 수식을 재사용할 수 있다.

프로그래밍에서의 함수는 자주 사용되는 구문을 재사용을 목적으로 그룹화 한 형태로 이해할 수 있다.

#01. 자바스크립트 함수 정의

1) 함수 정의하기

function 키워드를 명시하고 함수의 이름을 지정한 후 괄호 ()를 명시한다. 그 뒤에 구문을 그룹화 하기 위한 블록 {}을 갖는다.

function sayHello(){
    console.log("Hello javascript.");
    console.log("안녕하세요 자바스크립트.");
}

2) 함수 호출하기

함수는 정의하는 것 만으로는 아무런 동작을 하지 않느낟.

반드시 정의된 함수를 실행시키는 명령을 내려야 하는데 이를 함수를 호출한다고 한다.

sayHello();

#02. 파라미터

함수가 실행되는데 필요한 조건값.

1) 수학에서의 의미

f(x) = x + 1;

함수 f(x)가 자신이 수행되는데 필요한 조건값 x를 갖는다. 수학에서는 이를 매개변수 혹은 파라미터라고 부른다.

2) 프로그램에서의 의미

프로그램의 함수도 자신이 실행하는데 필요한 조건값을 함수 정의 과정에서 괄호 ()안에 명시할 수 있으며 이를 파라미터라고 부른다.

function f(x) {
    var y = x+ 1;
    console.log(y);
}

f(100);

#03. 다중 파라미터

필요한 조건 값이 여러 개인 경우 콤마(,)로 구분하여 나열할 수 있다.

function sum(x,y,z){
    var result = x + y + z;
    console.log(result);
}
sum(1,2,3);

4) 함수 호출시 파라미터의 생략

파라미터를 요구하는 함수라 하더라도 호출시에 필요 없는 값은 마지막 파라미터부터 순차적으로 생략 가능함.

값이 전달되지 않은 파라미터는 undefined로 식별된다.

function foo(x,y){
    console.log("x=%s, y=%s", x,y);
    var result = 0;
    if(x!=undefined){ result += x; }
    if(y!=undefined){ result += y; }
    console.log(" >> result=%d", result);    
}

foo(100,200);
foo(1000);
foo();

5) 파라미터의 기본값 정의

함수 호출시 값이 전달되지 않는 경우를 대비하여 파라미터에 기본값을 정의할 수 있다.

function bar(x=1, y=2){
    console.log("x=%s, y=%s", x,y);
    var result = x + y;
    console.log(" >> result=%d", result);
}

bar(100,200);
bar(1000);
bar();

#03. 리턴

함수가 자신이 만들어낸 결과값을 자신을 호출한 위치로 되돌려 주는 것.

1) 수학에서의 리턴

수학에서의 함수도 자신이 호출된 위치로 결과값을 되돌려 준다.

f(x) = x + 1
y = f(5)
y = 6

2) JS에서의 리턴

결과값을 리턴하는 함수 정의하기

함수를 구성하는 블록 {}안에서 return 키워드를 사용하여 값을 전달한다.

function getTimes(x,y){
    var z = x * y;
    return z;
}

결과값을 리턴하는 함수 호출하기

a) 함수의 리턴값을 다른 변수에 할당하기

var times = getTimes(123, 45);
console.log(times);

b) 리턴값을 다른 연산자에서 활용하기

var a = getTimes(123,45) + 10000;
console.log(a);

c) 리턴값을 다른 함수의 파라미터로 전달하기

console.log(getTimes(100,20));

3) 함수의 실행 중단

함수가 실행되는 도중 return 키워드를 만나면 그 즉시 실행을 종료한다.

function returnBreak(x,y){
    if(x<10){
        return -1;
    }

    if(y<10){
        return -2;
    }

    return x+y;
}
console.log(returnBreak(1,100));

console.log(returnBreak(100,1));

console.log(returnBreak(100,20));

#04. 함수의 또 다른 형태

1) 함수를 변수에 대입하기

자바스크립트는 함수 자체가 객체 형태이기 때문에 다른 변수에 참조시켜 사용할 수 있다.

여기서는 객체를 특수한 기능을 갖는 변수의 한 종류로 이해합시다.

function say_hello(msg){
    console.log("say_hello(%s)", msg);
}

say_hello("Hello Node!!!");

var say = say_hello;
say("안녕하세요. 노드!!!");

2) 익명함수

다른 변수에 참조시킬 목적으로 함수를 정의할 때 부터 이름없이 정의하는 형태

전체적인 정의 형태가 대입문이므로 블록을 구성하는 중괄호 {}뒤에 세미콜론(;)이 위치해야 한다.

// 익명함수를 hello라는 변수에 참조시킴

var hello = function(msg){
    console.log("hello(%s)", msg);    
};

hello("안녕하세요. 노드!!!");

3) 콜백함수

파라미터로 전달되기 위해 사용되는 함수.

어떤 함수 A가 동작되는 과정 중에서 일부에 대한 처리가 상황에 따라 다르게 구성되어야 할 경우, 그 부분을 함수 형태로 묶어 파라미터로 받도록 할 수 있다.

콜백함수를 파라미터로 요구하는 함수 정의하기

이 함수는 x와 y의 연산 결과를 callback이라는 파라미터를 통해 수행하도록 구성되어 있다.

function something(x, y, callback){ //something에서 수행하는 동작을 3번째 파라메터인 callback가 정한다.

    var result = callback(x,y);
    console.log(x + "와 " + y + "의 연산 결과는 " + result);
}

콜백함수로 사용될 함수 정의하기

function plus(a,b) { return a+b; }
function minus(a,b) { return a-b; }
function times(a,b) { return a*b; }
function div(a,b) {return a/b;}
function f(a,b) { return a*a+b;}

콜백함수 사용하기

something(3,2,plus);
something(3,2,minus);
something(3,2,times);
something(3,2,div);
something(3,2,f);

익명함수 형태로 콜백함수 전달하기

something(2,4, function(a,b){
   var result = 0;
    for(var i=a; i<=b ; i++){
        for(var j=i ; j<10;j++){
            const k=i*j;
            result += k;
            console.log(i+ " x " + j + " = " + k );
        }
        console.log("------------");
    }
    return result;
});

5) 재귀함수

함수가 처리로직 내부에서 자기 자신을 호출하는 형태

재귀호출은 마지막에 종료 조건을 명시하지 않는다면 무한루프에 빠지게 된다. 그러므로 재귀호출을 구현할 때 가장 먼저 처리해야 할 것은 종료조건을 명시하는 것이다.

팩토리얼 구하기

function getFactorial(max){
    if(max<=1){
        console.log(1);
        console.log("-------");
        return 1;        
    }
    console.log(max + " x ");
    return max * getFactorial(max-1);
}

getFactorial(5);

파라미터로 전달된 단위의 구구단을 출력하는 재귀함수

function printGugu(level, depth=1){
    if(depth>9){
        return;
    }
    console.log(level + " x " + depth + " = " + level*depth);
    printGugu(level, depth+1); 
}
printGugu(8);

#05. 화살표 함수

ES6 버전부터 새롭게 추가된 구문 형식으로 기존의 함수 문법을 간단하게 축약하여 사용할 수 있다.

1) 기본 구문 형식

변수에 대입하는 익명 함수의 변형으로 이해할 수 있다.

익명함수 형태로 정의한 함수.

var foo = function(x){
    for(var i = 0; i<x ; i++){
        console.log("Hello World");
    }
}
foo(3);

화살표 함수 형태로 정의한 동일한 함수

function 키워드가 삭제되고 파라미터를 전달하기 위한 소괄호 ()와 블록을 구성하기 위한 중괄호 {} 사이에 => 기호가 추가된다.

var foo = (x)=>{
    for(var i = 0; i<x ; i++){
        console.log("Hello World");
    }
}
foo(3);

2) 파라미터가 하나만 존재하는 경우

파라미터를 감싸는 소괄호를 생략할 수 있다. 파라미터가 없거나 두 개 이상인 경우는 생략할 수 없다.

var foo = x => {
    for(var i=0; i<x;i++){
        console.log("Hello World");
    }
};
foo(3);

3) 처리 로직이 리턴을 위한 한 줄만 포함하는 경우

익명 함수 형식

var nonameReturn = function(x,y){
    return x+y;
};
console.log(nonameReturn(10, 20));

화살표 함수 형식

블록을 위한 {}를 생략하고 return 키워드도 생략할 수 있다.

var arrowReturn = (x,y) => x+y;

console.log(arrowReturn(100,400));

화살표 함수를 콜백함수로 사용하기

something(2,4,(a,b) => {
    return a*a +b +10;
});

something(2,4, (a,b)=>a*a+b+10);