할머니의 콤퓨타 도전기

(Javascript) Function 본문

Web Front-end/Javascript

(Javascript) Function

ji.o.n.e 2021. 5. 4. 01:37

First-class function

  • functions are treated like any other variable
  • can be assigned as a value to variable
  • can be passed as an argument to other functions
  • can be returned by another function

Function expression

  • a function declaration can be called earlier than it is defined. (hoisted)
    • 함수가 선언되기 이전에 호출해도 호출 가능
    • 자바스크립트 엔진이 선언된 것을 제일 위로 올려주기 때문
  • a function expression is created when the execution reaches it
    • function expression은 할당된 다음 부터 호출 가능
const print = function () { // anonymous function
    console.log('print');
};
print();
const printAgain = print;
printAgain();
const sumAgain = sum;
console.log(sumAgain(1, 3));

 

Callback function using function expression

  • 함수를 전달해서 원하면 전달된 함수를 호출하라고 전달하는 함수를 Callback function이라고 함
function randomQuiz(answer, printYes, printNo) { // 2가지의 callback funtions가 파라미터로 전달되어짐
    if (answer === 'love you') {
        printYes();
    } else {
        printNo();
    }
}
const printYes = function () { // anonymous function
    console.log('yes!');
};
// named function
// better debugging in debugger's stack traces
// 디버깅을 할 때, stack trace에 함수 이름이 나오게 하기 위해 사용
// recursions
const printNo = function print() {
    console.log('no!');
    print(); // 함수 안에서 또 함수 자신 스스로를 호출할 때 사용 (recursion)
};
randomQuiz('wrong', printYes, printNo);
randomQuiz('love you', printYes, printNo);

named function은 디버깅 할 때, stack trace에 함수 이름이 나오게 하기 위해 사용하거나 recursion 할 때 사용한다.

 

 

Arrow function

  • always anonymous
const simplePrint = function () {
    console.log('simplePrint!');
};

const simplePrint = () => console.log('simplePrint!');
const add = (a, b) => a + b;
const simpleMultiply = (a, b) => {
    // do something more
    return a * b; // block을 쓰게되면 return keyword를 이용해서 값을 return 해야함
}

 

IIFE

  • Immediately Invoked Function Expression
  • 선언함과 동시에 바로 호출하려면 함수의 선언을 괄호로 묶은 다음에 함수 호출하듯이 () 붙여준다
(function hello() {
    console.log('IIFE');
})();

'Web Front-end > Javascript' 카테고리의 다른 글

(Javascript) Array APIs  (0) 2021.05.04
(Javascript) Object  (0) 2021.05.04
(Javascript) Class vs Object  (0) 2021.05.04
(Javascript) data types, let vs var, hoisting  (0) 2021.05.03
(Javascript) script async와 defer의 차이점  (0) 2021.05.01
Comments