[ONEBITE-REACT] JS 기본 - 함수 (Function)

의미

자바스크립트에서 코드를 재사용 가능한 블록으로 묶어주는 기능이다.
같은 코드를 변수명만 다르게 해서 let age1, let age2 등으로 반복 사용하면 효율도 떨어지고 가독성이 떨어지기에 이럴 경우 하나의 코드 블록으로 묶어주게 된다.

기본형

function 함수명(파라미터1, 파라미터2, ...) {
    실행할  코드

    return 리턴할값; // 선택사항이고 함수 사용이 종료되고 나서 반환할 값을 설정한다.

함수를 선언하는 것만으로는 함수가 실행되지 않는다. 함수를 선언하고 사용자가 설정한 함수명()을 사용해서 함수를 실행해야 한다.

function greeting () {
    console.log("안녕하세요")
} // 함수를 선언하는 것만으로는 안의 함수가 실행되지 않는다.

greeting(); // 함수를 실행해야 함수가 실행된다. 이 경우 안녕하세요가 콘솔에 출력됨.

파라미터 활용하기

함수에 파라미터를 사용하면 가변하는 값을 계산하도록 할 수 있다.

function getArea () {
    let width = 10;
    let height = 20;

    console.log(width * height);
}

getArea(); // 200

// 위와 같이 함수 내부에서 width와 height의 값을 변수로 초기화해서 계산을 하도록 할 수 있다.
// 하지만 width와 height의 값은 고정되어 있기 때문에 나중에 값을 바꾸기 까다롭다.
// 이런 경우 아래처럼 파라미터를 넣으면 유동적으로 함수를 실행할 수 있다.

function getArea2 (width, height) {
    console.log(width * height);
}

getArea2 (10, 20); // 200

함수를 선언할 때 소괄호 안에 넣은 값을 parameter 또는 매개변수라 한다.
그리고 함수를 실행할 때 arguments 또는 인수라 한다.

return으로 값 반환하기

함수를 설정한다고 하여 바로 계산 값이 출력되는 것이 아니기 때문에 return을 사용하면 계산이 끝난 값을 특정 변수의 값으로 초기화 할 수 있다.

function getArea (width, height){
    let area = width * height;

    return area;
}

console.log(getArea(10, 20)); // 200이 출력

그러나 return이 발생하면 해당 함수는 그 라인에서 종료가 되기 때문에 아래와 같이 return 다음에 코드를 작성해도 작동하지 않는다.

function getArea (width, height){
    let area = width * height;

    return area;

    console.log(getArea(10, 20)); // 미작동
}

함수 중첩하기

함수 안에서 또 다른 함수를 사용할 수 있다.

function getArea (width, height){
    function another() {
        console.log("another");
    }

    another();
    let area = width * height;

    return area;   
}

console.log(getArea(10, 20));

코드해석
function을 사용해 getArea라는 함수를 만들고 매개변수로 width와 height를 받는다.
이 함수를 실행하면 함수 another이 실행되는데, 이 함수는 콘솔에 "another"라는 텍스트를 출력하는 함수이다.
그리고 이 함수를 실행한다.
area라는 변수를 할당하고 값을 위에서 설정한 매개변수가 받는 width * height 값으로 초기화한다.
그리고 area 값을 반환해서 area 변수에 초기화한다.
그렇게 콘솔에 getArea라는 함수를 실행시키고 인수로 10, 20을 넣으면, 가장 먼저 실행되는 another함수가 실행되고, area 계산이 뒤에 이루어져 콘솔에 출력되게 된다.

호이스팅(Hoisting)

호이스팅이란 자바스크립트에서 변수나 함수 선언이 스코프의 최상위로 끌어 올려지는 현상을 말한다.
함수에서도 이를 확인할 수 있는데, 예를 들어서 위에서 계속 실습했던 코드를 보면 function getArea()와 같이 함수를 먼저 선언하였는데,
만약 함수를 선언하기도 전에 console.log(getArea(10, 20));라고 코드를 작성했다면, 자바스크립트는 위에서 아래로 코드를 읽어 나가기 때문에 getArea라는 함수가 어떤 함수인지 몰라서 작동하지 않아야 하지만 이 경우에 변수나 함수의 선언이 먼저 일어난 것처럼 코드의 최상위로 끌어 올려지는 호이스팅 현상이 발생하기 때문에 함수를 선언하기 전에 콘솔을 찍는다든지, 함수를 계산하는 코드를 작성하더라도 정상적으로 작동이 된다.
이를 잘 이용하면 유연하게 코딩을 할 수 있다.

console.log(getArea(10, 20)); // getArea라는 함수 선언이 이루어지기 전에 console에 불러왔지만
// 호이스팅이 발생해서 정상 작동한다.

function getArea (width, height){
    function another() {
        console.log("another");
    }

    another();
    let area = width * height;

    return area;   
} // 여기에서 선언한 함수는 코드창에서 가장 맨 위에서 작성된 것처럼 작동하는 호이스팅 현상이 발생한다.
// 콘솔에는 정상적으로 "another", 200이 출력된다.