자바스크립트에서 화살표를 사용하는 이유

데이터의 수가 길어지는 경우, find 를 통해서 특정 key 값에서의 value 를 찾아봐야할 때가 존재한다.

 

그때, function 을 사용한 경우와 화살표 함수만 사용한 경우가 있다.

 

사용하는 방법을 잘 보면, 왜 화살표 함수가 편하지 알 것이다.

 

const settingState = 
[
  {
      "engname": "template_name",
      "korname": "탬플릿 이름",
      "value": "테스트 템플릿 1"
  },
  {
      "engname": "toffice_id",
      "korname": "Toffice 아이디",
      "value": "22019"
  },
  {
      "engname": "toffice_password",
      "korname": "Toffice 비밀번호",
      "value": "22019"
  },
  {
      "engname": "esero_email",
      "korname": "E-세로 검색 아이디",
      "value": "rps@gseps.comm"
  },
  {
      "engname": "tax_code",
      "korname": "세금코드",
      "value": "전자/10%/일반"
  },
  {
      "engname": "summary",
      "korname": "적요",
      "value": "테스트"
  },
  {
      "engname": "comment",
      "korname": "의견",
      "value": "1"
  },
  {
      "engname": "ponum",
      "korname": "PO번호",
      "value": 1
  },
  {
      "engname": "account_code",
      "korname": "하위 계정 코드",
      "value": "1"
  },
  {
      "engname": "sub_cost_center_code",
      "korname": "하위 코스트 센터 코드",
      "value": "1"
  },
  {
      "engname": "sub_business_category",
      "korname": "사업영역",
      "value": "1"
  },
  {
      "engname": "account_num",
      "korname": "계좌번호",
      "value": "1"
  },
  {
      "engname": "user_id",
      "korname": "User ID",
      "value": "22019"
  }
];

// console.log(Object.keys(settingState));

// function getKeyByValue(obj, value) {
//   return Object.keys(obj).find(key => obj[key] === value);
// }

// console.log(getKeyByValue(settingState, "esero_email"));

// console.log(Object.value(settingState))

// 1. 화살표 사용하지 않고 함수를 만드는 경우
function isEmail(element) {
  if(element.engname === "esero_email") {
    return true;
  }
}
const email = settingState.find(isEmail);
console.log(email);
console.log(email.value);



// 2. 화살표 함수를 사용하는 경우

const test = settingState.find(key => key.engname === "esero_email");
console.log(test);
console.log(test.value);


//화면에 바로 출력하는 경우 (위의 방법은 원활한 디버깅을 위해 console로 출력)
// document.write(settingState.find(isEmail));
// document.getElementById('root').innerHTML = settingState.find(isEmail);