[JavaScript] 함수 표현식과 화살표 함수 & 콜백 함수(Callback)

함수 표현식과 화살표 함수

1. 함수 표현식

-> 익명함수는 function () 형태로 만들 수 있다.

// 1. 함수 표현식
function funcA() {
  console.log("funcA");
}

let varA = funcA; // 함수가 아니라 함수 자체를 넣어줌.
console.log(varA);

// f funcA() {
//    console.log("funcA");
//}
// 출력

varA(); // 함수를 실행

let varB = function funcB() {
  console.log("funcB");
};

varB();
// funcB(); -> 이건 오류, funcB는 사용할 수 없음.

let varC = function () {
  // 익명함수
  console.log("funcB");
};

console.log(varC()); // funcB 출력

2. 화살표 함수

-> 화살표 함수를 이용해서 익명함수를 function()이 아닌 () => 형태로도 만들 수 있다.

// 2. 화살표 함수
let varD = () => {
  return 1;
};

console.log(varD()); // 1 출력

let varE = () => 1;

console.log(varE()); // 1 출력

let varF = (value) => value + 1;

console.log(varF(10)); // 11 출력

let varG = (value) => {
  console.log(value);
  return value + 1;
};

console.log(varG(10)); // 10 11 출력

콜백 함수

-> 자신이 아닌 다른 함수에, 인수로써 전달된 함수를 의미 함.

-> 매개 변수에 변수가 아닌 함수를 넘겨서 사용.

// 콜백 함수

// 1. 콜백함수
// 자신이 아닌 다른 함수에, 인수로써 전달된 함수를 의미 함

function main(value) {
  value();
}

function sub() {
  console.log("i am sub");
}

main(sub); // "i am sub 출력"

main(function sub() {
  // 이렇게도 가능.
  console.log("i am sub");
});

main(() => {
  // 이렇게도 가능.
  console.log("i am sub");
});

// 2. 콜백함수의 활용.
function repeat(count) {
  for (let idx = 1; idx <= count; idx++) {
    console.log(idx);
  }
}

function repeatDouble(count) {
  for (let idx = 1; idx <= count; idx++) {
    console.log(idx * 2);
  }
}

// repeat(5);
// repeatDouble(5);

// 위 처럼 구조가 흡사한 함수를 만들 일이 있음.
// 이럴 경우 아래와 같이 콜백함수로 만들 수 있음.

function repeatCallback(count, callback) {
  for (let idx = 1; idx <= count; idx++) {
    callback(idx);
  }
}

repeatCallback(5, function (idx) {
  console.log(idx);
});

repeatCallback(5, (idx) => {
  // function 제거하고 => 붙여도 동일하게 사용 가능.
  console.log(idx * 2);
});

repeatCallback(5, (idx) => {
  console.log(idx * 3);
});