2020 12 04(금) TIL - 206 우테코 프리코스, 브라우저 콘솔 문제

Today Commit Review

• javascript-pracice

function Car(name) {
  this.name = name;
  this.count = 0;
}

const carList = [
  new Car('dohkim'),
  new Car('hjeon'),
  new Car('jilim'),
  new Car('sohpark'),
];

function getRandomNumber() {
  const min = 0;
  const max = 10;

  return Math.floor(Math.random() * (max - min)) + min;
}

function race(car) {
  if (getRandomNumber() > 3) {
    car.count++;
  }
}

function printResult(carList, racingCount) {
  while (racingCount--) {
    carList.forEach((car) => race(car));
    console.log(carList);
  }
}

printResult(carList, 3);

• 위와 같은 코드를 작성하고 실행했을 때의 동작이 예상과는 다른 문제가 있었다.
• 당연히 랜덤하게 값이 증가하는게 차례로 console에 나올줄 알았는데 실제 동작한 콘솔 내용은 다음과 같다.
  
• console.log()의 실행 시점과 상관없이 반복문이 종료된 후의 객체를 반환하고 있었다.
• 위의 코드를 브라우저가 아닌 node에서 실행시키면 아래와 같이 작동한다.
  
• 비동기 문제도 의심해보고 forEach() 메쏘드도 의심해봤지만 뚜렷한 답을 찾지 못하고 있을 때 다른 분들에게 도움을 구해 어렴풋이나마 답을 얻을 수 있었다.
• 현재 얻은 가능성들은 다음과 같은데 명확히 해결을 하게 되면 블로그에 글을 다시 정리해야겠다.
  1. 브라우저에서 자동으로 최적화를 해 최종 상태의 Object값을 불러온다.
  2. call by reference 로 호출시 (1)과 같은 최적화가 일어나고 call by value로 호출시 해당 현상이 일어나지 않는다.
  3. 해당 문제는 브라우저의 '콘솔'에서만 생기는 문제로 실제 HTML에 삽입하거나 할 때는 문제가 발생하지 않는다.

Today Article

• 당근마켓 면접 후기 및 회고
  • JSConf에서 당근마켓 부스를 본 뒤로 계속 관심을 가지고 있던 기업입니다. 면접 후기 글을 통해 면접이 어떤 분위기에서 진행되는지 알 수 있어서 좋았습니다.

• Today Article 전체 목록

Today I Learned

• Javascript

Today Review

• Today Commit Review에 작성한 문제로 오늘 꽤 많은 시간을 잡아먹었다.
• 여러 가능성을 염두해두고 이런저런 테스트를 해봤지만 끝끝내 답을 찾지 못해 다른 분들에게 질문을 해서 답을 얻었다. 검색 능력이 아직 많이 부족한거 같다.
• 아직 명확하게 머리 속에 정리 되지는 않았지만 내일 테스트를 해보고 블로그에 글로 정리해야겠다.
• 오늘 도와주신 분들 덕분에 그래도 빠르게 해결할 수 있었다. 이 글을 볼지는 모르겠지만 감사하는 마음으로 한줄 남기며 오늘의 TIL을 마무리한다.
  🎉 special thanks to hjeon, sohpark, jilim, dohkim🎉