기존의 함수 작성 방식

function 함수이름(인자값1,인자값2...){
	함수 내용
	return 값;
}
//함수 이름은 없어도 됨
//인자값도 없어도 됨
//return 값은 무조건 1이하
//함수 내용은 작성해도 되고 안해도 됨

• 예시) 더하기 함수

  function funcAdd(num1,num2){
  	//본문내용
  	return num1+num2;
  }
  

화살표 함수 특징 및 작성방식

• 이름 X (익명함수)
• 매개변수가 하나라면 소괄호는 생략이 가능하다
• 본문이 한줄이라면 중괄호는 생략이 가능하다.
• 중괄호가 생략 된다면 리턴값은 암묵적으로 이루어진다.
• 중괄호를 쓰려면 반드시 return 이 필요하다.(return 값 안쓰면 undefined가 뜨게 됩니다.)

(매개변수...) => {//함수 본문 / 리턴값}

• 기존 함수와 화살표 함수로 작성되는 더하는 함수

  • 기존 함수

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

  • 화살표 함수

    const add = (num1,num2) => num1 + num2;
    //본문이 한줄이라 중괄호 생략이 되었고 
    //return 값도 암묵적으로 이루어지므로 생략했다.
    
    const add = (num1,num2) => {return num1 + num2;)
    

• 기존 함수와 화살표 함수로 작성되는 제곱 함수

  • 기존 함수

    const squ = function (num){
    	return num * num;
    }
    

  • 화살표 함수

    const squ = num => num * num;
    //매개변수가 하나라서 소괄호가 생략 되었으며
    //본문이 한줄이라 중괄호가 생략이 되었고
    //return 또한 암묵적으로 이루어지므로 생략되었다.
    

• 제어문도 쉽게 작성할 수 있음

  //기존 함수
  const isPos = num => {
      if(num<0) num=0;
      return num; 
  }
  
  //화살표 함수
  const isPos2 = num => {num>0 ? num:num=0; return num;}
  const isPos3 = num => num<=0 ? 0 : num;
  
  console.log(isPos(-1));
  console.log(isPos(1));
  
  console.log(isPos2(-10));
  console.log(isPos2(10));
  
  console.log(isPos3(-20));
  console.log(isPos3(20));
  

• 콜백 함수의 가독성도 높여줌

  setTimeout(()=>console.log("Hello"),3000);
  //인자를 받지 않으며 리턴값 없이 console.log로 출력한다.