9월25일 첫 JS 테스트

며칠 지나지 않은 느낌인데,
벌써 위코드에서 공부한지 2 주가 다 되었다.

매일 새로운 것을 배우고 좋은 사람들과 함께 하다보니
시간이 너무 빨리 간다.

주말을 포함해 거의 매일 아침 9~10시 사이에 와서 저녁 10시 이후에 가는데,
그래도 더 이곳에 머물고 싶고 시간이 모자란 느낌이 든다.

매일 주어지는 과제를 그냥 넘기지 말고,
그 날 저녁마다 짧게라도 블로그에 정리를 해놔야 할 것 같다.

---

25일 금요일은 딱 위코드 정규수업 2주차가 마무리 되는 날이다.

그동안 Repl.it 사이트를 통해 푼 자바스크립트 문제를 기반으로, 다섯 문제를 푸는 시험을 치뤘다.

이 시험은 점수로 사람들을 구분 지으려는 것이 아니고,
스스로 자바스크립트의 어떤 부분을 잘 알고 있고 어떤 부분을 잘 알고 있지 못한지를 가늠하고자 치루는 것이라고 한다.

그래서 내가 짠 로직을 되짚어보고, 어떤 부분이 더 발전할 수 있는지 리뷰를 해 놓으려고 한다.

---

문제는 모두 자바스크립트로 함수를 구현하는 것으로 총 다섯 문제다.

문제 1)

짝수인지 판별하는 함수 is_even을 작성하는 문제다.

확실히 로직이나 알고리즘을 짜는 문제를 많이 마주하는 게 좋다는 생각이 들었다.
문제를 맞이했을 때, 이전에 풀었던 문제가 생각나면서
if 문에 division 연산자를 사용하는 게 좋다는 생각이 들었다.

내가 짠 함수는 다음과 같다.

function is_even(n) {
  if (n % 2 === 0) {
    return "짝수 입니다"
  } else {
    return "짝수가 아닙니다"
  }
}

console.log(is_even(11));

물론 어떤 문제를 활용하는 데 쓰이는 함수이냐가
이 로직이 좋다, 좋지 않다를 판별할 수 있는 키겠지만,
단순히 짝수인지 아닌지를 판별하는 함수로서는
깔끔하고 단순하게 잘 짠 것 같다.

다만, 단순하게 return 값만 출력하는 함수이기 때문에
아래처럼 삼항 연산자를 사용했더라면 더 좋았을 것 같다.

const is_even = n => n % 2 === 0 ? "짝수 입니다" : "짝수가 아닙니다";

문제 2)

문자열이 주어졌을때, "-"를 기준으로 앞에 있는 문자열을 반환하는 get_prefix 함수를 작성하시오.

split을 통해 문자를 나누면, 그 결과값은 배열로서 저장된다.
따라서 나는 주어진 string을 split으로 나누고, 인덱스 [0]번을 반환하면 되겠다고 생각했다.

내가 짠 로직은 다음과 같다.

function get_prefix(str) {
  const dividedArr = str.split('-');
  return dividedArr[0];
}

console.log(get_prefix('BTC-KRW'));

흠... 이건 arrow function으로 구현할 수 있을 것 같은데,
console에 찍어보면 자꾸 'const dividedArr'의 const가 예상되지 않은 토큰이라면서 오류가 발생한다.
arrow function에 대해 조금 더 알아보고 다시 시도해봐야겠다.

수정

내가 arrow function 사용법을 잘못 알고 있었나 보다.
run JS로 계속 오류를 확인하면서 이것 저것 고치다 보니,
내가 원하는 간단한 로직으로 잘 수정됐다.

const get_prefix = str => str.split('-')[0];

console.log(get_prefix('BTC-KRW'));

문제 3)

팁과 세금을 제외한 식사값이 주어졌을때, 팁과 세금이 포함된 총 식사값을 반환하는 "calculate_total" 함수를 작성하는 문제다.

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

문제를 읽어 내려가면서, 함수 안에 세금계산 함수와 팁계산 함수를 만들어서, 모두를 더한 값을 반환하면 되겠다고 생각했다.

내가 짠 함수는 다음과 같다.

function calculate_total(mealPrice) {
  const tax = mealPrice * 0.095;
  const tip = mealPrice * 0.15;
  
  return (mealPrice + tax + tip);
}

console.log(calculate_total(20));

이제 보니 세금과 팁을 계산하는 함수를 따로 만들것이 아니라,
그냥 return 줄에 곱하기 연산자와 더하기 연산자를 모두 사용해서
arrow function으로 만들었으면 더 깔끔했을 거라는 생각이 든다.

다음과 같이 수정했다.

const calculate_total = mealPrice => mealPrice + (mealPrice * 0.095) + mealPrice * 0.15;

console.log(calculate_total(20));

이걸 수정하면서 알게 된 사실!
arrow function 안에 중괄호 없이 return을 작성하면 오류가 발생하며, return을 작성하지 않고 계산을 입력해도 계산 값이 출력된다.
(중괄호 내에 return을 작성하면 함수가 정상 작동한다.)

문제 4)

와우 전체 문제 중 이게 제일 어려웠다.

