[JS] ES6 - Functions

이채현

💡 Javascript ES6 문법을 배워보자 - 함수

Functions

Arrow Functions

기존 함수의 모습을 개선했다.

기존 함수

function Hello() {
  return "hi";
}
console.log(Hello());

const names = ["kim", "lee", "park"];

const hearts = names.map(function (name) {
  return name + " ❤️";
});
console.log(hearts);

Arrow Functions(1) - base

const Hello = () => {
  return "hi";
};
console.log(Hello());

const names = ["kim", "lee", "park"];

const hearts = names.map((name) => {
  return name + " ❤️";
});
console.log(hearts);

Arrow Functions(2) - implicit return

const Hello = () => "hi";
console.log(Hello());

const names = ["kim", "lee", "park"];

const hearts = names.map(name => name + " ❤️");
console.log(hearts);

this in Arrow Functions (Event listener in arrow function)

일반 콜백 함수안에서 this는 이벤트리스너에 연결 된 엘리먼트를 가리킨다. 하지만, arrow function안에서 this는 window를 가리킨다.

결론, this를 함수 안에 익명함수로 사용할 때는 Arrow Function이 아닌 일반 표준 funtion 형태로 사용해야한다.

const thisTest = {
  cnt: 0,
  addCnt() {
    this.cnt++;
  },
  addCnt2: () => {
    this.cnt++;
  },
};
console.log(thisTest.cnt); // 0
thisTest.addCnt();
console.log(thisTest.cnt); // 1
thisTest.addCnt2;
console.log(thisTest.cnt); // 1

Default Values

const sayHi = (aName = "anon") => {
	return `Hello ${aName}`;
}

console.log(sayHi());
console.log(sayHi('chaehyeon'));