230118 코딩테스트를 풀면서 헷갈린 new Array() 정리

샨티(shanti)·2023년 1월 17일
0

TIL

목록 보기
140/145

하루를 마무리 하기 전, 오늘 있었던 일들을 잔잔히 되짚어봅니다.
성공과 실패의 모든 요소에서 '배울 점'을 찾아내어 기록하고,
더 성장하는 내일의 나를 위해 'action plan'을 세웁니다.

오늘 푼 문제는 '부족한 금액 계산하기'

생각해보니 이 문제는 꽤 여러번 풀었기에 간단히 풀이만 공유한다.
이전보다 딱 하나 더 나아진 점은 의미가 잘 드러나지 않는 변수명들을 쓰지 않았다는 점? ㅎㅎ

그나저나 자바스크립트 풀이 중에서 이해가 안되는 부분이 있는데 이유를 찾아보고 맨 아랫단에 따로 정리한다.

프로그래머스 코딩테스트 부족한 금액 계산하기


문제


java solution

어제 코테를 보면서 느꼈던 부분인데, 이 문제같은 경우에는 엣지케이스가 없었다면 맞는 답인 줄 알고 제출했을 모양새다.
많은 코테들이 그렇지만 예시로 제시하는 2~3개의 샘플 테스트 케이스에는 대부분 엣지케이스가 없다.

그러다보니 운좋게(?) 제출 전에 통과시키지 못해서 실수를 발견하는 경우도 있고.
어제 본 기업 코테의 경우에는 엣지케이스가 주어지지 않기 때문에 답인 줄 알고 그냥 제출했다가 틀리는 경우가 생길 수 있겠다는 생각이 들었다.

오늘 고려했어야 하는 부분은 바로 숫자가 커졌을 때 int의 표현범위를 벗어나느냐 아니냐였다.
프로그래머스야 제출 전에 테스트케이스가 꽤 많이 주어지기 때문에 사전에 캐치했지만...

쨌든! 중요한 건 기업의 코테가 모두 프로그래머스의 코테 환경과 같지 않다는 점을 어제 오늘 절실히 깨닫는 중.
내일은 반드시 백준 문제로 node.js 표현을 익혀보리라.

java solution

class Solution {
    public long solution(int price, int money, int count) {
        long remain = money;

        for (int i = 1; i <= count; i += 1) {
            remain -= (long) price * i;
        }

        return remain < 0 ? Math.abs(remain) : 0;
    }
}

javascript solution

javascript solution

function solution(price, money, count) {
  const totalPrice = new Array(count).fill(0)
    .map((_, index) => price * (index + 1))
    .reduce((pre, cur) => pre + cur, 0);

  return money - totalPrice >= 0 ? 0 : -(money - totalPrice);
}

new Array()에서 의아했던 점.

자바스크립트에서 new Array(count)로 count 길이 만큼의 새로운 배열을 선언했는데, .fill(0)을 해 줬을떄와 해주지 않았을 때의 결과값이 달랐다. 왜 그런지 이해가 잘 안간다.
.map() 배열메서드 안에서도 value를 따로 활용하고 있지 않기 때문에 전혀 문제가 없다고 생각했는데...

우선 아래와 같은 방식으로 왜 그런지 하나 하나 찾아서 생각해보기로 했다.

function solution(price, money, count) {
  
  const testArray = new Array(count);
  
  console.log(testArray);
  console.log(testArray.length)
  console.log(testArray[0]);
  console.log(testArray[10]);

  // 임의의 값으로 return 설정
  return 0;
}

이렇게 해놓고 jest를 실행하면 iterm 화면에서 console.log() 에 주어진 값을 볼 수 있기 때문이다.
당연히 예상과 같은 결과를 확인했다.

예상 1. testArray에 대한 console.log 값은 <4 empty items>일 것
예상 2. testArray의 원소는 없지만 길이는 4일 것
예상 3. testArray[0]은 아직 할당된 바 없으므로 undefined일 것
예상 4. testArray[10]은 자바였다면 exception을 던졌겠지만 자바스크립트이니 undefined일 것

console.log
  [<4 empty items>]

console.log
  4  

