JS 함수

📝 DOM, 요소추가제거, 함수 후 세미프로젝트 작업
#230302

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

function 함수명([매개변수]) { // 함수 선언
            //함수 정의 == 코드
        }
       함수명([매개변수]); // 함수 호출

📌 익명 함수 (이름이 없는 함수) 의 선언, 정의

function([매개변수])  { 함수 선언(함수명 X)
            // 함수 정의
        }

• 이름이 없는 함수이기 때문에 필요시 마음대로 호출하는게 불가능

• 이벤트 핸들러와 같이 선언된 함수가 여러곳에서 재사용 되는 것이 아닌
  특정 동작이나 상황에서 수행되는 함수가 필요한 경우에 사용한다.
  ex) 매개변수로 전달되는 함수의 형태가 일정치 않을 때

🏷️ 즉시 실행 함수

익명의 함수의 한 종류로 함수가 정의되자마자바로 실행되는 함수
페이지 로딩 시 바로 수행됨

   (function([매개변수]) {
                // 함수정의
            }
        )();

✔️ 즉시 실행 함수 사용 이유

1) 함수 선언 및 호출을 위한 탐색 과정이 생략되기 때문에
속도적 우위를 가지고 있다.

2) 변수명 중복을 방지할 수 있다.
→ 즉시 실행 함수 내부에 작성되면
지역변수로 분류되어 다른 지역변수명과 중복되는 일이 없다.

(function() {
    const str = '점심 메뉴 추천좀..';
    console.log(str);
	}
	)();

🏷️ 화살표 함수 (Arrow Function)

익명 함수의 표현식을 간단히 표현한 표기법 (es6기준)

매개변수 e (또는 event) : 이벤트 관련 정보를 모두 갖고있는 객체

[화살표 함수 주의 사항]
화살표 함수를 이벤트 핸들러로 사용할 경우,
this는 window 객체를 나타내게 된다.

(화살표 함수 내부에서 this 사용 불가 / e.target으로 대체)

작성법2번 예시 참고

✔️ [작성법1] 기본형태

([매개변수]) => { 함수정의 }
익명함수 : function () { }
화살표 함수 : () => { }

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

즉시실행함수 + 화살표 함수 : 
(() => {
    console.log("즉시실행 함수 + 화살표함수")
})();

✔️ [작성법2] 매개변수가 "하나"인 경우 () 생략 가능

매개변수 => { }

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

document.getElementById("btn2").addEventListener("click", e => {
  e.target.style.backgroundColor = 'yellow';
});

✔️ [작성법3] 매개변수가 없을 경우 "무조건" () 작성

✔️ [작성법4] 함수 정의 부분이 return [식 또는 값] 으로만 작성되어 있는경우,
                  {} , return 생략 가능

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

✔️ [작성법5] 함수 정의 부분이 return 구문만 있으나,
     return되는 값이 객체(object)인 경우,
     {}, return 생략 불가능

익명 함수 : function() { return { "name" : "홍길동", "age" : 20 } }
화살표 함수 : () => { return { "name" : "홍길동", "age" : 20 } }
// 객체 반환은 return 생략 불가능