JS 함수

---

🟨 함수 복습

매개변수 (Parameter)

매개 변수란 함수를 호출할 때 인수로 전달된 값을 함수 내부에서 사용할 수 있게 해주는 변수를 의미합니다.

인수 (Argument)

인수란 함수가 호출될 때 함수로 값을 전달해주는 변수를 의미합니다.

반환 (Return)

반환은 함수의 결과를 반환 해주는 것을 의미합니다. 반환 된 값은 함수 밖으로 내보낼 수 있습니다.

// a, b = 매개변수
function add(a, b) {
  return a + b;
  console.log(a); // → 💥 return 아래 코드들은 실행되지 않습니다.
}

// 99, 1 = 인수
add(99, 1);

// 반환 
const result = add(5, 5);

❗ 함수 결과가 반복적으로 사용될 경우 변수에 담아서 쓰는 것이 효울적입니다.

함수 선언식

일반적인 함수를 선언하는 방식입니다.
이때 함수는 기명 함수입니다.

function foo() {}

함수 표현식

자바스크립트의 특징을 활용한 방식으로, 함수를 변수에 담아서 표현합니다.
이때 함수는 익명 함수가 됩니다.

const bar = function () {}

🟨 화살표 함수

화살표 함수는 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있습니다.

화살표 함수는 function (){} 대신 화살표 ⇒를 사용하여 함수를 축약해 선언할 수 있습니다.

// 화살표 함수 기본 문법

// 매개변수 지정 방법
() => { ... }     // 매개변수가 없을 경우
x => { ... }      // 매개변수가 하나인 경우 소괄호 생략 가능
(x, y) => { ... } // 매개변수가 여러개인 경우 소괄호 생략 불가

// 함수 몸체 지정 방법
// single line block
x => { return x + x} 
x => x + x // 함수 몸체가 한줄의 구문이면 중괄호 생략, 암묵적으로 return됨 

() => { return { a: 1 }; }
() => ({ a: 1 }) // 위 표현과 동일, // {}만 쓰면 함수 블록인지 객체 블록인지 판단할 수 없기 때문에 소괄호 사용

// multi line block
() => {
  const x = 10;
  return x + x;
}

// 함수 표현식
const double = function (x) {
  return x * 2;
};
console.log("double", double(7)); // double 14

// 화살표 함수
const doubleArrow = x => x * 2;
console.log("doubleArrow", doubleArrow(7)); // doubleArrow 14

🟨 즉시실행함수 IIFE

즉시실행함수는 정의되자마자 실행되는 함수를 의미합니다.
한 번의 실행이 필요한 경우 사용됩니다.

// 기본 문법
(function (){}())
(function (){})()

const a = 7;
(function () {
  console.log(a * 2);
}());	

🟨 함수 호이스팅

함수 호이스팅이란 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상을 의미합니다.

• 함수 표현은 호이스팅 되지 않습니다.
• 함수 선언은 호이스팅 됩니다.

const a = 7;
double(); // TypeError: double is not a function

// 함수 표현
const double = function () <{
  console.log(a * 2);
};


const a = 7;
double(); // 14

// 함수 선언
function double() {
  console.log(a * 2);
}

🟨 타이머 함수

자바스크립트에는 총 4개의 내장 타이머 함수가 존재합니다.

1. setTimeout()

일정 시간이 지난 후 실행되는 함수입니다. 함수와 밀리초를 받습니다.

setTimeout(() => {
  console.log("안녕하세요"); // 3초가 지난 후 로그가 찍힙니다.
}, 3000);

2. setInterval()

일정한 시간 간격마다 함수가 실행되는 함수 입니다. 함수와 밀리초를 받습니다.

setInterval(() => {
  console.log("안녕하세요"); // 3초 간격으로 콘솔이 찍힙니다.
}, 3000);

3. clearTimeout()

설정된 Timeout 함수를 종료하는 함수입니다. Timeout 함수의 반환값을 인수로 받습니다.

const timer = setTimeout(() => {
  console.log("안녕하세요");
}, 3000);

clearTimeout(timer); // 함수 호출을 취소

4. clearInterval()

설정된 Interval 함수를 종료하는 함수입니다. Interval 함수의 반환값을 인수로 받습니다.

const timer = setInterval(() => {
  console.log("안녕하세요");
}, 3000);

clearInterval(timer); // 함수 호출을 취소

🟨 콜백 함수

콜백 함수란 함수의 인수로 사용되는 함수를 의미합니다.
특정 시점이 지나면 호출이 되는 함수입니다.

❗ 실행 위치를 보장한다고 생각하면 이해하기 쉽습니다.

function timer(callBack) {
  setTimeout(() => {
    console.log("안녕하세요");
    callBack();
  }, 3000);
}

timer(() => {
  console.log("callback");
});

// 안녕하세요 
// callback