배열의 내장 메소드 사용법

과제

문제

배열을 입력받아 배열에서 가장 짧은 길이를 가진 문자열 요소를 리턴하라

입력

인자 1 arr : 임의의 요소가 담긴 배열

출력

string타입을 리턴해야 합니다

주의사항

• 반복문 사용 금지
• 같은 길이의 요소가 있다면 배열의 앞쪽에 있는 요소를 리턴
• 배열에는 문자열 외에 다른 요소들이 있을 수 있다
• 빈 배열을 입력받은 경우, 빈 문자열을 리턴
• 주어진 배열에 문자열이 없는 경우, 빈 문자열을 리턴

문제가 발생한 코드

function findShortestWord(arr) {

// 빈 배열을 만들고, 입력받은 배열에서 문자열만 골라서 값을 추가한다.
// 또는 filter나 map을 이용하여 문자일 경우만 골라낸다.
const findstring = function (el) {
  if(typeof(el) === 'string'){
    return el;
  }
}
const strArr = arr.map(findstring)


// 입력받은 배열의 길이가 0일경우 빈 문자열을 리턴한다
if(arr.length === 0) {
  return '';
}

return strArr.reduce(function (acc, cur){
  if(acc.length <= cur.length) {
    return acc;
  } else {
    return cur;
  }
})

}

무엇이 잘못되었는가

1. 중간에 map을 사용하여 문자열만 존재하는 배열을 만들려고 했는데, 계속 오류가 나길래 디버거를 돌려보았더니 string이 아닌 요소는 무시하고 넘어가는 것이 아니라 undefined가 되어 리턴되고 있었다.

2. arr.length === 0을 조건으로 하다 보니 빈 배열만 걸러내고 찾는 문자열이 없는 배열은 배열 그대로를 리턴하고 있었다.

해결한 코드

function findShortestWord(arr) {

// 입력받은 인자의 type이 문자열일 경우 filter 메소드에 의해 strArr 변수에 할당된 배열의 뒷쪽에 새로운 요소로 추가된다.
  let strArr = arr.filter(function (el) {
    return typeof(el) === 'string';
  });


// filter된 배열의 길이가 0일경우 빈 문자열을 리턴한다
if(strArr.length === 0) {
  return '';
}

// filter된 배열을 reduce로 검사하여 리턴한다.
// reduce는 초기값이 없으면 배열의 첫번째 요소를 acc로, 그 다음 요소를 cur로 실행한다.
// 배열의 요소를 검사하여 길이가 짧은 요소는 acc로 전환되고, 다음 요소를 계속 cur로 검사한다
// acc보다 짧은 요소가 cur로 등장하지 않을 경우 acc가 유지되고, 최종 리턴된다.
return strArr.reduce(function (acc, cur){
  if(acc.length <= cur.length) {
    return acc;
  } else {
    return cur;
  }
})

}