18. 함수 (Functions)

안녕하세요. 박기린입니다.

지금부터 자바스크립트의 함수에 대해 알아보겠습니다.

 

---

 

 

Function

JS의 함수 호출 키워드는 'function'입니다.

'함수를 불러온다'라는 표현으로 'calling' or 'running' or 'invoking' + 'functions'라는 단어를 사용합니다.

 

function logger() {
    console.log('My name is yosep');
}
logger();

function fruitProcessor(apples, oranges) {
    const juice = `Juice with ${apple} apples and ${oranges} oranges.`;
    return juice;
}

const appleJuice = fruitProcessor(5, 0);
console.log(appleJuice);

const appleOrangeJuice = fruitProcessor(2, 4);
console.log(appleOrangeJuice);

function 키워드 다음에 함수의 이름을 붙이고, (괄호) 안에 파라미터를 넣습니다. 파라미터가 여러 개일 경우 ', 콤마'를 사용해서 넣어줍니다. 

함수를 통해 연산된 값을 반환하고 싶은 경우, return 키워드를 사용하고 그 다음에 반환하고자 하는 값을 입력해줍니다.

---

 

 

 

Functions Declarations vs Expressions

js의 함수 선언 법에는 두 가지 유형이 있습니다.

 

1. Function declaration

function calcAge1(birthYear) {
    return 2022 - birthYear;
}

const age1 = calcAge1(2000);
console.log(age1); // 22

흔히들 아는 function 키워드와 함께 선언하는 방식입니다.

다른 언어들과 유사한 방식의 함수 선언 법입니다.

 

2. Function expression (anonymous function)

const calcAge2 = function (birthYear) {
    return 2022 - birthYear;
}
const age2 = calcAge2(2000);
console.log(age1, age2); // 22 22 

JS의 expression 개념을 이용해서, 함수가 expression이 되어 변수 안에 담겨지는 모습을 띈 함수 선언 법입니다.

위의 예제 코드를 보시면, 함수가 expression이 되어서 calcAge2에 저장됩니다. 그리고 calcAge2는 함수가 됩니다.

JS에서 function은 value가 됩니다. 비록 String, Number와 같은 data type은 따로 없지만 value가 됩니다.

 

 

Fuction expression 선언 법 중에는, '화살표 함수' 선언 법이 있습니다. 이에 대한 내용은 다음 글에서 설명을 드리겠습니다. (화살표 함수에 대한 소개글 : https://arnopark.tistory.com/496)

 

---

 

 

 

Functions Declarations와 Expressions의 차이

둘의 가장 큰 차이점은 hoisting 가능 여부에 있습니다.

Expressions의 경우, 무조건 함수가 먼저 선언된 후에 call 할 수 있습니다.

// Functions Declarations
const age1 = calcAge1(2000);
function calcAge1(birthYear) {
    return 2022 - birthYear;
}

console.log(age1); // 22 - OK

// Functions Expressions
const age2 = calcAge2(2000);
const calcAge2 = function (birthYear) {
    return 2022 - birthYear;
}
console.log(age1, age2); // ReferenceError
*/

JS 개발자들은 각각 선호에 따라 두 방법을 사용합니다. 그렇기 때문에 두 방법 모두를 잘 숙지하셔야 합니다.

실제 개발을 할 때는 둘 중 하나만 채택해서 일관성있게 사용하도록 합시다.

---

 

 

 

함수 안에 다른 함수 불러오기

function cutFruitPieces(fruit) {
    return fruit * 4;
}

function fruitProcessor(apples, oranges) {
    const applePieces = cutFruitPieces(apples);
    const oragePieces = cutFruitPieces(oranges);

    const juice = `Juice with ${applePieces} piece of apple and ${oragePieces} piece of orange.`;
    return juice;
}
console.log(fruitProcessor(2, 3));

예제 코드처럼 함수 안에 다른 함수를 추가해서 선언할 수 있습니다.