자바스크립트_화살표함수(arrow function) 개념정리

오늘은 화살표 함수에 대해 알아보겠습니다.

화살표 함수는 ES6에서 처음 등장한 새로운 함수 선언 방법입니다.

 

함수 선언식 : function 키워드로 단독으로 함수를 선언한 것

function sum(num1, num2) {
  return num1 +num2;
}

함수 표현식 : 변수에 함수를 할당한 것

const sum = function sum( num1, num2 ) {
  return num1 + num2;
}
 

화살표 함수 => 화살표를 이용해서 선언하는 것

기존의 함수 선언 코드에서 구조를 비교할것

const sum = (num1, num2) => { 
  return num1 + num2;
} 
 

만약 위에 코드처럼 중괄호 안에 return을 반환하고 있다면//

좀더 줄일 수 있습니다.

const sum = (num1, num2) => num1 + num2;

이렇게 나타낼수 있습니다.

만약 매개변수가 1개일 경우에는

const pow = x => x * x  //10의 제곱

이런 형태가 된다.

만역 전달하고자하는 매개변수가 하나도 없다면'

const printPie = () => 3.14
 

라고 적어주면 됩니다.

만약 화살표함수가 내부적으로 객체를 반환하고 있다면

const getObject = () => {
  return {
    name: "adam"
    age:20
  }
}

이런식으로 나타내고 단축하여 코드를 나타내고싶다면,

중괄호와 리턴을 지우고 객체를 한번감싸는 소괄호를 입력해야 합니다.

좀더 주의해야합니다.

const getObject = () => ({
    name: "adam"
    age:20
  });

밑에는 내부함수라고 합니다.

funtion outer(x){
  return function inner() {
    return x*x;
  }
}
const innerFuc = outer(10);
const result = innerFun()
console.log(result)

내부함수의 작동 원리를 정확히 몰라도 내부함수를 화살표 함수로 변경할 수 있습니니다.

const outer = (x) => function inner() {
    return x*x;
  } //이렇게 가능합니다.
  const outer = (x) => () => x * x;
  //이렇게까지 간단하게 변경이 가능합니다.
 

 

 

오늘은 arrow fuction, 화살표함수에 대해 알아보았습니다. 좀더 간단하게 함수를 나타내고 싶을떄 사용하네요! 연습 많이 해야겠습니다.