[JS] 중간 시험

오늘도 반성하며 코드 한 글자 한 글자씩 리뷰를 해보겠다.

오늘은 2주간의 Pre-course가 끝나고 중간 시험을 보는 날이었다.
1시간동안 총 5가지 문제를 풀어야했다.

Q1. 짝수인지 판별하는 함수 isEven을 작성해 주세요.

console.log(isEven(11)) // --> "짝수가 아닙니다."
console.log(isEven(10)) // --> "짝수 입니다."

작성한 코드

function isEven(num) {
  // 아래 코드를 입력해주세요.
  if(num % 2 === 0){
    return "짝수 입니다."
  } else {
    return "짝수가 아닙니다."
  }
}
console.log(isEven(11))

여기서도 쉽게 풀 수 있을 줄 알았지만 오산이었다.
그냥 (num % 2) 만 적어놓고 테스트 통과되기를 원했다.
구글링을 하다가 짝수 비교는 num % 2 === 0 이라는 것을 알아냈다.
2를 나눠서 짝수인 0과 같을 때 "짝수 입니다." 라는 코드가 나오게 끔 하는 코드였다.

Q2. calculateTotal 함수를 작성하세요.

팁과 세금을 제외한 식사값이 주어졌을때, calculateTotal 함수는 팁과 세금이 포함된 총 식사값을 반환합니다.

Notes:

• 세금은 9.5% 팁은 15% 로 계산하세요.
• 팁을 계산할때 세금을 포함하여 계산하지 마세요.

console.log(calculateTotal(20)); // --> 24.9

작성한 코드

function calculateTotal(amount) {
  // 아래 코드를 작성해주세요.
  const tax = amount * 0.095
  const tip = amount * 0.15
  const total = tax + tip + amount
  return total
}
console.log(calculateTotal(20));

세금값을 구하는 변수 / 팁을 구해주는 변수 / 그리고 세금 + 팁 + 가격을 모두 더한 변수를 지정해주면 된다. 여기서 퍼센트를 구하는 것을 먼저 알아야했다. x%라고 하면 퍼센트 기호(%)는 앞의 수 x가 100으로 나뉘었음을 의미한다. 예를 들어 45%는 0.45를 나타낸다. 0.45라는 수가 45를 100으로 나눈 것이므로 45에 %를 붙이면 곧 45/100이 되는것이다. 그냥 계산기에 9.5 나누기 100 하면 된다.
팁과 세금을 제외한 식사값이 주어졌을 때 (calculateTotal(20)) 일 때, calculateTotal 함수는 팁과 세금이 포함된 총 식사값을 반환합니다.

Q3. getPrefix 함수를 작성하세요.

문자열이 주어졌을때, -를 기준으로 앞에 있는 문자열을 반환하세요.

console.log(getPrefix('BTC-KRW')) // --> BTC

작성한 코드

function getPrefix(str) {
  // 아래 코드를 작성하세요.
const getStr = str.split('-');
return getStr[0];
}
console.log(getPrefix('BTC-KRW'))

split() 으로 구현을 하였다. split의 정의는 이러하다.
split 함수는 입력받은 정규표현식 또는 특정 문자를 기준으로 문자열을 나누어 배열(Array)에 저장하여 return합니다. split('-')는 -를 지우라는 뜻이다. return str.split('-')은 -를 기준으로 문자열을 배열로 나눈다는 뜻이다. 그래서 [BTC , KRW] 이렇게 나누게 되고, return getStr[0];을 해서 그 배열중에 0번째 인덱스를 반환하라는 뜻이다. 그래서 BTC가 나오게 된다.

Q4. getFind 함수를 작성하세요.

문자와 문자열이 주어졌을때, getFind 함수는 주어진 문자열에서 주어진 문자가 나타나는 첫번째 위치를 반환합니다.

Notes:
문자열의 첫번째 문자는 인덱스 값 0 을 가집니다.
만약 문자열에 해당 문자가 여러번 나타나면, 첫번째로 나타나는 위치를 반환해야 합니다.
만약 문자가 문자열에 존재하지 않는다면, -1 을 반환해야 합니다.

*중요!!
indexOf 함수를 사용하지 마세요.

const output = getFind('a', 'I am a hacker')
console.log(output) // --> 2

작성한 코드

function getFind(filter, sentence) { 
  // 아래 코드를 작성해주세요.
  for(let i = 0; i < sentence.length; i++) {
    if (filter === sentence[i]){
      return i;
    }
  } return -1;
}
const output = getFind('a', 'I am a hacker')
console.log(output) // --> 2

