arrow function

화살표 함수

함수 표현식대신에 간결한 문법으로 함수를 만들 수 있는 방법이 있는데 화살표 함수, arrow function을 사용하면 된다.

let func1 = (arg1, arg2, ...args) => 표현식

위의 코드를 살펴보면 인자 arg1, arg2, ...args를 받는 함수 func1을 만든 모습이다.
함수 func1는 화살표( => ) 우측의 표현식(expression)을 평가한 뒤 평가의 결과를 반환한다.

위의 화살표 함수를 함수 표현식으로 다시 풀어서 작성해보면, 아래와 같다.

let func2 = function(arg1, arg2, ...args) {
  return 표현식; 
}

화살표 함수 & 함수 표현식

화살표 함수와 함수 표현식을 통해 매개변수로 들어오는 숫자 2개의 합을 구하는 함수를 표현해 볼것이다.

sum2 함수를 축약하면, sum1 함수로 바꿀 수 있다.

화살표 함수

let sum1 = (num1, num2) => num1 + num2;

함수 표현식

let sum2 = function(num1, num2) {
  return num1 + num2; 
}

console.log(sum1(7, 9));

위의 코드에서 (num1, num2) => num1 + num2는 매개 변수로 num1과 num2를 받는 함수이다.
(num1, num2) => num1 + num2이 실행되는 순간에 표현식 부분에 있는 num1 + num2를 평가하고, 그 결과를 반환해준다.

매개변수로 들어오는 인수가 1개일 때

화살표 함수를 사용할 때 인수가 하나 밖에 없을 때, 인수를 감싸는 괄호를 생략하는 것이 가능하다.

let towMultiplication1 = num1 => num1 * 2;

위의 코드를 함수 표현식으로 만들어보면 아래와 같다.

let towMultiplication2 = function(num1) {
  return num1 * 2; 
}

console.log(towMultiplication1(24));

매개변수로 들어오는 인수가 없을 때

매개변수로 들어오는 인수가 한개도 없을 때는 괄호를 비우면 된다.
주의해야 할 점은 괄호를 생략하면 안 된다.

let greeting = () => console.log('hello javascript!');

greeting();

화살표 함수 동적으로 표현하기

화살표 함수는 함수 표현식과 같은 방법으로 사용할 수 있는데 아래의 코드를 통해 함수를 동적으로 만들어 볼 것이다.

let gender = prompt('성별을 입력해주세요.', 'female');

let greeting = (gender === 'female') ? 
  () => console.log('여성입니다!') :
  () => console.log('남성입니다!');

greeting();

표현식이나 구문이 여러개일 때의 함수

화살표 함수를 알아보면서 => 왼쪽에 있는 인수를 이용해서 => 오른쪽의 표현식을 평가하고, 그 평가 결과를 반환받으면서 화살표 함수를 익혔다.

만약에 평가해야 될 표현식이나 구문이 여러 개일 때는 어떻게하면 좋을까?
화살표 함수를 통해서 만들 수 있을까?

위에서 공부한 것은 기존 함수 표현식이나 선언식에서 사용했던 { }를 사용하는 화살표 함수만을 사용했었다.
하지만, 표현식이나 구문이 여러개일 경우가 분명히 있을 수 있기 때문에
이때도 { } 중괄호를 사용해서 중괄호 안에서 평가할 코드를 작성해주면 된다.

그리고, return 킼워드를 사용해서 명시적으로 함수 안에서 평가하는 코드의 결과를 반환해줘야만 한다.

• 중괄호를 통해 표현식 안에 여러 줄의 표현식, 구문이 있음을 표시한다.
• 중괄호를 사용하면 return 키워드로 결과값을 반드시 반환해줘야 된다.

let average = (num1, num2) => {
  let result = (num1 + num2) / 2;
  return result;
}

console.log(average(3, 5));