[TIL] 2019.04.08 - debug

디버깅

저번 시간에 배웠던 VScode 에서의 디버깅을 통해 해당 코드를 디버깅 해보겠다

main.js

const sum = require("./util");

function runProgram(arr) {
    const result = sum(arr);
    return `result is ${result}`;
}

const result = runProgram([undefined, 1,2,3,4,5,-1,"3"]);
console.log(result); //result is 14

util.js

(function callModuleChecker(){
    result = new Date();
    console.log("WELCOME UTIL MODULE : " + result);
})();

module.exports.sum = (arr) => {
    result = result || 0;

    for (const i = 0; i < arr.length; i++) {
        if (typeof arr !== undefined) continue;
        result += arr[i]
    }

    return result;
}

실행해 보면 에러가 발생한다. TypeError: sum is not a function 이라는 에러가 발생하는데 util.js 를 보면 sum 함수를 module.exports에 담아 내보는다는것을 앐후 있다. 따라서 main.js 를 수정해보면

const util = require("./util");

function runProgram(arr) {
    const result = util.sum(arr);
    return `result is ${result}`;
}

const result = runProgram([undefined, 1,2,3,4,5,-1,"3"]);
console.log(result);

또다은 에러가 발생한다. TypeError: Assignment to constant variable.
상수 변수에 값을 넣었다는 에러인데 util.js 의 코드를 보면 for 문에서 const 를 사용하여 순회를 한다. const 를 let으로 바꿔 i 가 상수로 선언이 되지 않도록 바꿔보자

(function callModuleChecker(){
    result = new Date();
    console.log("WELCOME UTIL MODULE : " + result);
})();

module.exports.sum = (arr) => {
    result = result || 0;

    for (let i = 0; i < arr.length; i++) {
        if (typeof arr !== undefined) continue;
        result += arr[i]
    }

    return result;
}

코드를 실행하면 에러가 나오지 않지만 코드가 원하는 방식대로 동작하지 않는다는것을 알 수 있다.

WELCOME UTIL MODULE : Mon Apr 08 2019 14:09:28 GMT+0900 (Korean Standard Time)
result is Mon Apr 08 2019 14:09:28 GMT+0900 (Korean Standard Time)

원하는 출력값은 result is 14 인데 다른 문자열이 출력되고 있다.
util.js 를 보니 해당 즉시 실행 함수로 현재 Date 를 출력하는 코드를 실행하고 있다. 이때 result 라는 변수를 사용하는데 sum() 함수릐 result 같은 스코프 안에 있어서 출력이 이상하다는 것을 알았다. 스코프를 분리해보고 불필요한 코드를 삭제해보자.

(function callModuleChecker(){
    let result = new Date();
    console.log("WELCOME UTIL MODULE : " + result);
})();

module.exports.sum = (arr) => {
    let result = 0;

    for (let i = 0; i < arr.length; i++) {
        if (typeof arr !== undefined) continue;
        result += arr[i]
    }

    return result;
}

이번엔 출력이 result is 0 이 나온다. for 안에 있는 arr[i] 과 typeof arr[i]를 watch 를 통해 살펴보자.

watch 를 통해 살펴보니 넘어오는 배열에서 우리가 계산해야하는 값 1,2,3,4,5,-1 의 타입이 number 라는 것을 알 수 있다. 따라서 if 문에서 검사를 number 인지를 판별해야 한다. 고쳐보자.

module.exports.sum = (arr) => {
    let result = 0;

    for (let i = 0; i < arr.length; i++) {
        if (typeof arr[i] !== "number") continue;
        result += arr[i]
    }

    return result;
}

이제 원하는 값인 result is 14 가 잘 출력되는 것을 볼 수 있다. 조금 코드를 다듬어 보자
숫자인지 판별하는 함수를 모듈화 해보자

const isNumber = a => typeof a === "number"

module.exports.sum = (arr) => {
    let result = 0;

    for (let i = 0; i < arr.length; i++) {
        if (!isNumber(arr[i])) continue;
        result += arr[i]
    }

    return result;
}

이제 filter 메서드와 reduce 를 이용해보겠다.

module.exports.sum = (arr) => {
    return arr.filter(isNumber).reduce((a, b) => a + b, 0)
}

조금 더 가독성이 좋아졌다.

완성한 코드이다.
main.js

const util = require("./util");

function runProgram(arr) {
    const result = util.sum(arr);
    return `result is ${result}`;
}

const result = runProgram([undefined, 1,2,3,4,5,-1,"3"]);
console.log(result); //result is 14

util.js

(function callModuleChecker(){
    let result = new Date();
    console.log("WELCOME UTIL MODULE : " + result);
})();

const isNumber = a => typeof a === "number"

module.exports.sum = (arr) => {
    return arr.filter(isNumber).reduce((a, b) => a + b, 0)
}

| 과 ||

논리식을 사용할때 or 연산자를 한개 또는 두개를 작성하는 방법이 있다. 두 개의 차이가 있는데
| 는 비트 연산을 하고, ||는 논리 연산을 한다는 차이가 있다.

> 1 | 2
< 3
> 1 || 2
< 1
> 2 || 1
< 2

1의 비트 값은 01 이고 2의 비트 값은 10 이므로 둘을 비트 or 연산을 하면 11(3) 이 된다. 논리 or 연산을 하면 0이 아닌 수는 전부 참이 되기 때문에 앞수 1이 참이므로 바로 1을 반환한다.

Number.isFinite()

Number.isFinite() 메서드는 주어진 값이 유한수인지 판별합니다. 이 구문을 이용해서 타입이 number 인지 판별할 수 있다.

> Number.isFinite(1)
< true
> Number.isFinite("1")
< false
> Number.isFinite(true)
< false
> Number.isFinite(NaN)
< false
> Number.isFinite({})
< false
> Number.isFinite([])
< false
> Number.isFinite(Infinity)
< false