Arrow functions

Arrow function은 JS의 함수를 개선한 형태라고 보면 된다. let과 const처럼 대체되는 것이 아닌 보기 좋게 형태를 바꾼것 뿐이다.

<aside> 📝 Declaration arrow function

(params) ⇒ {// cImplement code…}

const names = ["nico", "lynn", "flynn"];
const hearts = names.map((item) => {
  return item + " 💖";
});

</aside>

JS도 일반함수와 익명함수로 코드를 구현할 수 있지만 더욱 깔끔한 방법인 화살표 함수로 코드를 구현할 수 있다.

/// generic function
/**
 * 일반함수 선언
 */
function nameOf(params) {}

/**
 * 익명함수 선언
 */
function (params){};

/**
 * 변수함수 선언
 */
const variable1 = function (params) {};

크게 JS 함수는 위와 같은 형태로 선언된다. 그리고 저걸 그대로 arrow function으로 바꿔주기만해도 동작이 잘된다. 단, arrow function은 익명함수이기에 일반함수 선언처럼 선언할 수 없다.

/// arrow function
/// `=>`이걸 arrow라고 부른다.
/**
 * 익명화살표 함수 선언
 */
(params) => {};

/**
 * 변수화살표 함수 선언
 */
const variable2 = (params) => {};

Moden JS의 제공함수인 map을 이용하여 함수와 화살표 함수의 특징적인 사용방법을 확인할 수 있다.

/**
 * 함수선언, 익명함수, 화살표 함수를 모두 구현한 소스.
 */
const names = ["nico", "lynn", "flynn"];

function addHeart(item) {
  return item + " 💖";
}
const hearts1 = names.map(addHeart);
console.log(hearts1);

const hearts2 = names.map(function (item) {
  return item + " 💖";
});
console.log(hearts2);

const hearts3 = names.map((item, index) => {
  console.log(`we are on ${index}`);
  return item + " 💖";
});
console.log(hearts3);

Impolicit return

화살표 함수에는 암시적 반환으로 함수를 정의할 수 있다. 암시적 반환은 한줄로 구현이 가능한 기능을 한에서 화살표 함수를 구현하는 기능이다.

<aside> 📝 Impolicit return of arrow function

(params) ⇒

names.map((name) => name + " 💖")

</aside>

/**
 * implicit return of arrow function
 * arrow function의 정의가 간단할 경우 impolicit return을 사용한다.
 * return을 사용하지않고 데이터 반환이 된다.
 */
const hearts4 = names.map((item) => item + " 💖");
console.log(hearts3);

화살표 함수를 더욱 간단하게 사용할 수 있고 보기좋게 변환하였다. 하지만 두줄 이상의 소스코드라면 block scope{}를 사용하여 정의해야한다.

'this' in Arrow Functions

JS에도 this키워드가 있는데 인스턴스된 객체의 정보를 가진다. 그리고 객체가 정의한 함수내에서 this를 사용하면 인스턴스의 정보를 가져올 수 있다.

/**
 * 객체가 정의한 함수내에서 this를 사용하면 인스턴스의 정보를 가져올 수 있다.
 */
const button1 = document.querySelector("button");

button1.addEventListener("click", function () {
  console.log(this);
  this.style.backgroundColor = "tomato";
});

위 코드를 보면, 객체가 정의한 함수는 매개변수로 callback함수를 받는다. 그리고 callback함수 내에서 this를 사용하여 button의 정보를 가져와 색을 변경한다. 여기서 callback함수를 일반 함수가 아닌 arrow function으로 바꾸면 에러가 발생한다.

/**
 * arrow function으로 callback 인수로 전달하면 this는 Window정보를 가져온다.
 */
const button2 = document.querySelector("button");

button2.addEventListener("click", () => {
  console.log(this);
  this.style.backgroundColor = "tomato";
});