JavaScript Function 자바스크립트 함수

1. 함수의 선언방식: 자바스크립트에서는 함수를 선언하는 두가지 방식이 있다.

1.1. 선언식

fnSayHello(); //가능
function fnSayHello() {
  console.log("Hello, World!");
}
fnSayHello(); //가능

1.2. 표현식

fnSayHello(); //불가능
const fnSayHello = function() {
  console.log("Hello, World!");
};
fnSayHello(); //가능

선언식과 표현식 중 선언식은 호이스팅(hoisting)이 적용되고 표현식은 적용되지 않는다.

2. 화살표 함수: 함수 표현식은 아래와 같이 화살표 함수로 구현할 수 있다. 

2.1. 표현식

const fnPlusNumbers = function(pNum1, pNum2) {
  return pNum1 + pNum2;
};

2.2. 화살표 함수

const fnPlusNumbers = (pNum1, pNum2) => {
  return pNum1 + pNum2;
};

화살표 함수에서는 return 키워드를 생략할 수 있다. 실행 코드가 한 줄일 경우, 중괄호도 생략 가능하다.

const fnPlusNumbers = (pNum1, pNum2) => return pNum1 + pNum2;

매개변수가 한 개일 경우에는 소괄호를 생략 가능하다.

const fnPlusNumbers = pNum => pNum + 1;

매개변수가 없는 경우에는 소괄호를 반드시 사용한다.

const fnPlusNumbers = () => "Hello, World!";

3. 동기와 비동기 처리

구분	동기 처리 방식	비동기 처리 방식
실행 순서	동시에 실행	순차적으로 실행

4. 콜백함수

자바스크립트에서는 함수의 매개변수로 함수를 전달받을 수 있다. 그 이유는 함수가 객체로 취급받기 때문이다. 함수의 매개변수로 전달된 함수를 콜백함수라 한다. 콜백함수는 비동기 처리를 수행한다.

 

const fnB = (b, fnCallback) {
  fnCallback(b);
}
fnB("콜백 함수 실행!", (a) => {
	console.log(a);
});

4.1. 콜백함수로 동기처리

fnCount(1, 1000, function (pRet) {
  console.log(pRet);
    fnCount(2, 1000, function (pRet) {
      console.log(pRet);
      fnProductReady(3, 1000, function (pRet) {
      console.log(pRet);
      console.log('가독성이 낮고 유지보수하기 어려운 콜백 지옥!');
    })
  })
})        
function fnCount(pNum, pTime, fnCallback) {
  setTimeout(() => {
    console.log(pNum);
    fnCallback('카운트');
  }, pTime);
}

5. Promise

//함수 선언
function fnCount(pNum, pTime) {
  return new Promise((fnResolve) => {
    setTimeout(() => {
    console.log(pNum);
    fnResolve('카운트');
    }, pTime);
  });
}
//함수 호출
fnCount(1, 1000)
  .then((pResult1) => {
    console.log(pResult1);
    return fnCount(2, 1000);
  })
  .then((pResult2) => {
    console.log(pResult2);
    return fnCount(3, 1000);
  })
  .then((pResult3) => console.log(pResult3));

6. async await

function fn1(a, b) {
  return new Promise((resolve) => {
    resolve a+b;
  });
}
function fn2(c) {
  return new Promise((resolve) => {
    resolve c*c;
  });
}
async function fnDo() {
  let c = await fn1(1, 2);
  console.log(await fn2(c));
}
fnDo();