화살표 함수

5Arrow Function Expression

• 일반적인 function에 비해 구문이 더 짧고 스스로의 this, arguments, super, new.target을 바인딩하지 않는다는 특징이 있다.
• 화살표 함수는 항상 익명 함수라는 특징을 가지고 있다.
• 위 특징들때문에 화살표 함수 표현은 메소드 함수가 아닌 부분에 유용하게 쓰일 수 있지만 생성자로는 사용할 수 없다.

var materials = [
    'Apple',
    'Banana',
    'Peach',
    'Orange'
];

console.log(materials.map(material => material.length);

//위 코드를 실행하면 Array [5, 6, 5, 6]이 결과로 나오게 된다.

---

화살표 함수로 변환 예

- 화살표 함수는 항상 익명함수로 표현해야 한다.

//일반적인 함수 표현
const myFunction = function () {
    ...
}

//화살표 함수 표현
const myFunction = () => {
    ...
}

 

---

 

- 화살표 함수에는 this를 사용할 수 없다.

//일반적인 함수에서 this의 활용
const button = document.querySelector("#btn");

var myObject = {
    count: 0,
    setCounter: function () {
    	console.log(this.count);
        button.addEventListener("click", (function () {
        	console.log(this.count++);
        }).bind(this));
    }
};

myObject.setCounter();

• setCounter 함수 실행 결과 0이 출력된다. 
• 함수에 bind() 메소드를 활용한다면 해당 객체의 속성값인 count를 이벤트와 연결시켜주게 된다.

//화살표 함수 표현
const btn = document.querySelector("#btn");

var myObject = {
    count: 0,
    setCounter: function () {
        console.log(this.count);
        btn.addEventListener("click", () => {
            console.log(this.count++);
        });
    }
};

myObject.setCounter();

• 화살표 함수에는 스코프상 this자체가 없기 때문에 함수가 선언된 위치상에서 바로 참고하게 되고 
• setCounter의 첫 익명함수를 화살표함수로 바꿀 경우 this를 활용할 수 없어 count를 늘릴 수 없게 된다.

---

 

- 화살표 함수는 아규먼트를 가질 수 없다.

//일반적인 함수 표현
const myFunction = function () {
    console.log(arguments);
}

myFunction(1, 2, 3, 4);

• myFunction을 실행하면 배열을 따로 선언하지 않았음에도 마치 배열인것처럼 callee 등의 속성도 존재하게 된다.

const myFunction2 = () => {
    console.log(arguments);
}

myFunction2(1, 2, 3, 4);

• 화살표함수로 변환하게 될 경우 아규먼트를 사용할 수 없다는 제약때문에 해당 코드는 오류가 발생한다.

function outterFunc() {
    const myFunction2 = () => {
        console.log(arguments);
    }
}

outterFunc(1, 2, 3, 4);

• 화살표 함수 밖을 일반 함수로 감싸주게 되면 스코프 체인에 의해 arguments가 outterFunc 함수를 참조하게 되고 첫 번째 함수와 같은 효과를 낼 수 있게 된다.

const myFunction3 = (...arguments) => {
    console.log(arguments);
}

myFunction3(1, 2, 3, 4);

• 화살표 함수 밖에 일반 함수를 감싸는 방법 외에도 ES6의 문법인 '...변수명'을 통해 배열을 선언해주고 그 변수에 값을 저장해주는 방식을 사용할 수도 있다.
• 이 방법은 기존의 배열처럼 동작하는 argument와는 달리 실제 배열이라는 차이가 있다.