TIL 12 l Javascript Test

Soojeong Lee·2021년 6월 18일
0

javascript

목록 보기
3/3
post-thumbnail

2주간의 Pre-course 과정을 마치고 Test를 한 뒤, 배우고 느낀 점들에 대하여 기록하는 글!

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

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

나의 코드

function isEven(num) {
    if ((num%2) === 1) {
    return `짝수가 아닙니다.`;
  } else {
    return `짝수 입니다.`;
  }
}

✔️ 첫번째 문제는 조건에 따른 값을 출력하는 문제였다. 여기서 나는 num%2라는 조건이 먼저 계산될 수 있도록 괄호로 묶어주었다.

✔️ 또한 백틱 기호로 출력하는 것이 추후에 String과 함께 값이 출력되야 하는 상황이 자주 발생할 것 같아 익숙해지기 위해서 사용하였다.

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

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

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

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

나의 코드

function calculateTotal(amount) {
  return amount + calculateTip(amount) + calculateTax(amount);
}

function calculateTip(amount) {
  return amount*0.15;
}

function calculateTax(amount) {
  return amount*0.095;
}

✔️ 세금, 팁을 계산하는 기능을 담은 함수를 각각 선언하였다. 그리고 이 기능들을 합하여 결과를 도출할 수 있는 calculateTotal 함수에서 세금, 팁을 계산하는 기능의 함수를 return 값으로 출력하였다.

✔️ 기능에 따라 함수를 구현하는 것이 개인적으로 유지,보수에 유용할 것 같아서 적용 시켜 보았다.

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

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

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

최초 나의 코드

function getPrefix(str) {
  let dash = str.indexOf("-");
  threeLetter = str.slice(0, dash);
}

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

✔️ indexOf

indexOf() 메서드는 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환. 출처

✔️Array.prototype.slice(잘릴 시작위치, 잘릴 끝위치)

slice() 메서드는 어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환 출처
📍 즉, ()안의 잘릴 끝위치가 조금 헷갈리는데, 잘릴 끝위치의 문구는 포함하지 않는다.

✔️ 위의 두가지 개념을 바탕으로 함수를 선언해 보았다. 접근 방법은 먼저 -를 찾아 이를 기준으로 문자열을 자른 후, 원하는 위치까지 출력하는 방법을 사용했다.

😢 답을 구해내기까지 꽤 오랜 시간이 걸렸는데 그 이유는 출력 원하는 값을 let threeLetter = str.slice(0, dash); 처럼 변수화해서 출력도 하지 않았고 출력을 원하고자 했다면 앞에 return을 붙여 주었어야 했는데, 아무 처리도 하지 않으니 함수가 구현되지 않았던 것이다. 함수의 로직을 명확하게 이해해야 원하는 결과를 얻을 수 있다는 것 명심하기 !

최종 코드

function getPrefix(str) {
  let dash = str.indexOf("-");
  return str.slice(0, dash);
}

소미님 코드 : 코드 쉐어, 리뷰

function getPrefix(str) {
  // 아래 코드를 작성하세요.
  const string = str.split("-");
  return string[0]
}

✔️ String.prototype.split()

split() 메서드는 String 객체를 지정한 구분자를 이용하여 여러 개의 문자열로 나눕니다.

✔️ 나는 slice를 통하여 구현하였지만, 소미님은 Split을 이용하여 첫번째 배열의 값으로 함수를 정의하였다.

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

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

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

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

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

나의 코드

function getFind(filter, sentence) { 
  let stringtoArray = sentence.split('');
  
  for (i=0; i<stringtoArray.length; i++) {
    if( stringtoArray[i] === filter) {
      return i
    }
  }
  
  if (stringtoArray[i] !== filter) {
    return -1
  }
}

✔️ 1) 배열을 공백 단위로 나누고 2) 해당 배열의 값과 filter를 매개변수로 받는 인자의 값이 동일한지 3)index를 반복하면서 확인해야했다. 따라서 split과 for문을 사용해서 문제를 해결하기로 방법을 정했다.

✔️ 먼저 split으로 문장을 배열의 index로 잘게 자른 후, 해당하는 값이 filter에 입력하는 값과 동일하면 i(즉, 배열의 인덱스 번호)를, 그렇지 않으면 -1을 출력하는 로직이다.

😢 로직은 쉽게 생성했지만 역시나 return 값을 출력하는데 문제가 있었다. 나는 stringtoArray[i]를 출력해서 이 값의 index 번호를 찾으려고 꼬아서 생각하고 있었던 것이다...! 그냥 i자체가 index 번호인 것을...내가 모르는 method를 찾으려다가 점점 멘붕의 길로... 빠져들었다.

