[자바스크립트] - ★화살표 함수

화살표 함수  Arrow function

ES6버전부터는 => 표기법(화살표 표기법)을 사용해서 함수 선언을 좀 더 간결하게 할 수 있다. 
화살표 함수는 익명 함수에서만 사용할 수 있다. 

화살표 함수가 적응되면 익명함수보다 화살표 함수로 많이 쓴다.

 

익명함수 기본형에서 function 글자가 사라지고 매개변수 자리 뒤에 => 가 추가된 형태

[기본형]

0.매개변수가 2개 이상 있을 경우

let 변수 = (매개변수1, 매개변수2) => { 자바스크립트 코드 };
        
변수명(인수); → 호출문

 1. 매개변수가 없을 경우
: 매개변수의 괄호 안을 비워두면 된다. 호출문의 인수자리도 비워둔다.

let 변수 = () => { 자바스크립트 코드 };

변수명()); → 호출문

2. 실행할 자바스크립트 코드가 1줄인 경우
: 실행할 자바스크립트 코드가 1줄인 경우 중괄호를 생략할 수 있다.
이때 return문은 생략하고 쓸 수 있다. 

let 변수 = () => 자바스크립트 코드;

3. 매개변수가 1개인 경우
: 매개변수 자리의 소괄호를 생략할 수 있다. 근데 프리터때문에 소괄호가 생기긴 한다. 

let 변수 = 매개변수 => { 자바스크립트 코드 };

 

정리하면,

매개변수가 1개일 경우만 ( )를 생략할 수 있고, 뒤에 자바스크립트 코드는 한줄일 땐 { }와 retrun을 생략할 수 있다. 

자바스크립트 코드가 2줄일 땐 { }써야함.  retrun도 써줘야한다. 

 

---

< 매개변수가 없을 경우 >

 

  let hello = () => {

        document.write("hello", "<br>");

      };

      hello();

 

---

< 매개변수가 2개 이상인 경우 >

 

  let addNum = (a, b) => {  return a + b;  };

      let cup = addNum(1, 3); //return을 사용했기때문에 반환될 값을 받아줄 변수가 필요하다. 호출문을 변수에 감싸줘야함

      document.write(cup, "<br>");

 

 

만약 인수를 보내고 싶지 않다면 아래와 같이 기본값을 지정해주면 된다 .

 

  let addNum = (a = 1, b = 3) => {

           return a + b;

      };

      let cup = addNum();

      document.write(cup, "<br>");

 

 

  let addNum = (a = 1, b = 3) => a + b;

 

위에 식을 간략하게 하면 return과 중괄호를 생략할 수 있다. 자바스크립트 코드가 한 줄이기때문에

---

< 자바스크립트 코드가 1줄일 경우 > - return을 생략할 수 있다. 

hi 함수를 호출하여 결과를 화면에 출력함. 

---

< 매개변수가 1개인 경우 >

  let myName = (name) => document.write("제 이름은" + name + "입니다");

      myName("김땡땡");

 

소괄호 생략할 수 있는데 프리터 기능때문에 소괄호가 생긴다. 

김땡땡이라는 인수를 name 매개변수에 넣어준 것.