[JavaScript] 자바스크립트 기명함수 / 익명함수

기명함수 함수선언 방식과 익명함수 함수표현 방식이 있다.

function sum(x, y) {
  // console.log(x + y);
  return x + y;
  // return 키워드가 있는 시점은 코드가 종료되는 시점이다.
  // 그렇기 때문에 return 키워드 아래의 코드는 실행되지 않는다.
}

const a = sum(1, 3);
const b = sum(4, 12);

console.log(sum(5, 9));
console.log(b);
console.log(a + b);

✅ 화살표 함수

// () => {} vs function () {}

const double = function (x) {
  return x * 2;
};

console.log('double :', double(7));

const doubleArrow = (x) => {
  return x * 2;
};
// 축약형
// const doubleArrow = (x) => x * 2
// const doubleArrow = x => x * 2
// const doubleArrow = x => { return x * 2 }
// 축약형으로 객체데이터를 반환할 때는 반드시 소괄호()로 감싸주어야한다.

console.log('doubleArrow :', doubleArrow(7));

✅ 즉시실행 함수

// 즉시실행함수
// IIFE, Immediately-Invoked Function Expression
const c = 7;

function double2() {
  console.log(c * 2);
}
double2();

// 즉시실행함수
(function () {
  console.log(c * 2);
})();

// (function () {
//   console.log(c * 2);
// }());

// 같은 의미이다.

✅ 호이스팅 Hoisting

// 호이스팅(Hoisting)
// 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상

const d = 7;

double3();

// Error
// const double3 = function () {
//   console.log(d * 2);
// };

// Hoisting
function double3() {
  console.log(d * 2);
}

✅ 타이머 함수

• setTimeout(함수, 시간) : 일정 시간 후 함수 실행
• setInterval(함수 , 시간) : 시간 간격마다 함수 실행
• clearTimeout() : 설정된 Timeout 함수를 종료
• clearInterval() : 설정된 Interval 함수를 종료

// 타이머 함수
// setTimeout(함수, 시간) : 일정 시간 후 함수 실행
// setInterval(함수 , 시간) : 시간 간격마다 함수 실행
// clearTimeout() : 설정된 Timeout 함수를 종료
// clearInterval() : 설정된 Interval 함수를 종료

const timer = setTimeout(function () {
  console.log('Hi~ SIN7AE!!');
}, 3000);

const h1El = document.querySelector('h1');
h1El.addEventListener('click', () => {
  clearTimeout(timer);
});

const timer2 = setInterval(function () {
  console.log('Hi~ SIN7AE!!');
}, 3000);

const h1El2 = document.querySelector('h1');
h1El2.addEventListener('click', () => {
  clearInterval(timer2);
});