Arrow Function?

화살표 함수는 function 키워드 대신 화살표(=>)를 사용하여 간략하게 함수를 선언하는것이다.

화살표 함수는 익명 함수로만 사용할수 있다. 따라서 화살표 함수를 호출하기 위해서는 함수표현식을 사용한다.

선언

// 기본적인 함수 형태
function  nameof(arg){}

// arrow function
()  =>  {} // arrow functions

예제

const names = ['nico',  'lynn',  'flynn']

names.map((el) => console.log(el +  "😊"))

• {} 을 사용하지 않으면 자동으로 return 한다.
  - (el) => 0 : 0을 자동으로 return.

this in ()=>{}

function 키워드로 생성한 일반 함수와 화살표 함수의 가장 큰 차이점은 this이다.

일반적인 함수의 this

const button = document.querySelector("button");

button.addEventListener("click", function(){
  console.log(this); // <button></button>
})

• this 는 button을 가르킨다.

arrow함수의 this

// arrow 함수
button.addEventListener("click", () => {
  console.log(this); // window
})

• this 는 window를 가르킨다.
• window를 obj로 가지고 있다.
• 화살표 함수의 this는 언제나 상위 스코프의 this를 가리킨다. 이를 Lexical this라고 한다.

예제

const gayoung =  {
  name:'gayoung',
  age:26,
  addYear(){
    this.age++
  }
};
  
console.log(gayoung);
gayoung.addYear();
console.log(gayoung.age);

• arrow함수일 경우 age에는 아무런 변화가 없지만 (window를 바라보고 있기 때문)
• 일반 함수일 경우this는 gayoung 객체를 바라보고 있으므로 age에 변화가 생긴다.

arrow function을 사용해서는 안되는 경우

1. 메소드

화살표 함수로 메소드를 정의하는 것은 피해야 한다.

const person = {
  name: 'Lee',
  sayHi: () => console.log(`Hi ${this.name}`)
};

person.sayHi(); // Hi undefined

위의 예제의 경우, 메소드로 정의한 화살표 함수 내부의 this는 전역 객체 window를 가리킨다.따라서 화살표 함수로 메소드를 정의하는 것은 바람직 하지 않다.

위와 같은 경우는 메소드를 위한 단축 표기법인 ES6의 축약 메소드 표현을 사용하는 것이 좋다.

const person = {
  name: 'Lee',
  sayHi() { // === sayHi: function() {
    console.log(`Hi ${this.name}`);
  }
};

person.sayHi(); // Hi Lee

2. prototype

화살표 함수로 정의된 메소드를 prototype에 할당하는 경우도 동일한 문제가 발생한다.

const person = {
  name: 'Lee',
};

Object.prototype.sayHi = () => console.log(`Hi ${this.name}`);

person.sayHi(); // Hi undefined

화살표 함수의 this가 전역객체인 window를 가리키기 때문이다. 따라서 prototype에 메소드를 할당하는 경우, 일반 함수를 할당한다.

const person = {
  name: 'Lee',
};

Object.prototype.sayHi = function() {
  console.log(`Hi ${this.name}`);
};

person.sayHi(); // Hi Lee

3. 생성자 함수

화살표 함수는 생성자 함수로 사용할 수 없다. 생성자 함수는 prototype 프로퍼티를 가지며 prototype 프로퍼티가 가리키는 프로토타입 객체의 constructor를 사용한다. 하지만 화살표 함수는 prototype 프로퍼티를 가지고 있지 않다.

const Foo = () => {};

// 화살표 함수는 prototype 프로퍼티가 없다
console.log(Foo.hasOwnProperty('prototype')); // false

const foo = new Foo(); // TypeError: Foo is not a constructor

4.addEventListener 함수의 콜백 함수

addEventListener함수의 콜백 함수를 화살표 함수로 정의하면 this가 상위 컨택스트인 전역 객체 window를 가리킨다.

let button = document.getElementById('myButton');

button.addEventListener('click', () => {
  console.log(this === window); // => true
  this.innerHTML = 'Clicked button';
});

따라서 addEventListener 함수의 콜백 함수 내에서 this를 사용하는 경우, function 키워드로 정의한 일반 함수를 사용하여야 한다. 일반 함수로 정의된 addEventListener 함수의 콜백 함수 내부의 this는 이벤트 리스너에 바인딩된 요소(currentTarget)를 가리킨다.

let button = document.getElementById('myButton');

button.addEventListener('click', function() {
  console.log(this === button); // => true
  this.innerHTML = 'Clicked button';
});

arrow functions 예제

const emails = [
  "nco@no.com",
  "naver@goolge.com",
  "young@gmail.com",
  "cico@nomad.com",
  "noco@gmail.com"
]

1. find() & include()

const Email = emails.find(item => item.includes("@gmail.com"))
console.log(Email);

find() MDN | include() MDN

2. filter()

const noGmail = emails.filter(el => !el.includes("@gmail"))
console.log(noGmail)

filter() MDN

3. forEach() & map()

const userid = emails.forEach(el  => console.log(el.split("@")[0]))

const user = emails.map((el,idx)  =>({
	username:el.split("@")[0],
	points:idx
}))

• obj를 반환하고 싶을때 ()=> ({})

  forEach() MDN | map() MDN

default values

default function

function sayHi(name = "anon"){
  return `Hello ${name}`;
}

console.log(sayHi()); // "hello anon"
console.log(sayHi("young")); // "hello young"

arrow function

const sayHello = (name = "anon") => `Hello ${name}`

console.log(sayHello()); // "hello anon"
console.log(sayHello("young")); // "hello young"