🏖 Intro

JavaScript의 Replit 문제를 풀어보고 위코드에서 같이 공부하는 분들 중 소미님, 수정님과 코드를 비교해보는 시간을 가지게 되었다.

그래서 이번 글에서는 내 코드와 다른 분들의 코드를 비교해보고 어떤 차이가 있는지 알아보려고 한다.

01. isEven

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

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

첫 번째 문제는 숫자를 인자로 주었을 때 그 인자가 짝수인지 판별하는 함수이다. 이 문제는 비교적 쉽게 풀 수 있었다.

⌨️ My code

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

🔎 코드 비교

• '짝수 입니다', '짝수가 아닙니다'의 순서가 다를 뿐 전체적인 코드 흐름은 비슷하다는 것을 알 수 있었다.

02. caculateTotal

calculateTotal 함수를 작성하세요.

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

Notes:

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

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

⌨️ My code

function calculateTotal(amount) {
  const tax = amount * 0.095;
  const tip = amount * 0.15;

  const result = amount + tax + tip;

  return result;
}

• tax, tip 변수에다가 각각 계산한 결과값을 저장한 후, result에다가 팁과 세금이 포함된 총 식사값을 담아 반환하였다.

🔎 코드 비교

Code : 소미님

function calculateTotal(amount) {
  return amount + amount*0.095 + amount*0.15
}

• 함수 안에 Tax와 Tip이 포함된 가격을 구하는 식을 return 하셨음
• 내 코드보다 훨씬 간결해져서 보기가 수월하다고 느껴졌다.
• 코드의 그때 그때의 역할에 따라 return에다가 한 번에 선언하는 방식이 적합할 수도 있고 내 코드처럼 변수에 저장해서 리턴하는 게 적합할 수도 있기 때문에 상황에 맞는 코드를 유연하게 작성하도록 하자!

Code : 수정님

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

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

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

• Tip과 Tax를 계산하는 식을 함수로 나누어 작성하셨음
• 나중에 다시 사용할 일이 있을 때 다시 활용할 수도 있다고 생각해서 좋은 코드라고 느꼈다.

03. getPrefix

getPrefix 함수를 작성하세요.

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

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

⌨️ My code

function getPrefix(str) {
  const linePosition = str.indexOf('-');
  const sliceWord = str.slice(0, linePosition);

  return sliceWord;
}

1. indexOf 함수로 문자열에서 '-'의 위치를 찾는다.
2. 문자열을 자르는 slice함수로 내가 출력하고 싶은 부분까지 단어를 추출한다.
3. 추출한 단어를 리턴한다.

🔎 코드 비교

Code : 소미님

function getPrefix(str) {
  const string = str.split("-");
  return string[0]
}

• 지정한 구분자를 이용해 여러 문자열로 나눠서 배열로 저장하는 split 함수를 이용해서 출력하셨다.
• 아! 난 왜 이 생각을 처음에 하지 못했을까!😱
• slice함수를 이용하면 끝의 기준이 되는 인덱스를 먼저 찾아야하지만 소미님처럼 split을 이용할 경우에는 그냥 문자열을 나눠서 저장한 배열에서 해당되는 단어를 그냥 찾으면 되기 때문에 훨씬 간편하다는 것을 느꼈다.

Code : 수정님(나와 같이 slice를 쓰셔서 해결하셨다!)

04. getFind

getFind 함수를 작성하세요.

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

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

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

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

⌨️ My code

• 처음에 이 문제를 봤을 때 'IndexOf를 사용하면 되겠구나!' 라고 생각했다가 문제에서 사용하지 말라는 글을 보고 살짝 당황했다..😅

