[JS] 드림코딩 JS 공부 #5-2

전예원·2021년 12월 18일

IIFE JavaScript arrow function function function expression

Java Script 공부

목록 보기

10/33

💡 함수 표현식에 대해 공부해보자!

⭐️ First-class function(일급 함수)

function은
다른 변수와 마찬가지로 변수에 할당이 되고,
function의 인자로 전달이되며,
리턴값으로도 리턴이 가능하다.

👇👇👇 그것이 가능하게 한 것이 바로 Function expression👇👇👇

🔴 Function expression

const print = function () {
  console.log('print');
};
print(); // print

함수를 선언함과 동시에 바로 프린트라는 변수에 할당하는 것을 확인할 수 있다.
function에 이름이 없고 function이라는 키워드를 이용해서 파라미터와 블럭을 이용한 것을 위에서 확인할 수 있다. (함수 이름 없이 필요한 부분만 작성해서 변수에 할당 가능)
함수에 이름이 없는 것을 annoymous function이라고 함
원하면 함수에 이름을 작성해도됨

const print = function print() { // named function
  console.log('print');
};

위에처럼 이름이 있는 것을 named function이라고 함

const printAgain = print;

// 함수를 호출하듯이 작성하면 print에 할당된 print 함수가 실행된다.
printAgain(); // print

print를 또 다른 변수에 할당하게 되면 결국 printAgain은 위에 함수를 가르키고 있기 때문에 다시 함수를 호출하듯이 부르면 프린트가 출력되는 것을 확인할 수 있다.

🟠 Function expression vs Function declaration

둘의 가장 큰 차이점은 Function expression은 할당된 다음부터 호출이 가능
-> print를 선언하기도 전에 호출하면 error가 발생
Function declaration은 hoist가 가능하다.
함수가 선언되기 이전에 호출해도, 함수를 정의하기도 전에 호출이 가능하다.
how?? 자바스크립트 엔진이 선언된것을 젤 위로 올려주기 때문에

🟡 Callback function

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

randomQuiz함수는
answer이 맞으면 호출하게 될 함수 -> printYes
answer이 틀리면 호출하게 될 함수 -> printNo
printYes, printNo 함수 2개를 전달해준다.
함수를 전달해서 상황에 맞으면 전달된 함수를 실행시키라고 전달하는 것을 Callback function이라고 함
2가지의 콜백 펑션이 파라미터로 전달되어서 정답이 love you인 경우에만 printYes라는 콜백함수를 호출하게 되고, 정답이 아니면 printNo라는 콜백함수를 호출하게 된다.

// annoymous function
const printYes = function () {
  console.log('yes!');
}
// named function
const printNo = function print() {
  console.log('no!');
}
randomQuiz('wrong', printYes, printNo); // no!
randomQuiz('love you', printYes, printNo); // yes!

printYes라는 변수에 yes!를 출력하는 함수를 할당
printNo라는 변수에 no!를 출력하는 함수를 할당
randomQuiz를 호출할 때, printYes, printNo라는 콜백 함수들을 각각 전달하게 된 것!

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

Function expression에서 이름을 쓰는 경우는
우리가 디버깅을 할 때, 함수 이름이 나오게 하거나, 함수 안에서 자기 자신을 또다른 함수로 호출할 때 쓰인다.

🟤 recursive 함수 (재귀 함수)

함수 안에서 함수 자신 스스로를 부르는 것

const printNo = function print() {
  print();
}

프로그램 die~, 정말 필요할 때
피보나치 수 계산, 반복되는 평균값 계산 할 때 쓰는 것
계속 함수를 호출하게 되면 call stack이 다 찾다는 에러가 뜸

🟢 Arrow function

함수를 매우 간결하게 만들어준다.
화살표 함수는 항상 이름이 없는 annoymous function 이다.

const simplePrint = function () {
  console.log('simplePrint!');
} // 1번

const simplePrint = () => console.log('simplePrint!'); // 2번

const add = function (a, b) {
  return a + b;
} // 1번

const add = (a, b) => a + b; // 2번

1번 방식을 화살표 함수를 이용해 2번처럼 작성 가능하다.
한줄인 경우 블럭 없이 작성이 가능, 함수 안에서 다양한 기능을 구현하면 블록 안에 작성하면 된다.

const simpleMultiply = (a, b) => {
  // do something more
  return a * b;
};

대신 블럭을 사용하게 되면 return 키워드를 사용해서 값을 리턴해줘야한다.

🔵 IIFE

Immediately Invoked Function Expression

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

함수를 선언하고 hello(); 함수를 호출하는 방식을 원래 사용했지만

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

함수를 ()로 감싸고, 끝에 함수를 호출 하듯이 ()를 적어주면 -> 바로 함수가 호출된다.

🟣 Quiz

function calculate(command, a, b)
command: add, substract, divide, multiply, remainder

function calculate(command, a, b) {
  switch (command) {
    case 'add':
      return a + b;
    case 'substract':
      return a - b;
    case 'divide':
      return a / b;
    case 'multiply':
      return a * b;
    case 'remainder' :
      return a % b;
    default : 
      throw Error('unknown command');
  }
}
console.log(calculate('add', 2, 3)); // 5