🍦Vanilla JS ④ 함수 - 함수 선언문, 표현식, 화살표, 콜백, 클로저

함수?

• 자바스크립트에서 가장 중요한 개념 (자바에서는 메소드라는 용어로 사용)
• 특정 작업을 여러번 반복해야 하는 경우, 해당 작업을 재사용 가능한 구조로 만들게 되는데 이 때 사용하는 것이 함수 입니다.
• 입력값을 검증하고 올바르지 않은 경우, 예외를 발생시킬수 있습니다. (try ~ catch)
• 전역 변수 사용을 줄이고, 함수 내에서만 유효한 변수(지역변수)를 선언 합니다.
• 비동기적으로 실행되는 코드를 처리하기 위해 콜백 함수를 정의 합니다.
• 객체를 생성하고, 객체의 속성과 메소드를 정의 합니다.
• 함수를 인자로 받아서, 다른 함수에서 실행 합니다.

자바스크립트에서 함수는 [함수 선언문] 또는 [함수 표현식]으로 작성할 수 있습니다.

---

1️⃣함수 선언문

• function 키워드로 선언하며 함수 이름을 가집니다.
• 호이스팅에 영향을 받습니다. == 함수가 선언된 위치에 상관없이 호출하여 실행할 수 있음

💡 호이스팅 : 함수나 변수가 해당 스코프의 최상단으로 끌어 올려지는 것

function sum(p1, p2) {
	let sum = p1 + p2;
    return sum;
}

함수를 이루는 요소는 다음과 같습니다.

• 함수 선언 키워드 function
• 함수명
• 입력 파라미터 (옵션)
• 코드 블록
• 반환값(return) (옵션)

함수명을 사용해서 호출을 해야만 실행 됩니다.

let sum1 = sum(21,24); // 함수 호출
console.log(sum1); // 출력

함수와 switch문

function calculator(n1, n2, op) {
    switch(op) {
        case "+":
            return add(n1, n2);
        case "-":
            return sub(n1, n2);
        case "*":
            return mul(n1, n2);
        case "/":
            return div(n1, n2);
    }
}
function add(n1, n2) {
    return n1 + n2;
}
function sub(n1, n2) {
    return n1 - n2;
}
function mul(n1, n2) {
    return n1 * n2;
}
function div(n1, n2) {
    return n1 / n2;
}

console.log("덧셈 : " + calculator(10, 20, "+"));
console.log("뺄셈 : " + calculator(10, 20, "-"));
console.log("곱셈 : " + calculator(10, 20, "*"));
console.log("나눗셈 : " + calculator(10, 20, "/"));

🍦 함수의 선언과 실행 순서

위의 코드를 아래와 같이 함수 구현 이전에 먼저 호출하여도 정상 실행 됩니다.

웹 브라우저에서 자바스크립트의 코드를 해석할 때 함수의 선언 부분을 코드의 윗쪽으로 옮겨서 먼저 해석 합니다.(호이스팅)

console.log("덧셈 : " + calculator(10, 20, "+"));
console.log("뺄셈 : " + calculator(10, 20, "-"));
console.log("곱셈 : " + calculator(10, 20, "*"));
console.log("나눗셈 : " + calculator(10, 20, "/"));

function calculator(n1, n2, op) {
    switch(op) {
        case "+":
            return add(n1, n2);
        case "-":
            return sub(n1, n2);
        case "*":
            return mul(n1, n2);
        case "/":
            return div(n1, n2);
    }
}
function add(n1, n2) {
    return n1 + n2;
}
function sub(n1, n2) {
    return n1 - n2;
}
function mul(n1, n2) {
    return n1 * n2;
}
function div(n1, n2) {
    return n1 / n2;
}

2️⃣함수 표현식

• 변수에 함수를 할당해서 사용하는 방식 입니다.
• 함수는 객체의 파생된 자료형 입니다. 자바스크립트의 자료형은 변수에 할당할 수 있습니다. 따라서 함수도 변수에 할당할 수 있습니다. 이를 이용한 함수 정의 방법을 함수 표현식이라고 합니다.
• 함수 표현식은 호이스팅이 적용되지 않기 때문에 선언되는 위치가 매우 중요합니다.

함수 표현식은 변수에 할당하는 함수에 식별자가 있으면 [네이밍 함수], 없으면 [익명 함수] 라고 구분 합니다.

 

💡 보통 함수 표현식은 익명 함수를 사용하기 위해 쓰입니다.

---

익명 함수

const 변수명 = function();

const gugudan = function() {
  for(let i = 1; i < 10; i++) {
    console.log(`3 * ${i} = ${3 * i}`);
  }
}
gugudan();

