[JavaScript] 함수란, 익명 함수, 선언적 함수, 호이스팅

리버 River 2024. 3. 28. 22:32

2024. 3. 28. 22:32

1. 함수 function

🐰 자바스크립트 프로그램은 단순히 동작 하나만 실행되는게 아니라 여러 가지 동작이 연결된다

🐰 이렇게 동작해야 할 목적대로 묶은 명령을 함수 function (= 코드의 집합) 이라 함

🐰 함수를 사용하면 각 명령의 시작과 끝을 명확하게 구별할 수 있고,

묶은 기능에 이름을 붙여 필요할 때마다 호출하여 반복적으로 사용 가능

💡 함수를 사용하면 좋은 점
    1. 반복되는 코드를 한 번만 정리해놓고 필요할 때마다 호출하므로 반복 작업을 피할 수 있다
    2. 긴 프로그램을 기능별로 나눠 여러 함수로 나누어 작성하면 모듈화로 전체 코드의 가독성이 좋아진다.
    3. 기능별(함수별)로 수정이 가능하므로 유지보수가 쉽다.

💡 용어 정리
· 함수 정의 : 함수를 만든 것
    · 함수 호출 : 함수를 사용하는 것
    · 인수 : 함수를 호출할 때 괄호 내부에 여러가지 자료를 넣는 것
· 매개변수 : 함수를 정의할 때 전달받을 인수를 정의하는 것
    · 리턴 값 : 함수를 호출해서 최종적으로 나오는 결과

1) 매개변수와 리턴값

🍯 매개변수와 리턴값은 함수의 필수 요소가 아니고, 필요할 때만 사용

/* 기본형 */
function 함수명 (매개변수1, 매개변수2, ... 매개변수n) {
    문장;
    문장;
    return 리턴값;
}

<script>
    const f = function (x) {
        return x * x;
    }

    // 함수를 호출
    console.log(f(3)); // 9. 매개변수 x에 전달되는 인수가 3이고 리턴값이 9.
    console.log(f()); // NaN
</script>

자바스크립트는 인수와 매개변수의 개수가 달라도 에러가 나지 않음

<script>
    const test1st = function (a) {
        console.log(a);
    }
    
    test1st(); // undefined
    test1st(1); // 1
    test1st(1, 2); // 1
    test1st(1, 2, 3); // 1
</script>

매개 변수가 있는 함수 정의문

<script>
    const myFunc = function (name, area) {
        document.write('안녕하세요. ' + name + '입니다.', '<br>');
        document.write('사는곳은 ' + area + '입니다.', '<br><br>');
    };
    myFunc('홍당무', '서울');
    myFunc('깍두기', '부산');
</script>

2) return 문

🍯 데이터를 반환하고 강제 종료
🍯 return의 역할 1) 데이터를 반환 2) 함수의 강제 종료 (반환값이 없어도 됨)

데이터 반환

<script>
    const getAvg = function (arrData) {
        let sum = 0;
        for(let i = 0; i < arrData.length; i++) {
            sum += Number(prompt(`${arrData[i]} 점수는 ?`, `0`));
        }

        const avg = sum / arrData.length;
        return avg;
        //alert(avg); // return 이후의 코드라서 실행이 안됨. (Unreachable code)
    }

    const arrSubject = ['국어', '수학', '영어'];
    const result = getAvg(arrSubject);

    document.write(`평균 점수는 ${result}점 입니다.`);
</script>

강제 종료

<head>
<style>
        * {
            padding: 0;
            margin: 0;
        }

        #galleryZone {
            text-align: center;
        }
</style>
<script>

    let num = 1;
    const showGallery = function (direction) {
    /*
    다음을 클릭한 경우 pic_1.jpg -> pic_2.jpg : 번호가 증가
    이전을 클릭한 경우 pic_9.jpg -> pic_8.jpg : 번호가 감소
    */
    if  (direction === 1) { // 다음을 클릭한 경우
        if (num === 9) {
            alert('마지막 이미지입니다');
            return; // 이미지가 9개인 경우 num이 9인 경우 함수 종료
        }
         num++;
    } else { // 이전을 클릭한 경우
        if (num === 1) {
            alert('첫 이미지입니다.');
            return; // 첫 이미지가 1번이어서 종료
         }
         num--;
    }
    const imgTag = document.getElementById('photo'); // id 값이 photo인 요소를 가져옴
    imgTag.setAttribute('src', 'images/pic_' + num + '.jpg'); // id 값이 photo인 요소의 src 속성을 변경
    }
</script>
</head>
<body>
    <div id ="galleryZone">
        <p><img src="./images/pic_1.jpg" id="photo" alt=""></p>
        <p>
            <button onclick="showGallery(0)">이전</button>
            <button onclick="showGallery(1)">다음</button>
        </p>
    </div>
</body>

2. 익명 함수 선언하기

🐰 익명 함수 anonymous function : 이름이 없는 함수

🐰 익명함수는 변수 선언(함수 정의) 후 호출 가능
🐰 익명함수는 동일한 이름으로 재선언 불가능. let과 const의 특징

