💯 TIL) JavaScript 어려웠던 Repl.it 문제 정리 (1)

WeCode 1주차 Repl.it 과제로 나온 문제 중 어렵거나 새로 배운 내용에 대해 다시 한번 정리해보기로 한다!

---

🚥 Function(함수) - 여러 인자 Assignment

JavaScript의 함수는 여러 개의 매개변수를 지정할 수 있다.
마찬가지로, 인자도 여러 개 받을 수 있다.

Q. 년, 월, 일에 해당하는 세 개의 인자를 받는 함수를 만들고, 들어오는 인자에 따라 다른 값을 return 하는 문제

처음 풀이

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

console.log(meetAt(2020)); // 2020년
console.log(meetAt(2020, 5)); // 2020년
console.log(meetAt(2020, 5, 26)); // 2020년

맨 처음 작성한 코드! 얼핏 봤을땐 문제 없어 보였는데, console.log 로 출력해보니 3개 모두 "2020년" 만 출력된다.

왜?

2번째 경우에는 (year) 인자만 있는 경우나, (year, month) 2개의 인자가 있는 경우, 마찬가지로 3개의 인자가 있는 경우 모두 첫번째 if (year) { 대충 나머지 함수 } 조건을 만족시켜 버리기 때문에 다음 else if 로 넘어가지 않고 처음 함수의 return 값인 ${year}년 만 출력되는 것!

다시 짚어보는 return의 속성!!!

return 키워드 바로 다음에 오는 값이 함수 호출의 결과값으로 반환되며, 반환되는 즉시 함수 실행이 끝난다.

그래서 처음 return 값인 ${year}년 이 반환되고 함수가 바로 종료되기 때문에 나머지 함수가 실행되지 않았던 것!

나의 해결 방법

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

console.log(meetAt(2020)); // 2020년
console.log(meetAt(2020, 5)); // 2020년 5월
console.log(meetAt(2020, 5, 26)); // 2020/5/26

⇒ 인자가 3개인 경우를 만족시킬때부터...
즉, 상위 if의 조건을 더 까다롭게 지정하여 해당 조건을 만족하지 못하는 경우 다음 조건으로 넘어갈 수 있도록 순서를 조정했다!

---

🍡 Array1

처음 풀이

function getElement() {
  let arr = [3, [4, ["array", 9], 2+3], [0]];
  return arr[1[1[0]]];
}

array 안에 array안에 array안에.....음...

[ index [ index [ index ] ] ] 이렇게 해볼까?

undefined 출력!!!🤨

나의 해결 방법

function getElement() {
  let arr = [3, [4, ["array", 9], 2+3], [0]];
  return arr[1][1][0];
}

그럼 첫번째 array index를 먼저 찾고, 그다음에 찾은 array안에서 다시 index를 찾아가는 식이니까 [i]도 순차적으로 나열해볼까?

오! 바로 정답😻!

---

🕹 배열 조작하기

처음 풀이

function divideArrayInHalf(array) {
  let result = [];
  for (i = array.length-1; i >= 0; i--) {
    if (array[i] <= 10) {
      result.unshift(array[i]);
    } else {
      result.push(array[i]);
    }
    return result;
  }
}

const array1 = [1, 20, 10, 5, 100];
divideArrayInHalf(array1); // [100]

⇒ 배열의 맨 뒤 요소부터 맨 앞 요소까지 역순으로 진행되어야 하기 때문에 i 값으로 array.length-1 을 지정했고, i-- 로 마지막 부터 역순으로 체크하도록 for문을 작성했다.

그리고 array[i]의 값을 비교해서 그 결과값을 10을 기준으로 unshift와 push로 나누었다.

그런데 결과는...ㅠㅠ [100] 만 나옴ㅠㅠ

왜?

음... 배열 맨 뒤 값인 100 체크는 잘 된것 같은데...

[100]만 반환되고 함수가 끝난다는건 for 문을 1번 돌고 return 을 만나서 종료된건가?

