Java Script ( 함수 )

 

 

 

 

• 즉시 실행함수 ( 익명함수 )

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

-- 익명함수의 한 종류로써 함수가 정의 되자마자 실행하는 함수.

-- 함수선언 및 호출을위한 탐색과정이 생략되기때문에

    속도적 우위를 가지고있다.

-- 변수명 중복을 방지할수 있다. 

    -> 즉시실행함수 내부변수는 지역변수로 분류 .

		//변수명 중복돼도 상관없음.
		//페이지 로딩 시 바로 수행
( function(){
    const str = "저녁메뉴추천!!";
    console.log(str);
} )();

( function(){
    const 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. 함수 정의 부분이 return [식or값] 으로만 작성되어있는경우 { } ,  return 생략가능

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

 

 

4. 함수정의부분이 return 구문만 있으나,  return 되는값이 객체인경우

   { } , return 생략 불가능

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

 

 

 

 

!!!!!!!!!!!!   화살표 함수를 이벤트 핸들러로 사용할경우

             this 는 window 객체를 나타낸다.

             this 사용하지않고.

             e.target 을 사용한다.

 

 

 

 

 

 

 

    <button id="btn1">기본 형태</button>
    <button id="btn2">매개변수 1개</button>
    <button id="btn3">{}, return 생략</button>

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


 // 2. 매개변수 1개일때 : 매개변수 => {} 
document.getElementById("btn22").addEventListener("click",e =>{
    console.log(e);               // 매개변수 e : 이벤트 관련정보를 모두갖고있는객체
    console.log(e.target);              // 이벤트 발생한 요소 e.target
    e.target.style.backgroundColor="yellow";
});



 // 3 . {}, return 생략 : () => 값 or 식
function print(fn){     // fn : 전달받은 함수
    alert(fn(5));
};
document.getElementById("btn33").addEventListener("click",()=>{

    print( function(num){ return num * 10} );    //익명함수
    print( num => num * 10 );             //화살표함수
});