console.log
  undefined

console.log
  undefined  

근데 예상과 다른 지점은 여기였다.

function solution(price, money, count) {
  
  const testArray = new Array(count).map((_, index) => price * (index + 1));
  console.log(testArray);
  console.log(testArray.length)
  console.log(testArray[0]);

  // 임의의 값으로 return 설정
  return 0;
}

각 콘솔마다의 예상 값은 아래와 같았다.

예상 1. testArray는 [price * 1, price * 2, price * 3, price * 4]일 것이다
예상 2. testArray의 길이는 여전히 4일 것이다.
예상 3. testArray[0]은 price * 1을 계산한 값일 것이다.

근데 예상 1의 결과값부터 틀리니 예상 3 또한 틀렸다.

결과는 아까와 다르지 않은 상태였다.

console.log
  [<4 empty items>]

console.log
  4  

console.log
  undefined

왜 이런일이 발생하는거지..?
우선 price 값은 부정할 수 없기 때문에 index가 제대로 들어오지 않는건가 싶어서 map 메서드 안에 있는 함수에 조금 변형을 가해 console.log를 찍어보았다.

function solution(price, money, count) {
  
 const testArray = new Array(count).map((_, index) => {
    console.log(price, 'price값');
    console.log(index, 'index값');
    return price * (index + 1);
  });

  // 임의의 값으로 return 설정
  return 0;
}

예상 1. price 값은 map 안에 있는 콜백함수가 실행 될 때마다 들어올 것이다.
예상 2. index 값이 안들어오나보다

근데 결과는 이상했다. 아예 콘솔이 찍히지 않는, 즉 map 안에 있는 콜백함수가 실행도 되지 않는 것이었다. 호올.....


모던자바스크립트 튜토리얼의 내용처럼 new Array()로 생성한 배열은 너무 헷갈리는 부분들이 많이 생기는 것 같다.

function solution(price, money, count) {
  
 const testArray = new Array(count);

  console.log(testArray.indexOf(undefined));
  console.log(testArray.includes(undefined));
  console.log(testArray.find((value) => value === undefined));
  console.log(testArray.findIndex((value) => value === undefined));

  // 임의의 값으로 return 설정
  return 0;
}

new Array()로 생성한 배열의 요소가 undefined로 설정된다면...

예상 1. indexOf() 값은 당연히 0 아닐까?
예상 2. includes()는 당연히 true겠지?
예상 3. find를 했을 때 반환하는 첫 요소도 당연히 undefined일텐데.. 벌써 헷갈린다. 이 undefined의 뜻이 (1) 첫 요소라는 걸까, (2) 아니면 find 결과값이 없어서 리턴하는 의미의 undefined인걸까;;
예상 4. 첫 요소의 index 값이니 당연히 0일 것

하... 당황스럽게도 결과는 아래와 같다.

결과 1. -1 즉 indexOf()의 결과를 찾지 못해 -1을 반환한다... 뭐 어쩌라고...
결과 2. true. (위에선 못찾았다며?)
결과 3. undefined ... 이게 undefined를 찾아서 이 값이 나온건지, 아님 결과가 없어서 뱉어내는 undefined인거야?
결과 4. 0

ㅋ............ 머리가 지끈 지끈.

약간 돌아 돌아 알아가는 과정이었지만 오늘 좀 더 명확하게 알 수 있었던 점은 아래와 같다.

  • new Array(number)로 배열을 생성하면 길이는 number만큼 잡히나 요소들은 undefined가 됨
  • 요소들이 모두 undefined 상태일 때에는 map 배열메서드가 실행되지 않음
  • 튜토리얼의 말처럼 되도록 new Array() 메서드로 배열을 선언하지 말되 선언할 거라면 초기값을 fill() 메서드로 지정하고 사용하도록 하자. 명확하게! 모두가 헷갈릴 수 있음...

자바스크립트를 공부하면서 느끼는 점은 얼른 타입스크립트도 공부해야겠다는....ㅎㅎㅎㅎㅎㅎㅎㅎ
화이팅하자 화이팅.. 후.


profile
가벼운 사진, 그렇지 못한 글

0개의 댓글