호쌤
호쌤 Just For Fun

[JS] 함수

크리에이티브 커먼즈 라이선스 ITPAPER(호쌤,쭈쌤)에 의해 작성된 ≪[JS] 함수≫은(는) 크리에이티브 커먼즈 저작자표시-비영리-동일조건변경허락 4.0 국제 라이선스에 따라 이용할 수 있습니다.
이 라이선스의 범위 이외의 이용허락을 얻기 위해서는 leekh4232@gmail.com으로 문의하십시오.

[JS] 함수

일반적인 수학의 함수는 하나의 수식을 대변하는 특정 키워드를 의미합니다. 아래의 함수가 있을 때 f라는 키워드로 아래와 같이 x+1이라는 수식을 재사용할 수 있으며 이는 아래와 같이 조건값에 따라 각각 다른 결과를 반환하게 됩니다.

\[f(x) = x + 1\]
키워드 조건값 수식
f x x + 1

즉, 아래와 같이 수식이 재활용 됩니다.

\(f(5) = 5 + 1 = 6\)
\(f(10) = 10 + 1 = 11\)

#01. 자바스크립트 함수

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

1) 함수 정의하기

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

1
2
3
4
function sayHello() {
    console.log("Hello Javascript.");
    console.log("안녕하세요 자바스크립트.")
}

2) 함수 호출하기

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

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

1
sayHello();
▶ 출력결과
1
2
Hello Javascript.
안녕하세요 자바스크립트.

#02. 파라미터

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

1) 수학에서의 의미

\[f(x) = x + 1\]

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

2) 프로그램에서의 의미

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

파라미터가 정의된 함수를 호출할 경우 괄호()안에 조건에 맞는 값을 전달해야 한다.

1
2
3
4
5
6
function f(x) {
    let y = x + 1;
    console.log(y);
}

f(100);
▶ 출력결과
1
101

3) 다중 파라미터

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

정의된 파라미터들은 원칙적으로 함수 호출시 해당 값들을 전달해야 한다.

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

sum(1, 2, 3);
▶ 출력결과
1
6

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function foo(x, y) {
    console.log("x=%s, y=%s", x, y);

    // undefined값은 연산을 수행할 수 없으므로, 파라미터를 검사 후 처리해야 함
    var result = 0;
    if (x != undefined) { result += x; }
    if (y != undefined) { result += y; }
    console.log(" >> result=%d", result);
}

foo(100, 200);   // var x=100,y=200
foo(1000);       // var x=1000,y=undefined
foo();           // var x=undefined,y=undefined
▶ 출력결과
1
2
3
4
5
6
x=100, y=200
 >> result=300
x=1000, y=undefined
 >> result=1000
x=undefined, y=undefined
 >> result=0

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

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

1
2
3
4
5
6
7
8
9
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);   // var x=100,y=200
bar(1000);       // var x=1000,y=2
bar();           // var x=1,y=2
▶ 출력결과
1
2
3
4
5
6
x=100, y=200
 >> result=300
x=1000, y=2
 >> result=1002
x=1, y=2
 >> result=3

#03. 리턴

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

1) 수학에서의 리턴

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

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

2) JS에서의 리턴

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

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

1
2
3
4
function getTimes(x , y) {
    var z = x * y;
    return z;       // <-- 결과값 리턴
}

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

a) 함수의 리턴값을 다른 변수에 할당하기
1
2
var times = getTimes(123, 45);
console.log(times);
▶ 출력결과
1
5535
b) 리턴값을 다른 연산식에서 활용하기
1
2
var a = getTimes(123,45) + 10000;
console.log(a);
▶ 출력결과
1
15535
c) 리턴값을 다른 함수의 파라미터로 전달하기
1
console.log( getTimes(100, 20) );
▶ 출력결과
1
2000

3) 함수의 실행 중단

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function returnBreak(x, y) {
    if (x < 10) {
        return -1;
    }

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

    return x + y;
}

// 첫 번째 if문에 의해 처리가 중단되고 -1이 반환됨
console.log( returnBreak(1, 100) );

// 두 번째 if문에 의해 처리가 중단되고 -2가 반환됨
console.log( returnBreak(100, 1) );

// 정상 실행 됨
console.log( returnBreak(100, 20) );
▶ 출력결과
1
2
3
-1
-2
120

#04. 함수의 또 다른 형태

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
// say_hello라는 이름을 갖는 일반적인 함수의 사용과 호출
function say_hello(msg) {
    console.log("say_hello(%s)", msg);
}

say_hello("Hello Node!!!");

// 함수는 Object 타입으로 변수의 일종이므로 변수에 함수를 대입 가능.
var say = say_hello;

// 함수가 대입된 변수는 그 자체가 함수의 역할을 한다.
say("안녕하세요. 노드!!!");
▶ 출력결과
1
2
say_hello(Hello Node!!!)
say_hello(안녕하세요. 노드!!!)

2) 익명함수

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

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

1
2
3
4
5
6
// 익명 함수를 hello라는 변수에 참조시킴
var hello = function(msg) {
    console.log("hello(%s)", msg);
};

hello("안녕하세요. 노드!!!");
▶ 출력결과
1
hello(안녕하세요. 노드!!!)

