📝 기본적인 함수의 선언, 정의, 호출

📌 작성법

function 함수명(매개변수){ // 함수 선언

    // 함수 정의
}

함수명(); // 함수 호출

🔎 코드로 살펴보기

• html

    <!-- 매개변수 this : 클릭된 요소 -->
    <div id="btn1" onclick="clickCount(this)">0</div>

• js

// 기본 함수
function clickCount(btn){
    // console.log(btn);
    btn.innerText = Number(btn.innerText) + 1;
}

🔎 출력 화면

-> 버튼을 누를 때마다 숫자가 1씩 증가한다.

---

📝 익명 함수

이름이 없는 함수

📌 작성법

function(매개변수){ // 함수 선언
    // 함수 정의
}

📌 특징

• 이름이 없는 함수이기 때문에 필요할 때 마음대로 호출하는 것이 불가능함
• 이벤트 핸들러와 같이 바로 동작하는 함수가 필요한 경우 또는 변수, 매개변수에 함수를 저장해야 하는 경우 사용함

---

📝 즉시 실행 함수

익명 함수의 한 종류로서 함수가 정의되자마자 바로 실행되는 함수

📌 작성법

(function(매개변수){ // 함수 선언
    // 함수 정의
})()

📌 사용 이유

1) 함수 선언, 정의, 호출의 일련 과정을 수행하지 않아도 바로 실행된다.
-> 호출부가 없으므로 일반적인 함수보다 속도적 우위를 가지고 있음

2) 사용하려는 변수명이 전역변수로 사용되어지고 있는 경우
-> 즉시 실행 함수를 이용하여 내부의 지역 변수로 작성하여 변수명 충돌 문제를 해결할 수 있다.

🔎 코드로 살펴보기

• js

// 즉시 실행 함수 확인하기

function test1(){ // 기본 함수 선언/정의
    console.log("기본함수");
}

test1(); // 호출

// 즉시 실행 함수
(function(){
    console.log("즉시 실행 함수");
    // 호출하지 않아도 자동으로 수행
})();

// * 즉시 실행 함수의 변수명 중복 해결
const str = "전역 변수";

(function(){
    const str = "즉시 실행 함수의 지역변수";
    console.log(str);
})();

console.log(str);

🔎 출력 화면

-> 함수가 즉시 실행되어 콘솔창을 켜자마자 내용이 찍힌다.

---

📝 화살표 함수

익명 함수의 표현식을 간단히 표현한 표기법

📌작성법

💡 기본 형태

([매개변수]) => { 함수 정의 }

익명 함수 : function(){}
화살표 함수 : () => {}

익명 함수 : function(num){ return num * 2; }
화살표 함수 : (num) => {return num * 2; }

💡 매개변수가 "하나"인 경우

() 생략 가능

익명 함수 : function(e){ e.target.style.backgroundColor = "yellow"; }
화살표 함수 : e => { e.target.style.backgroundColor = "yellow"; }

💡 매개변수가 없을 경우

"무조건" () 작성

💡 함수의 정의 부분이 return [식 또는 값] 으로만 작성되어 있는 경우

{}, return 생략 가능

💡 함수 정의 부분이 return 구문만 있으나 return되는 값이 객체(Object)인 경우

{}, return 생략 불가능

🔎 코드로 살펴보기

• html

    <button id="btn2-1">기본 형태</button>

    <button id="btn2-2">매개변수 1개</button>

    <button id="btn2-3">{}, return 생략</button>

    <button id="btn2-4">this 사용 불가</button>

• js

// 화살표 함수(Arrow Function)

// 1. 기본 형태 : ([매개변수]) => {}
document.getElementById("btn2-1").addEventListener("click",() => {
    alert("화살표 함수 기본 형태입니다.");
})

// 2. 매개변수 1개 : (매개변수) => {}
document.getElementById("btn2-2").addEventListener("click",e => {
    e.target.style.backgroundColor = "yellow";
})

// 3. {}, return 생략
document.getElementById("btn2-3").addEventListener("click", () => {

    // 함수 호출(익명 함수)
    printConsole( function(num){return num * 10} );

    // 함수 호출(화살표 함수)
    printConsole( num => num * 10 );   

    // 반환값이 Object면 {}, return 생략 불가
    // -> 화살표(=>) 다음에 함수 정의 부분이 있어야 하는데
    //    객체(Object)가 작성되어 있어 문법 오류 발생

    // printConsole((num) => {price : num*100, n : num}); // 문법 오류
    printConsole((num) => {return {price : num*100, n : num} });
})

function printConsole(fn){
    console.log(fn(2));
}

// this(이벤트가 발생한 요소) 사용 불가

// 1) 익명 함수는 this 사용 가능
document.getElementById("btn2-4").addEventListener("click", function(){
    this.style.backgroundColor = "pink";
})

// 2) 화살표 함수
document.getElementById("btn2-4").addEventListener("click", e=>{

    // 화살표 함수에서 this는 창 자체를 나타내는 객체(window)이다.
    console.log(this);

    // this.style.color = "white"; // 글자색 변경
    e.target.style.color = "white";
})

🔎 출력 화면

- '기본 형태' 버튼을 클릭했을 때
'화살표 함수 기본 형태입니다.' 알림창이 뜬다.

- '매개변수 1개' 버튼을 클릭했을 때
버튼 배경 색이 노란색으로 변경된다.

- '{}, return 생략' 버튼을 클릭했을 때

-> {}와 return을 생략하여도 콘솔창에 함수가 실행된 결과 값이 나타난다.

- 'this 사용 불가' 버튼을 클릭했을 때
-> e.target을 사용하니 글자 색상이 흰색으로 변경된 것을 볼 수 있다.