화살표 함수

function 문법을 완벽하게 대체하는 것이 아니다.

function add1(x, y) {
	return x + y;
}

const add2 = (x,y) => {
	return x + y;
}

const add3 = (x,y) => x + y; //중괄호 뒤 바로 리턴시 생략 가능
const add4 = (x,y) => (x + y);//리턴값을 한번 묶어준다.

function not1(x) {
	return !x;
}

const not2 = x => !x; //매개변수 하나면 생략 가능

const obj = (x, y) => {
	return {x, y}; //객체 반환 리터럴
}
const obj = (x, y) => ({x,y});// 객체를 바로 반환하게 된다면 JS가 어떤걸 반환하는지 구별을 못하기 때문에 소괄호가 필수이다.

• add1, add2, add3, add4는 같은 기능을 하는 함수
• add2: add1을 화살표 함수로 나타낼 수 있음
• add3: 함수의 본문이 return만 있는 경우 return 생략
• add4: return이 생략된 함수의 본문을 소괄호로 감싸줄 수 있음
• not1과 not2도 같은 기능을 함(매개변수 하나일 때 괄호 생략)

var relationship1 = {
  name: "zero",
  friends: ["nero", "hero", "xero"],
  logFriends: function() {
    var that = this; //자식에서 부모를 접근할떄 사용하기 위한 변수
    this.friends.forEach(function(friend) {
      that.name, friend; //that = foreach의 this이다. //부모의 this를 사용하기 위해서는 이렇게 사용햇다
    });
  }
};

• 화살표 함수가 기존 function() {}을 대체하는 건 아님(this가 달라짐)
  • logFriends 메서드의 this 값에 주목
  • forEach의 function의 this와 logFriends의 this는 다름
  • that이라는 중간 변수를 이용해서 logFriends의 this를 전달
• fuction을 쓰면 함수를 호출한 게 this지만 화살표 함수 같은 경우 this는 부모이다.

const relationship2 = {
  name: "zero",
  friends: ["nero", "hero", "xero"],
  logFriends() {
    this.friends.forEach(friend => {
      //화살표 함수의 this는 부모의 this를 가리킨다.
      console.log(this.name, friend);
    });
  }
};
relationship2.logFriends();

• forEach의 인자로 화살표 함수가 들어간 것에 주목
• forEach의 화살표함수의 this와 logFriends의 this가 같아짐
• 화살표 함수는 자신을 포함하는 함수의 this를 물려받음
• 물려받고 싶지 않을 때: function() {}을 사용