기본형 : function () {}
<!-- 변수 할당 --> 
let 변수 = function () {
    실행문;
}

<script>
    // 변수를 선언해서 함수를 할당.
    const func = function () {
        console.log('함수 내부의 코드입니다 ... 1');
        console.log('함수 내부의 코드입니다 ... 2');
        console.log('함수 내부의 코드입니다 ... 3');
        console.log('');
    }

    // 함수를 호출
    func();
    func();

    // 출력
    console.log(typeof func); // function. 함수의 자료형 확인
    console.log(func); // 함수 자체도 단순한 자료이므로 출력할 수 있음.
</script>

<script>
    /* 선언 전 호출시 */
    compute(); // Uncaught ReferenceError: Cannot access 'compute' before initialization
    let compute = function() {
        let x = 10;
        let y = 100;
        let result = x * y;
        console.log(result);
    };
    compute(); // 1000
</script>
<script>
    /* 재선언 시 */
    let compute = function() {
        let x = 10;
        let y = 100;
        let result = x * y;
        console.log(result);
    }; // Uncaught SyntaxError: Identifier 'compute' has already been declared 
</script>

3. 선언적 함수

🐰 선언적 함수 : 이름이 있는 함수

🐰 선언적 함수는 재정의 가능

 기본형 : function 함수 이름 () {}

✏️ 대부분의 프로그램은 선언적 함수만 사용하거나(C),

선언적 함수를 주로 사용하고 익명함수를 보조적인 수단(C++, 자바의 람다)으로 사용
✏️ 자바스크립트는 함수지향 프로그램(ECMA script 6 이후)이라서 변수에 함수 할당하거나,
익명함수를 주로 사용하고 선언적 함수를 보조적인 수단으로 사용하는 것을 지향함.

<script>
    // 함수를 생성
    function func1st () {
        console.log('함수 내부의 코드입니다 ... 1');
        console.log('함수 내부의 코드입니다 ... 2');
        console.log('함수 내부의 코드입니다 ... 3');
        console.log('');
    }

    // 함수를 호출
    func1st();
    func1st();

    // 출력
    console.log(typeof func1st); // function
    console.log(func1st);
</script>

동일한 이름의 함수가 존재하는 경우
- 선언적 함수의 경우 동일한 이름의 함수가 존재하면 뒤에 선언된 함수가 실행이 됨

<script>
    let num = 100;
    function menu() {
        num += 100;
        document.write(num, ": 앞의 함수 실행<br>");
    }
    menu(); // 100: 뒤의 함수 실행

    function menu() {
        document.write(num, ": 뒤의 함수 실행<br>");
    }
</script>

💡 선언적 함수를 변수에 할당하는 방법
1. 변수에 할당하면서 선언적 함수 선언
➡️ 변수에 할당하면서 선언적 함수를 선언하면 익명함수로 처리
2. 선언적 함수를 선언 후에 변수에 할당

<script>
    // 1. 변수에 할당하면서 선언적 함수 선언
    const func2nd = function namedFunc2nd() { // 변수를 선언해서 함수를 할당
        console.log('namedFunc2nd() 함수 내부의 코드입니다 ...');
        console.log('');
    }

    // 호출
    func2nd(); // 변수를 통해 함수를 호출.
    // namedFunction(); // Uncaught ReferenceError: namedFunction is not defined\
    console.log(typeof func2nd); // function. 함수의 자료형 확인

    // 2. 선언적 함수를 선언 후에 변수에 할당
    function namedFunc() {
        console.log('namedFunc() 함수 내부의 코드입니다 ...');
        console.log('');
    }
    const func1st = namedFunc; // 선언적 함수를 변수에 할당.

    func1st(); // 변수를 통해 함수 호출
    namedFunc(); // 함수를 호출
    console.log(typeof func1st); // function. 자료형 확인
</script>

4. 호이스팅 Hoisting

🐰 var로 선언한 변수 or 선언적 함수는 변수나 함수 이전에 호출하여도 에러를 발생하지 않음
🐰 자바스크립트 해석기는 소스를 훑고 var를 사용한 변수는 실행하기전에 기억해 두기 때문에 선언한 것과 같은 효과가 있다

<script>
    compute(); // 110. 선언적 함수는 함수 정의 전에 사용가능.
    function compute() {
        let x = 10;
        let y = 100;
        let result = x + y;
        console.log(result);
    }
    compute(); // 110
</script>

[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]

저작자표시 비영리 변경금지

'Programming Language > JavaScript' 카테고리의 다른 글

[JavaScript] 나머지 매개변수와 전개 연산자 (0)	2024.03.29
[JavaScript] 사용자 정의 함수 예제 (0)	2024.03.28
[JavaScript] 배열(Array)이란, 요소 추가 및 제거 (0)	2024.03.28
[JavaScript] 반복문 \| for문, while문, break문, continue문 (0)	2024.03.28
[JavaScript] if 조건문 (if-else & else-if), switch 문 (1)	2024.03.28

ID_ allriver