Arrow Function

Arrow Function 뭔가 익숙하지 않다보니까 이해가 쉽지 않다. 아직까지도 하하하

 

한번 가보자

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions

화살표 함수 - JavaScript | MDN

<이름 없는 함수 선언>

//ES5
function() {}

//ES6
() => {}

<이름 있는 함수 선언>

function getName() {}

//ES6
const getName = () => {}

//ES5
//Function Expression
const getName = function() {}

위 코드를 살펴보면 알수 있다. 그냥 함수의 표현법이 달라진것이다. 쉽게 생각하자 현태야 할수있어

 

첫째 괄호는 매개변수 자리이고 화살표 이후 자리는 {} 안에 들어갈것을 쓰는구나 

 

<매개 변수가 하나있는 함수 선언>

//ES5
const getName = function(name) {}

//ES6
const getName = (name) => {}
const getName = name => {}

arrow function 을 사용할 때 매개변수가 하나인 경우 괄호를 써줘도 되고 안써줘도 된다!

 

<매개변수가 2개인 함수 선언>

//ES5
const getName = function(name, age) {}

//ES6
const getName = (name, age) => {}

 

<return 값이 있는 함수 선언>

//ES5
function hi(text) {
  text += '하세요';
  return text;
}

//ES6
const hi = text => { 
  text += '하세요';
  return text 
};

차근 차근 하니까 조금씩 어려움이라는 감정이 사라지는것 같다. 하하하하

 

만약 여기서 실행 내용이 딱히 없이 return만 가능하다면 return키워드와 중괄호도 생략할 수 있다.

 

//ES5
function getName(name) {
  return name;
}

//ES6
const hi = name => { return name };
const hi = name => name;

> 중괄호와 return문이 생략될 경우,  화살표 오른쪽에는 value만 써야합니다!

 

 

- 일반 함수 선언과 arrow function은 차이

 

• this나 super에 대한 바인딩이 없고, methods 로 사용될 수 없습니다.
• new.target키워드가 없습니다.
• 일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 이용할 수 없습니다.
• 생성자(Constructor)로 사용할 수 없습니다.
• yield를 화살표 함수 내부에서 사용할 수 없습니다.

프로그램을 시작한지 얼마 안된 나는 뭔소리인지 솔직히 모르겠다 하하하하하하

 

일단 알수있는건 4번째 줄 생성자를 사용할 수 없다.  이것만 알아 듣겠다 하하하하

 

하지만 난 할수 있어요! 파이팅!!