function divideArrayInHalf(array) {
  let result = [];
  for (i = array.length-1; i >= 0; i--) {
    if (array[i] <= 10) {
      result.unshift(array[i]);
    } else {
      result.push(array[i]);
    }
    console.log(result); // [100]
    return result;
  }
  console.log(result); // [100]
}

const array1 = [1, 20, 10, 5, 100];
divideArrayInHalf(array1); // [100]

console.log 로 확인해보니 내 생각이 맞는듯?

나의 해결 방법

function divideArrayInHalf(array) {
  let result = [];
  for (i = array.length - 1; i >= 0; i--) {
    if (array[i] <= 10) {
      result.unshift(array[i]);
    } else {
      result.push(array[i]);
    }
  }
  return result;
}

const array1 = [1, 20, 10, 5, 100];
divideArrayInHalf(array1); // [100]

return 의 위치를 for문 밖으로 빼줬다!

결과는 대성공😆
(30분동안 끙끙댔는데 쬐끔 허무....)

---

😳 for 문

처음 풀이

const arr = [20, 200, 23, 1, 3, 9];
let minNumber = arr[0];

function findSmallestElement(arr) {
  if (arr.length < 1) {
    return 0;
  } else {
    for (i = 0; i < arr.length; i++) {
      if (minNumber > arr[i]) {
        minNumber = arr[i];
        return minNumber; // return을 깜빡 했땅....
      }
    }
  }
}

findSmallestElement(arr); // 1

최소값을 나타내는 minNumber 변수를 미리 정의했다!

그리고 함수 선언! 우선 arr가 빈 배열 일 경우, 즉 arr의 길이가 1보다 작은 경우는 0을 빨리 리턴해버리기!

그 다음에 for if 문으로 minNumber(현재 arr의 첫번째 요소로 선언되있음)과 arr 배열 안의 요소들을 각각 비교하다가 minNumber 보다 작은 요소를 발견하면 minNumber = arr[i]; 로 변수를 수정한다.
(블로그를 많이 참고했음! 최대값 찾거나 다른 경우에도 유용하게 이용할 수 있을 것 같당!!!)

처음에 return 을 깜빡해서 한 10분 끙끙댔는데.... 차분하게 다시 보니 return 이 빠져 있었다. 자나깨나 return 조심🙈🙈🙈🙈🙈

<참고한 블로그 : https://webisfree.com/2018-01-23/자바스크립트-배열값-중에서-최대값-최소값-찾는-방법>

⇒ 그리고 submit 을 클릭했는데..!!!

왜?

음... 변수 선언 위치의 문제인것 같다. (내가 제일 약한 부분)

submit 했을때의 오류 문구를 보면.... 대충 특정 경우에서 값이 안나온다고 한다.

이 함수는 궁극적으로 minNumber 에 저장된 값을 return 하는 함수인데 생각해보니mimNumber 에 arr1[0]; 이라고 값을 지정해 버렸다...

minNumber 는 인자로 들어오는 arr에 따라 계속 값이 바뀌어야 하니, 함수 안에서 선언하면 해결되지 않을까?

한번 해보자!!

나의 해결 방법

const arr1 = [20, 200, 23, 3];

function findSmallestElement(arr) {
  if (arr.length === 0) {
    return 0;
  } else {
    let minNumber = arr[0]; // minNumber 변수를 함수 안에서 선언
    for (i = 0; i < arr.length; i++) {
      if (minNumber > arr[i]) {
        minNumber = arr[i];
      } else {
        continue;
      }
    }
    return minNumber;
  }
}

findSmallestElement(arr1);

성공!!!!🤓

---

📚 String

처음 풀이

function sliceCityFromAddress(address) {
  let cityIndex = address.indexOf("시");
  
  if(cityIndex > -1) {
	  address = address.slice(0, cityIndex-2) + address.slice(cityIndex+2, cityIndex.length);
    return address;
  }
}

let addres1 = "경기도 성남시 분당구 중앙공원로 53";
sliceCityFromAddress(addres1); // 경기도 분당구 중앙공원로 53

