Javascript _ function & for문

연정·2021년 10월 11일
0

Javascript

목록 보기
1/4
post-thumbnail

여러개의 인자를 받는 함수 & 함수 내에서 활용되는 for문 관련,
공부하면서 헷갈렸던 문제들과 그 문제들의 풀이를 정리한다.

Question #1

meetAt 함수를 만들어주세요.

  • 인자를 세개 받습니다.
  • 첫번째 인자는 년도에 해당하는 숫자입니다.
  • 두번째 인자는 월에 해당하는 숫자입니다.
  • 세번째 인자는 일에 해당하는 숫자입니다.
  • 년도 인자만 받았을 경우
    → "1234년" 과 같은 형식의 문자열을 리턴 해주세요.
  • 년도,월 인자를 받았을 경우
    → 년도와 월을 조합해서 "1234년 5월" 과 같은 형식의 문자열을 리턴 해주세요.
  • 년도,월,일 인자를 전부 받았을 경우
    → 년도,월,일을 조합해서 "1234/5/6" 과 같은 형식의 문자열을 리턴 해주세요.

Answer of #1

=포함된 이론=
Function은 다수의 인자를 받을 수 있으며, 그 경우 아래와 같은 형태로 작성된다.

function meetAt (month, year, date) {
   //return 되어야 하는 함수 결과
}

meetAt 함수를 완성하기 위해서는 if문을 활용하여 3가지 경우를 나누어 결과값을 부여해야 한다.

  1. XXXX년으로 year 인자만 존재할 때
  2. XXXX년 XX월로 인자가 2개만 존재할 때
  3. XXXX년 XX월 XX일로 인자 3개가 모두 존재할 때

해당 문제의 해결을 위하여 최초 작성한 코드는 다음과 같다.

function meetAt(year, month, date) {
  if (year) {
    return year + "년";
  } else if (month) {
    return year + "년 " + month + "월";
  } else {
    return year + "/" + month + "/" + date;
  }
}

(if문 내에 조건문이 아니라 인자가 들어가게 되면, 해당 인자가 존재한다면.. 정도의 의미로 해석되어 if문이 작동하게 된다.)

문제에 제시된 순서 (year > month > date) 그대로 코드를 작성하니 3가지 모든 경우에서 year + "년"의 형태로 결과가 나오는 것을 확인 할 수 있었다. 컴퓨터는 위에서 아래로 / 좌에서 우로 이동하며 코드를 읽어나간다는 점을 간과했기 때문에 오류 발생! 3가지 경우의 수 모두에서 year 인자는 포함되기 때문에 첫번째 if문에서 값을 return하고 function이 종료된 것으로 판단되었다.

발견한 내용을 반영하고 수정한 코드.

function meetAt(year, month, date) {
  if (date) {
    return year + "/" + month + "/" + date;
  } else if (month) {
    return year + "년 " + month + "월";
  } else {
    return year + "년";
  }
}

가장 적게 포함되어 있는 date부터 month, year의 순으로 검사하도록 하니 원하는 결과를 얻을 수 있었다.

컴퓨터의 리딩 방식 (위에서 아래 & 좌에서 우)을 잊지말고 코드 작성하기!


Question #2-1

findSmallestElement 함수를 구현해 주세요.

  • findSmallestElement 의 arr 인자는 숫자 값으로만 이루어진 배열입니다.
  • arr 의 값들 중 가장 작은 값을 리턴 해주세요.
  • 만일 arr 가 비어있으면 0을 리턴 해주세요.

Answer of #2-1

=포함된 이론=
for문은 코드를 원하는만큼 반복하고 싶을 때 사용한다.
예를 들어, 배열 내에 포함되어 있는 요소 각각이 특정 조건에 맞는지 확인하기 위해서는 for문을 사용해야 한다.

for (let i = 0; i < arr.length; i++) {
   //반복조건이 맞으면 실행할 결과
}

for문에서는 반복조건 (let i = 0과 같은 시작값 / i < arr.length와 같은 종료값 / 증감값)에 따라 코드를 반복하게 된다.

아래는 문제의 답으로 처음에 작성했던 코드.

function findSmallestElement(arr) {
  if (arr.length > 0) {
    let min = arr[0];
    for (let i = 0; i < arr.length; i++){
      if (arr[i] < min){
        min = arr[i];
      } return min;
    }
  } else {
    return 0;
  }
}

arr가 비어있으면 0을 리턴해야 하므로 if문을 활용하여 arr에 요소가 있을 때와 없을 때를 구분하여 작성하였다. 또한 min = arr[0]으로 임시 min값을 선언하여 for문을 통해 도출된 진짜 최소값을 min 내에 재선언할 수 있도록 하였다.

큰 문제 없이 코드 작성이 완료되었음에도 불구하고, 몇몇 상황에서 원하는 값이 도출되지 않는 문제가 발생! 작성한 코드를 찬찬히 살펴본 결과, 최종 min값을 도출하는 과정에서 for문이 종료되기 이전에 min값을 리턴하여 문제가 생기는 것으로 판단되어 아래와 같이 코드를 수정하였다.

발견한 내용을 반영하고 수정한 코드.

function findSmallestElement(arr) {
  if (arr.length > 0) {
    let min = arr[0];
    for (let i = 0; i < arr.length; i++){
      if (arr[i] < min){
        min = arr[i];
      }
    } return min;
  } else {
    return 0;
  }
}

Question #2-2

Question 2-1과 비슷한 오류를 경험한 예시 1가지를 함께 소개한다.

배열에서 남성을 찾아 그 이름을 반환하는 함수를 만들어주세요.

  • 함수는 인자로 객체가 요소인 배열을 받습니다.
  • 배열의 요소는 각 사람에 대한 객체이며 아래는 배열의 예시입니다.
    배열 예시 :
    [ { name: 'tom', age: 10, gender: 'male' },
    { name: 'sera', age: 30, gender: 'female' } ]
  • 배열에는 남성이 없거나 오직 한 명만 있습니다.
  • 배열에 남성이 없다면 false를 반환해주세요.

Answer of #2-2

아래는 문제의 답으로 처음에 작성했던 코드.

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

위의 코드로 작성 시, 남성이 있는 배열의 요소임에도 불구하고 이름이 아니라 false가 값으로 도출되는 문제가 발생하였다.

문제라고 판단된 부분은 if문의 else 부분인데, for문 내에 if else를 통해 2가지 조건을 생성하면서 return 값에 오류가 생기는게 아닐까라는 생각이 들었다. else를 활용하지 않고 작성한 for문이 종료된 뒤, arr[i].gender === 'male'의 return 값이 발견되지 않은 경우에 한하여 false를 return 하도록 수정하면 코드가 올바르게 작동할 것 같았다.

발견한 내용을 반영하고 수정한 코드.

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

결과값을 어느 타이밍에 return할 것인지 잘 생각해서 코드 작성 필요!

profile
성장형 프론트엔드 개발자

0개의 댓글