네이밍 함수

const 변수명 = function 식별자() {};

const gugudan = function naming(){
    for(let i = 1; i < 10; i++) {
        console.log(`3 * ${i} = ${3 * i}`);
    }
}
gugudan();

⚠️ 아래 코드는 에러 발생

gugudan();

const gugudan = function naming(){
    for(let i = 1; i < 10; i++) {
        console.log(`3 * ${i} = ${3 * i}`);
    }
}

---

3️⃣화살표 함수

• 화살표 함수는 ES6에서 추가된 새로운 함수 선언 방법 입니다.
• 화살표 함수는 함수 선언식보다 간결하고 가독성이 좋아서 많이 사용됩니다.

// 함수 선언문
console hi = function() {
	return "안녕하세요.";
}

// 화살표 함수
console hi2 = () => "안녕하세요.";

매개변수에 따른 표현식

// 매개변수가 1개만 있을 경우
const hi = name => console.log(name + "님 안녕하세요.");

// 매개변수가 2개 이상인 경우
const hi2 = (name, age) => console.log(name + "은 " + age + "살이다.");

// 매개변수가 없을 경우
const hi3 = () => "안녕하세요?";

아래에서 매개변수와 인수에 관해 더 자세하게 다루어 보겠습니다.

매개변수(parameter)와 인수(argument)

function 함수명(매개변수1, 매개변수2, 매개변수3 ...) {}
함수명(인수1, 인수2, 인수3 ...);

• 자바스크립트에서 변수를 선언하고 값을 할당하지 않으면 undefined 값으로 초기화 되는 것처럼 매개변수도 함수 호출시 데이터를 전달하지 않으면 undefined 값이 할당되어 코드를 실행해도 오류가 발생하지 않습니다.

기본값 할당

• 매개변수를 정의하고 데이터를 전달하지 않으면 매개변수에는 undefined 값이 자동으로 할당됩니다.
• ES6 부터는 기본값을 지정하는 방법이 추가되었습니다.

function sum(a = 10, b = 20) {
    console.log(a, b);
}
sum(); // 10, 20

💡 위에서 언급했듯이 매개변수에 값을 할당 안해도 에러가 안나기 때문에 조심해야 합니다.

const sum4 = (a = 10, b = 20, c) => console.log(a,b,c);
sum4(); // 10, 20, undefined

return문

• 함수를 호출할 때 데이터를 전달하려면 매개변수를 정의해야 하듯이, 함수 외부로 데이터를 반환할 때는 return문을 사용합니다.

function sum(a = 10, b = 20) {
    return a + b;
}

const result = sum(100, 200);
console.log("결과 : " + result);

const sum = (num1, num2) => num1 + num2;
console.log("결과 : " + sum(100, 200));

4️⃣Callback 함수

• 함수의 인자로 다른 함수를 전달하여 그 함수가 실행될 때 호출되는 함수 입니다.
• 즉, 콜백 함수는 함수의 실행 결과를 다른 함수로 전달하는 것 입니다.
• 콜백 함수는 비동기적인 작업을 처리할 때 많이 사용 됩니다.

📌예를 들어, 서버로 부터 데이터를 가져오는 작업이 완료되었을 때 이 데이터를 가지고 어떤 처리를 수행하고자 할 때 콜백 함수를 사용합니다. 이 때 콜백 함수는 서버로부터 데이터를 받아와서 처리하는 함수가 됩니다.

비동기적 테크닉을 사용하는 경우

1. 사용자의 이벤트 처리
2. 네트워크 응답 처리
3. 파일을 읽고 쓰는 동작
4. 의도적으로 시간 지연이 필요한 기능

함수를 매개변수로 넘기기

function cry() {
    console.log("cry");
}
function sing() {
    console.log("sing");
}
function dance() {
    console.log("dance");
}
// 일반 함수로 호출
function checkMood(mood) {
    if(mood === "good") sing();
    else cry();
}
checkMood("good");
checkMood("sad");
// 콜백 함수
function checkMoodCallback(mood, goodCall, badCall) {
    if(mood === "good") goodCall();
    else badCall();
}
checkMoodCallback("good", dance, cry);
checkMoodCallback("Not bad", dance, sing);

타이머 설정과 Callback 함수

function buy_tobe(item, price, quantity, callback) {
    console.log(item + " 상품을 " + quantity + "개 골라서 점원에게 주었습니다.");
    setTimeout(function () {
        console.log("계산이 필요합니다.");
        var total = price * quantity;
        callback(total);
    }, 2000);
}
function pay(n) {
    console.log("지불 할 금액은 : " + n + "입니다.");
}