⇒ 이렇게 풀었더니 해당 예제는 잘 나온다!

그런데..... 예상외의 복병ㅠㅠ 서울특별시....

왜?

"시"를 기준으로 cityIndex-2 cityIndex+2 로 코드를 짰기 때문에...

"도" 도 하나, "시"도 하나니까, "도"와 "시"를 각각 indexOf로 위치값을 알아내서 slice로 "도"~"시" 사이를 제외한 나머지만 반환하면 되지 않을까??

오오오 완전 될거같아!!! 시도해보자!!! 🤣🤣🤣🤣

1차 시도 = 실패

function sliceCityFromAddress(address) {
  let cityIndex = address.indexOf("시");
  let doIndex = address.indexOf("도");
  
  if(cityIndex > -1) {
    address = address.slice(0, doIndex+2) + address.slice(cityIndex+2, address.length);
    return address;
  }
}

let addres1 = "서울특별시 강남구 테헤란로 427 위워크타워";
sliceCityFromAddress(addres1); // 서강남구 테헤란로 427 위워크타워

ㅠㅠ.......... 서울특별시, 부산광역시 처럼 "도"가 없는 주소의 경우에는, 이렇게 시의 글자가 잘려서 보인다ㅠㅠ

"도"가 없기 때문에 slice 시작 기준점이 없는 것....

흠..... 흐음.... "도" 문자가 없을 경우도 경우의 수로 이용할 수 있을 것 같다.

"도"가 없을 때 = indexOf가 -1 일때 ⇒ ㅇㅇㅇㅇ시 를 말한다고 볼 수 있지 않을까?
<신에게는 아직 힘이 남아 있습니다....!>

나의 해결 방법

function sliceCityFromAddress(address) {
  let cityIndex = address.indexOf("시");
  let doIndex = address.indexOf("도");
  
  if(doIndex === -1) { // "도"가 없을 때, 즉 특별시나 광역시일 때
    address = address.slice(cityIndex+2, address.length);
    return address;
  } else { // ㅇㅇ도 ㅇㅇ시 형식일 때
    address = address.slice(0, doIndex+2) + address.slice(cityIndex+2, address.length);
    return address;
  }
}

let addres1 = "서울특별시 강남구 테헤란로 427 위워크타워";
sliceCityFromAddress(addres1); // 강남구 테헤란로 427 위워크타워

으아아악 성공~!!!!!!!!!!!!🤣

값은 잘 나왔지만 보완해야 할 점

function sliceCityFromAddress(address) {
  let cityIndex = address.indexOf("시");
  let doIndex = address.indexOf("도");
  
  if(doIndex === -1) { // "도"가 없을 때, 즉 특별시나 광역시일 때
    return address.slice(cityIndex+2, address.length);
  } else { // ㅇㅇ도 ㅇㅇ시 형식일 때
    return address.slice(0, doIndex+2) + address.slice(cityIndex+2, address.length);
  }
}

let addres1 = "서울특별시 강남구 테헤란로 427 위워크타워";
sliceCityFromAddress(addres1); // 강남구 테헤란로 427 위워크타워

함수 내부에서 인자로 받은 변수에 새로운 값을 넣으면 안되는데 address = address 어쩌구 대충 긴 코드 로 값을 지정해 버리구 후에 return 했다ㅠㅠ

위의 예시처럼 바로 return 하면 되는데...바부....

---

⏰ 날짜와 시간

처음 풀이

function getWesternAge(birthday) {
  let rightNow = new Date();
  let thisYear = rightNow.getFullYear();
  let birthYear = birthday.getFullYear();
  let age = thisYear - birthYear;
  
  if(thisYear > birthYear) {
    return age -= 1;
  }
}

let birthday1 = new Date('2009-01-20T03:24:00');
getWesternAge(birthday1);

⇒ 처음에는 단순하게 생각해서... 나이 구하는 거니까 현재 년도와 생일 년도를 변수 선언 한 후에 둘을 비교하고 만 나이 니까 -1 !! 이라고 생각 했는데....