이걸 웹스톰으로 돌려본 결과 'a'는 'filter'였고, 'I am a hacker'는 'sentence'였다.
for문을 이용해, sentence 안에 들어갈 문장의 끝까지 반복이 될 수 있도록 지정해줍니다.
그리고 내가 찾을 단어가 문장안에 있다면 그 문장의 순서를 반환. 문자열에 있는 문자들을 하나씩 대조를 해봐야 할 것이고, 그러면 for문을 통해 문자를 찾아내면 된다는 생각을 구글링으로 찾아냈다.
인덱스는 0부터 시작하고, 길이는 1부터 시작하니까 sentence.length 까지 돌게하면 문장의 길이에 상관없이 문장의 끝까지 반복문은 돌것입니다.
그리고 filter === sentence[i]로 내가 찾고자 하는 단어가 찾아지면 어차피 if문은 처음 찾아진 그 시점에서 멈출 것이기 때문에, 알아서 첫번째로 나타난 시점이 전환될 수 밖에 없다.
filter 는 'a'이기때문에 sentence[i]에서 'a'를 찾아낼 것이다. 그러면 output은 'I am a hacker'에서 a의 인덱스인 2를 반환을 한다.

Q5. find_longest_word 함수를 만들어 주세요.

주어진 리스트안에 있는 단어중 가장 긴 단어를 찾을수 있도록 함수를 완성해주세요.

console.log(find_longest_word(["PHP", "Exercises", "Backend"])) 
// --> "Exercises"

function find_longest_word(arr) {
  // 아래 코드를 구현해주세요.
  const wordLength = arr.map(x => x.length);
  const maxWord = Math.max(...wordLength);
  const longestWord = wordLength.indexOf(maxWord);
  return arr[longestWord];
}
console.log(find_longest_word(["PHP", "Exercises", "Backend"]))

도대체 어떻게 풀어야하는 문제인지 힘들었던 문제. replit으로 풀었었던 곰팡이 문제도 이해를 못했는데
가장 긴 단어를 뽑게 하라니 정말 힘든 문제였다.
let arrLength = arr.map(x => x.length);
map메소드란? 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.
["PHP", "Exercises", "Backend"].map(x => x.length); 콘솔로 확인해보면, [ 3, 9, 7 ] 이라는 결과가 나온다. map 메소드를 통하여 배열 안에 있는 문자들의 길이를 새로운 배열로 반환되었음을 알 수 있다.
let maxLength = Math.max(...arrLength);
Math.max 함수는 이름에서 알 수 있듯이 가장 큰 숫자를 반환해준다. Math.max(...[ 3, 9, 7 ]); 결과는 당연히 9.
let longestWord = arrLength.indexOf(maxLength);
위에서 얻어낸 새로운 배열 안에서 가장 큰 숫자를 찾아내면 된다. 콘솔로 찍어보면 더 이해가 잘된다.
[3, 9, 7].indexOf(9); 결과는 1. 배열 안에서 1번째 순서에 있기 때문이다.
return arr[longestWord]; ["PHP", "Exercises", "Backend"][1];
결과는 "Exercises" 를 반환.

• 내가 해석한 코드 리뷰
  const wordLength = arr.map(x => x.length);
  wordLength 라는 함수를 가지고 map()메서드를 넣어서 일단 배열에 있는 단어들을 배열 길이로 반환하는 것을 만들고 그 다음
  const maxWord = Math.max(...wordLength);
  maxWord 라는 변수명을 만들고 거기에 Math.max 를 해준다.
  Math.max() 함수는 입력값으로 받는 0개 이상의 숫자 중 가장 큰 숫자를 반환합니다.
  이라는 것을 알아두자.
  그리고 나서 Math.max(...wordLength) 라고 써서 Math.max 를 쓰는 방식이 ‘…변수명’ 이다.
  그럼 그 중에 가장 큰 길이를 이제 반환하게 되는 것이다.
  const longestWord = wordLength.indexOf(maxWord);
  longestWord 라는 변수명을 만들어 주고 indexOf를 해주면
  indexOf : 문자열에서 특정 문자의 위치를 찾기 위해서 indexOf 함수를 사용합니다.
  일단 이렇게 알고 있고 아까 maxWord 에서 받아 온 가장 큰 숫자를 찾아내주면 된다.
  return arr[longestWord] 를 해주면 이제 indexOf 결과 1을 배열 안에서 1번째 있는 순서를 반환하게 되는 것이다. 그러니까 "Exercises" 를 반환.

깨달은 점

- 자바스크립트 코드는 위에서부터 아래로 내려온다.
- 그러므로 위에서부터 생각을 하면서 로직을 생각하고 구현해야한다.
- 문제를 잘 읽어보고 생각도 잘해야한다.
- 제발 포기하지 말자!!!!