TIL09 | JavaScript Wecode [Pre-course] 중간 시험

Wecode [Pre-course] 중간 시험

wecode에서 첫번째 테스트 🎉️

총 8문제의 자바스크립트 문제를 풀었는데 제출한 답안 중에 마음에 안드는 답안인 8번 문제를 여러 방면으로 풀어봤다 😀️

그럼 풀이 스타트 -!

 

문제 08번 | findMaleName

배열에서 남성을 찾아 그 이름을 반환하는 함수를 만들어주세요.
함수는 인자로 객체가 요소인 배열을 받습니다.

배열의 요소는 각 사람에 대한 객체이며 아래는 배열의 예시입니다.

배열 예시 : [
{ name: 'tom', age: 10, gender: 'male' },
{ name: 'sera', age: 30, gender: 'female' },
]

함수의 반환값 : 'tom'

배열에는 남성이 없거나 오직 한 명만 있습니다.
배열에 남성이 없다면 false를 반환해주세요.

 

풀이 1. filter()

function findMaleName(array) {
  const person = array.filter(x => x.gender === 'male');
  if(person.length <= 0 || person == null){
     return false;
  }
  return person[0].name;
}

• '남성' 인 경우 person 배열로 반환
• person 배열 길이가 0보다 작거나 null 인 경우 return (Early Return)

 

풀이 2. for문

function findMaleName(array) {
  for(let i = 0; i < array.length; i++){
    if(array[i].gender === 'male') return array[i].name;
  }
  return false;
}

 

풀이 3. 옵셔널 체이닝 & null 병합 연산자

옵셔널 체이닝 & null 병합 연산자 문법은 ES2020에 추가된 문법입니다.

function findMaleName(array) {
  const person = array.filter((x) => x.gender === 'male');
  return person[0]?.name ?? false;
}

 

?. 옵셔널 체이닝 연산자(Optional chaining operator)

. 체이닝 연산자와 유사하게 동작하지만, 만약 참조 값이 nullish(null 또는 undefined)한 경우에 에러를 발생하지 않고 undefiend를 반환한다.

const person = {
  name: 'tom', 
  age: 10, 
  gender: 'male'
};

const hobby = person?.hobby; // 참조가 유효하지 않으면 undefined 반환
console.log(hobby); // undefined

위의 문제에서 '남성'이 없는 경우 filter() 의 반환 값이 빈 배열로 반환되어 person은 빈 배열이 된다.

이 경우에는 person[0]에서 name을 호출하는 참조가 유효하지 않으므로 undefined 반환한다.

만약 '남성'이 있다면 person이 빈 배열이 아니므로 person[0]?.name 값을 반환하게 된다.

 

?? null 병합 연산자(Nullish coalescing operator)

왼쪽 피연산자가 null 또는 undefined 일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리연산자

const foo = null ?? 'default string';
console.log(foo); // default string

const baz = 0 ?? 42;
console.log(baz); // 0

따라서 위의 문제에서 '남성'이 없는 경우 false를 반환하고, '남성'이 있는 경우에는 person[0]?.name 의 값을 반환한다.

 

정리

filter() 에서 콜백함수 호출해서 구현하고 싶었는데 그렇게 푼다면 시간여유가 없을 것 같아서 우선 첫번째 풀이로 답안을 제출했다.

시험 종료 후에 여러 방면으로 문제를 풀어보니깐 점점 문법이 기억나는 듯하다 😂️

좀 더 클린한 코드와 좋은 구현을 위해 딥다이브 책을 다시 펼쳐봐야겠다 💦️💦️💦️

 

참고사이트

MDN - Optional chaining operator

MDN - Nullish coalescing operator