만 나이는 생일을 기준으로 나이를 계산하기 때문에 현재 월,일과 생일 월,일끼리도 비교해야 했다!

나의 해결 방법

function getWesternAge(birthday) {
  let rightNow = new Date();
  let birth = new Date(birthday);
  
  let age = rightNow.getFullYear() - birth.getFullYear();
  
  birth.setFullYear(rightNow.getFullYear()); // 생일, 현재 년도 맞추기 (날짜 비교를 위해)
  
  if(rightNow > birth) {
    return age; // 현재보다 생일이 작으면 나이!
  } else {
    return age -= 1; // 현재보다 생일이 크면 나이 -1
  }
}

birthday1 = "1990-03-21T00:45:06.562Z";
getWesternAge(birthday1);

구글 폭풍 검색...^^...

블로그에서 본 방법으로는 setFullYear 라는 메서드를 이용해서 생일과 현재 년도를 맞춘 후에 월,일을 비교하면 된다고 한다.

🤪만나이 계산하는거 진짜 헷갈린다....ㅠㅠ

제일 힘들었던 부분은 else { return age -= 1; // 생일이 지났으면 나이 -1 } 여기인데, 생일이 지났으니 나이+1 이라고 생각했지만, 나이값인 age 는 앞에서 rightNow.getFullYear() - birth.getFullYear(); 으로 이미 구했고,

같은 년도로 맞췄기 때문에, 현재 날짜가 2020년 5월 29일인데 태어난 날이 2020년 7월 29일 이라면 ⇒ 아직 생일이 안지난것! ⇒ 나이 -1

(실제 현재 날짜 : 2020/5/29 , 실제 생일 : 1981/7/29 이라고 생각하면 이해가 쉽다.)

현재 날짜가 2020년 5월 29일인데 태어난 날이 2020년 3월 29일 이라면 ⇒ 생일이 지난 것!

<참고한 블로그 : https://openwiki.kr/tech/javascript만나이계산>

model solution

function getWesternAge(birthday) {
    var today    = new Date();
    var thisYear = 0;
    
    if (today.getMonth() < birthday.getMonth())
        thisYear = 1; // 현재 월보다 생일 월이 더 크면 나이 -1
    } else if ((today.getMonth() == birthday.getMonth()) && today.getDate() < birthday.getDate()) {
        thisYear = 1; // 월이 같고 & 현재 일보다 생일 일이 더 크면 나이 -1 
    }
    
    var age = today.getFullYear() - birthday.getFullYear() - thisYear;
    
    return age;
}

setFullYear 메서드를 사용하지 않고, 월 getMonth 끼리 먼저 비교하고, 월이 같은 경우 일 getDate 을 비교했다.

age 구하는건 thisYear 라는 변수를 선언해서 값을 0을 넣고 생일이 안 지난 경우만 1을 줘서 최종 값에서 빼는 방식으로 했는데 이 방법도 좋은 것 같다!!

---

😵 Number - random number

왜?

이 문제는 아예 감도 안와서.... 몇 번 시도해보다가 구글에 검색해서 풀었다ㅠㅠ

< 참고한 블로그 : 이곳 >

Math.floor(Math.random() * (max - min + 1)) + min;

⇒ 최소값에서 최대값 사이의 랜덤 정수를 구하는 식 (최소값, 최대값 모두 포함)

---

Math.floor(Math.random() * (max - min) ) + min;

⇒ 최소값에서 최대값 사이의 랜덤 정수를 구하는 식 (최소값만 포함, 최대값 미만)

---

Math.floor(Math.random() * 10) + 1; // 1 에서 10까지의 정수를 랜덤으로 반환
Math.floor(Math.random() * 100) + 1; // 1 에서 100까지의 정수를 랜덤으로 반환

Math.floor(Math.random() * 10); //  0 에서 9까지의 정수를 랜덤으로 반환
Math.floor(Math.random() * 11); //  0 에서 10까지의 정수를 랜덤으로 반환

그냥 필요할때마다 검색해서 쓰는걸로.......😓

---