함수 (Function)

• 기본적인 함수의 선언, 정의, 호출
  - function 함수명(매개변수){   // 함수 선언
              // 함수 정의
     }
     함수명( );   // 함수 호출

<div id="btn1" onclick="clickCount(this)">0</div>
<!-- 매개변수 this : 클릭된 요소를 의미(이벤트가 발생한 요소)-->

function clickCount(btn){
   btn.innerText = Number(btn.innerText) + 1;
}

See the Pen 24.12.20_함수1-1 by Namu (@Namu-the-sans) on CodePen.

---

• 익명 함수
  - function(매개변수){   // 함수 선언
            //  함수 정의
     }
  
  - 이름이 없는 함수이기 때문에 필요할 때 마음대로 호출 불가
  - 이벤트 핸들러처럼 바로 동작하는 함수가 필요한 경우
     또는 변수, 매개변수에 함수를 저장해야 하는 경우에 사용

---

• 즉시 실행 함수
  - ( function(매개변수){   // 함수 선언
            // 함수 정의
     } )( );
  
  - 익명 함수의 한 종류로써 함수가 정의되자마자 바로 실행되는 함수
  
  ★ ★ 즉시 실행 함수 사용 이유
  1) 함수 선언, 정의, 호출의 일련 과정을 수행하지 않아도 바로 실행됨
      → 호출부가 없으므로 일반적인 함수보다 속도적 우위를 가지고 있음
  
  2) 사용하려는 변수명이 전역 변수로 사용되어지고 있는 경우,
      즉시 실행 함수를 이용하여 내부의 지역 변수로 작성해서 변수명 충돌 문제를 해결할 수 있음

// 즉시 실행 함수 확인

function test1(){
   console.log("기본 함수"); // 개발자도구 콘솔창 : 기본 함수 -> 결과 출력
}

test1();

// 즉시 실행 함수
(function(){
   console.log("즉시 실행 함수"); // 호출하지 않아도 자동 수행
   // 개발자도구 콘솔창 : 즉시 실행 함수 -> 결과 출력
})();


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

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

console.log(str); // 전역 변수

---

• 화살표 함수
  - 익명 함수의 표현식을 간단히 표현한 표기법
  
  - 작성법 1. 기본 형태 ( [매개변수] ) => { 함수 정의 }
  
        익명 함수 : function( ){ }
        화살표 함수 : ( ) => { }
  
        익명 함수 : function(num){ return num * 2; }
        화살표 함수 : (num) => { return num * 2; }
  
  - 작성법 2. 매개변수가 "하나"인 경우, ( ) 생략 가능
  
       익명 함수 : function(e){ e.target.style.backgroundColor = "yellow"; }
       화살표 함수 : e => { e.target.style.backgroundColor = "yellow"; }
  
  - 작성법 3. 매개변수가 없을 경우, 무조건 ( ) 작성
  - 작성법 4. 함수의 정의 부분이 return [ 식 또는 값 ] 으로만 작성되어 있는 경우, { }, return 생략 가능
  - 작성법 5. 함수 정의 부분이 return 구문만 있으나, return 되는 값이 객체(Object)인 경우, { }, return 생략 불가능
  

// 화살표 함수 예제

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

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

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

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

// 화살표 함수(Arrow Function)

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

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

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

  // 함수 호출(익명 함수)
  printConsole(function(num){return num * 5});
  
  // 함수 호출(화살표 함수)
  printConsole(num => num * 5);
  
  // if 반환값이 Object면 {}, return 생략 불가
  // -> 화살표(=>) 다음에 함수 정의 부분이 있어야 하는데,
  //    객체(Object)가 작성되어 있어서 문법 오류가 발생
  printConsole(num => return{price : num * 1000, number : num});
})

function(printConsole(fn){} // 매개변수로 함수 전달

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

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

// 2) 화살표 함수 : this 사용 불가
document.getElementById('btn2-4').addEventListener('click', e => {
    // 화살표 함수에서 this는 창 자체를 나타내는 객체(window)
    e.target.style.color = 'white';
})

See the Pen 24-12-20 함수1-2 by Namu (@Namu-the-sans) on CodePen.