지수님 코드

function getFind(filter, sentence) { 
 if (sentence.includes(filter)) {
   for(let i =0; i < sentence.length; i++) {
     if (sentence[i] === filter) return i;
    }
  } else reutrn -1;
}

✔️ includes 메서드를 이용하여 결과를 도출하였다. 즉 sentence의 index 값과 filter로 받은 인자의 값이 같으면 출력될 수 있는 로직을 구현하셨다.

✔️Array.prototype.includes()

includes() 메서드는 배열이 특정 요소를 포함하고 있는지 판별하는 메서드이다. 출처

소미님 코드

function getFind(filter, sentence) { 
  return result = sentence.search(filter);
}

✔️ String.prototype.search()

search() 메서드는 정규 표현식과 이 String 객체간에 같은 것을 찾기 위한 검색을 실행하는 것이다.

✔️ String의 search 메서드를 이용하여 결과를 도출하였다. 정말 심플해서 놀랬던 코드이다.인자를 굳이 배열로 바꾸지 않고 출력할 수 있다. 출처

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

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

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

나의 코드

function find_longest_word(arr) {
  let indexMin = arr[0];
  
  for (i=0; i<arr.length; i++) {
    if(indexMin.length < arr[i].length) {
      return arr[i];
    } 
  }
}

✔️ 이 문제를 해결하기 위해서 1)기준이 되는 배열을 정해서 2) index 길이를 찾고 각 배열마다 비교하기로 로직을 짰다.

소미님 코드

function find_longest_word(arr) {
  let maxLength = arr[0].length
  for (let i in arr){
    if (arr[i].length>maxLength){
      maxLength = arr[i].maxLength;
      return arr[i];
    }
  }
}

✔️ 소미님은 index.length 까지 포함한 값을 변수로 선언해준 것이 나와는 다른 코드였다.

📍 2021.0619. 추가) 역시 개발자 문화 최고인 것... !

5번을 RunJs를 돌리지 않고 과제로 제출했었는데 내 코드와 소미님 코드가 작동하지 않았던 것을 지수님이 발견해주셨다...! 로직상 문제가 없어서 통과가 되었지만 함수가 실제로 실행되지 않는 상황이었다.

그래서 다시 리뷰하였다.

✏️ 새로 리뷰한 나의 코드

function find_longest_word(arr) {
  let indexMin = arr[0];
  
  for (i=0; i<arr.length; i++) {
    if(indexMin.length < arr[i].length) {
      indexMin = arr[i];
    } 
  }
  return indexMin;
}

문제점
1) if의 코드 블럭{} 안에서 arr[i]로 출력해버린 것
➡️ arr[i]로 출력하면 뒤에 있는 배열까지 i가 돌지 못하고 기준인 arr[0]보다 배열의 길이가 크기만 하면 출력되어 버리는 것이었다.

2) return의 위치.
➡️ 그래서 그 결과를 if문의 코드 블럭{}안에 두니 더더욱 다음 루프를 돌지 않고 값이 출력된 것이었다.

해결 방법
1) i가 배열 끝까지 돌 수 있도록 indexMin = arr[i]를 코드 블럭안에 적어주었다. 이렇게 하면 indexMin 값이 for문의 조건에 따라 배열을 순회할 수 있게 된다.
2) 그 결과를 바로 if문 안에서 return 하면 함수가 종료되기 때문에 for 문의 밖에서 return 되도록 변경하였다.

✏️ 새로 리뷰한 소미님의 코드

function find_longest_word(arr) {
  let num = arr[0];

  for (let i in arr){
    if (arr[i].length > num.length){
      num = arr[i];
    }
  }
  
  return num;
}

나의 로직과 전반적으로 비슷하게 진행해주셨고, 다만 이전에 let maxLength = arr[0].length로 변수 선언하셨던 부분을 let num = arr[0];으로 변경하셔서 코드를 작성해주셨다. 출력을 원했던 답은 길이가 아닌 값이었기 때문이다 :)

✨ 앞으로 과제를 할 때 동기분들의 코드를 공유해서 보다 효율적이거나 직관적인 코드를 만들어 가고싶다고 생각이 들어서 용기를 내어 소미님과 지수님께 코드 쉐어 후 리뷰를 요청드렸는데 너무 유익했다.:) 하나의 문제를 가지고 여러 풀이법이 있고 또 그걸 공유하는 문화가 너무 좋다...!

profile
🍼 newbie frontend developer

0개의 댓글