Arrow Function에 관하여

최문길·2023년 11월 4일
1

JavascriptES6

목록 보기
4/23

일반 함수 만드는 것보다 쉽다..

function 함수(){ ...} //1번째 일반함수
var 함수 = function(){ ... } // 2번째 일반함수

 // 두둥 ! 탁!
var  arrow = ()=>{...} // !!!Arrow Function!!!

*참고*
// object에서 함수(메소드) 만들기 새로운 방식
  var obj {
    기존함수:function(){...},
      
    간편함수(){...}// 새로운 방식? 편한방식..
  }
    

참고) 함수는 언제 씀??

1. 코드들을 기능으로 묶고 싶을 때 사용
2. 입출력 하는 기계를 만들고 싶을 때 사용



그럼 Arrow Function 표현식은 언제쓸까?

입출력 하는 기계를 쉽게 만들고 싶을 때 사용

var arrowFunc = ()=>{...} // So Easy..



Arrow Function의 장점

1. 직관적으로 파악하기 쉬움

	var arrow = (a) => {return a + 10}

 arrow(5)

2. 괄호 생략 가능 - 파라미터가 하나밖에 없을 때 생략 가능

	var arrow = a => {return a + 10}//


3. 코드가 '한 줄이면' => '중괄호', 'return' 생략가능

    var arrow = a => console.log(a);


Arrow 뿽션 예시

  1. Array.forEach 콜백함수
 [1,2,3,4,5].forEach(function(a){
   console.log(a) // 이 함수를 
 })
 
 // 요래요래 간단히 바꿀 수 있다. 조금더 멋져보이기 까지 함...
 [1,2,3,4,5].forEach( a => console.log(a) )            
       


  1. addEventListener
document.getElementById('btn').addEventListener("click",(e)=>{
        console.log(this)
     })

Arrow function은
this값을 다시 재 정의 해주지 않는 특징이 있다
=> 바깥에 있던 this 값을 내부에서 그대로 사용

그렇다면 this 값은?? 무엇일까용?



3. Object의 함수 내
       var object = {
           func : function(){
           }
       }    

        //이렇게 만드는 것을

       var object = {
           func : ()=>{
               console.log(this) 
           }
       }
       // Q. this는 무엇일까요??

0개의 댓글