JS ( 함수 )

DeadWhale·2022년 5월 18일
0

JS

목록 보기
9/12
post-thumbnail

JS 함수

#기본 형태
function 함수명(매개변수){   // 함수 선언
	// 함수 코드
}
함수명(); // 함수 호출

#익명함수 ( 함수 이름이 없는 함수 ) 
function(매개변수){ // 함수 선언
            // 함수 정의
}

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


이벤트 핸들러와 같이 바로 동작하는 함수가 필요한 경우 또는
변수, 매개변수에 함수를 저장 해야하는 경우 사용함.


# 즉시 실행 함수
(function(매개변수){ 
            // 함수 정의
})();
  • 익명 함수의 한 종류로써
    함수가 정의 되자마자 바로 실행되는 함수


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


    2) 사용하려는 변수명이 전역변수로 사용되어지고 있는 경우
    즉시 실행 함수를 이용하여 내부의 지역 변수로 작성하여
    변수명 충돌 문제를 해결할 수 있다.
//기본함수.
//작성 후 메서드를 호출해 사용해야한다.
function test1(){
    console.log("비교를 위해 제작된 기본함수.");
}
test1();//호출



//즉시 실행 함수
//페이지가 로딩되고 렌더링이 되고 바로 실행된다.
(function(){
    console.log("즉시 실행된 함수");
    //호출하지 않아도 자동을 수행.
})();

//즉시 실행 함수의 변수명 중복 해결
const str = "전역 변수.";
//전역변수를 즉시 실행 함수안에서 같은 변수명을 사용해도 오류가 발생하지 않는다.
(function(){
    const str = "즉시 실행 함수에서의 지역변수";
    console.log(str);
})();



화살표 함수 =>

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

작성법 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 생략 불가능

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

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

document.getElementById("btn2-3").addEventListener("click",() => {
    
    //함수 호출 (익명)
    printConsole( function(num){return num*10});

    //함수 호출(화살표 함수)
    printConsole( num => {return num*5} )

    printConsole( num =>  num*3 )


    //반환값이 Object 이면 {} , retunr 생략 불가
    //화살표 다음에 함수 정의 부분이 있어야 하는데 
    //객체(JS Object) 가 작성되서 생략이 불가능
    printConsole(  (num) => { return {price:num*1000 , n:num}})
 })

function printConsole(fn){//매개변수 함수가 전달됨.
    console.log( fn(2) );
}

//this 사용 불가

//익명함수는 this 사용 가능
document.getElementById("btn2-4").addEventListener("click",function(){
    this.style.backgroundColor="red";
})
//화살표 함수는 this 사용 불가능
document.getElementById("btn2-4").addEventListener("click",e=>{

    //화살표 함수에서 this는 window를 가르친다.
    //this.style.color="white";

    e.target.style.color="white";
})

화살표 함수의 이용 방법은 좀더 익숙해져야 할 것 같다.

0개의 댓글