[JavaScript] 9. 함수(function)

🎨 Programming/JavaScript

[JavaScript] 9. 함수(function)

ryang x2 2020. 9. 10. 16:48

728x90

# 사용자 정의 함수(function)

하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미합니다. 함수는 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있습니다.

● 함수 표현하는 방법

1. 함수 선언식

함수명();
function 함수명(){
실행문;
}

예시 )

<head>
    <title>사용자 정의함수 - 1</title>
    <script src="./js/function.js"></script>
</head>
<body>
    <h2>사용자 정의함수 - 1</h2>
    <script>
        'use strict'
        func1();
    </script>
</body>

function func1(){
    console.log('func1 함수가 호출되었습니다.');
}

2. 함수 표현식

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

예시 1)

const Hello1 = function(){
    console.log('Hello 실행되었습니다.')
};

<script>
        'use strict'
        Hello1();
</script>

예시 2)

<script>
        'use strict'
        func1();
        func1();
        func1();
        Hello1();
        Hello1();
        Hello1();
</script>

* 함수 표현식과 함수 선언의 차이점 -> 호이스팅(hoisting)

함수 표현식은 호이스팅이 되지 않고 함수 선언으로 함수는 호이스팅(hoisting)이 됩니다. 즉, 함수가 정의되기 전에 함수를 호출할 수 있습니다.

* 호이스팅(hoisting)이란?

자바스크립트 엔진이 script 태그를 만나면 자바스크립트 파일을 먼저 읽으면서 선언된 변수와 함수를 메모리에 저장합니다. 이 과정이 끝나면 코드가 위에서부터 차례대로 실행되는데 "함수 선언식"으로 만들어진 함수의 경우 메모리에 저장되어 있기 때문에 문제없이 실행되지만 "함수 표현식"으로 만든 함수는 아직 값이 할당되기 전이기 때문에 에러가 발생합니다.

● 매개변수가 있는 함수

1. 함수 선언식 방법

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

예시 )

function func2(x){
    console.log(`전달된 값 : ${x}`);
}

<script>
        'use strict'
        func2(10);
        func2('문자열');
        func2(true);
</script>

2. 함수 표현식 방법

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

예시 )

const Hello2 = function(x){
    for(let i=1; i<=x; i++){
        console.log(`${i} : Hello`);
    }
};

<script>
        'use strict'
        Hello2(5);
</script>

● 디폴트 매개변수의 사용

함수명(); // 값1, 값2로 기본값으로 설정
function 함수명(매개변수1=값1, 매개변수2=값2..){
실행문;
}

예시 )

function func3(x=1, y=1){
    console.log(`${x} + ${y} = ${x + y}`);
    console.log(`${x} - ${y} = ${x - y}`);
    console.log(`${x} * ${y} = ${x * y}`);
    console.log(`${x} / ${y} = ${x / y}`);
}

<script>
        'use strict'
        func3();
</script>

* 괄호 안에 값을 넣지 않은 경우 기존 함수의 값으로 적용된다.

<script>
        'use strict'
        func3(5,3);
</script>

* 괄호 안에 값을 넣은 경우, 넣은 대로 실행된다.

● 나머지 매개변수의 사용

생략 접두사(... )를 사용하여 특정 위치의 인수부터 마지막 인수까지를 한 번에 지정할 수 있습니다.

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

예시 )

const Hello3 = function(x, ...y){
    console.log(`x의 값 : ${x}`);
    for(let i=0; i<y.length; i++){
        console.log(`y의 값 : ${y[i]}`);
    }
}

<script>
        'use strict'
        Hello3(100, 10, 20, 30, 40, 50, 60);
</script>

* 첫번째 값은 x 그 외 값은 y로 적용된다!

● 리턴 값이 돌아오는 함수

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

예시 1)

// 호이스팅 되는 함수
function func1(){
    return "JavaScript";
}

<script>
        'use strict'
        let result = func1();
        console.log(`리턴된 값은 : ${result}`);
</script>

예시 2)

// 호이스팅 되지 않은 함수 
const total = function(start, end){
    let sum = 0;
    for(let i=start; i<=end; i++){
        sum +=i;
    }
    return sum;
}

<script>
        'use strict'
        result = total(1, 10);
        console.log(`리턴된 값은 : ${result}`);
</script>

예시 3)

const plus = function(num1, num2){
    return num1 + num2
}

const sub = function(num1, num2){
    return num1 - num2
}

const mul = function(num1, num2){
    return num1 * num2
}

const div = function(num1, num2){
    return num1 / num2
}

<script>
        'use strict'
        let num1 = Number(prompt('첫번째 숫자를 입력하세요.'));
        let num2 = Number(prompt('두번째 숫자를 입력하세요.'));
        
        let result1 = plus(num1, num2);
        console.log(`${num1} + ${num2} = ${result1}`);
        let result2 = sub(num1, num2);
        console.log(`${num1} - ${num2} = ${result2}`);
        let result3 = mul(num1, num2);
        console.log(`${num1} * ${num2} = ${result3}`);
        let result4 = div(num1, num2);
        console.log(`${num1} / ${num2} = ${result4}`);
</script>

▼▼▼

예시 4)

const Hello = function(){
    console.log('안녕하세요.');
}

const Js = function(){
    console.log('JavaScript!');
}

const Sel = function(sel, Hello, Js){
    switch(sel){
        case 1:
            Hello();
            break;
        case 2:
            Js();
            break;
    }
}

<script>
        'use strict'
        Sel(1, Hello, Js);
        Sel(2, Hello, Js);
</script>

예시 5)

<script>
        // ▼ 익명으로 함수를 만들자마자 실행하는 방법(가끔사용됨)
        (function(){
            console.log('안녕하세요.JavaScript!');
        })(); 
</script>

● 화살표 함수

ECMA6에 추가된 문법입니다. function 키워드를 사용하여 함수를 만든 것보다 간단하게 함수를 표현할 수 있습니다. 화살표 함수는 항상 익명입니다.

const Hello = function(){ <-- 익명
}

ex)

// 일반 함수
const func1 = function(){ console.log('JavaScript!');}

// 화살표 함수
const func1 = () => console.log('JavaScript!');
func1();

예시 )

<script>
        'use strict'
        const func1 = () => console.log('JavaScript!');
        func1(); 
</script>

1. 매개변수가 있는 경우

const func2 = x => x * x;
const result = func2(2); // 4

const func3 = (x, y) => x + y;
const result2 = func3(10, 3);  // 13

const func4 = (x, y) => {
        let sum = 0;
        for(let i=x; i<=y; i++){
                sum += i;
        }
        return sum;
}

* { }(중괄호)를 사용한 경우 무조건 return을 작성해야 된다. 쓰지 않으면 값을 전달하지 못함.

const func5 = (x, y) => { x + y; }
const result4 = func5(10, 3); -> undefined

예시 1)

<script>
        'use strict'
        const func2 = x => x * x;
        const result = func2(2);
        console.log(`result 값 : ${result}`);
</script>

예시 2)

<script>
        'use strict'
        const func3 = (x, y) => x + y;
        const result2 = func3(10, 3);
        console.log(`result2 값 : ${result2}`);
</script>

예시 3)

<script>
        'use strict'
        const func4 = (x, y) => {
        let sum = 0;
        for(let i=x; i<=y; i++){
                sum += i;
            }
            return sum;
        }
        const result3 = func4(1, 10);
        console.log(`result3 값 : ${result3}`);
</script>

예시 4)

<script>
        'use strict'
        const func5 = (x, y) => { x + y; }
        const result4 = func5(10, 3);
        console.log(`result4 값 : ${result4}`);
</script>

728x90