buy_tobe("\'밤고구마 맛없음\'", 1000, 5, pay);

이벤트 핸들러에서 콜백 함수 사용하기

• 웹 페이지에서 발생하는 이벤트는 이벤트 핸들러를 사용하여 처리할 수 있습니다.
  이 때, 이벤트 핸들러에서는 콜백 함수를 사용하여 이벤트가 발생했을 때 실행할 함수를 지정할 수 있습니다.

let btn = document.querySelector("#myBottn");
btn.addEventListener('click', callBtn);

function callBtn() {
  console.log("Button이 눌려 졌습니다.");
}

👉 위 코드에서는 addEventListener() 함수를 사용하여 버튼 클릭 이벤트를 처리하고 있습니다. 이벤트 핸들러에서는 콜백 함수를 사용하여 클릭되었을 때 실행할 함수를 지정하고 있습니다.

비동기적 작업에서 콜백 함수 사용하기

• 서버로부터 데이터를 가져오거나 파일을 읽어올 때, 콜백 함수를 사용하여 비동기적인 작업을 처리할 수 있습니다.

function fetchData(callback) {
  // 서버로부터 데이터를 가져오는 비동기 함수
  let data = ...
  callback(data);
}

fetchData(function(data) {
  console.log(data);
});

콜백(callback)과 비동기(asynchronous)는 서로 관련 있는 개념 입니다. 콜백은 함수의 인자로 다른 함수를 받아들이는 함수를 말하며, 이를 사용하여 비동기적인 작업을 처리할 수 있습니다.
비동기적인 작업은 작업이 완료될 때까지 기다리지 않고, 다음 코드를 실행하는 것을 말합니다.

---

함수의 특징 이해하기

스코프

• 자바스크립트는 스코프에 따라 참조하려는 식별자를 찾습니다.
• 자바스크립트의 스코프는 [함수 스코프]와 [블록 스코프] 방식으로 나누어 지며,
  이에 따라 [전역 스코프]와 [지역 스코프]로 참조 범위가 달라집니다.

함수 스코프

• 함수에서 정의한 블록문만 스코프의 유효 범위로 인정

let a = 10; // 전역스코프
function sum7() {
  let a = 20; // 지역스코프
  console.log(`함수 내부 : ${a}`); // 20
}
sum7();
console.log(`함수 외부 : ${a}`); // 10

블록 스코프

• 자바스크립트는 원래 함수 스코프로 따르는 언어였지만, ES6에서 let, const 키워드가 추가되면서 블록 스코프도 지원하게 되었습니다.
• 블록 스코프는 {}로 구성된 블록문 기준으로 스코프의 유효 범위를 나누는 방식 입니다.
• 💡 블록 스코프는 오직 let, const 카워드에서만 발생하므로 같은 코드를 var 키워드로 변경하면 참조 오류가 발생하지 않습니다.

let, const

let b = 1;
{
  let c = 12;
  console.log(`코드 블록 내부 b : ${b}`); // 1
  console.log(`코드 블록 내부 c : ${c}`); // 12
}
console.log(`코드 블록 외부 b : ${b}`); // 1
console.log(`코드 블록 외부 c : ${c}`); // 오류

var

var d = 3;
{
  var e = 15;
  console.log(`코드 블록 내부 d : ${d}`); // 3
  console.log(`코드 블록 내부 e : ${e}`); // 15
}
console.log(`코드 블록 외부 d : ${d}`); // 3
console.log(`코드 블록 외부 e : ${e}`); // 15 (호이스팅에 의해 오류 안남..)

함수 호이스팅

• 호이스팅이란 코드를 선언과 할당을 분리해 선언부를 자신의 최상위로 끌어올리는 것을 말합니다.

console.log(num);
var num= 10;

호이스팅에 의해서 아래의 코드처럼 동작합니다.

var num = 10;
console.log(num);

클로저

• 자바스크립트 클로저는 함수가 해당 함수의 스코프 외부에 있는 변수에 접근할 수 있는 매커니즘 입니다.
• 이를 통해 함수 내부에서 외부 변수를 수정하거나 참조할 수 있습니다.

아래 예제에서 count 변수는 makeCounter 함수 내에서 정의되지만, 클로저를 통해 counter 함수에서도 접근 가능합니다. 이런 메커니즘을 이용하면 변수를 숨기고 함수를 통해 안전하게 접근할 수 있는 상태를 유지할 수 있습니다.

function makeCounter() {
  let count = 0;
  return function() {
    count++;
    console.log(count);
  };
}

const counter = makeCounter();
counter(); // 1
counter(); // 2
counter(); // 3