배열의 내장 메소드 사용법

요구사항

1. 문제를 직접 풀고, 자신이 푼 코드와 레퍼런스 코드를 비교하여 line by line으로 설명하기
2. 배열의 내장 메서드를 사용할것(filter, map, reduce)
3. 메서드 작동방식을 구체적으로 설명 할 것

문제

배열을 입력받아 배열에서 가장 짧은 길이를 가진 문자열 요소를 리턴해야 합니다.

나의 답

function findShortestWord(arr) {
  const filterArr = arr.filter((element) => {
    return typeof element === 'string';
  });

  if(filterArr.length === 0) {
    return '';
  }

  return filterArr.reduce((acc, cur) => {
    if(acc.length > cur.length) {
      return cur;
    }
    return acc;
  });
}

코드 설명

// 매개변수로 입력받은 배열을 filter 메서드를 통하여 
// 데이터 타입이 문자형인 요소만을 가지는 새로운 배열 만들기

// filter메서드는 콜백함수를 받아 함수에 배열 요소를 넘겼을때
// 그 결과가 참일경우 새로운 배열에 해당 요소를 추가한다.
// 그리고 배열의 요소를 다 확인후 새로 만들어진 배열을 반환한다.

// filter메서드를 입력받은 arr에 적용하고, 콜백함수를 작성
// 필터링을 거친 새로운 배열을 filterArr에 담아준다.
const filterArr = arr.filter((element) => {
  // 배열의 요소가 문자형이라면 새로운 배열에 추가
  return typeof element === 'string';
});

// 만약 필터링을 통하여 배열의길이가 0이라면 빈 문자열을 리턴한다.
if(filterArr.length === 0) {
  return '';
}

// 필터링을 통하여 반환된 배열에 reduce를 통하여 최소값을 도출한다.
// reduce의 매개변수로 콜백함수를 넘겨준다.
// 초기값은 해당 배열의 첫번째 요소를 자동으로 넣게 생략한다.
return filterArr.reduce((acc, cur) => {
  // 누적변수의 데이터 길이보다 현재요소의 길이가 작을 경우
  if(acc.length > cur.length) {
    // 현재요소를 반환해 누적값에 덮어씌운다.
    return cur;
  }
  // 누적변수의 길이가 작거나 같다면 누적변수를 그대로 다시 반환한다.
  return acc;
});

레퍼런스와 비교

function findShortestWord(arr) {
  const onlyStrings = arr.filter(function (el) {
    return typeof el === 'string';
  });

  if (onlyStrings.length === 0) {
    return '';
  }

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

1. 화살표 함수 사용유무 외에는 다른것이 없는듯 하다.