본문 바로가기

UI개발

[ES6] 화살표 함수에 없는 것

화살표 함수에 없는 것

 

1. 함수 이름

 

함수에 이름을 주는게 가능했지만

function myFunc(){}

 

화살표 함수는 익명함수이다.

() => {}

 

이름을 주려면 요렇게 써야한다.

const myFunc = () => {}

 

 

2. this

var btn = document.getElementById('btn');

var obj = {
    count : 3,
    setCounter : function(){
    
        console.log(this.count); // 3 (this = obj);

        btn.addEventListener('click', function(){
           console.log(this);   // btn
        }

        // btn에서 this를 obj로 쓰려면 bind한다.
        btn.addEventListener('click', (function(){
           console.log(this);  // obj
        }).bind(this));

        // 화살표 함수에선 bind 없이도 this는 obj이다.
    }
}

this가 없기 때문에 new를 쓸 수 없다. (프로토타입도 없는 것) 

const myFunc = function(){ 
    this.~~
}
new myFunc();

 

3. arguments

var myFunc = function(){
    console.log(arguments); // 1,2,3,4 배열은 아닌데 배열처럼 접근할 수 있게 보여줌.
}
myFunc(1,2,3,4);
const myFunc = () =>{
    console.log(arguments); // 없음!
}
myFunc(1,2,3,4);
function outter(){
    const myFunc = () =>{
        console.log(arguments); // 1,2,3,4 자기한테 없어서 outter꺼 참조함
    }
}
outter(1,2,3,4)
const myFunc = (...args) = > {
    console.log(args); // 1,2,3,4 배열
}
myFunc(1,2,3,4);

 

화살표 함수의 장점

1. 타이핑 수가 줄어든다

2. this bind 안해도 된다.

    this를 변수에 담아서 다른 곳에서 쓰고 그런거 안해도 된다는 것.