Javascript) 화살표 함수 - 문법

안녕하세요, 코린이의 코딩 학습기 채니 입니다.

 

개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.

---

화살표 함수 Arrow Function (ES6)

- 익명 함수를 간단히 작성하는 문법

- function(){}를 완전히 대체하지는 못함

* arguments 참조 변수 사용 불가

* 생성자 함수로 사용 불가

* 자신의 this가 없고, 부모 스코프의 this를 가져와 binding

 

HTML 코드

<button onclick="test8();">화살표함수</button>

 

Javascript 코드

 

문법

const 함수명 = (매개변수명) => {실행부}

 

매개변수가 하나인 경우, 소괄호 생략 가능

const f1 = a => {console.log(a);};

 

함수 몸통부가 한 줄인 경우, {return} 생략 가능

const f2 = (a, b) => a + b;
const f3 = (_name, _age) => ({name : _name, age : _age}); // 객체를 반환하는 경우 소괄호 작성(함수의 {}로 인식하여 오류 발생)

단, 객체를 반환하는 경우에는 소괄호를 작성해야 합니다.

소괄호를 작성하지 않으면 함수의 {}로 인식하여 오류가 발생하게 됩니다.

 

실행부가 한 줄인 경우, {} 생략 가능

const f4 = a => console.log(a);

 

const test8 = () => {
    f1(100);
    console.log(f2(30, 50));
    console.log(f3('홍길동', 33));
    f4(200);
};

매개인자로 값을 넘겨주어 각 함수의 매개변수로 받아 실행하였습니다.

 

---

@실습 - 계산기

const test9 = () => {
    console.log(calc('add', 10, 20));   // 30
    console.log(calc('add', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10));    // 55
    console.log(calc('subtract', 100, 70)); // 30
    console.log(calc('multiply', 11, 2, 5)); // 110
    console.log(calc('multiply', 9, 5)); // 45
    console.log(calc('divide', 100, 3)); // 33
}

const calc = (symbol, ...nums) => {
    return nums.reduce((agg, num) => {
        switch(symbol) {
            case 'add' : return agg + num;
            case 'subtract' : return agg - num;
            case 'multiply' : return agg * num;
            case 'divide' : return Math.floor(agg / num);
        }
    });
};

나머지 파라미터를 이용하여 개수가 다른 숫자를 받아주었으며, reduce() 함수를 이용하여 덧셈, 뺄셈, 나눗셈, 곱셈 처리를 하였습니다.