[ JS ] Functions

🔴  Arrow Functions

 

const names = ["Jeong", "Seung", "Ryong"];
// using normal function
const array = names.map(function(item) {
  return item + " ❗";
});
// using array function
const array = names.map(item => {
  return item + " ❗";
});
// using implicit return
// 🔑 { }를 사용하면 안 됨.
const array = names.map(item => item + " ❗");

 

🟠  'this' in Arrow Functions

⚪  this를 사용하여 스코프 범위에 해당하는 객체를 얻어올 때는 Arrow function을 사용하면 안 된다.

 

const button = document.querySelector("button");
// using normal function
button.addEventListener("click", function() {
  console.log(this);  // <button></button>
});
// using arrow function
button.addEventListener("click", () => {
  console.log(this);  // === console.log(window);
});

 

// using normal function
const ryong = {
  name: "Ryong",
  age: 28,
  addYear() {
    this.age++;
  }
};

console.log(ryong.age);  // 28
ryong.addYear();
ryong.addYear();
console.log(ryong.age);  // 30

// using arrow function
const ryong = {
  name: "Ryong",
  age: 28,
  addYear: () => {
    this.age++;
  }
};

console.log(ryong.age);  // 28
ryong.addYear();
ryong.addYear();
console.log(ryong.age);  // 28

 

🟡  Arrow Functions in the Real World

아래에 적용할 예제들에 공통적으로 적용될 객체를 하나 만들어보자.

 

const emails = [
  "jeong@no.com",
  "naver@google.com",
  "seung@gmail.com",
  "ryong@hello.com",
  "ryong@gmail.com"
];

⚪  find  조건을 만족하는 첫 번째 엘리먼트 값을 반환한다.

 

const foundMail = emails.find(item => item.includes("@gmail.com"));

console.log(foundMail);  // seung@gmail.com

⚪  filter  조건을 만족하는 엘리먼트들로 새로운 Array를 만들어서 리턴하는 함수이다.

 

const noGmail = emails.filter(item => !item.includes("@gmail"));

console.log(noGmail);  // [ 'jeong@no.com', 'naver@google.com', 'ryong@hello.com' ]

⚪  map  각 Array의 엘리먼트마다 제공된 함수를 순서대로 실행하는 함수이다.

 

const cleaned = emails.map(email => email.split("@")[0]);

console.log(cleaned);  // ["jeong", "naver", "seung", "ryong", "ryong"]

// if you wanna return object
// {}을 사용하면 implicit return을 사용하지 못하므로,
// object를 return하기 위해서는 ()를 위에 사용해준다.
const cleaned = emails.map((email, index) => ({
  username: email.split("@")[0],
  index
}));

console.table(cleaned);
/* (index)  username  index
   0        "jeong"   0
   1        "naver"   1
   2        "seung"   2
   3        "ryong"   3
   4        "ryong"   4
*/

 

🟢  Default Values

 

const DEFAULT = "default";

const sayHi = (aName = DEFAULT) => "Hello " + aName;

console.log(sayHi());  // Hello default