주어진 문자열에서 주어진 문자가 나타나는 첫번째 위치를 반환하는 "get_find" 함수를 작성하세요.

Notes:
만약 문자열에 해당 문자가 여러번 나타나면, 첫번째로 나타나는 위치를 반환해야 합니다.
만약 문자가 문자열에 존재하지 않는다면, -1 을 반환해야 합니다.
indexOf 함수를 사용하지 마세요.

예시:

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

indexOf를 사용하려고 생각하면서 읽어내려오고 있는데, Note에 indexOf 함수를 사용하지 말라는 사항이 있었다. ㅠ

그래서 계속 풀다가 이 문제에만 10분 넘게 잡혀있게 돼서, 5번 문제를 먼저 풀고 돌아와 마저 풀었다.

우선 내가 작성한 함수는 다음과 같은데, 지저분해 보이고 맘에 썩 들지 않는다.

function get_find(char, str) {
  const dividedStr = str.split('')
  let indexNum = ""
  
  for (let i in dividedStr) {
    if (char === dividedStr[i]) {
      indexNum = parseInt(i)
      break;
    } 
    if (char !== dividedStr[i]) {
      indexNum = -1
    }
  }
  return indexNum;
}

// get_find('a', 'spplea is good');
get_find('a', 'spples is good');

이 문제는 차근히 생각하면서 다른 로직을 생각해봐야겠다.

문제 5)

...... 솔직히 다른 사람보다 빠르게 문제를 풀고 싶어서,
좀 더 효율적인 로직을 생각하기보다 주어진 문제를 빨리 해결할 수 있는 방향으로 풀었다.

주어진 리스트안에 있는 단어중 가장 긴 단어를 찾을수 있는 find_longest_word 함수를 작성하는 문제다.

처음에는 각 요소의 length길이 순서대로 sort를 해서, 배열의 마지막 인덱스만 출력하면 되겠다고 생각했다.

그런데 '각 요소의 length길이 순서대로 sort를' 하는 메소드를 찾기가 어려웠다.
(존재하지 않을 수도....)

그래서 앞서 레플릿에서 푼 가위바위보 문제처럼 풀었는데
주어진 배열의 요소가 많아질 경우에는 사용할 수 없는 함수여서
이 로직이 마음에 들지는 않는다.

우선 내가 짠 함수는 다음과 같다.

function find_longest_word(arr) {
  // let longest_word = ''
  
  if (arr[0].length > arr[1].length) {
    return arr[0]
  } else {
    return arr[1]
  }
  if (arr[0].length > arr[2].length) {
    return arr[0]
  } else {
    return arr[2]
  }
  if (arr[1].length > arr[2].length) {
    return arr[1]
  } else {
    return arr[2]
  }
}

const arr = ["PHP", "Exercises", "Backend"]

find_longest_word(arr)

와 arrow function으로 함수 길이를 짧게 하고, 몇 개의 요소가 주어지든 실행할 수 있는 함수로 수정했다!!

우선 sort elements of array by its length 로 검색하니까, 배열의 요소의 길이에 따라 배열을 거꾸로 sorting하는 식이 바로 나왔다.

문제를 풀 때는 너무 조급하게 생각해서 검색이 잘 되지 않았나 보다....
이러니 코드를 짤 때 절대 마음을 조급하게 먹거나 서두르면 안 되는 것 같다.

지금 westagram을 하면서도 내가 남들보다 너무 느린 것 같아서 계속 조급한 마음으로 코드를 짜고 있는데, 그래서 더 코드가 잘 안 짜지는 것 같다.

충분히 생각하고 곱씹어보고 계속 시도해보면서 효율적인 코드를 만들기 위해 노력해야겠다.

어쨋든, 수정한 코드는 다음과 같다.

const arr = ["PHP", "Exercises", "Backend"]

const find_longest_word = arr => {
arr.sort((a, b) => b.length - a.length);
return arr[0];}

find_longest_word(arr)

arr를 length 길이에 맞춰 거꾸로 정리한 후, 첫 번째 요소를 반환한다.

뿌듯하다. ^-^

코드를 더 간단하고 직관적으로 리팩토링 할 수 있도록 계속 손봐야겠다.

---

(9월 28일 추가)

JS 5 문제 코드 리뷰

임수현님과 코드 리뷰를 진행했다.

진짜 신기한 게, 같은 입력 값을 통해 같은 출력 값을 내는 함수인데
만드는 사람마다 모두 함수 내용이 다르다.

그래서 코드 리뷰하는 게 재밌고,
다른 사람들의 코드와 그 분들의 로직 및 생각에서 많이 배우게 된다.

---

4 번 문제

수현님은 4 번 문제를 굉장히 간단하게 푸셨다.
나는 생각지도 못한 메소드인 .search()를 사용하셔서,
문자열 안의 문자를 찾을 수 있는 함수를 구성하셨는데,

그 함수를 내가 더 리팩토링해서 단 2줄로 만들었다.

function get_find(char, str) {
return str.search(char);
}

와 arrow function으로 더 리팩토링 하니까 단 한 줄로 구성됐다. ㅋㅋㅋㅋ

const get_find = (char, str) => str.search(char);

.search() 메소드는 String 객체 간 같은 것을 찾는 검색을 실행한다.