function getFind(filter, sentence) { 
    if (sentence.includes(filter)) {

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

• 어떻게할까 고민을 많이 하다가 문자열이 들어있는지 판별하는 include 함수를 사용해서 코드를 작성하면 되겠다는 생각을 하게 되었다.

Code Flow

1. 인자로 주어진 문자열에 필터링할 문자가 포함되어있는지 파악한다.
2. 문자가 있다면 for 반복문을 실행시킨다.
3. 만약 필터링할 문자가 문자열안에 있는 문자와 일치하면 해당 인덱스를 리턴한다.
4. 문자가 없다면 -1을 리턴한다.

• 코드 작성 중간에 애를 먹었던 부분은 return을 잘못 위치시켰다는 것이다.
• if 안에 적었는데 그렇게 한다면 문자열안의 문자가 필터할 문자와 일치하지 않을 때 전부 -1이 출력되어서 내가 원하는 결과값이 나오지 않는 문제가 발생하였다.
• 내 코드를 다시 차근히 읽어보았고 그 결과 지금의 코드가 나오게 되었다.

🔎 코드 비교

Code : 소미님

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

• 처음에 소미님 코드를 봤을 때 진짜 큰 충격을 느꼈다.
• 내 코드는 이렇게 긴데 소미님 코드는 한 줄 밖에 되지 않아서 '도데체 어떤 함수를 쓰셨길래 저런 간결한 코드가 나왔을까..'라는 생각을 하였다.
• 소미님은 search라는 함수를 사용하셔서 문자열 안에 필터링할 문자가 있으면 인덱스를 반환하셨다.
• search는 필터링할 문자가 반복된다면 가장 첫 번째로 매치되는 문자의 인덱스를 반환한다.
• 필터링할 문자가 없다면 -1을 반환한다.
• 소미님 구글링 능력이 진짜 뛰어나시군요...👍🏻

Code : 수정님

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
  }
}

• 수정님도 나와 다른 방향으로 생각하시고 푸셔서 '같은 문제에 이렇게 다른 코드가 나오다니...'라는 생각에 신기했다.
• 수정님은 split함수를 사용하셔서 문자열 안에 있는 공백을 포함한 문자 하나하나를 stringtoArray라는 배열에 저장하셨다.
• 그리고 그 배열 안의 문자가 필터링한 문자와 일치한다면 해당 문자의 인덱스를 출력하고 일치하지 않는다면 -1을 출력하도록 하셨다.
• split은 생각지도 못했는데 수정님 코드 덕분에 이렇게도 접근할 수 있다는 것을 알게 되어서 너무 좋았다.

05. findLongestWord

find_longest_word 함수를 만들어 주세요.

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

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

⌨️ My code

function find_longest_word(arr) {
  let max = arr[0].length;
  let result;

  for (let i = 0; i < arr.length; i++) {
    if (max < arr[i].length) 
      max = arr[i].length;
      if (max === arr[i].length) result = arr[i];
    }
    return result;
}

• 이 문제 풀 때 사실 뇌에 정지가 심하게 왔다..😵‍💫
• 그래서 다 풀고 다시 전체적으로 봤을 때 '내가 정말 정신이 없긴 없었구나...'라는 생각이 드는 코드인 것 같았다.

Code Flow

1. max라는 변수 안에 배열의 첫 번째 요소의 길이를 담는다. 이것은 비교의 기준이 될 변수이다.
2. for문을 이용하여 들어있는 배열의 요소만큼 안의 코드를 반복 실행한다.
3. arr 배열 요소의 길이가 arr 배열 첫번째 요소의 길이보다 크다면 max 안의 값을 길이가 큰 요소의 길이로 변경한다.
4. 만약 max 안에 담긴 길이가 arr 배열 안의 각 요소의 길이와 같다면 그 배열의 요소를 result에 담는다.
5. result를 리턴한다.

Code : 소미님

function find_longest_word(arr) {
  // 아래 코드를 구현해주세요.
  let maxLength = arr[0].length
  for (let i in arr){
    if (arr[i].length>maxLength){
      maxLength = arr[i].length;
      return arr[i];
    }
  }
}

• 소미님도 나와 같이 배열 안의 길이를 비교하는 방식으로 푸셨다.

❗️❗️ 블로깅 중 이 코드의 오류와 필요없는 변수를 발견하였다!

• 길이가 긴 배열의 길이를 출력하는 것이 아니기 때문에 maxLength를 업데이트하지 않아도 된다.
• 이 함수는 리스트 안에 있는 값들을 전체적으로 검사한 뒤에 가장 긴 요소를 출력해야하는데 if 문 안에 리턴이 있다면 첫 번째 요소보다 길이가 긴 요소를 만나면 리턴 때문에 바로 함수를 벗어나기 때문에 배열 안의 값을 다 검사하지 못한다.

소미님이 수정하신 코드

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;
}

• maxLength 대신 num 안에 배열의 첫번째 요소를 담았다.
• 그리고 첫 번째 요소보다 다른 요소가 더 길이가 길다면 num에 해당 배열의 요소로 업데이트한다.
• return을 안에다가 두지 않고 for문 밖으로 위치시켰다.

와! 정상적으로 작동되었다!🎉