3) 콜백함수

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

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

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

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

1
2
3
4
5
function something(x, y, callback) {
    // x와 y의 연산 결과를 파라미터로 전달받은 callback에게 다시 전달하여 리턴값을 받아 처리함
    var result = callback(x, y);
    console.log(x + "" + y + "의 연산 결과는 " + result);
}

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

1
2
3
4
5
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; }

콜백함수 사용하기

1
something(3, 2, plus);
▶ 출력결과
1
3와 2의 연산 결과는 5
1
something(3, 2, minus);
▶ 출력결과
1
3와 2의 연산 결과는 1
1
something(3, 2, times);
▶ 출력결과
1
3와 2의 연산 결과는 6
1
something(3, 2, div);
▶ 출력결과
1
3와 2의 연산 결과는 1.5
1
something(3, 2, f);
▶ 출력결과
1
3와 2의 연산 결과는 11

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

1
2
3
4
5
6
7
8
9
10
11
12
13
// 주어진 파라미터 범위 안에서 모든 구구단 결과값의 총 합을 리턴하는 콜백
something(2, 4, function(a, b) {
    var result = 0;
    for (let i=a; i<=b; i++) {
        for (let j=1; j<10; j++) {
            const k = i * j;
            result += k;
            console.log(i + " x " + j + " = " + k);
        }
        console.log("---------");
    }
    return result;
});
▶ 출력결과
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2 x 1 = 2
2 x 2 = 4
2 x 3 = 6
2 x 4 = 8
2 x 5 = 10
2 x 6 = 12
2 x 7 = 14
2 x 8 = 16
2 x 9 = 18
---------
3 x 1 = 3
3 x 2 = 6
3 x 3 = 9
3 x 4 = 12
3 x 5 = 15
3 x 6 = 18
3 x 7 = 21
3 x 8 = 24
3 x 9 = 27
---------
4 x 1 = 4
4 x 2 = 8
4 x 3 = 12
4 x 4 = 16
4 x 5 = 20
4 x 6 = 24
4 x 7 = 28
4 x 8 = 32
4 x 9 = 36
---------
2와 4의 연산 결과는 405

5) 재귀함수

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

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

팩토리얼 구하기

1
2
3
4
5
6
7
8
9
10
11
function getFactorial(max) {
    if (max <= 1) { // 종료조건
        console.log(1);
        console.log("--------");
        return 1;
    }
    console.log(max + " x ");
    return max * getFactorial(max-1);
}

getFactorial(5);
▶ 출력결과
1
2
3
4
5
6
7
5 x
4 x
3 x
2 x
1
--------
120

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

1
2
3
4
5
6
7
8
9
10
function printGugu(level, depth=1) {
    if (depth > 9) {
        return;
    }

    console.log(level + " x " + depth + " = " + level*depth);
    printGugu(level, depth+1);
}

printGugu(7);
▶ 출력결과
1
2
3
4
5
6
7
8
9
7 x 1 = 7
7 x 2 = 14
7 x 3 = 21
7 x 4 = 28
7 x 5 = 35
7 x 6 = 42
7 x 7 = 49
7 x 8 = 56
7 x 9 = 63

#05. 화살표 함수

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

1) 기본 구문 형식

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

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

1
2
3
4
5
6
7
var foo = function(x) {
    for (var i=0; i<x; i++) {
        console.log("Hello World");
    }
};

foo(3);
▶ 출력결과
1
2
3
Hello World
Hello World
Hello World

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

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

1
2
3
4
5
6
7
var foo = (x) => {
    for (var i=0; i<x; i++) {
        console.log("Hello World");
    }
};

foo(3);
▶ 출력결과
1
2
3
Hello World
Hello World
Hello World

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

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

1
2
3
4
5
6
7
var foo = x => {
    for (var i=0; i<x; i++) {
        console.log("Hello World");
    }
};

foo(3);
▶ 출력결과
1
2
3
Hello World
Hello World
Hello World

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

익명 함수 형식

1
2
3
4
5
var nonameReturn = function(x, y) {
    return x + y;
};

console.log(nonameReturn(10, 20));
▶ 출력결과
1
30

화살표 함수 형식

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

1
2
3
var arrowReturn = (x, y) => x+y;

console.log(arrowReturn(100, 400));
▶ 출력결과
1
500

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

1
2
3
4
// 코드 블록을 가져가는 경우
something(2, 4, (a, b) => {
    return a*a + b + 10;
});
▶ 출력결과
1
2와 4의 연산 결과는 18
1
2
// 단일행을 리턴하는 경우
something(3, 5, (a, b) => a*a + b + 10);
▶ 출력결과
1
3와 5의 연산 결과는 24

크리에이티브 커먼즈 라이선스 ITPAPER(호쌤,쭈쌤)에 의해 작성된 ≪[JS] 함수≫은(는) 크리에이티브 커먼즈 저작자표시-비영리-동일조건변경허락 4.0 국제 라이선스에 따라 이용할 수 있습니다.
이 라이선스의 범위 이외의 이용허락을 얻기 위해서는 leekh4232@gmail.com으로 문의하십시오.

comments powered by Disqus