[자바스크립트] 화살표함수 () {} 주의할점

안녕하세요. 궁금증연구소 입니다.

오늘 포스팅 주제는 "[자바스크립트] 화살표함수 () {} 주의할점" 입니다.

 

const nameInput = document.querySelector('#user-name');
const phoneInput = document.querySelector('#phone-number');
const findBtn = document.querySelector('#find');

const data = [
  { userName: '막대기', phoneNumber: '01012341111', email: 'stick@go_do_it.kr' },
  { userName: 'young', phoneNumber: '01012342222', email: 'kang@go_do_it.kr' },
  { userName: '코린이', phoneNumber: '01012343333', email: 'corin2@go_do_it.kr' },
  { userName: 'captain', phoneNumber: '01012344444', email: 'crew@go_do_it.kr' },
  { userName: 'YH', phoneNumber: '01012345555', email: 'whyH@go_do_it.kr' },
  { userName: '망고쥬스', phoneNumber: '01012346666', email: 'drinkMango@go_do_it.kr' },
  { userName: 'nemoming', phoneNumber: '01012347777', email: 'ractAngle@go_do_it.kr' },
  { userName: '강그루', phoneNumber: '01012348888', email: 'riverTree@go_do_it.kr' },
  { userName: '개룩발룩', phoneNumber: '01012349999', email: 'checkShirts@go_do_it.kr' },
  { userName: '오렌지쥬스', phoneNumber: '01012341010', email: 'delmonte@go_do_it.kr' },
];

function findEmail() {
  const nameValue = nameInput.value;
  const phoneValue = phoneInput.value;

  // 여기에 코드를 작성해 주세요.
  const user = data.find((el)=> {el.userName === nameValue && el.phoneNumber === phoneValue});
  const user = data.find((el) => nameValue === el.userName && phoneValue === el.phoneNumber);
  console.log(user);

  const message = user
    ? `${user.userName}님의 이메일은 ${user.email} 입니다.`
    : '이메일을 찾을 수 없습니다. 입력 정보를 다시 확인해 주세요.';

  alert(message);
}

findBtn.addEventListener('click', findEmail);

위 코드에서 const user 부분 위로 작성했는데 계속 user에 undefined 값이 들어갔다.

아래와 같이 작성하면 에러가 발생하지 않는다.

 

 

주의할점!!

 

화살표 함수를 사용할때, return을 생략해서 사용할거면 () 갈호를 사용해야 하고,

중갈호  { } 를 사용할거면 return 키워드를 써주어야 리턴값을 활용할 수 있다.