제로베이스 자바스크립트 기초개념 함수 부분 정리
축약된 부분이 존재할 수 있습니다.

함수

함수 - 데이터와 호출

함수 데이터를 만들고 사용하기위해서는 호출을 해야한다.
이 둘의 차이를 알아보자.

function hello() {
  return "Hello";
}
  
// 함수 데이터(Data)
console.log(hello); // 함수 덩어리(코드) 그 자체가 출력된다
console.log(typeof hello); // function 타입이 나오게 된다.
// 이렇게 사용하면 함수안에 코드를 사용하는게 아니라 함수 안 코드를 확인만 하는 것이 된다.
  
// 함수 호출(Call)
console.log(hello()); // 반환 데이터인 Hello가 출력된다.
console.log(typeof hello()); // 반환하는 데이터의 타입인 string이 출력된다.

기명 함수 vs 익명 함수

const h1El = document.querySelector("h1");
  
// 기명 함수 - function 이름() {}
function handler() {
  console.log(h1El.textContent);
}
h1El.addEventListener("click", handler);
  
// 익명 함수 - function () {}
h1El.addEventListener("click", function () {
  console.log(h1El.textContent);
});

// 이름있으면 기명 함수, 없으면 익명 함수
// 상황에 맞게 사용하면 된다.

함수 - 선언과 표현

// 함수 선언문(Declaration)
function hello() {
  console.log("Hello~");
}
  
// 함수 표현식(Expression)
const world = function () {
  console.log("World");
};

// 일반적으로는 어떻게 만들어서 사용하든 상관이 없음

호이스팅

하지만 함수 선언문과 표현식의 결정적인 차이는 호이스팅 가능 여부이다.

일반적으로 자바스크립트 코드는 위에서 아래로 읽어진다.
원래는 world처럼 선언되기 전에 사용하면 에러가 나는 것이 맞지만, 호이스팅이라는 개념이 적용되면 hello함수처럼 호출을 하고 정의를 하는 것이 가능해진다.

호이스팅은 끌어올려지다라는 의미를 지니고 있다.
함수 선언문으로 만들어진 함수는 자바스크립트가 위로 끌어올린다.
하지만 함수 표현식은 위로 끌어올려지지 않기 때문에 선언문처럼 사용될 수 없다.

// 호이스팅(Hoisting)
hello(); // OK!
world(); // Error..

// 함수 선언문(Declaration)
function hello() {
  console.log("Hello~");
}
  
// 함수 표현식(Expression)
const world = function () {
  console.log("World");
};

함수 - 반환과 종료

function sayHi(name) {
  return `Hi, ${name}`; // return시 함수는 종료된다.
  console.log("동작하지 않음");
}
const h = sayHi("200woni"); // 반환
console.log(h); // "Hi, 200woni"
  
console.log(sayHi("200woni")); // "Hi, 200woni"

또한, 우리가 반환을 할 때 반환값없이 해줄 수도 있다.

function sayHi(name) {
  return `Hi, ${name}`; // return시 함수는 종료된다.
  console.log("동작하지 않음");
}
const h = sayHi("200woni"); // 반환
console.log(h); // "Hi, 200woni"
  
console.log(sayHi("200woni")); // "Hi, 200woni"
//===============================================//
function a() {
  // return // undefined
}
function b() {
  return; // undefined
}
function c() {
  return undefined;
}
  
console.log(a()); // undefined
console.log(b()); // undefined
console.log(c()); // undefined
  
// 결국 3가지가 다 똑같은 명시하느냐 안하느냐의 차이

인수와 매개변수

함수 호출시에 넣어주는 값은 인수, 함수 정의할 때 인수를 받아줄 매개체가 되어주는 변수가 매개변수이다.

// 인수(Argument)와 매개변수(Parameter)
  
function add(a, b) {
  return a + b;
}
console.log(add(2, 1));
console.log(add(7, 4));
console.log(add("A", "B"));

매개변수의 기본값

// 매개변수의 기본값(Default Value)
function add(a, b = 1) {
  return a + b;
}
console.log(add(2));
console.log(add(7, undefined)); // 위랑 같음
console.log(add());

나머지 매개변수

// 나머지 매개변수(Rest Parameter)
  
function add(a, b, ...rest) {
  console.log(a, b, rest);
  return rest.reduce((acc, cur) => acc + cur, 0);
}
const res = add(1, 2, 3, 4, 5, 6, 7, 8);
console.log(res);

화살표 함수

// 일반 함수
function hello1() {
  return "Hello~";
}
const add1 = function (a, b) {
  return a + b;
}

const log1 = function (c) {
  console.log(c);
};
  
// 화살표 함수
const hello2 = () => "Hello~";
const add2 = (a, b) => a + b;
const log2 = (c) => {
  console.log(c);
};

나중에 this라는 개념을 배우게 되면 일반 함수와 화살표 함수에서 사용하는 것이 다르기 때문에 화살표가 있으면 무조건 화살표 함수라는 것을 기억해두자!

즉시실행함수

// 함수 정의(표현)
const double = () => {
  // ...
};
// 함수 실행(호출)
double();
  
// 함수 정의 및 실행
// 즉시실행함수(IIFE, Immediately Invoked Function Expression)
(() => {
  // ...
})();
  
// '즉시실행함수'의 다양한 사용법
(() => {})();
(function () {})();
(function () {}())();
!(function () {})();
+(function () {})();

콜백

callback 그대로 뒤에서 호출되는 함수라는 것이다.
간단하게 생각하면 함수의 인수로 사용되는 함수이다. 인수로 사용되었다는 것은 어디선가는 호출이 된다는 것이기에 뒤에 호출되는 함수인 콜백 함수 인 것이다.

// 콜백
  
const a = (callback) => {
  console.log("A");
  callback();
};
const b = () => {
  console.log("B");
};
  
a(b);
// "A"
// "B"
  
// ============================== //
  
function add(a, b, cb) {
  // 1초 뒤 실행
  setTimeout(() => {
    cb(a + b);
  }, 1000);
}
add(3, 7, (result) => {
  console.log(result);
});

호출 스케줄링

setTimeout

// 콜백을 호출하는 타이머 설정
const timeout = setTimeout(() => {
  console.log("Hello~");
}, 5000);
  
// 타이머를 취소
const btnEl = document.querySelector("button");
btnEl.addEventListener("click", () => {
  console.log("타이머 취소");
  clearTimeout(timeout);
});

setInterval

// 콜백을 반복 호출하는 타이머 설정
const timeout = setInterval(() => {
  console.log("Hello~");
}, 3000);
  
// 타이머를 취소
const btnEl = document.querySelector("button");
btnEl.addEventListener("click", () => {
  console.log("타이머 취소");
  clearInterval(timeout);
});