[ JavaScript ] function

기본적인 함수 선언과 호출

function printHello() {
    console.log('Hello');
}

printHello();

function log(message) {
    console.log(message);
}

log('Hello@');
log(1234);

JS에서는 타입선언을 하지 않기 때문에, 함수를 보고 이게 정확하게 무슨 용도의 함수인지 파악하기 난해한 점이 있다.

그래서 프로젝트를 할경우에는 typeScript같이 변수선언을 하는 것을 사용

 

 

2. Parameters

function changeName(obj) {
    obj.name = 'coder';
}

const ellie = { name : 'ellie' };
changeName(ellie);
console.log(ellie);

 

3. Default Parameters

function showMessage(message, from = 'unknown'){
    console.log(`${message} by ${from}`);
}

showMessage('Hi!');

 

4. Rest Parameters

function printAll(...args) {
    for (let i = 0; i < args.length; i++){
        console.log(args[i]);
    }

}

... 를 사용하면 배열형태로 Parameters를 받을 수 있다.

for (const arg of args){
    console.log(arg);
}

 

배열에 있는 원소를 하나씩 꺼내서 for문을 돌리는 방법은 이렇게

for of를 쓰는 방법과

   args.forEach((arg) => console.log(arg));

 

forEach 함수를 사용해서 for문을 돌리는 방법이 있다.

 

5. Local scope

let globalMessage = 'global'; //global variable
function printMessage() {
    let message = 'hello';
    console.log(message);
    console.log(globalMessage);

    function printAnother() {
        console.log(message);
        let childMessage = 'child hello';
        console.log(childMessage);
    }
    // console.log(childMessage);
}

함수의 블럭안에서 선언된 변수는 블럭 밖에서는 사용 불가능하다 (지역변수)

전역함수로 사용된 변수는 어디서든 사용 가능하다

 

6. Return a value

function sum(a, b) {
    return a + b;
}
const result = sum(1, 2);
console.log(`sum : ${result}`);

 

7. Early return, Early exit

 

나쁜 예

function upgradeUser(user) {
    if (user.point > 10) {
        //long upgrade logic ...
    }
}

 

좋은 예

function upgradeUser(user) {
    if (user.point < 10) {
        return;
    }
    //long upgrade logic ...
}

먼저 조건을 불만족 했을 때에는, return을 시켜버려서 불필요한 로직이 실행 안되도록 하는 것이 좋은 예이다.

 

8. CallBack fucntion

function randomQuiz(answer, printYes, printNo) {
    if (answer === 'love you'){
        printYes();
    } else {
        printNo();
    }
}

const printYes = function() {
    console.log('Yes');
}

const printNo = function print() {
    console.log('no!');
}

randomQuiz('wrong', printYes, printNo);
randomQuiz('love you', printYes, printNo);

조건에 따라서 함수를 호출시키는 것

 

9. Arrow function

const simplePrint = () => console.log('simplePrint!');
// const add = (a, b) => a + b;
const simpleMultiply = (a, b) => {
    //do something more
    // {]으로 처리한 경우에는 return이 필요함
    return a * b;
};

함수선언을 간결하게 할 수 있는 방법

 

10. IIFE

(function hello() {
    console.log('IIFE');
})();

 

함수를 선언하고 바로 호출하는 방법

 

11. anonymous function

const print = function () { //anonymous function 
    console.log('print');
};
print();
const printAgain = print;
printAgain();
const sumAgain = sum;
console.log(sumAgain(1, 3));

함수를 변수로 선언하는 것이 가능한데, 그 때 함수의 이름을 선언하지 않은 것을 뜻한다.

 

 

참고자료

https://www.youtube.com/watch?v=_DLhUBWsRtw&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=6&ab_channel=%EB%93%9C%EB%A6%BC%EC%BD%94%EB%94%A9by%EC%97%98%EB%A6%AC