DAY01 - 학습정리

1. IDE란 무엇인가?

    IDE란, Integrated Development Environment의 준말로 통합 개발 환경이라고 번역할 수 있다. 일반적으로 IDE는 텍스트 편집기, 빌드 자동화, 디버깅이 가능한 툴을 말하며 자동완성이나 하이라이트 기능이 있어 소스코드 작성에 도움을 준다.

 

2. console.assert을 비롯한 console의 다양한 함수

    console 객체가 가지고 있는 메서드는 굉장히 다양하다. 그 중에서 assert, table 메서드가 log를 제외하고 활용성이 높다고 생각하여 공부해보았다.

    우선, console.assert의 경우 기본적으로 2가지 값을 인자로 받는다. 첫번째 인자는 검증하고 싶은 boolean이 들어가게 되고, 두번째는 검증에 실패했을 때 로그에 남길 메시지를 받는다. python의 assert처럼 error를 발생시키지는 않지만, 실패한 케이스가 존재하더라도 그 다음 케이스에 대해서 알 수 있다는 장점이 있다.

    console.table은 기본적으로 표를 만들어주는 기능을 한다. data와 columns를 인자로 받는다. data의 경우, object 혹은 array를 입력할 수 있고, 문자열이나 숫자를 입력할 경우 console.log처럼 동작한다. object나 array를 입력했을 경우, 각 key값과 index값에 대해서 어떤 value가 대응되는 지에 대한 표를 만들어준다. 이 때 object의 array에서 특정한 key값에 대한 value만 표시하고 싶다면, 필요한 key값의 배열을 만들어 columns에 넣어주면 된다. 표는 2차원까지 가능하고, 3차원 배열은 어떻게 대응되는가 궁금하여 실험해보니 2차원까지만 보여주고 value값으로 array가 통째로 나왔다. 

 

3. Map 객체의 활용

    평소 파이썬을 활용할 때에는 dictionary 자료형을 많이 사용하였었는데, javascript의 object의 경우 문자열만 key로 사용할 수 있어서 아쉬운 경우가 많았다. 그러다가 알게된 것이 Map객체인데, Map 객체의 경우에는 객체를 포함한 모든 값을 키로 이용할 수 있다는 점이 object와 가장 큰 차이점인 것 같다. Map 객체는 생성자 함수를 통해 생성할 수 있고, 여러 함수를 통해 key와 value 쌍을 추가하거나 삭제, 확인할 수 있다. Map 객체에 사용되는 대표적인 함수는 다음과 같다. 

const map = new Map();

console.log(map.size);
// 0

map.set('key', 'value');
console.log(map.get('key'));
// value

map
.set('key1', 'value1')
.set('key2', 'value2');
console.log(map.get('key1'));
// value1
console.log(map.get('key2'));
// value2

console.log(map.get('none'));
// undefined

console.log(map.has('none'));
// false
console.log(map.has('key'));
// true

map.delete('key');
map.delete('none');
// 무시된다.
console.log(map.has('key'));
// undefined

 

4. 클로저를 활용한 input 받기

    fs의 readFileSync 함수를 활용하여 파일을 읽어올 수 있다. 읽어온 값은 string으로 구성되어 있기 때문에 이를 한줄씩 가져와서 적절하게 배열에 담는 방법이 필요했다. 이를 위해 읽어온 string을 split 함수를 통해 각 줄을 원소로 갖는 array를 만들었고, 클로저를 활용해서 input 함수를 호출할 때마다 다음 줄을 읽어올 수 있도록 하였다. 이를 위해 작성한 코드는 다음과 같다.

import { readFileSync } from 'fs';
import { join, resolve } from 'path';
import solution from './solution.js';

const stdin = readFileSync(join(resolve(), 'input.txt'), 'utf-8').split('\\n');

const input = (() => {
  let line = 0;
  return () => stdin[line++];
})();
const toInt = (str) => parseInt(str);

    toInt 함수를 parseInt 함수와 별개로 구현한 이유는, 뒤에서 설명하겠지만 Array.map을 활용할 때 parseInt를 그냥 사용하게 되면 숫자가 기대하는 것처럼 변경되지 않고, NaN이 나오는 문제가 발생하여서이다. 나중에 이유를 알고 함수를 선언하여 해결하였다.

 

5. string[].map(parseInt) 했을 때, NaN이 나오는 이유

    input을 한줄 씩 받아와서 문자열로 된 배열을 숫자로 된 배열로 바꾸어주기 위해서 map함수에 콜백함수로 parseInt를 넣어주었다. 그랬더니 갑자기 모든 테스트케이스를 실패하였는데, 알고보니 숫자로 되어있어야 할 배열에 쌩뚱맞은 NaN이 포함되어 있는 것을 알게 되었다. 우선 Number 함수를 넣어보니 정상적으로 실행되는 것은 확인했지만, 왜 이런 일이 발생하는 지 궁금해졌다.

    자바스크립트의 Array.map은 value, index, array를 인자로 받는 콜백 함수를 입력할 수 있다. parseInt 함수의 경우, string과 radix를 인자로 받는다. map에 그냥 parseInt를 넣을 경우, index가 radix의 위치에 입력되게 되어, 정상적으로 연산이 수행되지 않고 NaN이 나오는 것이다. 자바스크립트의 경우, 함수가 선언될 때 작성한 인자의 숫자보다 더 적은 인자를 넣어서 함수를 호출하거나, 더 많은 인자를 넣어서 함수를 호출하는 경우에도 에러 없이 함수가 동작하고, 부족한 인자는 undefined로 취급된다. 

 

 

 

 참고

 

IDE란?

Map - JavaScript | MDN

[BOJ] 백준에서 Node.js 입력을 Python처럼 쉽게 받는 법

Why ['1', '7', '11'].map(parseInt) returns [1, NaN, 3] in Javascript